open-pitu, el blog lliure en català » CSS http://openpitu.com Blog dedicat al software lliure i la programació. Mon, 03 Sep 2012 15:37:52 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 OOCSS (2a part), profunditzant en els widgets http://openpitu.com/2011/08/10/oocss-2a-part-profunditzant-en-els-widgets/ http://openpitu.com/2011/08/10/oocss-2a-part-profunditzant-en-els-widgets/#comments Wed, 10 Aug 2011 22:12:01 +0000 Pitu Sabadí http://openpitu.com/?p=895

Abans de començar us deixo els enllaços que s'han usat de font: Enllaç a la presentació. Enllaç a la pàgina oficial.

Crear objectes reusables

Cal crear una llibreria de components reusables independent del projecte. Per altra banda, també cal crear-ne una per al nostre projecte. La idea principal recau en identificar els objectes per tal de saber-ne fer l'extensió i que sigui reusable, de manera que han de ser extensibles, reusables i aniuables. Si per exemple pensem en un widget butó, a la part comú de tots els projectes podem definir les propietats que sabem que seran comunes, o definir-ne unes per defecte. A partir d'aquí aquesta classe cal anar-la extenent per tal de que tingui l'aspecte desitjat a cada projecte i alhora tinguem els diferents butons que es necessiten.

Simplificar la cascada

No usar #id en els estils. Si usem aquests identificadors, trencarem la reusabilitat d'aquest codi, ja que no hi poden haver diverses intàncies en una mateixa pàgina amb un mateix identificador. Així doncs, #id queda reservat per al seu ús des de JavaScript i en formularis. Així mateix queda prohibit en els estils. També queden prohibits els estils ens línia. Tots sabem que els estils intrusius porten problemes, però a vegades els usem en moments determinats per què ens poden ser còmodes. Ja que estem reformulant el sistema d'estils, també queden prohibits, ja que a part de no ser reusables, ens poden portar a comportaments estranys, cosa a evitar totalment.

Usar  classes i no elements

No hem de ment definir els propietats a div.la-meva-classe, sinó directament .la-meva-classe. Amb la primera opció fem que la propietat només sigui vàlida per a elements div, mentre que amb la segona la classe no depèn del seu element HTML. D'aquesta manera obtenim un codi més reusable i a més no ens incorporarà comportaments estranys.

Minimitza els selectors

A partir d'una classe podem definir elements HTMLS aniuats. Tot i això cal tenir en compte que a vegades ens podem estalviar selectors per a acabar tenint un mateix comportament. D'aquesta manera permetem una millor llegibilitat al codi. Amb aquest fet a més, millorem el rendiment dels nostres CSS.

Sense dependències del context

Els estils d'un objecte són independents del lloc que ocupin de la pàgina. D'aquesta manera no hem de  definir .la-mevaclasse-1 .la-meva-classe-2 {...}, ja que si ho fem així estem supeditant el comportament de la 2 a que estigui dins d'un contenidor 1. D'aquesta manera a més, sabem que podem usar un widget a qualsevol part de la pàgina i que sempre tindrà el mateix comportament.

Evitar dependències innecessàries entre objectes

En aquest sentit, no hem d'agrupar diferents widgets mitjançant comes. Ja que estem lligant aquests objectes, on un canvi a un widget provocarà canvis als altres, cosa que tard o d'hora en sortirem perjudicats. Si ens trobem que constantment necessitem agrupar-los és que alguna cosa estem fent malament, particularment en el procés d'identificació.

Extenent els objectes

S'usa el concepte d'orientació a objectes típic en els CSS. D'aquesta manera l'objecte fill hereda les propietats del pare. Comentarem, amb exemples com es fa aquesta extensió més en detall en un tercer post, com ja vam prometre.

Objectes compostos

Algunes components de la pàgina estaran formades per diversos objectes. En aquest cas no usem extensió, sinó composició. En aquest moment ens trobem en un dels majors problemes dels CSS: manca de control en l'herència i la cascada. Les regles han de ser específiques, de manera que no impliqui res l'ordre en el qual s'apliquen. Sinó és així augmentem la composició. Cal ser conscient en que tots els noms de les classes formen part del namespace global de CSS, de manera que cal ser coherent en la definició de noms.]]>

Avui mirarem les recomanacions a seguir alhora d’implementar els widgets, en el nostre sistema de CSS. Primer de tot, recordar que els widgets estan formats per dues parts, per una banda la pròpia del framework, i per l’altra la pròpia de cada un dels projectes. D’aquesta manera podem especialitzar tots els nostres projectes amb el seu tema personalitzat. Primer de tot cal fer una feina de detecció dels widgets, on cada un respón a una funcionalitat, creant així la nostra llibreria de widgets.

Abans de començar us deixo els enllaços que s’han usat de font:

Enllaç a la presentació.

Enllaç a la pàgina oficial.

Crear objectes reusables

Cal crear una llibreria de components reusables independent del projecte. Per altra banda, també cal crear-ne una per al nostre projecte. La idea principal recau en identificar els objectes per tal de saber-ne fer l’extensió i que sigui reusable, de manera que han de ser extensibles, reusables i aniuables.

Si per exemple pensem en un widget butó, a la part comú de tots els projectes podem definir les propietats que sabem que seran comunes, o definir-ne unes per defecte. A partir d’aquí aquesta classe cal anar-la extenent per tal de que tingui l’aspecte desitjat a cada projecte i alhora tinguem els diferents butons que es necessiten.

Simplificar la cascada

No usar #id en els estils. Si usem aquests identificadors, trencarem la reusabilitat d’aquest codi, ja que no hi poden haver diverses intàncies en una mateixa pàgina amb un mateix identificador. Així doncs, #id queda reservat per al seu ús des de JavaScript i en formularis. Així mateix queda prohibit en els estils.

També queden prohibits els estils ens línia. Tots sabem que els estils intrusius porten problemes, però a vegades els usem en moments determinats per què ens poden ser còmodes. Ja que estem reformulant el sistema d’estils, també queden prohibits, ja que a part de no ser reusables, ens poden portar a comportaments estranys, cosa a evitar totalment.

Usar  classes i no elements

No hem de ment definir els propietats a div.la-meva-classe, sinó directament .la-meva-classe. Amb la primera opció fem que la propietat només sigui vàlida per a elements div, mentre que amb la segona la classe no depèn del seu element HTML. D’aquesta manera obtenim un codi més reusable i a més no ens incorporarà comportaments estranys.

Minimitza els selectors

A partir d’una classe podem definir elements HTMLS aniuats. Tot i això cal tenir en compte que a vegades ens podem estalviar selectors per a acabar tenint un mateix comportament. D’aquesta manera permetem una millor llegibilitat al codi. Amb aquest fet a més, millorem el rendiment dels nostres CSS.

Sense dependències del context

Els estils d’un objecte són independents del lloc que ocupin de la pàgina. D’aquesta manera no hem de  definir .la-mevaclasse-1 .la-meva-classe-2 {…}, ja que si ho fem així estem supeditant el comportament de la 2 a que estigui dins d’un contenidor 1. D’aquesta manera a més, sabem que podem usar un widget a qualsevol part de la pàgina i que sempre tindrà el mateix comportament.

Evitar dependències innecessàries entre objectes

En aquest sentit, no hem d’agrupar diferents widgets mitjançant comes. Ja que estem lligant aquests objectes, on un canvi a un widget provocarà canvis als altres, cosa que tard o d’hora en sortirem perjudicats. Si ens trobem que constantment necessitem agrupar-los és que alguna cosa estem fent malament, particularment en el procés d’identificació.

Extenent els objectes

S’usa el concepte d’orientació a objectes típic en els CSS. D’aquesta manera l’objecte fill hereda les propietats del pare. Comentarem, amb exemples com es fa aquesta extensió més en detall en un tercer post, com ja vam prometre.

Objectes compostos

Algunes components de la pàgina estaran formades per diversos objectes. En aquest cas no usem extensió, sinó composició. En aquest moment ens trobem en un dels majors problemes dels CSS: manca de control en l’herència i la cascada. Les regles han de ser específiques, de manera que no impliqui res l’ordre en el qual s’apliquen. Sinó és així augmentem la composició. Cal ser conscient en que tots els noms de les classes formen part del namespace global de CSS, de manera que cal ser coherent en la definició de noms.

]]> http://openpitu.com/2011/08/10/oocss-2a-part-profunditzant-en-els-widgets/feed/ 0 OOCSS, Object-Oriented CSS http://openpitu.com/2011/08/04/oocss-object-oriented-css/ http://openpitu.com/2011/08/04/oocss-object-oriented-css/#comments Thu, 04 Aug 2011 21:34:07 +0000 Pitu Sabadí http://openpitu.com/?p=864 Reusables

Extensibles

Anidats

Un cop ja sabem que hi ha una part anomenada Framework i una com a tema, comentarem quina és l'estructura de cada un. El framework està format per 5 components: Reset, Base, Grid, Widgets, Helpers. El tema està format per Widgets i opcionalment per Pages. Així doncs ja podem intuir que en el Framework hi tindrem definides les propietats generals, comuns a tots els projectes, mentre que els aspectes concrets, els widgets, els podrem redefinir a cada tema. Abans d'entrar en tema, us faig saber que queden pendents dos posts al respecte. Un explicant les bones praxis per a l'ús de OOCSS, i un altre amb alguns exemples per a fer-ho més clar, ja que un tros de codi, val més que mil paraules.

Reset + Base

Podem usar-ne d'existents. Aquestes components ens ajuden a eliminar inconsistències entre navegadors i crear una base comuna. Tot i que ens podríem fer el nostre es recomana usar-ne de ja fets i provats com: 960.gs, formalize.me, normalize.css, html5boilerplate, YUI...

Grid

Aquest és un dels aspectes més interessants del sistema. Es tracta de la definició dels layouts. En aquest sentit, es defineixen amb % la relació. De l'estil si és un 100% si són 2 50%, etc. D'aquesta manera podrem generar fàcilment els layouts. Seran reusables i cada un el podrem customitzar com volguem. Es recomana usar-ne de ja existents, tot i que ens podem crear el nostre, com per exemple: 960.gs, 978.gs, blueprint, YUI...

Widgets, objectes reusables

Els widgets poden ser independents del projecte o no. Es tracta de definir un conjunt de classes CSS relacionades, que responen a una funcionalitat determinada. En aquest sentit, està bé saber quina part és comuna i quina part forma part del tema, de manera que podrem tenir cada objecte personalitzat per projecte.

Pages, opcional per al tema

Les pages són interessants per a projectes molt concrets, en els qual es vol que cada pàgina o secció de l'aplicació o web, es vulgui mostrar amb estils totalment diferents. D'aquesta manera podríem diferenciar cada una de les pàgines usant la composició. De fet, es podrien fer amb widgets, però en els casos que sigui útil és millor fer-ho per tal de tenir

Helpers

Es tracta de classes petites, que es poden usar per tots els objectes. Els usos típics poden ser per fer elements hiddens, cantons rodos, ombres...

Enllaços a les fonts de l'article. Enllaç a la presentació. Enllaç a la pàgina oficial.]]>

Fa uns dies vaig veure una presentació Power Point que tractava dels OOCSS. No havia tingut temps a mirar-la en detall fins avui, on realment l’he llegida atentament, i m’he mirat els exemple de la pàgina web oficial. Mitjançant aquesta tècnica, podem tenir ordenat el nostre codi CSS, i que aquest sigui plenament reusable. Tan és així, que està estructurat de tal manera que diferents projectes comparteixen un conjunt de normes CSS, és el què anomanem Framework, i una part concreta per a cada projecte, anomenat tema.

Reusables

Extensibles

Anidats


Un cop ja sabem que hi ha una part anomenada Framework i una com a tema, comentarem quina és l’estructura de cada un. El framework està format per 5 components: Reset, Base, Grid, Widgets, Helpers. El tema està format per Widgets i opcionalment per Pages. Així doncs ja podem intuir que en el Framework hi tindrem definides les propietats generals, comuns a tots els projectes, mentre que els aspectes concrets, els widgets, els podrem redefinir a cada tema.

Abans d’entrar en tema, us faig saber que queden pendents dos posts al respecte. Un explicant les bones praxis per a l’ús de OOCSS, i un altre amb alguns exemples per a fer-ho més clar, ja que un tros de codi, val més que mil paraules.

Reset + Base

Podem usar-ne d’existents. Aquestes components ens ajuden a eliminar inconsistències entre navegadors i crear una base comuna. Tot i que ens podríem fer el nostre es recomana usar-ne de ja fets i provats com: 960.gs, formalize.me, normalize.css, html5boilerplate, YUI…

Grid

Aquest és un dels aspectes més interessants del sistema. Es tracta de la definició dels layouts. En aquest sentit, es defineixen amb % la relació. De l’estil si és un 100% si són 2 50%, etc. D’aquesta manera podrem generar fàcilment els layouts. Seran reusables i cada un el podrem customitzar com volguem. Es recomana usar-ne de ja existents, tot i que ens podem crear el nostre, com per exemple: 960.gs, 978.gs, blueprint, YUI…

Widgets, objectes reusables

Els widgets poden ser independents del projecte o no. Es tracta de definir un conjunt de classes CSS relacionades, que responen a una funcionalitat determinada. En aquest sentit, està bé saber quina part és comuna i quina part forma part del tema, de manera que podrem tenir cada objecte personalitzat per projecte.

Pages, opcional per al tema

Les pages són interessants per a projectes molt concrets, en els qual es vol que cada pàgina o secció de l’aplicació o web, es vulgui mostrar amb estils totalment diferents. D’aquesta manera podríem diferenciar cada una de les pàgines usant la composició. De fet, es podrien fer amb widgets, però en els casos que sigui útil és millor fer-ho per tal de tenir

Helpers

Es tracta de classes petites, que es poden usar per tots els objectes. Els usos típics poden ser per fer elements hiddens, cantons rodos, ombres…

Enllaços a les fonts de l’article.

Enllaç a la presentació.

Enllaç a la pàgina oficial.

]]> http://openpitu.com/2011/08/04/oocss-object-oriented-css/feed/ 0 Crear una font-family a mb una font .ttf (@font-face) http://openpitu.com/2011/03/17/crear-una-font-family-a-partir-duna-font-ttf-amb-font-face/ http://openpitu.com/2011/03/17/crear-una-font-family-a-partir-duna-font-ttf-amb-font-face/#comments Thu, 17 Mar 2011 00:28:12 +0000 Pitu Sabadí http://openpitu.com/?p=487 El seu ús és molt senzill. Primer de tot cal obtenir el fitxer .ttf desitjat. En podem trobar una gran quantitat a Internet. Anem a veure-ho amb un exemple pràctic. Aquest blog, utilitza tres font-family pròpies. Els textos estan amb la font de sistema d'Ubuntu 10.10. Els que no useu aquest sistema operatiu us la podeu baixar gratuïtament. En aquest cas, al nostre fitxer CSS caldria definir un @font-face:
  1. @font-face {
  2. font-family: Ubuntu;
  3. src: url(http://openpitu.com/wp-content/themes/starkers-html5/style/fonts/Ubuntu-R.ttf);
  4. }
En aquest cas ja podem usar la font-family acabada de definir. En aquest cas ens podem crear una classe que definirà l'ús d'aquesta font-family:
  1. .ubuntu_font{
  2. font-family: Ubuntu;
  3. }
D'aquesta manera podem usar qualsevol font que desitgem sense necessitat de crear imatges i podent crear així textos que usen aquella font dinàmicament.]]>

Entre les tendències actuals del disseny web hi destaca l’ús de fonts personalitzades. Per a fer aquest tipus de fonts, tradicionalment, calia fer una imatge amb les fonts desitjades. Amb l’arribada de les tècniques CSS3, que estan revolucionant el món del disseny web, es poden crear font-family a partir de les fonts que desitjem.

El seu ús és molt senzill. Primer de tot cal obtenir el fitxer .ttf desitjat. En podem trobar una gran quantitat a Internet. Anem a veure-ho amb un exemple pràctic.

Aquest blog, utilitza tres font-family pròpies. Els textos estan amb la font de sistema d’Ubuntu 10.10. Els que no useu aquest sistema operatiu us la podeu baixar gratuïtament. En aquest cas, al nostre fitxer CSS caldria definir un @font-face:

  1. @font-face {
  2. font-family: Ubuntu;
  3. src: url(http://openpitu.com/wp-content/themes/starkers-html5/style/fonts/Ubuntu-R.ttf);
  4. }

En aquest cas ja podem usar la font-family acabada de definir. En aquest cas ens podem crear una classe que definirà l’ús d’aquesta font-family:

  1. .ubuntu_font{
  2. font-family: Ubuntu;
  3. }

D’aquesta manera podem usar qualsevol font que desitgem sense necessitat de crear imatges i podent crear així textos que usen aquella font dinàmicament. Per exemple

  1. <p class=”ubuntu_font”>Hola que tal.</p>
]]> http://openpitu.com/2011/03/17/crear-una-font-family-a-partir-duna-font-ttf-amb-font-face/feed/ 4 Less Framework 2 http://openpitu.com/2010/09/06/less-framework-2/ http://openpitu.com/2010/09/06/less-framework-2/#comments Mon, 06 Sep 2010 22:35:43 +0000 Pitu Sabadí http://openpitu.com/?p=171

Less Framework 2 CSS3 ofereix:
  1. Dues columnes a 320px per a smartphones.
  2. Cinc columnes a 768px per a tablets i netbooks.
  3. Vuit columes a 1280px per a ordinadors de sobre taula i portàtils.
Es pot provar des de la pàgina oficial. Gràcies a Pixelco Blog]]>

Less Framework és un framework de desenvolupament web per a tot tipus de dispositius, també els mòbils. El què es pretén amb el seu ús, es que no s’hagi d’escriure CSS diferents per a cada una de les resolucions que s’utilitzaran. Com tots els FW, porta definides un conjunt de funcionalitats mínimes amb valors predefinits com poden ser les fonts o una reixeta (grid).

Less Framework 2 CSS3 ofereix:

  1. Dues columnes a 320px per a smartphones.
  2. Cinc columnes a 768px per a tablets i netbooks.
  3. Vuit columes a 1280px per a ordinadors de sobre taula i portàtils.

Es pot provar des de la pàgina oficial. Gràcies a Pixelco Blog

]]> http://openpitu.com/2010/09/06/less-framework-2/feed/ 1 FireQuery, una extenció de Firebug per desenvolupar en jQuery http://openpitu.com/2010/08/29/firequery-una-extencio-de-firebug-per-desenvolupar-en-jquery/ http://openpitu.com/2010/08/29/firequery-una-extencio-de-firebug-per-desenvolupar-en-jquery/#comments Sun, 29 Aug 2010 12:52:04 +0000 Pitu Sabadí http://openpitu.com/?p=152 Doncs ara podem veure una extensió que uneix ambdues coses: amb FireQuery, podrem examinar els objectes generats per jQuery i jQeritzar la pàgina. Realment pot millorar les funcions de Firebug. Pots descarregar-te i instal·lar l'extensió des de la web oficial.]]>

Actualment quasi tothom quan ha de desenvolupar en JavaScript, usa el framework jQuery. Així mateix, una de les bases per a qualsevol programador web és l’extensió del Firefox, Firebug.

Doncs ara podem veure una extensió que uneix ambdues coses: amb FireQuery, podrem examinar els objectes generats per jQuery i jQeritzar la pàgina. Realment pot millorar les funcions de Firebug.

Pots descarregar-te i instal·lar l’extensió des de la web oficial.

]]> http://openpitu.com/2010/08/29/firequery-una-extencio-de-firebug-per-desenvolupar-en-jquery/feed/ 1 Color Scheme Designer http://openpitu.com/2010/08/23/color-scheme-designer/ http://openpitu.com/2010/08/23/color-scheme-designer/#comments Mon, 23 Aug 2010 15:45:20 +0000 Pitu Sabadí http://openpitu.com/?p=140 aplicació web de la mà de Genbeta. Fins fa poc no l'havia provat i realment dóna prou bons resultats. Aquesta aplicació ens serveix per a trobar una bona combinació de colors a partir d'un color base ja fixat. No és que sigui la millor aplicació però ens pot ser utils a tots aquells que no som dissenyadors i estem en el món del desenvolupament web. Així doncs, es tracta de donar un color i ens en mostrarà una combinació de colors amb la qual jugar en el nostre site. La solució que ens mostra podem fer una vista prèvia en un site estàndard per veure com quedaria una web amb aquestes tonalitats. Un cop trobada la combinació desitjada podem exportar-la a HTML amb CSS, text pla, o paltes de Photoshop o GIMP. És molt fàcil d'utilitzar ja ho veureu. Finalment en el lloc anuncien que properament treuran versions descargables per a Windows, Mac i iPhone. Per acabar s'ha de dir que l'aplicació té un punt a favor molt important, i és que no usa flash en cap moment. Accedir a l'article complet.]]>

Ja fa uns dies vaig trobar aquesta aplicació web de la mà de Genbeta. Fins fa poc no l’havia provat i realment dóna prou bons resultats. Aquesta aplicació ens serveix per a trobar una bona combinació de colors a partir d’un color base ja fixat. No és que sigui la millor aplicació però ens pot ser utils a tots aquells que no som dissenyadors i estem en el món del desenvolupament web.

Així doncs, es tracta de donar un color i ens en mostrarà una combinació de colors amb la qual jugar en el nostre site. La solució que ens mostra podem fer una vista prèvia en un site estàndard per veure com quedaria una web amb aquestes tonalitats. Un cop trobada la combinació desitjada podem exportar-la a HTML amb CSS, text pla, o paltes de Photoshop o GIMP. És molt fàcil d’utilitzar ja ho veureu.

Finalment en el lloc anuncien que properament treuran versions descargables per a Windows, Mac i iPhone. Per acabar s’ha de dir que l’aplicació té un punt a favor molt important, i és que no usa flash en cap moment.

Pots accedir a Color Scheme Designer.

]]> http://openpitu.com/2010/08/23/color-scheme-designer/feed/ 0 Degradats de fons només amb CSS http://openpitu.com/2010/08/16/degradats-de-fons-nomes-amb-css/ http://openpitu.com/2010/08/16/degradats-de-fons-nomes-amb-css/#comments Mon, 16 Aug 2010 19:57:34 +0000 Pitu Sabadí http://openpitu.com/?p=135 una solució prou bona que funciona amb els tres navegadors:
  1. background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000));
  2. background: -moz-linear-gradient(top,  #ccc,  #000);
  3. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
La primera línia és per a Chrome i Safari, la segona per a Firefox (cal que sigui la versió 3.6 o superior) i la darrera per a Internet Explorer. Article complet.]]>

En el disseny web, treballar amb imatges és bastant feixug, i en la major part dels cops és millor usar propietats CSS. Fins al moment sempre que volia fer algun fons amb un degradat el feia creant la imatge, cosa que genera una sèrie d’inconvenients que molts de nosaltres hem anat patint.

CSS gradient.

Avui, buscant alguna alternativa amb només CSS, he trobat una solució prou bona que funciona amb els tres navegadors:

  1. background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000));
  2. background: -moz-linear-gradient(top,  #ccc,  #000);
  3. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′);

La primera línia és per a Chrome i Safari, la segona per a Firefox (cal que sigui la versió 3.6 o superior) i la darrera per a Internet Explorer.

Espero que us sigui d’utilitat.

]]> http://openpitu.com/2010/08/16/degradats-de-fons-nomes-amb-css/feed/ 0 Millora la llegibilitat amb CSS http://openpitu.com/2010/07/08/millora-la-llegibilitat-amb-css/ http://openpitu.com/2010/07/08/millora-la-llegibilitat-amb-css/#comments Thu, 08 Jul 2010 23:00:44 +0000 Pitu Sabadí http://openpitu.com/?p=106 text-rendering, que va introduir Firefox3.0 i que ara també usen els sistemes basats en webkit (Safari i el gran Chrome). imatge CSS Com tota propietat CSS podem donar-li diferents valors, per tal de que actuï d'una o altra manera:
  • optimizeLegibility: Dóna prioritat a la llegibilitat del text. Habilita kerning i lligadura de tipografia.
  • auto: Per defecte usa el valor anterior per a lletres menors de 10px i el següent per a majors.
  • optimizeSpeed: Dóna prioritat a la velocitat amb la qual es mostrarà el text.
  • geometricPrecision: Dóna prioritat a la geometria del text.
Per tant la podem usar tal i com utilitzem qualsevol propietat CSS i podem jugar amb les diferents prioritats per tal de trobar un bon equilibri a la web. Un cop més, i com normalment ens té acostumats, és una propietat que no funciona amb Internet Explorer de Microsoft. Esperem que mica en mica el món web es vagi unificant i es segueixin els estàndards que es van marcant. Llegeix l'article complet per veure l'exemple]]>

La llegibilitat és un conjunt de característiques que fan que un text o tipografia sigui més fàcil de llegir. Aquesta propietat es pot millorar amb diverses tècniques. Avui em centraré amb la propietat CSS text-rendering, que va introduir Firefox3.0 i que ara també usen els sistemes basats en webkit (Safari i el gran Chrome).

imatge CSS

Com tota propietat CSS podem donar-li diferents valors, per tal de que actuï d’una o altra manera:

  1. optimizeLegibility: Dóna prioritat a la llegibilitat del text. Habilita kerning i lligadura de tipografia.
  2. auto: Per defecte usa el valor anterior per a lletres menors de 10px i el següent per a majors.
  3. optimizeSpeed: Dóna prioritat a la velocitat amb la qual es mostrarà el text.
  4. geometricPrecision: Dóna prioritat a la geometria del text.

Per tant la podem usar tal i com utilitzem qualsevol propietat CSS i podem jugar amb les diferents prioritats per tal de trobar un bon equilibri a la web. Per exemple:

  1. #id_element, .classe_element{
  2. text-rendering: auto;
  3. }

Un cop més, i com normalment ens té acostumats, és una propietat que no funciona amb Internet Explorer de Microsoft. Esperem que mica en mica el món web es vagi unificant i es segueixin els estàndards que es van marcant.

]]> http://openpitu.com/2010/07/08/millora-la-llegibilitat-amb-css/feed/ 2 Lightbox fet amb semàntica CSS3 http://openpitu.com/2010/06/27/lightbox-fet-amb-semantica-css3/ http://openpitu.com/2010/06/27/lightbox-fet-amb-semantica-css3/#comments Sun, 27 Jun 2010 23:46:57 +0000 Pitu Sabadí http://openpitu.com/?p=76 article en el qual s'explicava com aconseguir un producte semblant al que obtenim amb Lightbox o Shadorbox però només en CSS i, evidentment, prescindint dels bonics efectes (o no) que poden fer les dues llibreries esmentades. Podeu veure un exemple en viu del resultat que han obtingut i fer-te una idea de què podries arribar aconseguir només amb CSS i quan fora necessari l'ús del JavaScript. Segons l'article original, s'està arribant a un ús inadequat de JavaScript, amb frameworks com jQuery, ja que donen uns resultats excel·lents a la vista. Tot i aquest darrer motiu, troben necessari donar una solució a aquest problema i per això mostren com fer-ho per als fanàtics del CSS. Continuar llegint...]]>

Ja fa dies, vaig veure aquest article en el qual s’explicava com aconseguir un producte semblant al que obtenim amb Lightbox o Shadorbox però només en CSS i, evidentment, prescindint dels bonics efectes (o no) que poden fer les dues llibreries esmentades.

Podeu veure un exemple en viu del resultat que han obtingut i fer-te una idea de què podries arribar aconseguir només amb CSS i quan fora necessari l’ús del JavaScript.

Segons l’article original, s’està arribant a un ús inadequat de JavaScript, amb frameworks com jQuery, ja que donen uns resultats excel·lents a la vista. Tot i aquest darrer motiu, troben necessari donar una solució a aquest problema i per això mostren com fer-ho per als fanàtics del CSS.

Anem a veure una mica el codi que utilitzen. Anem al gra, és a dir, veurem com cal declarar el div que volem que formi el “Lightbox” i com definir els estils CSS per a que actuï de la manera desitjada.

Primer l’html:

  1. <div class=”lightbox” id=”content”><div class=”W60p h400 scroll”>
  2. <h2>El nostre contingut</h2>
  3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis felis suscipit tellus euismod varius quis ut nibh. Curabitur in ante nunc, vitae venenatis dui.</p>
  4. <p><a href=”#” title=”Close This Content Lightbox”>Tanca <span>X</span></a></p>
  5. </div></div>

El css que ens faria falta:

  1. html, body { height: 100%; overflow: hidden; width: 100%; margin: 0; padding: 0; }
  2. body { overflow-y: auto; }
  3. .lightbox { left: -999em; position: absolute; }
  4. .lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
  5. .lightbox:target .close a { background: rgba(0, 0, 0, 0.75); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }
  6. .close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
  7. .close {text-indent: -999em;}

A nivell general aquest seria el secret per tal d’aconseguir el lightbox, tot i que no s’acaba aquí i, si ho vols utilitzar el recomano que vagis a Pixelovers i segueixis un per un els passos que expliquen, per tal d’aconseguir un bon funcionament amb tots els navegadors.

]]> http://openpitu.com/2010/06/27/lightbox-fet-amb-semantica-css3/feed/ 0 YUI Compressor, comprimeix JS i CSS http://openpitu.com/2010/06/22/yui-compressor-utilitat-per-comprimir-js-i-css/ http://openpitu.com/2010/06/22/yui-compressor-utilitat-per-comprimir-js-i-css/#comments Tue, 22 Jun 2010 23:01:19 +0000 Pitu Sabadí http://openpitu.com/?p=53 desarrolloweb.com vaig llegir una notícia que feia respecte a aquesta utilitat. És de Yahoo i permet comprimir els fitxers JavaScript i CSS. Actua esborrant comentaris, blancs i canvia el nom d'algunes variables. D'aquesta manera redueix el tamany del fitxer i així mateix el seu temps de càrrega. Hi ha disponible una versió online per tal de no haver de tenir que executa la llibreria en Java. Acabo de fer la prova amb la darrera versió de jQuery i l'ha comprimit un 53%, no està gens malament. Els cops que l'he provat em dóna bons resultats, però tingues present que sempre t'has de guardar el fitxer original si l'has programat tu, perquè genera un codi impossible de llegir, tot en una mateixa línia. ]]>

Fa uns dies, a desarrolloweb.com vaig llegir una notícia que feia respecte a aquesta utilitat. És de Yahoo i permet comprimir els fitxers JavaScript i CSS. Actua esborrant comentaris, blancs i canvia el nom d’algunes variables. D’aquesta manera redueix el tamany del fitxer i així mateix el seu temps de càrrega. Hi ha disponible una versió online per tal de no haver de tenir que executa la llibreria en Java.

Acabo de fer la prova amb la darrera versió de jQuery i l’ha comprimit un 53%, no està gens malament. Els cops que l’he provat em dóna bons resultats, però tingues present que sempre t’has de guardar el fitxer original si l’has programat tu, perquè genera un codi impossible de llegir, tot en una mateixa línia.

]]> http://openpitu.com/2010/06/22/yui-compressor-utilitat-per-comprimir-js-i-css/feed/ 0