Exprimarea IT

Re-Ciclism este Buzzword şi în dezvoltare web inseamna nimic diferit. Se economiseşte energie, în termeni de efort!

Peste ani de scris şi de crearea de CSS HTML de la design, am urmat câteva cateva cele mai bune practici, în căutarea de a economisi timp şi energie în ceea ce noi de obicei ca termenul de "Re-Inventing the Wheel". Ora şi timp, din nou, mi-am spus, că trebuie să creeze cateva sabloane, unele standard de re-utilizabile CSS, care mi-ar folosi DIN CUTIE în activitatea mea viitoare. Desi nu este complet, dar am reuşit să atingă unele dintre obiective.

În promovarea, Re-utilizarea de CSS, am avut o privire la câteva cadre CSS, care sunt de obicei disponibile la noi şi a decis să le folosească, aşa cum acestea sunt încercate şi testate şi creat de către dezvoltatorii de mult cu experienţă, decât mine. Mai important, "a evita re-Inventarea".

Deşi cunoştinţe comune la veterani, am încercat să stilou unele concepte-cheie / cele mai bune practici / gânduri, care a trecut în crearea acestor cadre, pentru a face RE-CICLISM de CSS posibil. Sper că acest lucru va ajuta unii dezvoltatori CSS care sunt doar pe cale de a şi urcat recent bandwagon CSS!

Taste Re-ciclism din CSS:

Folosiţi convenţiile Naming

Acest lucru trebuie să fie cel mai important factor în luarea CSS / HTML re-utilizabile. Acordarea de nume de consistente pentru elemente de pagină permite re-utilizarea de componente de pagină şi stilurile lor, cu puţin sau modificări. În conformitate cu acest argument, chiar HTML5, într-o schimbare schimbare majoră pe predecesorii săi, este de a introduce unele structurale şi anume etichetele. <article>, <section>, <header>, <aside>, şi <nav> [ Ce va aduce HTML5? ]. Chiar şi cu HTML 4 (sau mai mic), este cel mai bine pentru a numi secţiuni standard de pagina dvs. consistanly ca în exemplul de mai jos simplu ...

Amintiţi-vă, cele mai multe pagini de pe proiect, ajung având aceleaşi elemente de bază structurale. Identificarea acestor elemente comune de bază pagina ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

Reset Stiluri implicite (CSS Resetează): Indiferent dacă utilizaţi un cadru sau a scrie propriile dvs., trebuie să furnizeze CSS Resetează [ Ce sunt CSS Resetează? ], aşa cum se reduce sau elimina incoerenţele, uneori vizuale care apar între browsere diferite. În cuvinte simple, mecanismul de Reset CSS stabileşte stiluri de element HTML pentru valori zero sau null, imperative, astfel, orice valori implicite browser-ului se pot ridică. Acest lucru oferă o tabula rasa pentru a seta proprietăţile acestor elemente nule de orice valori prestabilite User-agent [ CSS2.1 User Agent de stil implicite Derivati ​​]. Toate cadrele CSS nu au mecanism de resetare. Dacă sunt scris tu propriul CSS Resetează, un cuvânt de precauţie este că, dacă se întâmplă să uitaţi să resetaţi o proprietate cheie, ar putea duce la probleme de cross-browser, care sunt foarte greu pentru a depana. Amintiţi-vă, păstraţi o copie a stilurilor de reset şi fixaţi-le în fiecare proiect nou pe care îl creaţi.

  corp, div, dl, dt, dd, ul, ol, li,
  H1, H2, H3, H4, H5, h6,
  pre, forma, FIELDSET, de intrare, selectaţi, textarea,
  p, blockquote, masă,-lea, TD
  {
    transfrontalieră: 0px;
    margin: 0;
    padding: 0;
  } 

Set Defaults (Stiluri de referinţă) la elemente:

După ce aţi setat (la zero sau null), valorile implicite de anumite atribute ale anumitor elemente HTML, este necesar să se aplice unele stiluri din fiecare instanţă a acestor elemente. Acestea ar putea varia setarea implicită ca pe design sau conform celor mai bune practici pe care le urmăriţi.

Cele mai multe cadre CSS, introduce mereu unele noi valori implicite, în plus faţă de resetarea stiluri browser prestabilit.
Aceste valori prestabilite fiind anulate din cele prestabilite de utilizator agent (deposedat departe de Reset CSS), acestea vor fi coerente în browsere.

Amintiţi-vă, stiluri de referinţă sunt folosite pentru a stabili stiluri, care vor fi utilizate de design la nivel. de exemplu.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 puternic, H1, H2, H3, H4, H5, H6 {font-greutate: bold;} 

Stiluri de abstract pentru componente comune HTML şi clasele comune:

Cea mai mare proiect compus din mai multe pagini va avea elemente comune HTML utilizate în întreaga site-ul, de exemplu, unele fel de forme, alerte si erori, popup-uri personalizate, lumini etc Deoarece aceste componente sunt folosite din nou în cadrul proiectelor, va fi util pentru a oferi un set de clase asociate cu stiluri predefinite pentru aceste componente şi aveţi posibilitatea să salvaţi-vă o mulţime de timp.

În afară de definirea definiţii reutilizabile stiluri pentru componente comune HTML, am putea clase abstracte stiluri referitoare la tipografie, de culoare sau chiar aspectul. M-am tendinţa de a utiliza ... clasele comune, cum ar fi Clearfix, Font08, FontGrey, AlignL, DisplayB etc

  {frontieră de intrare sub forma: 0px; fundal: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; inaltime: 26px; color: # 000000; linie-inaltime: 30px; font-size: 1.1em;}
 formularul de textarea {frontieră: 0px; fundal: # FFFFFF; culoare: # 000000; font-size: .9 le; linie-inaltime: 1.5em; depăşire: vizibil;}
 Fbold {font-greutate: bold; color: # CCCCCC;}.
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 Clearfix {clar: ambele;}.
 Separator {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; inaltime: 0px;}.
 Displayb {display: block;}. Displayn {display: none;}.
 Alignr {text-align: right.}. Alignc {text-align: center}
 Floatr {float: drept;}. Floatl. {Float: left;} 

Remedieri pentru quirks browser comune

Browsere diferite punerea în aplicare a codului CSS şi asigura un nivel variabil de sprijin pentru caietul de sarcini CSS. Rezultatul acestei .... "Quirks browser", ca noi, dezvoltatorii sunt lăsate pentru a aborda. Mai ales, IE6 bântuie programatori mai CSS, cu un termen limită pentru a răspunde. Vestea buna este o experienţă a adus împreună remedieri posibile reutilizabile la aceste aspecte (adesea numit ca Hacks CSS ).

Amintiţi-vă, Păstraţi aceste hacks / remedieri la îndemână

  / * Zoom: 1 regula este în mod special pentru IE6 + IE7.  * /
    * HTML. Clearfix,
    *:. Primul copil + html clearfix {
           Zoom: 1;
      } 

Păstraţi Rafinare CSS-ul

• Obiceiul de a re-mersul cu bicicleta nu va veni la tine în zi. Ea are de dezvoltat. Plan astfel de Re-Ciclism. Ţineţi acest lucru în minte că ar putea defaults abstracte stiluri de definiţii, tipografie, Layouts, stiluri Elementul HTML, etc Încercaţi să vă gândiţi înainte.
• De asemenea, uita înapoi la proiectele tale din trecut, aceasta va ajuta la identificarea stilurile pe care le au tendinţa de a folosi de multe ori peste porjects. Rezumat ea.
• Îndepărtaţi orice stiluri neutilizate. Această practică va păstra cadrul CSS la un simptom comun numit "balonare" -
• Eliminaţi stilurile repetitive.
• A construi un set de stiluri care sunt suficient de flexibile pentru a se porta pe proiecte.

O privire la cadre CSS

În cele din urmă. Dacă sunteţi inspirat şi intenţionează să utilizeze una sau mai multe dintre cadre CSS, Heres este lista rapidă de câteva cele mai populare ....

• 960 Sistem Grid : Sistemul de 960 Grid este un efort de a eficientiza fluxul de lucru de dezvoltare web prin furnizarea de dimensiuni, utilizate în mod obişnuit bazate pe o lăţime de 960 pixeli. Există trei variante: 12, 16 şi 24 de coloane, care pot fi utilizate separat sau în tandem. Nimic nu gând că nu se poate crea una pentru propria ta destul de uşor, cadru prevede şabloane de reţea pentru imprimare în format PDF, pe care o poate folosi pentru a schiţa designs.Bet pagina dvs., ar face o impresie profesional, dacă purtaţi câteva coli atunci când te duci la un client pentru colectarea cerinţelor UI. Acesta prevede, de asemenea, şabloane de bază de reţea pentru software de proiectare populare cum ar fi focuri de artificii, Flash, InDesign, Illustrator, Photoshop, Visio, etc oferind o "Starter pentru zece" pentru a începe munca de proiectare.
• Plan : Planul prevede distinct clasificate în fişiere CSS pentru Resetează, Grile, Formulare, Print, tipografie, plugin-uri pentru butoane, filele si sprites etc oferă de asemenea suport pentru IE ca o separat includ.
• SenCSs : Spre deosebire de mai sus două, SenCSs (Sense pronunţat), nu are definiţii CSS pentru layout. Aceasta nu include fonturi, Garniture, marje, tabele, liste, anteturi, blockquotes, forme şi multe altele.
• BlueTrip : cererea iniţială a fost că faima, a fost o combinaţie de cele mai bune caracteristici oferite de alte cadre de alţii, cum ar fi albastru de imprimare, de călătorii Oli ... de unde se trage si numele acestuia. Set caracteristică include 24-coloană reţea, stiluri de tipografie, stiluri de ORM, de imprimare, butoanele, etc
• YUI Fileu : adus la tine de Developer Network Yahooo, susţine lichid-lăţime (100%), precum şi aspecte presetate cu lăţime fixă machete la 750px, 950px, si 974px, şi capacitatea de a personaliza cu uşurinţă la orice număr. După cum puteţi vedea, sa tehnic doar dispunerea componentelor. YUI oferit, de asemenea, HTML / CSS seturi pentru alte elemente de pagină
• YAML (Totuşi, un alt aspect multicolumn)
• Emastic

Amintiţi-vă, folosind cadre de CSS nu implică faptul că sunt leneşi pentru a crea unul propriu ... Aceasta înseamnă că eşti inteligent să înveţe din experienţa celorlalţi şi greşeli, a economisi timp şi creşterea productivităţii!!

Cu meu limitat de aptitudini set cu instrumente, cum ar fi Photoshop şi Illustrator, pot să mărturisesc sincer că sunt un dezvoltator de mai bine decât am un designer. Dar trecutul meu, cu miez (partea de server), de dezvoltare cu Java / PHP / COBOL, a fost o influenţă extrem de pozitivă cu privire la competenţele mele de dezvoltare UI. Ce vreau să spun este, în timp ce crearea de modele mele, adică ori de câte ori am face design, cred despre modul în care designul poate fi cel mai bine convertit în HTML, CSS şi în timp ce face HTML-CSS, dau o idee despre tehnologia de backend şi asiguraţi-vă că în mod rezonabil HTML care pot fi uşor puse în aplicare în XSL bucle sau fragmente de PHP, etc

Peste ani, am fost aruncat pe cap de modele de designeri UI, care, probabil, donot au o idee despre ceea ce este HTML sau CSS. În toţi aceşti ani am gândit că mi-ar cere prea mult, dacă am aştepta de designer, care încearcă să shov lui "imposibil de cod" de design pe gât mea, pentru a înţelege doar un pic de design care sa va fi convertită în. Care ar ajuta la dreapta?

Apoi, am dat peste acest post de azi ... designeri de web, care nu pot cod ... Multumesc Doamne! Eu sunt doar unul dintre cei care simt la fel ... artitle de mai sus este un pic cam o tărăgănat timp .. dar merita citit, fiecare cuvânt din ea.

Mulţumeşte Elliot Stocuri Jay ... Mă simt uşurat!

Iată câteva fragmente din articol Elliots .

Wow, ce zi! A început cu un tweet mic şi sa încheiat cu o discuţie care părea să măture în întreaga comunitate de web design. Se pare ca exista unele opinii foarte puternice deţinute la obiectul de designeri web, dacă ar trebui să poată cod.
...
Deci, înainte de a intra în acest, permiteţi-mi să recapituleze rapid ceea ce am spus în această dimineaţă pe Twitter:

Sincer, sunt şocaţi de faptul că în 2010, eu încă mai vin de pe web designeri "care nu pot cod modele proprii. Nici o scuză.

Eu ar trebui să ... am fost un pic mai specific în tweet mea. Vorbeam despre designeri care nu au nici cea mai de bază HTML şi CSS abilităţile de a transforma un design plat într-o site-ul real. Nu oamenii care în mod intenţionat nu aleg să cod, iar cei care nu pot. Şi eu, de asemenea, referindu-se doar la front-end, codul aici, desigur, este ridicol să cred că ar trebui să fie, de asemenea, designeri uimitoare back-end programatori ...

Ne 'web' desene trimise în Illustrator, 300dpi, imposibil de cod, nr coerenţa / utilizare.
~ Amy Mahon

Se face târziu, şi am ajuns să-şi încheie asta cumva. Ştiu că vor fi mulţi care nu sunt de acord cu mine, şi intenţia mea nu este de a jigni sau supara pe cineva care nu poate cod, dar sper că o parte din ceea ce am spus reflectă unele dintre punctele care vin întotdeauna atunci când cercetând această dezbatere.

La sfârşitul zilei, nu pierd nici un somn de peste care poate codeaza si care nu pot. Sunt cu adevărat surprins doar pentru a găsi designeri atât de multe că nu dispun de front-end competenţe, aşa cum am crezut acest lucru a fost un lucru de domeniul trecutului.

Asemenea să citiţi comentariile, erau în jur de 320 comentarii, după cum am scrie ... ei sunt în valoare de o citesc.
Vă rugăm să citiţi Elliots full post aici .. designerii Web care nu se poate de cod

Ieri, după ce problema am întâlnit cu Resetează CSS în Google Chrome ... m-am gândit să sape un pic mai adânc în zona de foi de stil User Agent ...
Am gasit acest tabel pe valorile implicite ale CSS2.1 Style Sheets User Agent ... (pentru cei care nu ştiu de ce "Style Sheets agent utilizator" este să urmaţi Ce este agent Style Sheets utilizator (specificaţie) .

Pentru o listă completă a CSS 2.1 User Agent foi de stil implicite click aici

Ieri, ca orice alt "Ziua Hog solului", am fost de lucru pe anumite aspecte CSS / tableless. Totul mergea bine în IE 7, 3 FF şi Chrome, pana deodată, am văzut nişte marje ne-neglijabile văzut numai în Google Chrome. Deşi foarte ciudat şi worring, a fost un aspect nou bug / că am venit din toata, nu a fost în cele din urmă un condiment în munca mea lumesc. Sad (dar frumos), aceasta s-au stabilit în termen de câteva minute de sonda ...

Practic, se arata ca Google Chrome a ignorat meu CSS Resetează (margin: 0px). Este de fapt a fost cauzat de stil agentul utilizator (-WebKit-padding-start: 40px). Deci, soluţia a fost de a reseta acest stil de stabilirea padding: 0 elementele incorect.
O modalitate buna de a preveni această problemă de la întâmplă la orice element este folosi un globală odihna CSS, după cum urmează

* {Margin: 0; padding: 0;}

Ce este agentul Style Sheets utilizator (specificaţie)?
Următorul fragment este luat din http://meiert.com/en/blog/20070922/user-agent-style-sheets/ link-ul, urmaţi pentru a citi mai multe despre foile de stil User Agent

CSS 1 introduce ideea de afirmând că fiecare agent utilizator (UA, de multe ori un "browser web" sau "web client"), va avea o foaie de stil implicit, care prezintă documente în mod rezonabil - dar probabil lumesc - mod. CSS 2 spune că agenţii în conformitate utilizator trebuie să se aplice o foaie de stil implicit (sau să se comporte ca şi cum au făcut), şi că foaia de un agent utilizator stilul implicit ar trebui să prezinte elemente ale limbii documentului într-un mod care să satisfacă aşteptările generale de prezentare pentru limba documentului; CSS 3 este probabil să fie de aceeaşi minte.

Întrucât specificaţiile CSS-l lase până la implementarea dacă se utilizează un "real" foaie de stil pentru afişare implicit sau nu, nu este uimitor faptul că nu aţi găsit o foaie de stil implicit în folderul de instalare fiecare browser-ului. Spre deosebire de Internet Explorer de la Microsoft, precum Opera, de exemplu (şi în măsura în care ştiu), browsere, precum Firefox Gecko şi Netscape Navigator (căutaţi "html.css"), dar, de asemenea, Konqueror face destul de simplu pentru a înţelege stilul lor implicite.

Nici eu sunt foarte nou pentru User Interface (UI) de dezvoltare şi nici nu sunt eu un veteran si ca am pus întotdeauna, am încadrează în profilul de UI Developer mai mult decât cea a unui designer, cu nici un regret. Ei bine! Ceea ce am fost scris? Pentru un timp ... (trebuie să fie în ani, nu orice mai puţin) acum, de fiecare acum şi apoi, când am nu ajunge într-un pic de design UI (atunci când designer profesionist a plecat într-o vacanţă), ma opresc mereu cant gândesc dacă designul meu ar trebui să să fie în mod corespunzător complient sau nu (sincer, nu, că am putea achive 100% respectarea standardelor, dacă voiam prea). Apoi, îmi spun, ce rahat! ... De proiectare ar trebui să fie simplu, frumos şi în primul rând pare mai uşor de utilizat, acesta nu ar trebui să facă vizitatori fugi ... sau Bounce (să fie tehnic). Ce bun ar fi un aspect frumos tableless CSS să fie vizitator, care este uită la toate HyperText inteligentă şi Cascading Style Sheet sub pielea ta pagina web ... Zilch!
Ar trebui să arate frumos şi să fie uşor de utilizat ... apoi vine toate lucrurile standarde.

Am stumbbled din toata această intrare pe blog-ul de Jason Fried, de 37 de semnale (Pentru cei care nu sunt conştienţi de 37 de semnale sunt onces care au creat unele aplicaţii web cum ar fi minunat Basecamp, Foc de tabara, etc) care a scris ceva similar în 2004 şi crede-mă, aproape 5 ani şi nu sa schimbat mult de atunci ... am fost fericit pentru a citi postul lui, cum am total de acord cu ceea ce are de spus şi, de asemenea, faptul, ea nu este sigur cu privire la ceea ce se spune despre ei doar instinctul său şi aşa este a mea

Jason Fried: "Nu e prea mult vorbesc despre CSS şi XHTML şi standardele şi accesibilitate şi nu vorbim destul despre oameni. CSS şi Compliant Standardele Codului sunt doar instrumente - trebuie să ştii ceea ce pentru a construi cu aceste instrumente. Mare, mă bucur că interfaţa dvs. nu utilizează tabele. Deci, ce? Cui îi pasă dacă ea încă nu se lasa oamenii atingerea scopurilor lor. Standardele Web sunt mari, dar standardele oamenilor proprii includ obtinerea lucrurile (şi care este încă prea greu pentru a face on-line).

Designerii UI fac aceeaşi veche fundamentală ", uitând despre fiinţă umană de pe cealaltă parte" greşeli - de data aceasta, cu excepţia codul lor arată mai bine. Oamenii nu - cod de validare - interfeţe de utilizare ".

Plateste Jason lui Fried articolul complet

DISCALIMER: Aceasta nu înseamnă că nu trebuie să ne pese de standarde la toate. Standardele sunt bune de a avea şi de a le rămânem cât mai mult posibil. Noi doar trebuie să înţelegem că designul UI bun nu înseamnă întotdeauna 100% complience standarde sau vice-versa ....

Din lista mea de lecţii învăţate meu, am urmat un design UI câteva reguli de aur şi de dezvoltare ... Heres TOP 10 ... nu ca ai să le urmaţi prea ...

1. Aveţi grijă de utilizatori. Utilizatorii pot face sau de a sparge site-ul tau. Donot face sa arate ca un utilizator idoit total, absolut incapabil de a folosi site-ul dumneavoastră. Asta este rău!

2. Păstraţi Simplitatea si usurinta de utilizare cu ghidul dvs. principal. Prea multe lucruri de pe ecran, mai mare probabilitatea ca un utilizator vor fi confuz sau distras de la misiunea lor de origine.

3. Fii în limitele ... donot răsfăţaţi-vă prea mult în UTILIZARE, accesibilitate şi standarde. Utilizaţi în mod eficient standardele şi să le facă înţeles de echipa. Acest lucru va asigura coerenţa chiar în produs

4. Prototip cerinţă. Întrucât, în aceste zile a interfeţelor de utilizare sunt bogate, Prototyping este întotdeauna mai bine decât a face doar wireframes simple şi acesta din urmă este lipsit de interacţiuni decente, acesta ar eşua pentru a oferi clientului o imagine clară a produsului final, care este în curs de dezvoltare. Întotdeauna, este mai uşor de a converti prototipuri în rezultatele finale. De asemenea! cu prototipuri de orice probleme de interacţiune ar putea fi eliminate mai devreme în ciclul de dezvoltare.

5. Consecvenţa în design-ul şi de interacţiune este foarte important. Donot confunda utilizator cu interacţiuni imprevizibile şi gizmos.

6. Înţelegeţi dumneavoastră "Misiunea Design". Cadouri concentreze pe acţiunea principală a paginii beign proiectat. De asemenea, face o listă de acţiuni seconday pe pagina, şi prioritizarea acestora.

7. Furnizarea de feedback-ul adecvat pentru utilizatorii site-ului. Cu cele mai multe dintre site-urile proiectate în jurul valorii de AJAX, oferă indicii vizuale pentru a utilizatorului cu privire la modificările pagina. Utilizatorul trebuie să se acorde o recunoaştere a realizării de orice sarcina el execută. Donot face utilizatorul, aşteptaţi şi ghici, de ex. furnizează indicatori de progres pentru uplaods de fişiere.

8 Utilizaţi controale în mod corespunzător.. De exemplu, utilizarea Selectaţi lista derulantă pentru listele de mici, doar, donot permit utilizatorului să aleagă una din 200 de oraşe folosind cutii selectaţi. Înţelegerea diferenţa dintre un buton şi un link. Un link şi butonul au scopuri diferite, donot folosi unul pentru celălalt. Furnizarea de control dreptul de a face interactiunea cu o pagină mai uşor. Evitaţi utilizarea meniurilor, care sunt mai mult de două niveluri de adâncime. Nu reinventa roata. Utilizaţi controale standard, le particularizaţi numai în cazul în foarte necesar. Definirea toate controalele vamale necesare pentru site-ul dvs. prima mana, astfel ca acestea ar putea fi create si testate independent, pentru site-ul gata de utilizare din toata.

9. Donot repeta prea mult pe design. Amintiţi-vă! Produsul constă în ansamblu mai mult de design singur. Construiţi termene adecvate în planificarea proiectului dvs. pentru iteraţii de proiectare şi de stick la el. Repetare ne ajută pentru a afla ce funcţionează şi ce nu, alege petele probleme. Ca o interfaţă bună are nevoie de timp, să ofere timp de iteraţii în începutul ciclului de dezvoltare, astfel încât iteraţii de proiectare doesnot echivala direct la rework. Prea mult de reprelucrare ar putea jeopradize termenele.

10 Stai pe spate şi cred că, uneori, ca un utilizator..

Aţi văzut animoto.com? Ei bine! acest lucru nu este un anunţ, mi-a placut! şi este într-adevăr, Saruta UI ASS

Am venit pe acest site cu câteva săptămâni în urmă. A văzut prima pagină, pe baza caracterului deranjează mult. Pentru mine, a fost doar un alt site, cu un conţinut bogat Flash, permiţând utilizatorilor să încarce imagini, alege unele pistă şi transforma-l intr-un slideshow imagine frumos. Descarca FLV, şi a pus-o pe orice site-ul de alegere (YouTube, MetaCafe, Facebook şi îi place) ... PERIOADA.

Ieri, când am văzut în paginile interne de debit, care a avut de utilizator, prin crearea de această prezentare .... M-am dus OH WOW! Când am dat seama că nu era pic de FLASH utilizat. A fost într-adevăr, o interfaţă utilizator Rich. Toate dezvoltatorii UI trebuie să aspire să creeze sau cel puţin să fie o parte din echipa care a făcut această interfaţă .... Absolut genial! Şi inspiraţie!

Arunca o privire ... http://animoto.com/ ... şi să înregistreze şi să se joace cu el ... doar atunci poti aprecia geniul.

Când am citit acest articol pe A List Apart " Faux absolut de poziţionare
de Eric Sol ", am fost nimic mai puţin decât impresionat. Am fost, de asemenea, deprimat majorly, cauza, sincer ma intrebam, de ce cant eu vin cu ceva fabulos ca acest lucru.

De obicei, atunci când vom crea layout CSS, vom folosi "POZIŢIE" sau "Floats", sau o combinaţie foarte rău de atât. Eric Sol şi echipa sa definesc o noua tehnica de a perfecta un nou tip de tehnica de aspect CSS, pe care le-au botezat "Faux poziţionare absolută", după tehnica faux coloane care simulează prezenţa unei coloane.

Ştiţi că problema noi toţi dezvoltatorii de CSS au cu machete dezintegrare (Cele schimbări neaşteptate de conţinut care produc coloane întregi pentru a încheia, atunci când vom folosi aspecte pluteau) ... Ei bine! Istoria pare!!
Aceasta tehnica aspect este încă foarte tânără, şi trebuie să calcata de toate aceste guru CSS acolo, înainte de a deveni un standard al ONU în scris. Sunt fericit să-l folosească ACUM! ... Şi am deja în mijlocul de a converti mele anterioare problematice / plutitoare ne-neapărat aspecte în structura FAP deja ... şi sunt bucuros să spun "noi folosim deja de pozitionare Faux absolut pentru site-ul blog-ul, precum şi" ... GO încercaţi să-l, ACUM!

Kudos Eric!!

Mai multe elemente DOM de pe pagina, se face mai lent, mai lent este accesul în DOM lui JavaScript. Un număr mare de elemente DOM poate fi cauza de design aspect rău. De exemplu, tabelele imbricate ar fi fost utilizate în scopuri de aspect. Folosiţi orice etichetă HTML în cazul în care se face sens semantic. , De exemplu donot mese de utilizare pentru layout-uri, dar donot ezitaţi să le utilizeze în cazul în care va trebui să afişa date tabelare, şi, prin urmare, va reduce folosi elemente DOM, în comparaţie, la o structură similară creat folosind divs numai ..

Pentru a testa numărul de elemente DOM din pagina HTML, doar tastaţi următoarele în consola Firebug de: document.getElementsByTagName('*').length

Nu există nici un standard stabilit ca la cât de multe elemente DOM sunt prea multe. Verificaţi alte pagini similare, care au markup.Eg bun. Home Page Yahoo! este o pagina destul de ocupat şi încă în curs de 700 de elemente (tag-uri HTML).

Utilizaţi Obţineţi Cereri pentru AJAX

Acesta a fost descoperit că atunci când se utilizează XMLHttpRequest, POST este implementat în browsere ca un proces în două etape: trimiterea anteturile în primul rând, apoi trimiterea datelor. Deci, cel mai bine este să utilizaţi GET, care are doar un pachet TCP pentru a trimite (dacă nu aveţi o mulţime de cookie-uri). Lungimea maximă a URL-ul în IE este de 2K, asa ca daca ai trimite mai mult de 2K de date ar putea să nu fi capabil de a utiliza GET.
Un efect interesant este faptul că partea de POST, fara a posta de fapt, orice date se comportă ca GET. GET este destinat pentru regăsirea de informaţii, deci are sens (semantic) pentru a utiliza GET atunci când solicită date, doar ca spre deosebire de trimiterea de date pentru a fi stocate server-side.

Evitaţi solicită sincrone AJAX

Atunci când se face "Ajax" cererile, puteţi alege fie asincron sau de modul de sincronizare. Asincron modul rulează cererea în fundal în timp ce alte activităţi browser-ul poate continua să le prelucreze. Sync Mode va aştepta pentru cererea de a reveni înainte de a continua.
Cererile făcute cu modul de sincronizare ar trebui să fie evitate. Aceste cereri vor determina browser pentru a bloca pentru utilizator până când se întoarce de cerere. În cazul în care serverul este ocupat şi de răspuns nevoie de un timp, browser-ul utilizatorului (şi poate OS) nu va permite nimic altceva de făcut. În cazurile în care un răspuns nu este corect primite, browser-ul poate continua să blocheze până când cererea este expirat.
Dacă credeţi că situaţia impune modul de sincronizare, este timpul cel mai probabil de a re-gândi design-ul. Situaţii foarte puţine (dacă există) de a solicita de fapt, cererile de Ajax în modul de sincronizare.

Optimizarea imaginilor

Optimizarea înseamnă pur şi simplu păstrarea dimensiunii mici a imaginii păstrând calitatea imaginii la nivelul cerut. Există o mulţime de proceduri care pot transporta o dată pentru a optimiza imaginile înainte de a fi încărcate pe server pentru livrare. Instrumentele pe care le folosim pentru crearea acestor imagini (Photoshop, focuri de artificii, etc) au, de obicei, instrumente care permit utilizatorilor pentru a optimiza imagine pentru utilizarea web.
• Verificaţi de GIF pentru a vedea dacă acestea sunt utilizaţi o dimensiune paleta corespunde cu numărul de culori din imagine. Atunci când o imagine este cu 4 culori şi o paletă 256 de culori, atunci imaginea ar putea fi optimizat

• Conversie GIF este la PNG în cazul în care este posibil şi a vedea dacă există o economie. Cele mai multe ori, nu există. Nu ezitati sa folositi al lui PNG, aşa cum acestea sunt pe deplin susţinute de cele mai multe browsere utilizate în mod obişnuit. Asteptati-va de capacităţile de animaţie un PNG pot face ceea ce o face GIF, inclusiv transparenţa.

• Pentru imaginile folosite în sprite CSS, aranja imaginile din Sprite orizontal, spre deosebire de vertical, de obicei, la o dimensiune de fişier mai mică. De asemenea, combina imagini cu culori similare într-un Sprite. Aceasta vă ajută să păstraţi numărul de culoarea scăzut, în mod ideal, în 256 de culori astfel încât să încapă într-o PNG8.

• Dacă utilizaţi un favicon.ico, păstraţi-l mic, de preferinţă sub 1K.

Folosiţi corect scalate / redimensionate imagine.

Întotdeauna încercaţi şi de a folosi imagini intermediare, de exemplu, nu utilizaţi o imagine mai mare decat ai nevoie doar pentru că aveţi posibilitatea să setaţi lăţimea şi înălţimea în HTML. Dacă aveţi nevoie pentru a afişa o imagine de 100px 100px X de pe pagina, atunci nu se folosi un reduse imagine 200x200px.

Utilizarea imaginilor progresive

Un browser web face deja Imagini progresiv. Pentru a face chiar mai bine, pur şi simplu a salva GIF sau PNG imagini cu "interlaced" opţiune, sau imagini JPEG cu "progresiva" opţiune.

Există o dezbatere în curs de desfăşurare în rândul utilizatorilor de internet pentru a stabili dacă utilizarea de imagini progresive este o binecuvântare sau un obstacol. De asemenea, o imagine progresivă cântăreşte aproximativ 20% mai mult decât omologul său progresivă nu. Deci, dacă credeţi că aspectul foloseşte imagini care nu va împiedica de utilizator, experienţa de a fi progresivă, nu ezitaţi să facă acest lucru.