Desarrollo web » css

Condicionales en CSS

flmn — Wed, 23 Dec 2009 00:08:28 +0000

En ocasiones hacer compatible un diseño web con los browsers más habituales se complica y terminamos por recurrir a los famosos IE hacks.

A medida que el número de hacks utilizados empieza a ser notorio, el tamaño de los ficheros css aumenta e inevitablemente la velocidad de carga se resiente. Los condicionales CSS son un recurso interesante que permiten separar los hacks para internet explorer del css principal y cargarlos solo cuando los visitantes accedan desde este navegador, evitando la sobrecarga del resto (firefox,opera,chrome,etc).

El código se introduce dentro del head del html y su uso es así de sencillo:

Los condicionales css no forman parte del estandar HTML y solo son interpretados por motor de renderizado Triton (Internet Explorer).

Convertir PSD a CSS y XHTML

flmn — Sun, 18 Oct 2009 11:21:20 +0000

Hace poco más de un mes comenzó en cristalab un curso en vídeo sobre la maquetación de diseños photoshop en CSS y xHTML, creado por micha. El curso no ha finalizado aún pero ya alcanza su quinta entrega.

Os dejo con la primera parte: organización de carpetas y cortar las imágenes necesarias para empezar a maquetar.

Si os gusto el vídeo aquí tenéis los links al resto del material:

Segunda entrega: Organizar y cortar los elementos del diseño .PSD
Tercera entrega: Estructura Visual y Armado de XHTML
Cuarta entrega: Concepto del Modelo de Bloque y Armado completo de Estructura con el CSS
Quinta entrega: Javascript

Añade la potencia de PHP a tus CSS

flmn — Tue, 13 Oct 2009 05:56:14 +0000

Vía anieto2k descubro CssDispatcher, una biblioteca para manejar CSS sobre PHP que permite procesar múltiples hojas de estilo como plantillas PHP, unirlas, minimizarlas y servirlas dependiendo del navegador.

Mezclar las tecnologías de programación con el lenguaje de estilos CSS puede resultar interesante para grupos de trabajo en los que el diseñador tenga unos conocimientos básicos de programación, esta biblioteca es un claro ejemplo de como añadir potencia y comodidad a la hora de escribir, mantener y aumentar el rendimiento de las hojas de estilo.

Variables PHP en CSS

El uso de variables dentro de las CSS puede ayudarnos a realizar pequeñas modificaciones (cambios de colores o tamaños de texto) sin esfuerzo:

.paginacion { border: 1px solid ; }
.paginacion a { color: ; }

Hojas de estilo adaptadas al browser

Con CssDispatcher definir CSS específicas para el navegador es tan fácil como añadir un segundo parámetro en el constructor de la clase:

$styles = new CssDispatcher;
// Este CSS solo se enviará cuando sea Internet Explorer 6
$styles->add(new Css('ie-hacks.css.php', Css::UA_IE6));
$styles->add(new Css('general.css.php'));
$styles->render();

Puedes especificar las siguientes familias de navegadores: Internet Explorer 6, Internet Explorer > 6 , Gecko y WebKit. También puedes utilizar los sinónimos UA_MOZILLA, UA_FIREFOX, UA_SAFARI y UA_CHROME respectivamente.

Más info

CSS 3D en WebKit

flmn — Sat, 18 Jul 2009 12:45:19 +0000

El próximo Safari, que vendrá incluido en Mac OS X Snow Leopard, introducirá efectos tridimensionales renderizados a partir de CSS.

En este video nos muestran un efecto visual 3D, al más puro estilo cooliris, creado con HTML, CSS y JavaScript corriendo sobre la última WebKit nightly.

Además, todos estos efectos tridimensionales con CSS han sido propuestos como estándares. De ser aprobados podríamos verlos en las futuras versiones de cualquier navegador.

Existe una demo que podéis probar siempre que tengáis la última versión de WebKit (r45824 o superior) instalada.

webtips 04: Optimizar la carga de una página web 2/2

flmn — Wed, 10 Jun 2009 22:48:04 +0000

Cuarta entrega de webtips, segunda parte. Seguimos con los consejos para agilizar la carga de nuestra web de la mano de Yslow.

En el vídeo se me olvida comentar la subpestaña tools de Yslow. En la misma encontrareis diferentes herramientas listas para usar (hace uso de páginas externas, pero eso es lo de menos). Aquí tenéis el listado de utilidades y sus respectivas descripciones:

JSLint - Run JSLint on all JavaScript code in this document
All JS – Show all JavaScript code in this document
All JS Beautified – Show all JavaScript code in this document in an easy to read format
All JS Minified – Show all JavaScript code in this document in a minified (no comments or white space) format
All CSS – Show all CSS code in this document
All Smush.it™ – Run Smush.it™ on all image components in this document
Printable View – Show a printable view of grades, component lists, and statistics

Enlaces a proyectos mencionados en el tutorial:

Apc
Sistema de cache para php que nos permite reducir la carga y ejecución de nuestro proyectos PHP sin cambiar una sola linea de código. Ver proceso de instalación en windows aquí.

Yslow
Extensión para el firefox/firebug que analiza nuestro proyecto web en busca de “cuellos de botella” que ralenticen la carga de nuestro site.

Akamai
El website de akamai en castellano

Amazon s3
Website de el servicio de almacenamiento distribuido de amazon, sin duda uno de los más populares hoy en día.

——-

descargar el vídeo
descargar la primera parte

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

webtips 04: Optimizar la carga de una página web 1/2

flmn — Tue, 09 Jun 2009 21:29:36 +0000

Cuarta entrega de webtips. En esta ocasión vamos a ver algunos consejos para agilizar la carga de nuestro proyecto web, tanto del lado de el servidor como de el cliente.

Aquí tenéis la primera parte de el vídeo, 24 minutos. Mañana pondré la segunda, 20 minutos más.

El audio “rasca” un poco, definitivamente tengo que hacerme con un micrófono nuevo que con este no me las arreglo. Tenéis los enlaces a las páginas vistas en el tutorial así como la descarga del vídeo completo en “leer más/read more”.

Enlaces a proyectos mencionados en el tutorial:

Apc
Sistema de cache para php que nos permite reducir la carga y ejecución de nuestro proyectos PHP sin cambiar una sola linea de código. Ver proceso de instalación en windows aquí.

Yslow
Extensión para el firefox/firebug que analiza nuestro proyecto web en busca de “cuellos de botella” que ralenticen la carga de nuestro site.

Akamai
El website de akamai en castellano

Amazon s3
Website de el servicio de almacenamiento distribuido de amazon, sin duda uno de los más populares hoy en día.

——-

descargar el vídeo

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

Webtips 02 : Efecto con jquery 2/2

flmn — Tue, 19 May 2009 08:57:55 +0000

Segundo videotutorial (segunda parte), 15 minutos de vídeo donde veremos los últimos pasos para crear el efecto que empezamos la semana pasada.

Tenéis el vídeo en youtube y el link para descargar el vídeo en hd (73 mb – 1440x 900 px).

descargar vídeo

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

Webtips 02 : Efecto con jquery 1/2

flmn — Thu, 14 May 2009 13:06:05 +0000

Segundo videotutorial, veremos un curioso efecto con css y jquery inspirado en el efecto parallax. Aquí teneis la primera parte del video, 26 min, que finalizara la semana que viene. Creo que este video ha quedado bastante mejor que el anterior. Pero bueno… ya me contareis

Como siempre os dejo el vídeo en youtube y el link para descargar el vídeo original en alta resolución (133 mb – 1440x 900 px).

descargar vídeo

Nota: El video ha sido comprimido usando el codec H264. Si tienes algún problema para reproducirlo usa el vlc

lo mejor de la semana en la red

flmn — Tue, 12 May 2009 22:24:43 +0000

Mininova empieza a aplicar filtros a los torrents
El miedo a ser denunciado tras el juicio a piratebay crece entre los distintos trackers.

Mientras tanto el fundador de Pirate Bay nos vuelve a sorprender sacándose de la manga el ataque DDo$.
Ha pedido a la comunidad que le ayuden a pagar los $30 millones de multa que le impusieron enviando cantidades de 13 céntimos USD a la firma de abogados encargada de cobrar la multa. La firma tendrá que pagar al banco un recargo por cada transacción, lo que representará una perdida de dinero mayor que la cantidad recaudada. Qué grande eres Svartholm, qué grande

16 Tips SEO de un empleado de Yahoo!
Interesante articulo para aquellos que tengáis vuestra propia web

Obtener el uso horario mediante la latitud y la longitud en PHP
Hace uso de la API de google maps y geonames.org. Ofrece además el código PHP y javascript (Mootools).

Firefox 3.6 podría abandonar a Windows 2000
Microsoft ya no vende Windows 2000 y su soporte oficial terminará en Julio del próximo año. De abandonarlo se reduciría la complejidad del código de Firefox

Cubos 3D usando CSS Transformations
La futura especificación CSS3 promete y mucho. Aquí tenéis un pequeño adelanto, que por el momento únicamente funciona sobre Safari, Chrome y Firefox 3.5

videotutorial: sprites css

flmn — Tue, 05 May 2009 23:16:25 +0000

Primer vídeo de desarrollo web. Aprenderemos a usar sprites css con un ejemplo real. La calidad del sonido flojea un poco, mi primer vídeo… y con trancazo, mejorara en el próximo. Os dejo el vídeo en youtube y el link para descargar el vídeo original en alta resolución (98 mb – 1440x 900 px).

descargar vídeo

Nota: El video ha sido comprimido usando el codec H264. Si tienes algún problema para reproducirlo usa el vlc

lo mejor de la semana en la red

flmn — Tue, 05 May 2009 22:36:52 +0000

7 diferencias javascript entre firefox e internet explorer
Interesante referencia para aquellos que no hagan uso de ningún framework js

Aplicaciones de escritorio en php
Introducción a php-gtk

Crea tus propios diseños css desde 0
960 Grid System, photoshop y un poco de paciencia

Presentaciones de la ultima MySql Conference & Expo 2009
Optimizaciones, clusters, mejoras de rendimiento, etc

Mootools file manager
Curradísimo script para mootools que permite subir,ver y modificar tus ficheros vía browser

Linux llega al 1% de cuota de mercado y Mac OS roza el 10%
Informe del mes de abril de NetApplications

El Partido Pirata sueco en el Parlamento Europeo
Un sondeo revela que obtendría los votos necesarios para contar con un escaño en el Parlamento Europeo

Blogs interesantes sobre seguridad
Recopilación de los mejores blogs de dicha temática (phising, bugs…)

Lo mejor de la semana en la red

flmn — Wed, 22 Apr 2009 01:41:47 +0000

OCR con JavaScript
Detección de texto mediante javascript

Introducción a Code Igniter (framework php)
Primeros pasos con CI

50 herramientas para php extremadamente utiles
Debugging, testing, documentación…

Resaltar sintaxis de código en nano (Linux)
Tunning para el famosos editor de texto para consola

Cosas curiosas que podemos hacer con la API Google Maps
Street view, reverse geocoding, etc

40 packs de iconos
Algunos esta realmente bien

30 tecnicas de navegación CSS
Ejemplos funcionales para dar tus primeros pasos con css

Fonera 2.0 ya disponible
Tentación….

Sugerir actualización del navegador a los usuarios de IE6
Yo se lo sugeria también a los usuarios de IE7