Aquesta setmana hem descobert el web de Minimal Monkey, un bloc-portfolio d’un dissenyador d’interacció anglès establert a Nova York que es diu Stephen Burgess. El disseny web d’aquest site ens sorprèn per diversos motius, però sobretot en destacaríem l’originalitat del disseny i de la navegació.

Quan accedim a Minimal Monkey ens trobem amb un curiós llistat colorista, que mostra les darreres entrades del bloc, amb una presentació molt diferent a la que estem acostumats a l’hora de consumir els continguts d’un bloc. Tot plegat va acompanyat d’unes animacions subtils – fetes en CSS3 – que fan que l’experiència d’usuari sigui excel·lent.

Deixant a banda el disseny i la interactivitat, el web també és interessant pels seus continguts, ja que ens ofereix articles i experiments sobre HTML5, JavaScript i CSS3 d’excepcional qualitat.

Amb un bloc com aquest, estem segurs que aquest desenvolupador no li faltarà feina.

The Good Man és un projecte d’experimentació de fi de carrera amb el qual el Pedro Ivo ens sorprèn i ens demostra les possibilitats d’animació d’elements d’HTML5 via CSS3. El disseny web està fet sense cap imatge, comptant amb formes bàsiques i webfonts com a únics recursos.

No dubteu a fer-hi una ullada per quedar-vos distrets una estona. I, abans d’abandonar el web, no us perdeu l’apartat de Tests, per veure els diferents tipus d’animació que s’han utilitzat.

En aquesta primera entrada de l’any 2013 de Recursos web farem un repàs de què s’ha creat l’any anterior. La web de Speckyboy ha realitzat un bon recull dels 50 millors connectors (plugins, en anglès) jQuery de l’any 2012, separats en diverses categories que mostrem a continuació:

Estructura de la pàgina (layout)

• Equalize: ens ajuda a igualar l’amplada i l’alçada dels elements.
• Freetile: organitza els elements de la pàgina fent que tingui un disseny més eficient i dinàmic.
• Gridster: utilització de drag-and-drop que permet arrossegar els elements de la pàgina.
• Zoomooz: genial plugin per fer zoom als elements que desitgem.
• Wookmark: organitza els elements en format de columna dinàmica.
• HiddenPosition: ens permet treballar amb elements ocults.
• Stellar: es juga amb les imatges de fons i l’alineació. Efectes genials en passar de pàgina.
• Turn.js: efecte de llibre animat en HTML5,
• Responsive Measure: ajusta la mida de la letra de manera que compleixi el Disseny web adaptatiu (en anglès, Responsive Web Design).
• Scrollpath: permet definir la trajectòria de l’scroll (desplaçament).

Navegació

• HorizontalNav: aquest connector ens ajusta automàticament l’amplada del menú.
• Stickymojo: afegeix el menú a la barra lateral en una posició fixa.
• ddSlick: ens crea un menú desplegable on podem incloure imatges i descripcions.
• jQuery Collapse: creació de menús originals que podem personalitzar.
• jQuery Akordeon: podem crear panells plegables amb qualsevol tipus de contingut.

Formularis

• jQuery Complexify: determina la complexitat de la contrasenya.
• jQuery File Upload: manera senzilla de visualitzar i editar la pujada d’arxius en un formulari.
• Credit Card Validator: detecta i valida automàticament els números de la targeta de crèdit.
• Filtrify: cerca i navega fàcilment a través de les etiquetes.
• Mailcheck: suggereix el domini adequat quan els usuaris han introduït una adreça de correu incorrecta.

Marquesines i carrusels

• Responsive Carousel: carrusel que compleix el Disseny web adaptatiu i permet també personalitzar-lo.
• iosSlider: desplaçament d’imatges d’una manera fàcil i també personalitzable.
• RSlider: permet el desplaçament d’imatges en pantalla completa. També compleix el Disseny web adaptatiu.
• Fresco: plugin d’ampliació d’imatges.
• BookBlock: passa pàgines d’imatges com si fos un llibre.
• Adaptor: transicions de desplaçament d’imatges en 2D i 3D.
• RCarousel: un complet carrusel amb moltes característiques personalitzables.
• Rhinoslider: també una marquesina personalitzable que a més inclou un generador.
• Sequencejs: utilitza transicions avançades de CSS3.
• Glisse: galeria que permet ampliació d’imatges a pantalla completa.
• µslider: marquesina on es pot afegir tot tipus de contingut.
• Responsive Slides: aquesta marquesina també compleix el Disseny web adaptatiu.

Realització de gràfics i organigrames

• Morris: ens ajuda a dibuixar tot tipus de gràfics d’una forma senzilla.
• jQuery Org Chart: augmenta el disseny i dinamisme en els organigrames.

Tipografia

• Bacon: permet ajustar el text seguint una forma de corba Bezier o línia.
• Textualizer: realitza diferents efectes en els caràcters i text sencer.
• slabText: per crear títols grans i seguint el Disseny web adaptatiu.
• trunk8: connector que, en un paràgraf, talla d’una forma més eficient el text (per aplicar per exemple en les entrades que s’aplica el “llegeix-ne més”).

Efectes en imatges

• tiltShift: utilitza els filtres d’imatges de CSS3 (únicament funciona en Chrome i Safari 6).
• jQuery Picture: ens ajuda a implementar les imatges en el Disseny web adaptatiu.
• ImageMapster: realització de mapes d’imatges d’una forma més còmoda.
• Responsive Img: també ens facilita la visualització de les imatges en el Disseny web adaptatiu.
• Backstretch: permet afegir una imatge de fons dinàmicament a qualsevol pàgina.

I a més a més…

• jQuery Transit: crea transicions per jQuery.
• Noty: permet crear fàcilment finestres emergents.
• jQuery Map Marker: marcatge de punts al Google Maps.
• jHere: per afegir fàcilment plànols interactius.
• jQuery Vector Maps: utilitza Gràfics Vectorials Escalables (SVG) per plànols vectorials.
• jQuery ProQuo: permet tuitejar qualsevol contingut del text.
• Tooltipster: per realitzar descripcions emergents (tooltips).
• BigVideo: permet mostrar en pantalla completa imatges o vídeos.
• Calendario: ens ajuda a crear calendaris flexibles. Compleix el Disseny web adaptatiu.

Via: Speckyboy

Generalment, els desenvolupadors web quan hem de maquetar i programar un formulari de contacte, ens canvia una mica la cara. Tendeixen a ser visualment pesats, sobretot si hi ha molts camps i a més, si incorporen checkbox i radio buttons.

Això ho podem canviar utilitzant CSS i pluguins de jQuery. A continuació us mostrem un llistat amb eines per poder millorar la visualització i la utilitat dels formularis:

• Pluguin jQuery que valida, millora el disseny i a més, compleix amb el Disseny web adaptatiu
• Pluguin per millorar el disseny dels select
• Llistat de curiosos formularis de contacte per inspirar-te
• 20 maneres de crear formularis utilitzant jQuery, CSS3, HTML5

Avui destaquem…

• Validació: Per evitar que s’enviïn formularis buits, o que ens manqui informació important enviada per alguns dels camps dels formularis, hem de validar els formularis, és a dir, indicarem els camps que són obligatoris i si no s’han omplert, o s’han omplert malament, no deixarem que el formulari s’enviï i li indicarem a l’usuari. Tenim diverses eines per fer-ho, us en llistem algunes:
  • Validation
  • jFormer
  • jQuery Form Validation

HTML5 (HyperText Markup Language, cinquena versió) i CSS3 (Cascading Style Sheets, tercera versió), dues tecnologies que ens facilitaran molt la vida als maquetadors i desenvolupadors web. Parlo en futur, perquè tot i que ja es comença a implementar, els navegadors encara no estan totalment preparats per reconèixe’ls (és per això que es recomana actualitzar el navegador per tenir l’última versió). La mateixa W3C indica que està en mode experimental.

Què són i quines diferències ofereixen respecte la seva versió anterior?

• HTML5: és el codi que s’utilitza per presentar la informació al nostre navegador web i poder-hi interactuar. A diferència de la seva versió anterior, implementa noves etiquetes que s’ajusten a la web semàntica. És a dir, en comptes d’utilizar <div> a tots els contenidors, tenim la possibilitat de definir-ho amb <head>, <footer>, <nav>… Una altra novetat important, és l’aparició de les etiquetes <video> i <audio>, pel que ens estalviarem crear l'<embed> i l'<object> i disminuirem considerablement la quantitat de memòria utilitzada.
• CSS3: la part gràfica del lloc és definida per aquesta tecnologia. Les principals millores que ens aporta aquesta versió són:
  • Animacions
  • Ombra als elements
  • Requadres rodons
  • Web Fonts

Després d’aquesta breu introducció, no et perdis The Expressive Web, on trobaràs els efectes que es poden fer unint aquestes dues tecnologies i la compatibilitat d’aquestes suportada en els navegadors.

Disseny web utilitzant HTML5 i CSS3

•  55 exemples de llocs utilitzant aquestes tecnologies
• Top 20 de webs per inspirar-te

 I a més…

• HTML5 Test: Per saber quins elements de l’HTML5 soporta el teu navegador
• CSS3 Generator: Et genera codi CSS3 indicant què necessites
• Tutorial: Guia definitiva de les animacions i transicions
• Guia d’ús HTML5: Llistat etiquetes
• Demo d’un joc HTML5 i CSS3: Guanyador concurs No Javascript de Mozilla Developer Network

Ja tornem a ser dimarts i seguirem ampliant aquesta nova secció que vàrem estrenar la setmana passada: Recursos web.

Segurament ja hauràs compartit a internet les fotografies de les teves vacances amb els teus amics a través de les xarxes socials, o hauràs llegit el programa de la Festa Major del teu poble a la pàgina del seu ajuntament, o comentat alguna notícia sobre la política actual en algun diari online. Ara ens és difícil pensar en internet com una eina només de lectura, ja que constantment hi estem interactuant. Però, no sempre ha estat així.

Avui destaquem…

• Què és Interacció amb WEB 2.0?
  Si tirem uns quants anys enrere i pensem en com navegàvem per internet, segurament recordarem que les webs eren estàtiques, és a dir, nosaltres com a usuaris únicament érem receptors d’informació, no hi havia interactivitat. A trets generals, aquest concepte s’anomena WEB 1.0, parlariem de la web més bàsica que existeix.
• Van passant els anys i gràcies a una nova generació de web, a un nou pensament global, la necessitat de poder democratitzar la informació creix i evoluciona i sorgeix la WEB 2.0. Apareixen les xarxes socials, els blocs, els wikis, els llocs P2P…
• Són exemples de l’aparició de la web 2.0: Flickr,  Facebook, Wikipedia
• Pots consultar també Go2web20, que és un directori amb un recull d’eines i webs 2.0

Després de definir en termes generals aquest concepte, oferirem alguns enllaços per facilitar-vos la feina, a nivell de disseny web, maquetació o programació.

Disseny web

– 25 exemples de disseny web 2.0 per inspirar-nos

– 50 patrons gratuïts

Efectes per al web

– Camps de formulari editables

– 45 pluguins de jQuery

Maquetació web

– Pautes de W3C per un web 2.0 accessible (WCAG 2.0)

– 50 tècniques per millorar el disseny utilitzant CSS3