Dilluns 10 novembre 2014 per
Mireia Tort
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!
català, continguts, Disseny web, disseny web adaptatiu
Dimecres 23 gener 2013 per
Sílvia Vila Brustenga

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
Adobe, Disseny, disseny web adaptatiu, Photoshop, responsive design, tutorials, web
Dimarts 8 gener 2013 per
Sílvia Vila Brustenga

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…
Via: Speckyboy
css3, disseny web adaptatiu, google maps, jQuery, plugin, recursos web, responsive design
Dimarts 21 agost 2012 per
Sílvia Vila Brustenga

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
Efectes per al web
Maquetació web
Avui destaquem…
css3, Disseny web, disseny web adaptatiu, eines, HTML5, jQuery, recursos, responsive design