Perraco …otro Geek en la red…
Tag: diseño

Libros gratuitos de programación y diseño de webs

LibrosWeb.es

Lo bueno y gratis dos veces bueno. Gracias a El Imperio Cordobés descubro una colección de libros gratuitos en línea ofrecidos por LibrosWeb.es y que después de echarles un buen vistazo he de clasificar como muy buenos. En estos momentos se ofrecen sólo unos cuantos libros de introducción a Javascript, AJAX, CSS, XHTML y una guía completa de la framework para PHP Simfony. También se incluye la opción de descargarlos en formato pdf, y que más se puede pedir..., ¿he mencionado que son gratuitos?

Enlace: LibrosWeb.es | Vía: El Imperio Cordobés

Truco para analizar los márgenes de capas en CSS

Con este sencillo truco podrás analizar los márgenes de todas las capas definidas en tu CSS mostrando un borde coloreado en cada una de estas, esta técnica puede ser de gran ayuda para encontrar esos problemas que nos vuelven locos causados por márgenes mal definidos. Para usarlo copia el código tal y como está en cualquier parte del fichero CSS.

* {outline: 2px dotted red}
* * {outline: 2px dotted green}
* * * {outline: 2px dotted orange}
* * * * {outline: 2px dotted blue}
* * * * * {outline: 1px solid red}
* * * * * * {outline: 1px solid green}
* * * * * * * {outline: 1px solid orange}
* * * * * * * * {outline: 1px solid blue}

Margenes en CSS

Como rotar imágenes al azar en CSS

Imágenes al Azar en CSSHace poco os mostré como rotar imágenes aleatorias en la cabecera de Wordpress a través de PHP. En este tutorial os mostraré otra técnica en la que con una pequeño y rápido cargador en PHP podréis mostrar cualquier imagen al azar directamente desde CSS. Para empezar deberás agrupar y nombrar las imágenes que deseas rotar con el mismo nombre y seguidas de un número secuencial. Por ejemplo:

logo_1.png, logo_2.png, logo_3.png, ...
borde_1.png, borde_2.png, borde_3.png, ...
foto_1.png, foto_2.png, foto_3.png, ...
......

 (...seguir leyendo el resto del artículo  » ) 

Recursos para diseño de webs

Aquí tenéis una corta lista de recursos gratuitos para hacer vuestro diseño de webs más ameno.

Enlaces:

Browsershots – Visualiza una página en varias versiones de distintos navegadores. Una vez suministres el enlace sólo se trata de esperar un rato y actualizar la página para ver varias capturas expandibles. Dale algo de tiempo.

Creative Commons – Obtén de modo muy sencillo una verdadera licencia para proteger los contenidos de tu página.

Css-Ref – Fácil referencia de elementos CSS.

Emezeta Rank – Obtén un análisis completo del estado de tu web, con una explicación de cada parámetro evaluado fácil de entender.

Robots.txt Checker – Analiza tu fichero robots.txt exhaustivamente.

Colorschemer – Excelente buscador de esquemas de colores.

Typetester –  Página donde podrás visualizar y comparar distintas fuentes de texto.

W3C CSS Validator – La madre de todas, indispensable para chequear problemas con tu CSS y conformidad con el estándar propuesto por W3C.

W3C HML Validator – Y el padre de todos, chequea que tu HTML/XHTML siga el estándar W3C. Os recomiendo que cada vez que publiquéis un artículo uséis este enlace.

Webdevout – Tablas comparativas de HTML/XHTML, CSS y DOM entre los mayores navegadores. Bastante interesante para encontrar porque lo que se funciona en un navegador no funciona en otro.

Extensiones para Firefox:

Colorzilla – Sencilla utilidad para la selección de cualquier color HTML y RGB que aparezca en pantalla.

Firebug – Una buena colección de herramientas integradas que entre otras opciones permite editar y testear CSS, HTML y Javascript dinámicamente.

MeasureIt – Permite medir en píxeles cualquier dimensión en la pantalla.

Web Developer – Absolutamente esencial para todo Webmaster, ofrece una larga lista de herramientas para poder chequear y probar alteraciones en tu diseño.

Aplicaciones:

Aptana – Un completísimo editor para desarrollo de webs. Como nota, la edición de CSS es excelente ya que al teclear un elemento este muestra que navegadores lo soportan.

FileZilla – Mi cliente de FTP favorito, sencillo, completo y rápido.

Manuales:

Tutorial XHTML y CSS – Aquí podreis descargar el excelente tutorial en formato PDF de Belén Albeza. Con explicaciones claras y concisas este manual es perfecto para todo aquel que quiera aprender XHTML y CSS. (gracias Kosako)

Muestra imágenes al azar en la cabecera de tu blog

Imágenes al azarEn este tutorial aprenderás como cargar y mostrar imágenes al azar en la cabecera de tu blog en Wodpress sin necesidad de usar Javascript, aunque la técnica es facilemente adaptable a cualquier otra plataforma que use PHP. Opcionalmente puedes seguir este enlace para aprender a cargar imágenes aleatorias desde CSS. No te asustes por la longitud del tutorial ya que todo se limita a una sola línea de código.

 (...seguir leyendo el resto del artículo  » ) 

Bordes redondeados en CSS para Firefox y Safari

Bordes CSS para Firefox Hasta que llegue el estándar CSS 3 los usuarios de Firefox y Safari tenemos una sencilla alternativa para crear bordes redondeados sin necesidad de usar gráficos. Para los que sepáis ya algo de CSS 3 sabréis que los bordes redondeados se implementarán a través del elemento Border-Radius. Firefox y Safari usan su propia implementación a través de los prefijos moz y webkit, así que lo único que tenemos que hacer es declararlos en nuestro fichero CSS y listo. Esta es la lista con las sintaxis a seguir para realizar la implementación:

 (...seguir leyendo el resto del artículo  » ) 

Cerrar
Enviar por Correo