ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 147
Numărul 146 Numărul 145 Numărul 144 Numărul 143 Numărul 142 Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ 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ță TSM

NUMĂRUL 147 - Automotive

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects