11 març Tendències web
Evolució web
El disseny web és una activitat que consisteix en la planificació, disseny i implementació de llocs web i pàgines web. No és simplement una aplicació del disseny convencional, ja que requereix tenir en compte qüestions com ara:
- Navegabilitat: facilitat per a fer un seguiment dels continguts.
- Usabilitat: poder fer les tasques de forma ràpida i fàcil.
- Arquitectura de la informació: continguts estructurats, jerarquitzats. Web semàntica
- Interacció: (àudio, textos, imatge, enllaços i vídeo)
- Disseny gràfic: colors, formes, tipografies,…
Les noves propietats i funcionalitats que ofereix HTML5 han permès aportar solucions a vells i nous requeriments solicitats tant per part dels dissenyadors, dels desenvolupadors i dels usuaris de pàgines web.
Recordem que l’HTML5 és una evolució del llenguatge HTML, però també és un terme de màrqueting per agrupar les noves tecnologies per el desenvolupament web:
- HTML5
- CSS3
- Noves propietats de JavaScript
HTML5
- Simplificació d’algunes propietats i incorporació de noves etiquetes tant d’interficie (video, audio,…) com semàntiques ( header, nav, article, section, aside, footer,…)
- Incorporació de l’element canvas. Canvas és un element HTML que pot ser accedit a través de Javascript, permetent generar gràfics 2D, jocs, animacions i composició d’imatges. Hi ha una altra etiqueta SVG que compleix amb funcions similars. A la llarga pot ser el substitut de Flash.
CSS3
És la nova versió del llenguatge CSS, encara en desenvolupament i afegeix entre altres coses noves propietats que faciliten i enriqueixen el procés de disseny de pàgines web:
- Border-radius: Permet fer cantonades arrodonides a les caixes.
http://www.css3.info/preview/rounded-border/ - Box-shadow: Permet hombres a les caixes contenedores.
http://librosweb.es/css_avanzado/capitulo_1/sombras.html - Text-Shadow: Permet hombres als textes
http://www.css3.info/preview/text-shadow/ - opacity: Permet fer transparencies
http://librosweb.es/css_avanzado/capitulo_1/transparencias.html - Transitions: Permet crear transicions de color, o de movimient
http://www.css3.info/preview/css3-transitions/ - Multicolumn layout: Permet caixes de text amb multiple columna
http://www.inserthtml.com/demo/column-layout/ - Gradients: Permet la creació de degradats linials o radials
- mediaqueries: Permet carregar una fulla d’estils personalitzada en funció del tamany de la pantalla del dispositiu en el qual s’està visualitzant el web.
http://mediaqueri.es/ - fontface: permet als dissenyadors usar altres tipografies diferents de les “fonts segures” (web safe).
http://webdesignerwall.com/general/font-face-solutions-suggestions
JavaScript
És un llenguatge de programació interpretat. Es defineix com orientat a objectes. S’utilitza principalment en la seva forma del costat del client (client-side), implementat com a part d’un navegador web permetent millores en la interfície d’usuari i pàgines web dinàmiques, … Tots els navegadors moderns interpreten el codi JavaScript integrat en les pàgines web. Per interactuar amb una pàgina web es proveeix al llenguatge JavaScript d’una implementació del Document Object Model (DOM).
Frameworks de JavaScript:
jQuery: http://jquery.com/
Mootools: http://mootools.net/
Prototype: http://prototypejs.org/
Tendències web
Responsive design
Amb l’aparició de diferents dispositius, tabletes, smartphones,…i l’evolució dels formats de pantalla, els desenvolupadors i dissenyadors de pàgines i aplicacions web han hagut de buscar solucions per a tenir una correcte visualització en els diferents escenàris.
mateix disseny per a tots els dispositius
Responsive Design (Disseny Flexible, Disseny Adaptable, disseny líquid)
És una disciplina que té un únic objectiu: que un mateix disseny pugui ser aplicat a diferents formats de pantalla. A través de les fulles d’estil (CSS i @mediaqueries) i de certs retocs de codi un web es veurà igual de bé en un monitor de 27 polzades que en un tablet de 10 polzades o un smartphone de 3,5 polzades.
- Càrrega més veloç del LLOC en els dispositius portàtils
- Millor lectura, amb la mida de lletra adequat per a una lectura còmoda ja sigui en smartphone o tablet.
- Millor experiència en la navegació: el dit només s’usa per desplaçar verticalment el site a manera de scroll.
- Estalvi de costos ja que no cal desenvolupar múltiples versions del site o fins i tot desenvolupar una app per Iphone o Ipad.
Exemple de disseny flexible.
http://foodsense.is/
http://www.awwwards.com/50-examples-of-responsive-web-design.html
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
Altres tendències
Hi ha altres tècniques per aconseguir la bona distribució i visualització dels continguts en els diferents dispositius i que han creat tendència:
Masonry / Woomak
Són Plugins de jQuery que redueixen els espais en blanc entre elements verticals d’alçada variable.
http://desandro.com/
http://masonry.desandro.com/
http://isotope.metafizzy.com/
http://www.wookmark.com/
http://www.wookmark.com/jquery-plugin
InfiniteScroll
Infinite-Scroll és una tècnica que va carregant entrades a mesura que arribem al final de la pàgina, fent que el navegant no necessiti recarregar la pàgina per veure articles anteriors. La càrrega dinàmica d’articles d’aquesta manera facilita que l’usuari es quedi al nostre lloc veient major quantitat de contingut.
http://www.infinite-scroll.com/
http://www.jquery4u.com/demos/infinite-scrolling-demo1/
Masonry + Infinite Scrolling = Magic
Masonry style layout i infinite scrolling s’han fusionat en una sola idea al cap, però va començar com dues tecnologies diferents. Posar-los junts, resulta que crea una experiència veritablement addictiva i una nova forma de navegar pels continguts. T’oblides d’interfícies d’usuari i controls, només ha d’absorbir el contingut de milers d’imatges en una disposició molt atractiva, controlat per un sol moviment del seu dit.
És una experiència atractiva que trenca amb molts models del passat en quant a interacció amb l’usuari i usabilitat. Google, Facebook i Twitter entre d’altres ja han implementat aquestes tècniques en les seves pàgines.
Un bon exemple d’aquesta unió és www.pinterest.com.
One Page design
Es tracta de posar tot el contingut en una sola pàgina. Aquest tipus de implementació és adeqüat per a pàigines amb poc contingut i molt gràfiques.
http://onepagelove.com/
examples-of-modern-single-page-website-designs
21-beautiful-examples-of-single-page-websites
Parallax
L’efecte scroll parallax en el disseny web és la tècnica que mostra imatges superposades que es mouen amb el desplaçament de l’scroll de la pàgina web a diferents velocitats creant una il·lusió 3D molt agradable. Aquest efecte, sens dubte, converteix el simple desplaçament vertical o horitzontal al voltant de llocs web una experiència interessant.
http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html
Web fonts: @fontface
El joc de les tipografies per a la web estava en l’aire desde fa uns anys. Tothom tenia una idea i una solució, però ningú sabia realment la solució que triomfaria amb el pas del temps. Aquest debat ja s’ha acabat: @font-face.
Raons perles quals @font-face ha tingut tanta acceptació:
- És una solució pura de CSS que els desenvolupadors poden utilitzar.
- És totalment compatible amb la selecció de text i les accions com copiar i enganxar significa que els experts en usabilitat els encanta.
- Es pot crear una @font-face per gairebé qualsevol tipus de lletra. Els dissenyadors tenen una àmplia gamma de fonts degudament autoritzades per triar.
http://www.awwwards.com/best-20-webfonts-from-google-web-fonts-and-font-face-embedding.html
Iconfonts
Les fonts d’icones son arxius de tipografía que tenen icones i simbols en lloc de caràcters alfanumèrics. Això ens permet reduir el nombre d’imatges usades en un disseny web. Al ser en format vectorial es comporten com una tipografia i es poden aplicar amb qualsevol tamany.
http://weloveiconfonts.com/
http://sixrevisions.com/resources/free-icon-fonts/