ABONAMENTE VIDEO REDACȚIA
RO
EN
×
▼ LISTĂ EDIȚII ▼
Numărul 52
Abonament PDF

SmartWeb 2016 review

Claudia Mihu
Software Developer
@Endava
EVENIMENTE

Smartweb e o conferință axată pe front-end development și design ce are loc anual la București pe parcursul a două zile: o zi de workshop și una de prezentări. Ca în fiecare an, sunt opt sesiuni, iar printre temele abordate anul acesta se numără imagini responsive, CSS layouts  și tips & tricks orientate către îmbunătățirea performanței.

"Dirty Little Tricks From The Dark Corners of Front-End"

Vitaly Friedman, autor și editor la Smashing Magazine, a dat startul agendei cu tips & tricks utile pentru câteva situații speciale.

Una din ele este atunci când se dorește un text fluid și flexibil cu cât mai puține media queries pentru că folosindu-le apare un "salt vizibil între valorile fixe și cele fluide"(Mike Riethmuller). În mod normal se poate folosi  funcția calc() în combinație cu unități viewport: vw/vh/vmin/vmax.  De exemplu, pentru un heading de care avem nevoie să fie flexibil între 16 și 24px în rezoluții cuprinse între 400 și 800px, o soluție poate arăta în felul următor:

h2{font-size:calc(1em+1vw)}

Însă această soluție, deși garantează o scară modulară , nu  oferă control  asupra ratei la care unitățile viewport se schimbă. Soluția ideală pentru acest caz, care ar arăta mai fluid și mai natural și, ca bonus, nu include media queries, este următoarea:  

O altă situație specială poate apărea atunci când avem nevoie de ordonarea unei liste prin numerotarea acesteia într-un format de două cifre. Proprietatea CSS decimal-leading-zero nu este cea mai potrivită pentru că include și un punct. Soluția propusă de Vitaly în acest caz este utilizarea CSS counters.

Un alt exemplu  apare atunci când nu se cunosc  dimensiunile conținutului ce va fi injectat dinamic  în DOM și apar prea multe "salturi vizuale" din cauza redimensionării mai multor containere pentru încadrarea conținutului. Pentru a îmbunătăți experiența utilizatorului prin CSS se poate folosi transition începând de la min-height sau chiar de la 0 , până la înălțimea maximă pe care o poate avea containerul respectiv.

"Front-End Style Guides"

Anna Debenham, front-end developer la Sync, a vorbit despre modurile de documentare a stilurilor unui website și organizarea acestora într-un ghid stilistic. Fazele prin care trece un website se vor reflecta și în ghidul stilistic: design, implementare, mentenanță.

În faza de design se poate crea ghidul stilistic în următoarele forme, propuse  de diferiți designeri :

În faza de implementare a website-ului se va dezvolta în paralel și ghidul stilistic în care se vor trata standarde CSS, care ar trebui să facă referire inclusiv la tabele , interacțiuni, animații, localizare (right-to-left).  

În faza de mentenanță a unui website, ghidul stilistic poate fi actualizat automat, de exemplu atunci când se face commit pe Github cu stiluri noi cu ajutorul lui  HoundCI.

Anna a adus nu unul ci zece argumente în favoarea unui ghid stilistic:

  1. este un document de referință pe termen lung;

  2. reduce complexitatea în cazul echipelor distribuite(de exemplu Starbucks are o librărie de șabloane open source  asupra căreia intervin evident  mai multe persoane);

  3. consistența prin reutilizarea componentelor care deja au fost aprobate de accessibility testing;

  4. ghidul poate fi folosit în testare ca termen de comparație (de exemplu, în accessibility testing pentru verificarea contrastul culorilor necesar pentru persoanele cu o vedere foarte slabă);

  5. diminuează redundanța;

  6. oferă o reprezentație realistică ;

  7. mentenanță;

  8. oferă educație;

  9. poate funcționa ca un raport al performanței (de exemplu, http://www.lonelyplanet.com/ înregistrează viteza de încărcare pentru fiecare pagină în style guide  pentru a deține evidența ariilor ce necesită optimizare);

  10. librăriile de șabloane pot fi considerate instrumente pentru crearea rapidă de prototipuri.

Știați că lanțul hotelier Marriott are o echipă de patru-cinci oameni care verifică respectarea standardelor de design? O dată creat, un ghid stilistic trebuie să fie totuși actualizat pentru a-și păstra utilitatea. Mai mult, făcându-l public putem atrage îmbunătățiri din partea contributorilor.

"Let's Talk MIDI"

Ruth John a vorbit despre Web Midi Api, susținut în prezent  de Chrome și Opera, care "deschide o nouă lume a hardware-ului" , pentru că există multe instrumente muzicale care au activat MIDI(Music Instruments Digital Interface). MIDI este un data protocol la baza căruia  stau:

Structura de date pentru un obiect MIDI este un array cu trei elemente  unde primul element este o notă privind valoarea pe un anumit canal, al doilea element reprezintă nota muzicală, iar al treilea element reprezintă  viteza calculată în funcție de intensitatea cu care se apasă o tastă.

"CSS for Decoration"

Răzvan Căliman a demonstrat diverse moduri de a crea ilustrații folosind doar CSS pentru a reduce numărul de imagini încărcate de pe server, și deci pentru a îmbunătăți  performanța folosind CSS gradients și backgrounds. Ideea decorării unei întregi pagini web folosind doar CSS a mai fost dezbătută atât la alte sesiuni Smartweb cât și pe diferite bloguri.

Un alt exemplu este colecția de ilustrații create doar din CSS aplicat pe un singur element HTML, creată de Lynn Fisher:

Deși par tentante, aceste opțiuni nu sunt potrivite pentru pagini web pentru că ilustrațiile obținute doar prin CSS sunt  "fragile, dependente de context și layout și dificil de menținut". Există totuși aspecte din user experience care pot fi acoperite strict de CSS. Se pot crea imagini de fundal  folosind CSS gradients cu cele două tipuri de gradients:

1. Linear (culoarea e distribuită pe o linie virtuală)

.demo {

background-image: linear-gradient( 120deg, turquoise 0%, rebeccapurple 100% );

}

2. Radial (culoarea e distribuită radial)

.demo {

background-image: radial-gradient( circle, turquoise 0%, rebeccapurple 100% );

}

Un aspect cheie de care putem profita este faptul că un "element poate avea mai multe imagini de fundal fiecare cu proprietăți  diferite".

Mai multe exemple de șabloane pentru background se pot găsi la http://lea.verou.me/css3patterns/ :

"Making The Most Of New CSS Layout"

Rachel Andrew, fondator și director general al http://www.edgeofmyseat.com/, a prezentat versiunea beta a unui  nou layout system ce înglobează CSS grid layouts, box alignment module și Flexbox.

"The Secret Life Of Comedy "

Prezentarea lui Espen Brunborg a destins prin umor a doua parte a zilei, deja încărcată de informație , dar a atins câteva corzi sensibile. Cu ajutorul sistemelor CMS se realizează website-uri care "arată ca o mare de alte website-uri". Partea bună e ca utilizatorii nu vor fi nevoiți să se obișnuiască cu o nouă interfață pentru fiecare website, însă abstractizarea designului și refolosirea template-urilor "reduce implementarea unui website la nivel  de producție în masă"(Mark Boulton).  

Când vine vorba de un design de calitate, părerile sunt împărțite între utilitate versus aspect, dar ideea nu este separarea celor două ci îmbinarea lor:

"HTML Responsive Images"

E o tradiție ca Bruce Lawson să fie gazda acestui eveniment, dar și să încheie șirul prezentărilor în stilul său caracteristic, amuzant . El a prezentat anul acesta un nou feature HTML,  imagini responsive, creat  în colaborare cu Responsive Images Community Group, și arată în felul următor :

<picture>
<source src="imageSmall.png" media="max-width:480px;">
<source src="imageLarge.png" media="max-width:1080px;">
</picture>

Inspirat de elementul HTML5 <video> care putea să includă mai multe surse , elemental <picture>  aduce în plus față de <img> posibilitatea de a adăuga mai multe surse pentru aceeași imagine, cu scopul de a deservi  diferite dimensiuni ale ecranului, care pot fi de diferite tipuri (png, svg, gif, jpeg) și mărimi . În final se va încărca în DOM doar sursa potrivită  ecranului utilizatorului,  ceea ce duce la o evidentă îmbunătățire a performanței.

Informațiile prezentate în acest articol sunt doar o mică parte din lucrurile interesante de la Smartweb 2016. Recomand cu căldură ediția de anul viitor pentru că în fiecare an prezentările au un caracter practic, cu informații utile, iar prezentatorii sunt disponibili pe tot parcursul zilei astfel încât  pot fi contactați personal. Felicitări Evensys pentru o organizare impecabilă și anul acesta și bineînțeles revistei Today Software Magazine pentru promovarea evenimentului!


Conferință

Sponsori

  • ntt data
  • 3PillarGlobal
  • Betfair
  • Telenav
  • Accenture
  • Siemens
  • Bosch
  • FlowTraders
  • MHP
  • Connatix
  • UIPatj
  • MetroSystems
  • Globant
  • Colors in projects