Posts Tagged: xhtml


1
Jul 09

Grid framework CSS de 1 línea

La idea de 1 line CSS Grid Framework es poder crear un layout CSS basado en grillas con solo una línea de código CSS:

.dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }

Este sistema parte del principio de que cada columna puede dividirse en 2, por lo que pueden hacerse layouts de 2, 4, 8, 16… columnas. Obteniendo este resultado:

1-line-css-framework

Funciona con px, em y porcentajes. Es compatible con todos los navagadores, hasta IE5.5. El autor no lo recomienda para producción, si no más bien como una demostración de lo que puede hacerse con solo una línea de CSS.

Otra opción un poco más completa pero ultra pequeña, del mismo autor, es Malo, un  framework CSS de 8 líneas. Y para el que lo anterior no le alcance tiene Emastic y The Golden Grid.

Por mi parte, hice un layout fluido clásico de blog de 3 columnas: header, contenido, dos sidebars y footer.

En conclusión,  1 line CSS Grid Framework es muy fácil de usar y puede servir para crear sistemas de grillas simples.


3
Jun 09

Diferencias entre los tags b, i, strong y em

Ya se discutió (y bien) este tema en otros lugares, pero a raíz de un post en Kabytes y viendo que no está muy clara cual es la diferencia entre los tags  <b> vs. <strong> y <i> vs. <em> voy a tratar de explicarla. Aclaro que ésto es de interés solo para los Talibanes de la Accesibilidad y los Maestros del SEO.

Supongamos que quiero poner un texto en negrita, ¿utilizo <b> o <strong>? La respuesta es ninguno de los dos, hay que usar la propiedad CSS font-weight. Veamos:

El código XHTML:

<p>Este texto lo quiero en negrita</p>

y el código CSS correspondiente:

p { font-weight: bold; }

El caso de la itálica es similar, debemos usar la propiedad CSS font-style:

p { font-style: italic; }

Entonces, ¿para qué sirven <i> y <b>? Estos tags sirven para dar formato, pero como enseña el Tao del CSS el formato debe darse a través de las hojas de estilo, por lo que en su lugar hay que usar las propiedades CSS font-style y font-weight.

En cuanto a <em> (emphasis) y <strong> (strong emphasis) son elementos estructurales que deben utilizarse en sentido semántico, da la casualidad (o no) que por defecto los navegadores los muestran, respectivamente, como itálica y negrita. Un Talibán de la Accesibilidad nos dirá que un texto con em será leído por un lector de pantalla con más énfasis, y un Maestro del SEO dirá que si ponemos strong a las keywords, Google indexará nuestra página en primer lugar.

Espero que se haya entendido la diferencia. Yo por mi parte no hago mucho caso de todo lo anterior y uso lo que más cómodo me queda.


28
Dec 08

Tutoriales y consejos para diseñadores web


5
Dec 08

Layouts CSS y XHTML

code sucks
Hay muchos sitios con layouts CSS, pero Code Sucks es el mejor que he visto. El código XHTML y CSS es claro, simple y muy fácil de entender para modificarlo. Hay 95 diseños distintos para elegir: 1 columna, 2 columnas, 3 columnas, etc.

Los layouts de Code Sucks son perfectos para usar como base en el diseño de templates para CMS.


18
Apr 08

Fuentes web seguras

Al momento de diseñar una página web es importante elegir fuentes que estén instaladas en todos los sistemas operativos, ya que si no están disponibles el navegador mostrará la fuente por defecto.

La siguiente tabla muestra las fuentes más comunes y con que sistemas operativos vienen. Son consideradas fuentes web seguras:

Genérica Fuente Windows
9x/2K/XP
Windows
Vista
Mac
Classic
Mac
OS X
Linux
Unix
serif Cambria Common Web Safe Font
Constantia Common Web Safe Font
Times New Roman Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
Times Common Web Safe Font Common Web Safe Font Common Web Safe Font
Georgia Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
sans-serif Andale Mono Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
Arial Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
Arial Black Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
Calibri Common Web Safe Font
Candara Common Web Safe Font
Century Gothic Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
Corbel Common Web Safe Font
Helvetica Common Web Safe Font Common Web Safe Font Common Web Safe Font
Impact Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
Trebuchet MS Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
Verdana Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
cursive Comic Sans MS Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
monospace Consolas Common Web Safe Font
Courier New Common Web Safe Font Common Web Safe Font Less Common Web Safe Font Common Web Safe Font Less Common Web Safe Font
Courier Common Web Safe Font Common Web Safe Font Common Web Safe Font

La marca verde indica fuentes muy comunes, la amarilla indica fuentes no tan comunes pero generalmente aceptadas como fuentes web seguras.

Para mayor compatibilidad es conveniente indicar fuentes alternativas. Por ejemplo:

#fuente {
font-family: Trebuchet, Verdana, Helvetica, sans-serif;
}

Si la fuente primaria (Trebuchet) no está instalada el navegador usará la siguiente (Verdana), y así sucesivamente. Se indica la fuente genérica al final por si ninguna de las anteriores está instalada (en el ejemplo se mostrará la fuente sans-serif genérica).

Fuente: Dustin Brewer