dimecres 6 març 2013 per
Josep Patau
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.
blog, css3, Disseny, HTML5, portfolio
divendres 1 febrer 2013 per
Josep Patau
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.
css3, Disseny web, experiments, HTML5
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 23 octubre 2012 per
Sílvia Vila Brustenga
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:
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:
checkbox, contacte, css3, eines, formularis, jQuery, radio button, recursos, recursos web, select, web
dimarts 18 setembre 2012 per
Sílvia Vila Brustenga
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
I a més…
css3, HTML5, recursos web, w3c, web semàntica
dimarts 28 agost 2012 per
Sílvia Vila Brustenga
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
css3, Disseny web, eines, HTML5, interacció 2.0, jQuery, recursos, web 2.0
