Machetes, favoritos, opiniones… de un programador
Diseño
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.
Manejando selectores de CSS avanzados
Leo en Smashing Magazine un excelente artículo que repasa los selectores avanzados de CSS.
El CSS es una de las herramientas más poderosas disponibles para diseñadores web. Con él podemos transformar completamente el look de un sitio web en cuestión de minutos, y sin ni siquiera tener que tocar el contenido del mismo. Pero por más que mucho sepamos de CSS hay un hecho interesante y es que los selectores de CSS no se están usando a pleno hoy en día y algunas veces tenemos la tendencia a inundar nuestro HTML con excesivos e innecesarios ids, classes, divs y spans.
La mejor manera de evitar esas plagas y mantener limpia la semántica, es usando selectores CSS más complejos, que puedan apuntarse a elementos específicos sin la necesidad de una clase o un id. Notaremos que haciendo esto mantendremos nuestro código y hojas de estilo aún más flexibles.
15 machetes de CSS para desarrolladores web
17/08/2009
Excelente colección de links a tutoriales que todo diseñador debería tener en sus Favoritos:
En el blog de AMPM: 15 artículos sobre CSS para novatos y no tanto
Excelentes sitios flash con excelentes fotografías
Para los que buscan inspiración, para los que les gusta la fotografía, y para los diseñadores Flash: una colección de 30 excelentemente diseñados sitios en flash de colecciones de excelentes fotografía de alta resolución de los mejores fotógrafos publicitarios de todo el mundo. No pueden pedir más por ser feriado, a disfrutarlo con tu bebida favorita.
Timothy Hogan
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:
Avisos infortunados
La publicidad puede y suele ser muy creativa, y generalmente graciosa adrede. Pero hay veces en que un aviso mal colocado puede tener efectos inesperados, o bien resultar gracioso cuando no debería. Y acá comparto una lista de avisos colocados en el lugar y momento incorrectos…
10 motivos por los que un diseñador deberia tener conocimientos básicos de programación
11/08/2009
en Diseño, Programación
Tomado de un interesante artículo de Kabytes, donde Pablo deja unos tips sobre el tema que no podían estar mejor explicados.
En un ritmo de trabajo donde todos hacemos un poco de todo, diseñar y programar, o viceversa, es importante notar que quienes se dedican pura y exclusivamente al diseño gráfico y pretenden trabajar en diseño web, necesitan sí o sí tener una base de conocimiento de programación.
Yo soy programador, pero en la práctica noto cómo los diseñadores que entienden ALGO de programación, logran mejores productos que aquellos que no. Y a continuación, las conclusiones que cito, para compartir con los diseñadores que trabajan conmigo…
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:
Páginas bien APB gracias a GetSimple, un CMS free y muy liviano
GetSimple es un CMS gratuito que además de ser completamente simple y rápido de usar tiene una gran diferencia con la mayoría de los gestores de contenidos que hay dando vuelta, GetSimple no utiliza base de datos MySQL para almacenar la información: en su lugar utiliza XML, una diferencia mas que importante y que puede ser de muchísima utilidad para las personas que no tienen disponible base de datos en su alojamiento web.
Getsimple podría definirse como una versión ultra minimalista de un WordPress, tiene un tablero para administrar las entradas y las paginas que solo tiene los campos necesarios, sin complicaciones para el usuario. Al igual que WordPress y de la mayoría de los CMS más populares, se le pueden instalar distinto temas visuales.
Utilización XML en lugar de MySQL porque Getsimple es un CMS pensando para sitios con pocas solicitudes, es decir, que no es un CMS desarrollado para miles de visitas diarias, de esa forma se prima la facilidad de instalación y uso, en lugar de las características avanzadas, como por ejemplo lo sería la utilización de plugins.
