Machetes, favoritos, opiniones… de un programador
HTML
TODO. Absolutamente todo lo que tenés que saber sobre CSS
22/08/2009
En el blog de TripwireMagazine se mandaron con lo que llaman “la mayor lista de recursos para CSS jamás mostrada”. En ella se enumeran todo tipo de hacks y recursos. Por ejemplo, podemos ver cómo crear barras gráficas, también nos enseñan hojas de referencia, ejemplos de tipografía, fondos, entre otras muchas cosas.
Diseños creativos en páginas de Error 404 para inspirarse
En InstantShift vi una genial recopilación de capturas de errores 404 de diversos sitios que implementaron formas creativas de presentarlas sin que el usuarios se enfrente a la vieja y fea página del navegador.
La de Error 404 es una página tan importante como el home de un sitio web, ya que permite guiar al usuario perdido cuando busca algo que no se encuentra o cuando un link ya no está disponible en el sitio web.
Inserta cualquier tipografía en tu sitio web usando @font-face
Leo en CSSBlog un interesante artículo sobre cómo usar el elemento @font-face para incrustar y usar cualquier tipografía en tu sitio web.
@font-face es una propiedad muy útil para definir en un sitio web una o más fuentes que el usuario no tenga instalada en su PC. Sólo es necesario subir la fuente a nuestro sitio web y definirla via CSS.
Para el tipo de fuente, puede usarse una en formato OpenType (.otf) o bien en formato Truetype (.ttf). Vemos un ejemplo si quisiéramos usar la tipografía gratuita Myndraine en los titulares H1:
@font-face {
font-family: "Myndraine";
src: url(http://www.fontex.org/download/Myndraine.otf) format("truetype");
}
h1 {
font-family: "Myndraine", Verdana, sans-serif;
}
Y eso es todo. @font-face está soportada por Internet Explorer 7+, Firefox 3.5+ y Safari 3+ .
Via: CSSBlog
Tipografías standard y cómo usarlas en HTML
Muchas veces una tipografía dada nos puede parecer muy bonita, pero a la hora de usarla en el sitio web que estamos armando nos pueden terminar decepcionando. Y es porque se ven distinto según el sistema operativo que usemos. Para evitar esto hay que saber cuales son las tipografías estándares, y sus equivalentes en distintos sistemas operativos.
En la siguiente imagen se pueden ver los equivalentes entre Windows Vista, Windows anteriores y MacOS.
Y a continuación repasamos el código CSS de las tipografías estándares:
Reset de CSS
El objetico de resetear la hoja de estilos es reducir las inconsistencias del navegador en elementos como alturas de línea, márgenes y tamaños de fuente de encabezados… El razonamiento general detrás de esto puede leerse en este post de Meyerweb. Los estilos de reset suelen aparecer en frameworks de CSS.
Los estilos de reset que se presentan aquí son intencionalmente genéricos. No hay un color o fondo predeterminados para el elemento BODY, por ejemplo. Particularmente, no se recomienda usar tal cual en tus propios proyectos: debería ser ajustado, editado, extendido y tuneado para que coincida con la base de reseteado específico que cada diseño requiera.
En otras palabras, es el puntapié inicial, no una caja negra que “se mira pero no se toca”.
Estos estilos de reset son gratuitos y de dominio público. Puede descargarse una copia del archivo para modificarlo a gusto sin problemas. Y si lo prefieren copiar y pegar, a continuación se muestra el código:
Armando una página en HTML5 desde cero
08/08/2009
en HTML
En este excelente post de Smashing Magazine, se puede ver el paso a paso del armado de una página que use los nuevos tags de HTML5. Hace un completo repaso explicando cómo funciona cada nuevo tag usado y es una genial exploración de esas novedades:
