Fa uns dies vam publicar el nou web de Plataforma per la Llengua, una de les feines en què hem estat treballant darrerament. El web estrena una nova línia corporativa seguint amb la renovació estètica que ja vam començar amb el web del Premi Martí Gasull, que vam realitzar l’any passat i que enguany presenta la seva segona edició.

Segur que molts de vosaltres ja coneixeu la immensa feina que fa aquesta entitat per promoure la llengua catalana com a eina de cohesió social. En el seu web s’hi havia d’encabir moltíssima informació, així que per a preparar aquest nou web, hem hagut de treballar a fons en la reorganització i la simplificació dels continguts i també en l’optimització dels seus processos de manteniment.

En aquest projecte s’ha treballat també per potenciar les vies de difusió de l’entitat, agilitzant-les i posant-les més a l’abast dels usuaris. I, a la vegada, hem canviat el sistema d’enviament dels butlletins, per fer-los més efectius. El disseny web l’hem fet amb Responsive Web Design i amb URLs amigables, per millorar-ne el posicionament.

L’ONG del català presenta una nova cara. Esperem que us agradi tant com a nosaltres!

Hem comentat diverses vegades que no és gens fàcil començar el disseny d’un web. Aquest procès és totalment creatiu i és necessari conèixer diverses eines per poder obtenir un bon resultat final. Cal també, anar més enllà i pensar en Responsive Design.

Per crear aquesta primera fase d’un web s’utilitzen diversos programes. En aquest cas, oferirem un llistat de tutorials fets amb el programa Adobe Photoshop.

Tutorials per al disseny web

• Botiga virtual
• Layout fosc i net
• Utilitzant textures
• Disseny web professional
• Professional i net, web 2.0
• Layout d’un portfoli

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

Aquesta setmana estrenem secció!

A qui no li ha passat que, en entrar a algun web, se’ns han il·luminat els ulls amb tants efectes i detalls polits que fan que hi naveguem amb comoditat? Automàticament, etiquetem aquest web com a professional i l’empresa en qüestió se’ns queda gravada a la memòria.

A Can Antaviana ens agrada i som exigents en aquest sentit, en afegir sempre detallets que millorin el disseny i a més, l’efectivitat del web.

És per això, que cada dimarts us mostrarem enllaços d’eines i recursos web per afegir aquests efectes, o per aprendre la diferència entre CSS2 i CSS3, o com començar a aprendre PHP, o eines per les xarxes socials…

Disseny web

• Tutorials i plantilles per dissenyar amb Photoshop (inclou els arxius en .psd)
• Recull de 165 icones per al teu web, en png

Efectes per al web

• Transició de diapositives en pantalla completa (jQuery, CSS3)
• Hovers per imatges (jQuery)

Maquetació web

• Tutorial bàsic per entendre HTML5 i CSS3
• Extensió indispensable per validar codi html (Mozilla Firefox)

Avui destaquem…

• Què és Disseny web adaptatiu o adaptable (Responsive Web Design en anglès)?
  El Disseny web adaptatiu té la finalitat de que el web pugui ser llegit en qualsevol dispositiu, adaptant l’estructura de la pantalla amb la resolució del propi dispositiu.
  Als obradors de Can Antaviana ja hem començat a desenvolupar amb aquesta tècnica. La pàgina promocional de les eines que hem realitzat per diversos bancs de sang, està maquetada amb Disseny web adaptatiu. A més, hem realitzat una presentació per conèixer exactament què és.
• Com aplicar-ho al web
• Exemples de Disseny web adaptatiu
• Un altre exemple de Disseny web adapable
• Per testejar la nostra web adaptativa, podem utilitzar Screenqueri