dilluns, 31 de desembre del 2012

Metro UI CSS

Metro UI CSS és un conjunt d'estils per crear llocs web amb una interfície similar a Windows 8.

Què inclou Metro UI CSS?
Una grid Responsive
Plantilles
Tipografia: la Segoe UI
Components entre els que poden destacar: Les famoses Tiles de Windows 8, sistema de navegació i menú, Sidebars, efectes acordió, sliders, barres de progrés, carrusel, un set de botons, entre altres.

Si us agrada el nou estil que té Windows, no us podeu perdre aquest conjunt d’estils.

Read more ...

diumenge, 30 de desembre del 2012

Viewport Resizer

Viewport Resizer és una eina basada en el navegador per provar la capacitat de resposta de qualsevol lloc web, és a dir, com de Responsive és el nostre web o aplicació.
Viewport Resizer funciona a través d’un bookmarklet, de manera que ho podem provar en la web que vulguem en qualsevol moment.
Aquesta eina ens ajuda a provar el nostre lloc web en diferents resolucions per veure com es comportarà el web, els textos i imatges les transicions etc., en els diferents dispositius.

El que és més interessant és la quantitat de dispositius entre mòbils, smartphones i tablets que suporta i també la possibilitat de construir el nostre propi bookmarklet seleccionant els dispositius pels quals volem provar el nostre web.


Read more ...

dissabte, 29 de desembre del 2012

Modernizr

Modernizr és una llibreria Javascript que detecta les capacitats d’un navegador web relatives a HTML5 i CSS3 i ens informarà de quines d’aquestes capacitats estan disponibles en el navegador de l’usuari i quines no, en definitiva si volem construir llocs web amb la tecnologia més nova però patim pels navegadors vells fent anar Modernizr no haurem de patir gens.

Quines funcionalitats detecta Modernizr?

Amb Modernizr podem detectar les funcionalitats bàsiques de CSS3 i HTML5.
En el cas de CSS3, detecta si estan o no implementats atributs per fer vores arrodonides, ombres, múltiples fons, etc. A més, existeixen formes de detectar si les animacions CSS estan implementades en el navegador, les columnes CSS, els degradats, transformacions, etc.
Pel que fa a HTML5, Modernizr és capaç d'informar-nos sobre l'existència o no de suport a etiquetes com ÀUDIO, VIDEO i també diverses API com a Local Storage, Session Storage, Web Sockets, SVG, etc.

I això com es tradueix?
Bé és fàcil, fa que el web es vegi bé en tots els navegadors, dóna suport per a:
Chrome, Firefox 3.5 +, IE6 +, Opera 9.6 + i Safari 2 +. També per a dispositius mòbils Android WebKit del navegador, Blackberry 6 +, Firefox Mobile, Safari Mobile de iOS i Opera Mobile.

Ok i con s’utilitza?
  1. Anar a la pàgina de descàrrega de Modernizr
  2. Triar les funcionalitats que es volen “modernitzar”
  3. Descarregar



Read more ...

dijous, 27 de desembre del 2012

34Grid: sistema de grid responsive

D’entre els molts, moltíssims sistemes de grid que trobem per Internet i encara que ens tinguem algun de preferit, avui voldríem destacar 34Grid System.
Aquest sistema ens ofereix una aplicació senzilla i visual per a la configuració de les columnes amb els seus paràmetres bàsics, és a dir, la quantitat de columnes i els espais entre columnes.
Un cop configurada la grid ens permet descarregar un joc d’arxius CSS i HTML llest per usar en el nostre nou lloc web.
Uns de les coses bones que té 34Grid System és que no només contempla la distribució de continguts, el sistema és prou flexible con per tenir en compte el tipus de contingut i l’ús que se’n farà. Així ens trobem que permet la configuració de continguts de tipus text i vídeo i a més afegir widgets de les xarxes socials (Facebook i Twitter).
Com tots o la majoria de sistemes de grids, 34Grid System s’adapta també per a dispositius mòbils i al RWD.


Read more ...