Diseo web Empezar de Cero una Web

Qu vas a encontrar en esta seccin: Empezar de Cero a Hacer una Web Como crear una pagina web paso a paso

Gua de captulos: Empezar de Cero una Web

1. Usabilidad web. Principios bsicos
Cosas que hay que tener en cuenta para hacer una web ms fcil de usar por todos y atraer ms visitantes.

2. Hacer un sitio web accesible. Accesibilidad

Pautas para hacer un sitio web accesible y llegar a ms visitantes. Respetando estas directrices llegaremos a ms usuarios dentro de la red.

3. Hosting. Comparativa de empresas de alojamiento web

Hosting web: comparativa de empresas de alojamiento para elegir el hosting ms adecuado a tus necesidades y presupuesto.

4. Hosting. Alojamiento web

Gua sobre hosting web. Claves para conseguir el mejor alojamiento web. Consejos para obtener un buen servicio de hosting.

5. Como subir la web al servidor por FTP

Gua sobre como subir la web al servidor para que sea visible desde cualquier parte del mundo en Internet.

6. Accesibilidad web. Pautas esenciales de accesibilidad

Gua sobre accesibilidad web. Haz que todos tus potenciales usuarios puedan visitar tu web.

7. Primeros pasos para aprender a hacer una pgina web

Gua sobre como hacer una web. Aprende a hacer una web gratis desde el principio y de forma fcil.

8. Analizar tu audiencia. Clave de xito en la Web

Aprende a analizar tu audiencia para conocer sus gustos y necesidades y poder montar un negocio exitoso.

9. Como planificar una pgina web

Planifica los objetivos y recursos de tu web para ahorrar tiempo de desarrollo y tener xito en Internet.

10. Encontrar un nicho de mercado rentable para tu pgina web

Para tener xito con tu web, tendrs que dirigirte a un pblico muy especfico dentro de un tema concreto.

11. Como organizar una pgina web. Diseo de la estructura

Ideas bsicas para crear una estructura para tu web efectiva y usable que llegue a ms visitantes

12. Por qu registrar tu propio nombre de dominio

Por que es importante tener un nombre de dominio y consejos en el registro.

13. Como aadir imgenes a una pgina web

Gua sobre como aadir imgenes a una pgina web y darles formato.

14. Tratamiento de imgenes para la web

Edicin y uso de los distintos tipos de imgenes en la web, as como su optimizacin para que ocupen lo menos posible.

15. Como guardar las pginas web en el servidor

Como guardar las pginas web para que no haya problemas al subirlas al servidor.

16. Programas para hacer tus pginas web

Gua de los programas de edicin web, ya sean editores de texto como WYSIWYG y tambin una breve resea a los templates o plantillas web prefabricadas.

17. Crear la pgina web. Consejos

Consejos para crear tus pginas web de forma correcta. Hacer buenas pginas web desde el principio, ms amigables a buscadores, mejor diseadas y ms accesibles.

18. Nombres de dominios. Claves para adquirir un buen dominio

Todas las claves para adquirir un buen dominio y tener presencia en Internet.

19. Consejos al registrar un nombre de dominio

Claves para adquirir un dominio adecuado para tu proyecto web y empezar en Internet con buen pie.

20. Mantenimiento de una pgina web

Gua para llevar al da el mantenimiento de tu pgina web y no caer en el olvido.

21. Actualizar la pgina web. La importancia del contenido

Actualiza tu web con frecuencia para seguir creciendo. Lo ms importante es el contenido.

22. Colgar la pgina web en Internet

Un resumen bsico sobre lo que hay que hacer para subir una web a Internet.

23. Herramientas para hacer una pgina web. Editor imgenes, HTML y FTP

Aprende desde cero como hacer una web. Herramientas bsicas: editor de imgenes, editor HTML y clientes FTP.

24. Beneficios de la usabilidad web

Beneficios de la usabilidad web y consejos prcticos para hacer sitios ms usables. Pnselo fcil a tus usarios para encontrar lo que buscan en tu web.

25. Sistema de navegacin de la pgina web

Aprende a crear un buen sistema de navegacin para tu pgina web y haz que tus visitantes encuentren lo que buscan sin problemas.

26. Conceptos bsicos de HTML

Conceptos bsicos de HTML. Etiquetas fundamentales y estructura bsica de una pgina web.

27. Compatibilidad de tu web con distintos navegadores

Podremos estar satisfechos si conseguimos que se vea igual de bien en los ms importantes, como Explorer, Firefox, Opera, Safari y Mozilla.

28. Normas elementales en HTML

Vamos a ver unas normas bsicas en el uso del HTML, aprendiendo a utilizar las etiquetas y elementos de este lenguaje de creacin de pginas web.

29. Ejemplo de estructura de una pgina HTML

En este tutorial vamos a explicar las partes de una estructura bsica de una pgina hecha en HTML.

30. Introduccin a los elementos y etiquetas de HTML

Un archivo HTML es un archivo de texto normal, salvo por tener etiquetas de formato o marcaje. En HTML, usamos "etiquetas" para crear la estructura de una pgina web.

31. HTML XHTML Doctype o versin del documento de una pgina web
Antes de comenzar a hacer la pgina web en s, tenemos que decirle al navegador qu versin de HTML vamos a utilizar para que sepa interpretarlo correctamente.

32. Dar formato a un texto en HTML. Etiquetas HTML para poner texto en una web
A contiunuacin os muestro un listado de etiquetas vlidas para formatear textos en html y darles el estilo y apariencia deseados.

33. Como se deben utilizar los lenguajes HTML y XHTML

Consejos tiles para una mejor utilizacin de los lenguajes HTML y XHTML.

34. Manejo de JavaScript con XHTML

El manejo de scripts es una parte fundamental para lograr un balance adecuado en el frontend de nuestros sitios, en este artculo vemos como conjuntar XHTML y Javascript.

Usabilidad web. Principios bsicos

Resumen: Cosas que hay que tener en cuenta para hacer una web ms fcil de usar por todos y atraer ms visitantes.
a Organizacin Internacional para la Estandarizacin (ISO) ofrece dos definiciones deusabilidad: ISO/IEC 9126: La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones especficas de uso ISO/IEC 9241: Usabilidad es la eficiencia y satisfaccin con la que un producto permite alcanzar objetivos especficos a usuarios especficos en un contexto de uso especfico La distincin entre usabilidad facilidad de uso y accesibilidad, es difcil y en muchos casos innecesaria. Adems, la accesibilidad debe ser entendida como parte de y al mismo tiemporequisito para la usabilidad, puesto que la accesibilidad no slo implica la necesidad de facilitar acceso, sino tambin la de facilitar el uso. No obstante, no est de ms dar unas indicaciones generales sobre usabilidad en particular. En informtica, la usabilidad est muy relacionada con la accesibilidad, hasta el punto de que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos expertos es Jakob Nielsen, el cual defini la usabilidad en el 2003 como un atributo de calidad que mide lo fciles de usar que son las interfaces web. Otra definicin clarificadora es la de Redish (2000), para quien es preciso disear sitios web para que los usuarios sean capaces de encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea.

La usabilidad parte de los principios del diseo universal o diseo para todos. La buena usabilidad puede lograrse mediante el diseo centrado en el usuario (que no necesariamente dirigido por l), aunque se emplean diversas tcnicas. El diseador de usabilidad proporciona un punto de vista independiente de las metas de la programacin porque el papel del diseador es actuar como defensor del usuario. Por

ejemplo, tras interactuar con los usuarios, el diseador de usabilidad puede identificar necesidades funcionales o errores de diseo que no hayan sido anticipados. La usabilidad implica hacerse preguntas como las siguientes, que pueden responderse realizando anlisis de usuarios / visitantes y tareas al planificar un proyecto web:

Quines son los usuarios, cules sus conocimientos, y qu pueden aprender? Qu quieren o necesitan hacer los visitantes? Cul es la formacin general de los usuarios? Cul es el contexto en el que el visitante est trabajando? Qu debe dejarse a la mquina? Qu al usuario?

Otras consideraciones incluyen:

Pueden realizar fcilmente sus tareas previstas? Por ejemplo, pueden realizar las tareas previstas a la velocidad esperada? Cunta preparacin necesitan los visitantes? Qu documentacin u otro material de apoyo estn disponible para ayudar al usuario? Puede ste hallar las respuestas que buscan en estos medios? Cules y cuntos errores cometen los usuarios cuando interactan con el producto? Puede el visitante recuperarse de los errores? Qu ha de hacer para ello? Ayuda el producto a recuperarse de los errores? Por ejemplo, muestra el sofware mensajes de error informativos y no amenazantes? Se han tomado medidas para cubrir las necesidades especiales de los usuarios con discapacidades? (Es decir, se ha tenido en cuenta la accesibilidad?)

Todos estos temas te permitirn, adems, fidelizar visitas, es decir, hacer que tus visitantes vuelvan una y otra vez, puesto que al ponerles fcil la navegacin por tu sitio mejorars mucho la imagen de tu web.

Principios bsicos en los que se basa la usabilidad

Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interaccin efectiva con el sistema o producto. Est relacionada con la sintetizacin, familiaridad, la generalizacin de los conocimientos previos y la consistencia. Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar informacin. Tambin abarca la posibilidad de dilogo, la multiplicidad de vas para realizar la tarea, similitud con tareas anteriores y la optimizacin entre el usuario y el sistema. Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Est relacionada con la capacidad de observacin del usuario, de recuperacin de informacin y de ajuste de la tarea al usuario.

Hacer un sitio web accesible. Accesibilidad

Resumen: Pautas para hacer un sitio web accesible y llegar a ms visitantes. Respetando estas directrices llegaremos a ms usuarios dentro de la red.

1. Posibles limitaciones de acceso a la web

Discapacidades:

Deficiencias visuales: ceguera, visin reducida y problemas en visualizacin de color entre otros. Deficiencias motrices: hacen referencia a la capacidad de movilidad del usuario. Estos usuarios no suelen ser capaces de interactuar con el sistema a travs de dispositivos de entrada tradicionales, por lo que utilizan dispositivos alternativos. Por ejemplo, basados en voz. Deficiencias auditivas: aunque si bien es cierto que son menos limitadoras en el acceso y uso de contenidos web, puesto que el canal sonoro es mucho menos usado que el visual, an as, conviene tener presentes las limitaciones y barreras derivadas de esta discapacidad, como es el caso del lenguaje. Deficiencias cognitivas y de lenguaje: las personas con estas deficiencias tienen problemas en el uso del lenguaje, la lectura, percepcin, memoria, etc.

No obstante, la discapacidad no es el nico tipo de limitacin que dificulta la accesibilidad a los contenidos. Adems de las limitaciones propias del individuo, existen otras derivadas de caractersticas del equipo de navegacin o del entorno ambiental desde donde accede a la web, como por ejemplo, usuarios que utilicen pantallas pequeas, accedan desde entornos llenos de humo, su navegador no soporte los scripts utilizados en nuestra web, etc. Todo ello muy relacionado tambin con la usabilidad, ya que cuanto ms fcil de manejar es una web, ms accesible parece ser.

2. Hacer un sitio web accesible

Hacer un sitio web accesible puede ser algo sencillo o difcil, depende de muchos factores como por ejemplo, el tipo de contenido, el tamao y la complejidad del sitio, as como de las herramientas de desarrollo y el entorno. Esto incluye no slo la utilizacin de un lenguaje claro y simple, sino tambin proporcionar mecanismos comprensibles para navegar dentro de cada pgina y entre las pginas del sitio web. Al proporcionar

herramientas de navegacin e informacin orientativas en las pginas se maximizar la accesibilidad y la usabilidad del sitio web. Si, por otro lado, todas las ventajas propuestas hasta ahora no son suficientes para convencerte de que la accesibilidad es importante, tal vez s lo haga el decirte que la accesibilidad web afecta al posicionamiento en los buscadores. Parece extrao en un principio, pero suele decirse que el robot de Google es el usuario ciego ms activo de Internet, y la razn para decir esto es que muchas de las optimizaciones necesarias para conseguir una buena accesibilidad, lo son tambin para conseguir una indexacin correcta por parte de los buscadores. Muchas de las caractersticas de accesibilidad de un sitio se implementan de forma sencilla si se planean desde el principio del desarrollo de la pgina web y se utilizan de forma correcta los lenguajes de programacin como el HTML, mientras que la modificacin de un sitio web para hacerlo accesible puede ser muy laboriosa y requerir gran esfuerzo, por lo que es muy aconsejable empezar desde el principio pensando en la accesibilidad. No obstante, aunque requiere mayor esfuerzo, tambin es posible y aconsejable modificar un sitio web ya diseado para hacerlo ms accesible. A grandes rasgos, hay que tener en cuenta lo siguiente en los dos casos:

Imgenes y animaciones: usa el atributo alt para describir la funcin de cada elemento visual. Mapas de imagen: usa el elemento map y texto para las zonas activas. Multimedia: pon subttulos y transcripcin del sonido, y descripcin del vdeo. Enlaces de hipertexto: usa texto que tenga sentido ledo fuera de contexto. Por ejemplo, no utilices expresiones como click aqu. Organizacin de las pginas: usa encabezados, listas y estructura consistente. Usa CSS para la maquetacin donde sea posible. Figuras y diagramas: puedes optar por explicarlos brevemente en la pagina o bien usar el atributo longdesc. Scripts, applets y plug-ins: ofrece contenido alternativo para dichos elementos. Marcos: Usa el elemento noframes y ttulos con sentido. Tablas: Facilita la lectura lnea a lnea. Resume los contenidos en textos comprensibles y sencillos.

3. Evaluacin de la accesibilidad de un sitio web

Evaluar la accesibilidad a lo largo del desarrollo de un sitio web permite encontrar problemas de accesibilidad desde el principio, cuando es ms fcil resolverlos. Hay herramientas de evaluacin que ayudan a realizar evaluaciones de accesibilidad. No obstante, ninguna herramienta en s misma puede determinar si un sitio cumple o no las pautas de accesibilidad. Para determinar si un sitio web es accesible, es necesaria la evaluacin humana.

El mximo organismo dentro de la jerarqua de Internet que se encarga de promover la accesibilidad es el W3C, en especial su grupo de trabajo WAI. En Espaa una de las asociaciones que trabaja en este campo es el SIDAR. As mismo, existen diversas herramientas en espaol de comprobacin de la accesibilidad, comoTAW, HERA y Examinator.

Hosting. Comparativa de empresas de alojamiento web

Resumen: Hosting web: comparativa de empresas de alojamiento para elegir el hosting ms adecuado a tus necesidades y presupuesto.
Esta comparativa de empresas de alojamiento web est dividida en dos tablas. La primera de las tablas de la comparativa est dedicada a empresas de hosting espaolas, la mayora de ellas muy conocidas. La segunda parte de la comparativa de alojamiento est centrada en empresas estadounidenses, las cuales ofrecen bastantes ms servicios a mejores precios, pero con el inconveniente de tener soporte en ingls y no estar fsicamente en Espaa. A partir de aqu, puedes sopesar las ventajas e inconvenientes de elegir una u otra empresa de hospedaje web. En las tablas de comparativa de empresas de alojamiento web, se muestran las caractersticas generales de los planes bsicos de varias empresas de hosting para que puedas comparar de forma global entre ellas (si te interesa saber ms en profundidad sobre alguna pincha en su enlace). Insisto en que son los planes bsicos de cada empresa, tanto de las espaolas como de las extranjera, aunque la diferencia en los recursos ofrecidos entre unas y otras sea grande. Empresas espaolas Abansys Acens (plan (plan inicial) premier) Linux Linux o Windows 1 75 MB Arsys (plan personal) Linux o Windows 1 200 MB Cdmon (mini plan) NI Dinahost (plan personal) Linux o Windows NI 100 MB Hostalia Minerva (plan (mini inicio) plan) NI Linux

Plataforma

N dominios Espacio en disco Transferencia mensual* Precio por ao

1 250 MB

NI 50 MB

NI

100 MB 200 MB

Ilimitada 3,5 GB

2 GB

1 GB

1 GB

4 GB

2 GB

36

287

59

25

54

59

29

Cuentas correo MySQL* FTP SSI* PHP* CGI* Perl* Antivirus Estadsticas web Directorios protegidos Empresas extranjeras

10 No 5 S S S S S S

10 No Ilimitadas S S S S S S

20 No 1 NI* No NI No Opcional S

1 S 1 S S S S

20 No 1 No No No No

20 No 1 S S S S S S

10 10 10 S S S S No S

Opcional No S S

No

No

No

3Essentials Arvixe dh2 HostGo Hostony (starter) (personal (personal (GoStarter) (profi) plan) plan)

Dreamhost Pronet (Crazy (basic Domain dollar) Insane!) NI NI

Plataforma

Windows

Linux

Linux o NI Windows 0 5 GB 1 2 GB

Linux

N dominios Espacio en disco

0 3 GB

0 500 MB

10 200 GB

1 200 GB

0 325 MB

Transferencia 100 GB mensual Precio por ao Cuentas correo MySQL FTP SSI PHP CGI Perl 48 $

5 GB

300 GB

100 GB

2.000 GB 94 $

2.000 GB

3 GB

30 $

48 $

77,5 $

120 $

18 $

Ilimitadas

Ilimitadas 3.000

50

Ilimitadas 3.000

Ilimitadas

1 1 S S S S

Ilimitadas 30 Ilimitadas 30 S S S S S S S S

Ilimitadas 50 S S S S

Ilimitadas Ilimitadas Ilimitadas 75 S S S S S S S S

NI Ilimitadas No No No No

Antivirus Estadsticas web Directorios protegidos

NI S

Firewall S

S S

S S

NI S

S NI

No No

NI

* NI = no indicado en la referencia del plan. Transferencia mensual = cantidad de trfico mensual generado por tu pgina. Por ejemplo: si una pgina pesa 100 Kb (incluyendo imgenes) y es visitada 10 veces al da, generar un trfico de 30 Mb al mes. MySQL = gestor de bases de datos SSI = comandos que se insertan en HTML para ejecutar guiones CGI, insertar archivos, insertar la fecha y la hora, etc. PHP = lenguaje de programacin que se ejecuta en el servidor y permite integrar multitud de funcionalidades en pginas HTML as como trabajar con bases de datos. CGI = programas que incorporan interactividad a tu web. Hay muchos cgis gratuitos y genricos como estadsticas, libros de visitas, relojes, calendarios, etc. Perl = lenguaje de programacin muy utilizado para el desarrollo de programas CGI. Si deseas buscar otras empresas o planes de hosting, entra en BuscaHost (principalmente hosting espaol) o en FindMyHosting (principalmente hosting extranjero).

Hosting. Alojamiento web

Resumen: Gua sobre hosting web. Claves para conseguir el mejor alojamiento web. Consejos para obtener un buen servicio de hosting.
Una vez construida tu pgina web, necesitas subirla a un servidor que est permanentemente conectado a Internet para que los visitantes pueda verla a cualquier hora del da, los 7 das de la semana y desde cualquier lugar del mundo. Lo ms normal es que para este fin recurras al servicio que te proporcione una empresa de hosting, ya que stas empresas tienen toda la infraestructura necesaria para tener los servidores permanente conectados a Internet. Este tipo de servicios suele recibir el nombre de web hosting, hosting web, hospedaje web, alojamiento o alojamiento web. > Tabla comparativa de empresas de alojamiento web < > Tabla comparativa de empresas de alojamiento web en Windows < Como ms o menos se puede intuir por lo dicho anteriormente, un hosting web es un servicio de alojamiento de pginas que gestionan empresas especializadas en el sector. Las empresas que se dedican a este servicio proporcionan espacio de un servidor a sus clientes para que la web est accesible permanentemente.

1. Tipos de Alojamiento Web

(fuente: wikipedia) El alojamiento web se divide en seis tipos: gratuitos, compartidos, revendedores, servidores virtuales, servidores dedicados y de co-locacin. Alojamiento gratuito: es recomendable a la hora de publicar pginas personales, trabajos poco ambiciosos, cuando se est empezando o simplemente cuando no queremos o podemos gastar dinero en el hosting. Estos servicios generalmente agregan publicidad en los sitios y tienen un espacio y trfico web limitado. Alojamiento compartido (virtual hosting): Estos servicios son de pago, y por ese motivo suelen tener como norma general mayores prestaciones y recursos disponibles que los gratuitos. Adems, muchos de ellos suelen incluir en el plan de hosting el dominio. En este tipo de servicio se alojan las webs de varios clientes en un mismo servidor, de ah el nombre. Resulta una alternativa muy buena para pequeos y medianos clientes, es un servicio econmico y tiene buen rendimiento. Alojamiento revendedor (reseller): Este servicio de alojamiento est diseado para grandes usuarios o personas que venden el servicio de hosting a otras personas. Estos paquetes cuentan con gran cantidad de espacio y de dominios disponibles para cada cuenta. Servidores virtuales (VPS, Virtual Private Server): Mediante el uso de una mquina virtual, la empresa ofrece el control de un ordenador aparentemente no compartido. As se pueden administrar varios dominios de forma fcil y econmica, adems de elegir los programas que se ejecutan en el servidor. Por ello, es el tipo de producto recomendado para empresas de diseo y programacin web. Servidores dedicados: El trmino servidor dedicado se refiere a una forma avanzada de alojamiento web en la cual el cliente alquila o compra un ordenador completo, y por tanto tiene el control completo y la responsabilidad de administrarlo. El cuidado fsico de la mquina y de la conectividad a Internet es tarea de la empresa de alojamiento, que suele tenerlo en un centro de datos. Co-locacin (housing): Este servicio consiste bsicamente en vender o alquilar un espacio fsico de un centro de datos para que el cliente coloque ah su propio ordenador. La empresa le da la corriente y la conexin a Internet, pero el ordenador servidor lo elige completamente el usuario (hasta el hardware).

2. Hosting gratuito vs. de pago

Elegir entre un hosting gratuito y un hosting de pago depende de nuestras necesidades y el uso que le vayamos a dar a la pgina. Si tienes un proyecto pequeo en mente y no necesitas herramientas o recursos complejos (base de datos MySQL, ASP, CGI, etc.) la opcin de hosting gratis puede ser una buena opcin. Por otro lado, si ests empezando a

dar los primeros pasos en el mundo de la publicacin web, tal vez tambin sea recomendable que comiences en un servidor gratuito y conforme vaya creciendo tu proyecto des el paso a los hostings de pago. Los alojamientos de pago ofrecen mejores recursos e infraestructuras para hospedar tus webs, por lo que son recomendables cuando tengas una web con bastante trfico, un proyecto serio o necesites utilizar tecnologa ms avanzada, como pueden ser las bases de datos o php. Estos hostings suelen ofrecer ms espacio web, mayor trfico mensual, bases de datos y soportar mltiples lenguajes de programacin, por lo que ofrecen ms flexibilidad a la hora de disear tu pgina. No obstante, aunque la mayora de los hostings gratuitos tienen poca calidad en comparacin con los de pago, hay honrosas excepciones, como es el caso de [Link].

3. Hosting Windows vs. hosting Linux

Dependiendo del tipo de programacin y los servicios que usemos o tengamos pensado usar nos decantaremos por un tipo de alojamiento web u otro. Por norma general es mejor utilizar: Windows Hosting: cuando usemos o queramos usar alguna de estas tecnologas: Windows,ASP, [Link], bases de datos Access, SQL Server o IIS y usuarios que publiquen su web mediante las extensiones de FrontPage. Linux Hosting: cuando usemos o queramos usar alguna de estas tecnologas: Linux, PHP, Python, JSP, Perl, C, MySQL o Apache. Los hosting Linux suelen ser ms baratos que los Windows hosting, la razn est clara, no hay que pagar las licencias del servidor, puesto que las licencias de Linux son gratuitas. Otra de las razones es que hay mejores herramientas para la administracin de servidores Linux que abaratan el coste de administracin de un servidor Linux. Recuerda que este tipo de servicios est optimizado para entornos Linux. En la siguiente pgina se muestra una comparativa de empresas de hospedaje estadounidenses y espaolas para que puedas elegir ms fcilmente lo mejor para ti.

Como subir la web al servidor por FTP

Resumen: Gua sobre como subir la web al servidor para que sea visible desde cualquier parte del mundo en Internet.

Gua de CuteFTP
Una de las dudas ms comunes cuando acabas un proyecto web por primera vez es: cmo subir mi pgina web? qu hago para que est mi web en Internet?. Pues bien, una vez tengas tu web lista para compartirla con el resto del mundo, necesitas subir los archivos HTML, imgenes y todos los dems contenidos creados a tu servidor web (alalojamiento web que tengas). Es decir, que tienes que subir la pgina web a Internet o de otro modo slo podrs verla t desde tu ordenador. Para ello, lo ms sencillo es usar un cliente FTP, ya que agilizas muchos pasos del proceso de subir archivos al servidor. Adems, el modo de trabajo es similar en muchos aspectos al (tan) famoso explorador de Windows, por lo que si no ests muy acostumbrado a manejar estos programas su aprendizaje ser rpido (quin no conoce Windows?). Antes de nada, lo primero es conseguir un cliente FTP. En esta gua voy a utilizar el cliente Cute FTP por ser con el que trabajo normalmente, pero el proceso es bastante similar para todos los clientes. Bjate el programa para empezar con la explicacin: Cute FTP.

Instalacin de Cute FTP

A da de hoy, la ltima versin de este cliente FTP es la 8.0.3, por tanto es con esa con la que trabajaremos en este artculo (exactamente con la versin de prueba) para explicar como subir la web al servidor. Bien, una vez descargado el programa lo ejecutamos. Tendremos que seguir una serie de pasos comunes a toda instalacin, como elegir el directorio para instalarlo, el tipo de instalacin (tpica, compacta o personalizada). En este caso elegimos tpica, la instalacin comienza enseguida y no presenta mayores problemas.

Configuracin de Cute FTP

Una vez instalado el programa, al ser una versin de prueba, te ofrece la opcin de introducir la licencia del programa o continuar, nosotros le damos a continuar y nos aparece una pantalla con el siguiente cuadro de dilogo:

Llegados a este punto, necesitamos los siguientes datos para configurar el cliente CuteFTP, los cuales debe proporcionarte tu servicio de hosting: 1. Direccin de tu servidor web. 2. Contrasea y usuario para acceder al servidor web va FTP. Donde pone Host Address debes introducir el nombre del servidor, y en Site Name el nombre que le quieras poner a la configuracin que estamos haciendo (puedes poner el nombre de tu web o cualquier otra cosa con tal de que luego sepas qu es). Hacemos clic en siguiente. La prxima pantalla es similar a la anterior, pero en este caso debes introducir el nombre de usuario de tu cuenta FTP (User Name) y la clave de dicha cuenta (password). Otra vez damos a siguiente.

Ahora nos pide que seleccionemos la carpeta local con la que queremos trabajar (Default Local Folder), no es necesario que seleccionemos carpeta remota por el momento (Default Remote Folder). La carpeta local debera ser la carpeta en la que tienes los archivos de tu web. Le damos a siguiente nuevamente y a continuacin a finalizar. Una vez conectado al servidor, ya podemos empezar a subir archivos.

Subir la pgina web al servidor

La siguiente pantalla que aparece es similar a esta:

(clic para ampliar) Me he permitido dibujar algunas flechas para explicar un poco la estructura bsica del cliente cute FTP: 1. La flecha verde seala la carpeta de tu disco duro, esa que configuraste como carpeta local. En ella deberas tener todos los archivos de la web que has hecho. 2. La flecha roja seala el servidor web. Es el sitio al que tendrs que copiar los archivos que tienes en tu disco duro. Ahora ya podemos empezar a subir la web, para ello lo que tienes que hacer es seleccionar los archivos de tu carpeta local que quieras copiar al servidor y arrastrarlos:

Otras operaciones sencillas

1. Borrar y renombrar archivos del servidor: para hacerlo slo tienes que seleccionar el archivo que quieras borrar, renombrar, etc. hacer clic en el botn derecho del ratn y pulsar en la opcin del men emergente:

Para borrar la opcin a seleccionar es delete, para cambiar el nombre del archivo rename, para ver el cdigo fuente view, para editarlo edit 2. Cambiar permisos de escritura: para cambiar los permisos de escritura de un archivo tienes que seguir los mismos pasos que para borrar, editar, etc. Es decir, seleccionas el archivo, pulsas el botn derecho del ratn y haces clic en la opcin llamada Properties / CHMOD. Te aparece una pantalla como esta en que que puedes dar los permisos de escritura que necesites para cada archivo o carpeta:

Nota: si buscascomo hacer FTP con MACpincha en el enlace.

Accesibilidad web. Pautas esenciales de accesibilidad

Resumen: Gua sobre accesibilidad web. Haz que todos tus potenciales usuarios puedan visitar tu web.
Existen millones de personas con discapacidad que no pueden utilizar la web. Actualmente, la mayora de los sitios y los software web presentan barreras de accesibilidad, lo que est dando lugar a situaciones de imposibilidad de acceso a la informacin por parte de aquellos usuarios con discapacidades. Cuanto ms software y sitios web accesibles estn disponibles, ms personas con discapacidad podrn utilizar la web y contribuir de forma ms eficiente. La accesibilidad web hace referencia a la capacidad de acceso a la web y a sus contenidos por todas las personas, independientemente de las limitaciones propias del individuo (discapacidades, idioma, conocimientos, experiencia, etc.) o de caractersticas de su equipo de navegacin o el entorno ambiental desde donde accede a la web. La idea ms importante en la accesibilidad web consiste en mostrar a los creadores de pginas web todas las alternativas yherramientas web disponibles para hacer que sus pginas sean legibles y comprensibles para el mayor nmero de usuarios, de forma que todas las personas puedan navegar por la web en cualquier condicin.

Es muy importante que la web sea accesible para as proporcionar un acceso equitativo e igualdad de oportunidades a las personas con discapacidad. Una pgina web accesible puede ayudar a personas con discapacidad a que participen ms activamente en la sociedad. Piensa que el esfuerzo que hagas en hacer tu web ms accesible tambin te beneficiar a ti, puesto que es ms probable que los visitantes vuelvan a una pgina de fcil acceso que a otra que no lo es, por lo que estars fidelizando visitas. Por otro lado, la accesibilidad est muy relacionada con lausabilidad web, que consiste en facilitar la navegacin a tus visitantes para que les sea ms sencillo acceder a los contenidos que les ofreces.

Pautas de accesibilidad web

Para hacer el contenido web accesible, se han desarrollado las denominadas Pautas de Accesibilidad al Contenido en la Web (WCAG), cuya funcin principal es guiar el diseo de pginas web hacia un diseo accesible, reduciendo de esta forma barreras a la informacin. WCAG consiste en 14 pautas que proporcionan soluciones de diseo y que utilizan como ejemplo situaciones comunes en las que el diseo de una pgina puede producir problemas de acceso a la informacin. Las Pautas contienen adems una serie de puntos de verificacin que ayudan a detectar posibles errores, describen cmo hacer pginas accesibles sin sacrificar el diseo, ofreciendo esa flexibilidad que es necesaria para que la informacin sea accesible bajo diferentes situaciones y proporcionando mtodos que permiten su transformacin en pginas tiles e inteligibles. Cada punto de verificacin est asignado a uno de los tres niveles de prioridad establecidos por las pautas:

Prioridad 1: son aquellos puntos que un desarrollador web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podran acceder a la informacin del sitio web. Prioridad 2: son aquellos puntos que un desarrollador web debera cumplir ya que, si no fuese as, sera muy difcil acceder a la informacin para ciertos grupos de usuarios. Prioridad 3: son aquellos puntos que un desarrollador web debera cumplir ya que, de otra forma, algunos usuarios experimentaran ciertas dificultades para acceder a la informacin.

En funcin a estos puntos de verificacin se establecen los niveles de conformidad de accesibilidad :

Nivel de Conformidad A: todos los puntos de verificacin de prioridad 1 se satisfacen. Nivel de Conformidad Doble AA: todos los puntos de verificacin de prioridad 1 y 2 se satisfacen. Nivel de Conformidad Triple AAA: todos los puntos de verificacin de prioridad 1,2 y 3 se satisfacen.

Componentes esenciales de accesibilidad web

Contenido: informacin presente en una pgina o aplicacin web. Esto incluye texto, imgenes y sonidos, cdigo que define la estructura, etc. Navegadores web, reproductores multimedia y otros agentes de usuario. Lectores de pantalla, teclados alternativos, software de escaneo, etc. Conocimiento de los usuarios y experiencia en la utilizacin Web. Desarrolladores diseadores, codificadores, autores, etc. Software para crea pginas web, para evaluar la accesibilidad web, validadores de HTML, validadores de CSS, etc.

Primeros pasos para aprender a hacer una pgina web

Resumen: Gua sobre como hacer una web. Aprende a hacer una web gratis desde el principio y de forma fcil.
AVISO: este artculo es un captulo introductorio al resto del manual. En l no se dan explicaciones especficas sobre la creacin de pginas web, simplemente se introduce al lector en materia para que segn sus necesidades e inquietudes profundice en los temas que le interesen mediante los enlaces que se van sugiriendo durante la lectura. Para una explicacin ms concreta sobre los pasos a seguir para hacer una web, hay que leer el manual completo, no slo este artculo. Ahora podemos empezar. Antes de nada, decir que el desarrollo web es un proceso creativo y personal en el que cada uno decide cmo hacer las cosas, por lo que estos pasos que te propongo aqu son slo eso, propuestas, ideas, sugerencias o como quieras llamarlo. Cada uno despus puede optar por hacer las cosas como prefiera. No obstante, puede ser interesante que visites las secciones accesibilidad, usabilidad yposicionamiento en buscadores antes de comenzar a elaborar tu trabajo, ya que cuando las leas comprenders que hay que tener muchas cosas en cuenta a la hora de elaborar una web y sus contenidos si queremos tener cierto xito.

Una vez aclarado esto, hay que decir que para el diseo de pginas web debemos tener en cuenta varias etapas:

1. Planteamiento de objetivos para tu pgina web

Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el proyecto y qu queremos conseguir al realizar nuestra web. La planificacin de tu web debe incluir:

Breve descripcin de los contenidos de la pgina, su ttulo principal, etc. Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.) Pginas parecidas a la ma, qu puedo ofrecer yo que no tengan ellas para atraer a mi pblico objetivo, etc. Hardware, software, documentacin que necesito para realizarla y de qu dispongo realmente. Describir cul es mi publico objetivo, nivel informtico, idiomas, intereses, problemas fsicos, etc. para adaptar la pgina a sus caractersticas. Dnde se va a visualizar la web; navegadores ms utilizados, plugins, elementos especficos, etc.

2. Estructurar el contenido de la pgina

Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los grficos, los vnculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la pgina web. Antes de empezar a desarrollar tu pgina web en el ordenador, debes tener muy claro cules sern sus contenidos, su estructura, el nombre de la pgina, etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo intil y prdidas de tiempo. Hay varias maneras de estructurar el contenido de una web: En rbol: Esta estructura est compuesta por una pgina principal que enlaza con otras pginas, las cuales, a su vez, enlazan con otras pginas de nivel inferior. De esta manera se agrupan las pginas web en niveles, de tal modo que para llegar del primero al ltimo se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos una web con muchas pginas, porque para ver las pginas de otra rama tenemos que retroceder hasta la pgina principal, haciendo la navegacin muy pesada.

En lista: Esta estructura es la opuesta a la anterior. En ella no existe pgina principal ya que todas estn en el mismo nivel. Para llegar a la ltima pgina hay que recorrer todas las anteriores. Es una estructuracin muy adecuada para la presentacin de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de pginas web para conseguir su objetivo.

Mixta: Esta estructura es una combinacin de las dos anteriores. Las pginas estn jerarquizadas en niveles, los cuales a su vez estn conectados entre s en forma de lista. Esta estructura es mucho ms navegable y prctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la pgina principal para hacerlo.

En red: Esta estructura supone que todas las pginas de la web estn conectadas entre s, por lo que es una estructura ms compleja y menos ordenada. Su ventaja es que desde cada pgina podemos ir a cualquier otra del sitio. No obstante, requiere mucha planificacin para evitar ofrecer al visitante un caos de enlaces innecesarios.

Una vez tengas claro lo que quieres hacer y su estructura bsica puedes empezar a recopilar informacin para confeccionar cada seccin de tu pgina web. Conforme vayas investigando sobre el tema de la web, casi con seguridad irs realizando modificaciones tanto en su estructura como en sus contenidos para adaptarla mejor a lo que has aprendido, por lo que es conveniente que trabajes sobre borradores, no con versiones definitivas, te ahorrars mucho trabajo. Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseo querer colocar un men a la izquierda con las

secciones principales, un cuerpo central con el contenido de la seccin y una ltima columna a la derecha donde insertar tu publicidad. No obstante, puede ocurrir fcilmente que al buscar informacin sobre su escudera encuentres tanta y tan diversa que llegues a la conclusin de que es ms cmodo para los visitantes colocar un men de navegacin especfico de la seccin en la izquierda y el principal en la derecha para que puedan navegar por la seccin con rapidez. Por lo que si ya hiciste la pgina definitiva de la seccin llamada escudera, tendrs que retocarla para adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.

3. Disear la pgina web

Una vez tengas hecha la estructura, recopilada bastante informacin y completado el contenido de varias secciones, tienes suficiente material como para saber con ms precisin lo que quieres, por lo que puedes empezar a disear grficamente cada una de las pginas de tu web, indicando los elementos interactivos y grficos que van a intervenir en cada una. Para esto, y fundamentalmente para manejar los vnculos entre documentos, se cre el lenguaje HTML. El HTML es un lenguaje de marcacin diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas web. A la hora de empezar con el diseo, ten en cuenta que:

La estructura de la pgina debe ser lo ms lgica posible facilitando la navegacin a tus visitantes (es importante en este punto la usabilidad). Ninguna pgina puede quedar hurfana, es decir, todas las pginas deben de tener enlaces a otras pginas. Si esto ocurre, es probable que el usuario cierre nuestra pgina y entre en otra en la que le sea ms fcil navegar por los contenidos. Aunque no es un requisito necesario, s que es muy aconsejable que aprendas HTML, ya que as podrs hacer todo lo que quieras sin depender de editores grficos como Dreamweaver (ver manual Dreamweaver), tendrs ms flexibilidad y opciones a la hora de realizar tus diseos, podrs corregir tu cdigo y saber qu es lo que falla cuando te de errores, entenders cmo funcionan las pginas de otros webmasters, etc. En esta misma pgina, hay un manual HTML muy completo que puedes mirar. Aprender a usar otras tcnicas, como las hojas de estilo (CSS) te ser muy til para crear una pgina atractiva y bien diseada. Con las hojas de estilo puedes crear un archivo que te sirva para dar una mejor apariencia a todas tus pginas a la vez, y siempre que quieras cambiar el aspecto de tu web, slo tendrs que modificar ese archivo en lugar de ir una por una revisando cada pgina de la misma. Si quieres aprender a usar este lenguaje, en esta misma web hay un manual completo de hojas de estilo o CSS.

Analizar tu audiencia. Clave de xito en la Web

Resumen: Aprende a analizar tu audiencia para conocer sus gustos y necesidades y poder montar un negocio exitoso.
Los futuros usuarios de una web deben ser tenidos en cuenta a la hora de disearla. Planear con cuidado tus objetivos es crucial para que un proyecto web tenga xito. Piensa en quines sern tus lectores, porqu querran visitar tu web y hasta qu punto puede interesarles realmente lo que vas a ofrecerles. Si lanzas un proyecto web sin planificar a qu audiencia especfica va a ir dirigido, es probable que lo ests condenando al fracaso antes de empezar. Puede suceder, y no en pocas ocasiones de hecho, que lo que piensas que ser un xito en ventas sea un rotundo fracaso, o que lo que ofreces a tus visitantes no tenga la acogida que esperabas y pase sin pena ni gloria por el enorme mundo de la WWW. Una razn importante para que esto pase es que no hayas analizado bien tu nicho de mercado (tus futuros clientes) y lo que ofrezcas no sea un producto atractivo para ese sector al que te ests enfocando. La solucin a esto es conseguir trfico segmentado (visitantes interesado en tus productos o contenidos), y para ello hay varias estrategias.

Estrategias para conocer a tu audiencia

Vigila a la competencia
Si ests planeando lanzar una web supongo que conocers otras pginas de temtica similar a la tuya. Una buena forma de empezar a conocer los gustos de tu audiencia es analizar las pginas de la competencia. Mira qu ofrecen, qu secciones tienen, cmo estructuran los contenidos. Si tienen comentarios en sus artculos o productos analzalos tambien, observa cules generan ms polmica, qu dudas plantenan en base a ellos los usuarios, etc.

Sigue los foros

Localiza foros que hablen sobre la temtica de tu web y mira qu asuntos son los ms tratados, las dudas que se exponen, las cosas que les desagradan y les gustan a la audiencia, o incluso puedes montar una encuesta improvisada para preguntarles sobre lo que les interesa. Ms o menos en la lnea de lo anterior.

No te olvides del posicionamiento

El posicionamiento en buscadores es fundamental para lograr el xito de una web. Estar en los primeros resultados de los buscadores para las palabras clave que tengan que ver con tu mercado es una de las mejores formas de segmentar trfico que existen. Pinsalo un momento, quin puede haber ms interesado en la PSP que vendes en tu web que alguien que busca informacin sobre ella en un buscador?.

Cuando realices tus campaas de posicionamiento, procura focalizarlas para promocionar laspalabras clave ms relacionadas con tu web. Por ejemplo, si tienes una tienda de flores online, algunas palabras que te interesara posicionar seran comprar flores compra de flores tienda de flores, etc. As que cuando des de alta tu web en directorios, intercambies enlaces y cualquier otra cosa, no te olvides de escribir como ttulo del enlace tus palabras clave. En la gua de posicionamiento en buscadores hay ms artculos para aprender a posicionar una web correctamente.

Adwords
Adwords es el sistema publicitario de Google y uno de los ms importantes de la Red (por no decir el ms importante). Los anunciantes pagan por aparecer en los promeros puestos de los resultados de bsqueda para las palabras clave que ellos eligen, y tambin para aparecer en pginas webs de su campo. Cuando comienzas un proyecto web y an tienes pocas visitas (audiencia), o cuando quieres promocionar un producto especfico, un servicio o cualquier otra cosa, utilizar Adwords puede ser muy til, ya que es una potente herramienta para segmentar el trfico si se usa bien. Lo mismo que ocurre con el posicionamiento, con Adwords se deben elegir bien las palabras clave que se van a usar para hacer los anuncios, hay que probar constantemente cules son los ms rentables e ir afinando nuestra campaa publicitaria para acercarnos a nuestra audiencia, pero es una gran fuente de visitas interesadas en nuestros contenidos si sabemos usarlo como se debe y puede indicarnos que palabras clave atraen ms visitantes interesados en nuestros productos para centrarnos en ellas en el posicionamiento. No caigas en el error de anunciarte por palabras muy genricas, esto es una prdida de tiempo. Prate a pensar cules son las partes ms jugosas de tu web y a qu clase de personas les interesara para centrarte en ellas.

Encuestas
Las encuestas son una de las formas tradicionales de sondear a tus usuarios acerca de sus gustos. Son un buen recurso porque te permiten plantear la duda exacta que creas oportuno a tu audiencia. Puedes preguntarles si les gusta un producto concreto, si consideran util tal seccin, qu tipo de contenido les gustara que se incluyera y cualquier otra cosa que se te ocurra. No obstante, es una forma de conocer a tu audiencia que resulta til sobre todo una vez la web est creada y funcionando, para ir adaptndonos a los cambios que surgen en el mercado.

Hay servicios de encuestas gratuitos por ah que te ahorran tener que instalar scripts en tu web, depende de los gustos de cada uno, pero algunos interesantes son: interrogantes,[Link], encuestas [Link], etc.

Estadsticas
En la misma lnea que lo anterior, las estadsticas web sirven para conocer a tu audiencia despus de que la pgina est hecha. Es til mirar cules son las pginas ms visitadas de tu sitio para seguir creando contenido, cul es el porcentaje de abondonos en la pgina de acceso (seal de que no les interesa lo que ven), el nmero de pginas visitadas por usuario, el tiempo que permanecen en la web, etc. Algunas estadsticas gratuitas realmente tiles son: Google Analytics y StatCounter.

Webs sociales
Hay que adaptarse a las nuevas tendencias que surgen en Internet si queremos ser los primeros en nuestro campo, y actualmente el tema de las webs sociales del tipo Digg o Mename se ha vuelto muy popular. Con algo de ingenio podemos utilizar esto para nuestro beneficio conociendo un poquito ms sobre nuestra audiencia. Una primera opccin que tenemos con las webs sociales es analizar las noticias que enva la gente acerca del tema que trata nuestra web. Por ejemplo, si tu web es sobre coches sera bueno que empezaras buscando esa palabra en alguna de las muchas webs sociales que existen actualmente, para ver cules son las noticias ms votadas y cules las que menos interesan. En general, ver que se cuece en tu campo. Otra opcin, si tienes algn pluggin instalado para que tus usuarios puedan enviar noticias a estas pginas, es ver cules son las noticias dentro de tu web que ms enva la gente. Es de suponer que son stas las que consideran ms interesantes y por tanto, puedes seguir escribiendo en relacin a esos temas. Una vez conozcas un poco ms a tu audiencia y les proporciones los contenidos que les interesan, vers como ciertos cambios ocurren en tu web. Por ejemplo, es esperable que el nmero de pginas vistas por usuario aumente, los suscriptores a tu feed o a tu boletn de novedades, los productos vendidos, etc. adems de contribuir a la fidelizacin de usuarios. No obstante, no es bueno relajarse y dejar de analizar a tu audiencia, ya que los gustos de la gente cambian y lo que te resulta rentable hoy puede no serlo maana. No dejes de revisar tus estadsticas, a tu competencia y lo que se habla en los foros. Recuerda, conocer el tipo de productos e informacin que tu audiencia quiere es necesario para el desarrollo del contenido y el diseo apropiado de tu web.

Como planificar una pgina web

Resumen: Planifica los objetivos y recursos de tu web para ahorrar tiempo de desarrollo y tener xito en Internet.
Una vez has establecido tu nicho de mercado y has analizado tu audiencia el siguiente paso esplanificar los recursos de la web. Muchas pginas web son desarrolladas sobre la marcha sin una planificacin concreta de sus objetivos y recursos. Como consecuencia, muchos sitios duran poco en Internet perdiendo la oportunidad de convertirse en buenos proyectos. Pensar antes de actuar, y estar seguros de que tenemos los recursos, capacidades y posibilidades suficientes para hacer que un proyecto tenga xito, son partes fundamentales (y olvidadas) del diseo web. Este proceso inicial implica elegir un tipo determinado de audiencia y unos objetivos claros.

Productos y objetivos
Debes elegir el producto que vas a ofrecer a tus visitantes, ya sea informacin, objetos fsicos o servicios. Es algo que vas a hacer desde casa o necesitas un soporte externo?, quin gestionar la venta? Tambin sera bueno tener una idea de lo que quieres conseguir con tu web, montar un negocio, una web informativa, pasar el rato

Recursos

Soy capaz yo solo de hacer una web?: si la respuesta es no, ya puedes empezar aaprender HTML y estudiar tutoriales como ste. Descubrirs que el diseo web no es tan difcil como en un principio parece. Qu ancho de banda necesito?: normalmente al empezar un proyecto pequeo con 1 GB tendrs suficiente, pero hay calculadoras muy buenas que te pueden ayudar a estimar el ancho de banda que necesitars. Cunto espacio para almacenar la web?: por lo general no necesitars ms de 100 200 MB para empezar y te sobrar. De cunto dinero dispongo?: hoy en da no hace falta gastarse mucho dinero para tener una pgina en Internet. El precio de los dominios es asequible para la mayora y losservicios de alojamiento web tambin tienen precios competitivos. Por lo dems, debers decidir si gastar una parte de tu presupuesto en publicidad como Adsense o a otro tipo de servicios como listas de correo y dems. Obviamente, con un poco de

paciencia se pueden encontrar un montn de buenos servicios gratuitos, no compres lo primero que encuentres.

Tecnologa

Con qu lenguaje desarrollo la pgina web?: para pginas estticas que no se actualizan muy a menudo, el HTML es ms que suficiente, pero si planeas tener una pgina muy actualizada y con contenido dinmico es mejor decantarse por lenguajes como PHP o ASP. Qu tipo de soporte voy a proporcionar?: es importante incluir funcionalidades en la pgina web que faciliten la comunicacin con el usuario. Imprescindible un formulario de contacto o el rea de preguntas frecuentes, como opcionales los foros o chats pueden aadir valor a la web. Voy a utilizar registro de usuarios?: si vas a ofrecer secciones exclusivas para usuarios o cosas as, la tecnologa necesaria ser ms complicada que para hacer una pgina basada en html, necesitars trabajar con bases de datos. Cmo analizo el uso de mi web?: necesitas analizar tu audiencia para saber si vas por buen camino. No se puede crear una web de xito a ciegas, es importante que utilices unsistema de estadsticas web que te oriente en las decisiones que tomes acerca de tu web. Uno gratuito bastante bueno es StatCounter.

Encontrar un nicho de mercado rentable para tu pgina web

Resumen: Para tener xito con tu web, tendrs que dirigirte a un pblico muy especfico dentro de un tema concreto.
Si quieres hacerte un hueco en la sobrecargada Red, tendrs que escoger muy bien tu nicho de mercado, es decir, tendrs que dirigirte a un pblico muy especfico dentro de un tema concreto. Por ejemplo, el tema del automovilismo est bastante explotado en Internet, pero puedes centrarte en algo especfico dentro de este mercado que no tenga tanta oferta (competencia), como podran ser coches de la marca A. Puedes seguir afinando un poco ms y centrarte en hacer nicamente revisiones de coches de la marca A, o incluso ms y hacer slo revisiones de monovolmenes de la marca A. Tal vez en un nicho de mercado tan especfico tengas ms oportunidades de destacar. Por lo dicho hasta ahora tal vez puedas pensar que al centrarte en algo tan concreto el nmero de potenciales usuarios es mucho menor que hablando de todos los coches de la marca A. En parte llevas razn, hay muchas ms bsquedas relacionadas con todos los coches que slo con monovolmenes, pero eso al fin y al cabo no es importante si no vas a conseguir estar el primero en buscadores para las bsquedas que te interesan. No tiene

importancia que mucha gente busque sobre ese tema si no te van a encontrar a ti. En cambio, centrndote en un nicho ms pequeo, aunque haya menos potenciales visitantes tienes ms probabilidades de que lleguen a tu web porque no hay tanta competencia. El verdadero potencial se encuentra en los nichos pequeos, ah es donde puedes conseguir un xito aceptable. Adems, hacer una web sobre un tema muy genrico implica mucho ms esfuerzo. Todo el material que hay que reunir, la elaboracin de textos, el tiempo que requiere Es mejor profundizar mucho en un tema y ser el mejor en l, que intentar abarcar demasiado y no destacar en nada. La clave es esta: no intentes contentar a todo el mundo, convirtete en un especialista.

Razones por las que un nicho de mercado pequeo es bueno para ti

Puedes concentrar tus esfuerzos en un tema concreto para ofrecer cosas novedosas, dar mucha informacin y destacar. El posicionamiento en buscadores te ser ms fcil al centrarte en un mercado en el que no hay tanta competencia como para otros ms genricos. Es ms fcil definir el pblico objetivo. Al ser un tema muy concreto, definir el tipo de audiencia y centrarte en lo que necesitan es ms sencillo. Los esfuerzo y recursos requeridos para desarrollar un proyecto as son menores. Trabajar para un tema genrico requiere conocimientos y tiempo que en la mayora de los casos no se tienen.

Para elegir tu nicho de mercado debes tener en cuenta tus hobbies, los temas que dominas, que te gustan y te motivan. Tener ganas de trabajar en algo es la mejor manera de hacerlo bien. No elijas un tema para tu web que no te interese o no te guste porque te acabars aburriendo y la tarea resultar desagradable.

Elegir el nicho de mercado adecuado

El nicho de mercado adecuado es aquel en el que tienes posibilidades de tener una alta visibilidad y accesibilidad a las personas que se beneficiarn de lo que ofreces. Es aquel en el que puedes emplear tu talento, tus conocimientos y es adems una aficin.

Cmo encontrar un buen nicho de mercado

Encuentra temas o productos que te apasionen y conozcas en profundidad. Calcula las posibilidades de cada tema que hayas seleccionado anteriormente. Para eso:

Determina la demanda: una forma de hacerlo puede ser elaborar una lista con las palabras o frases relacionadas con cada tema e investigarlas con la herramienta de palabras clave de Adwords. Esta herramienta te ofrece datos sobre el nmero de bsquedas que pueden orientarte para saber si a la gente le interesa el tema o no.

Determina la competencia: con la misma herramienta anterior puedes ver la competencia que hay para cada palabra seleccionada. La clave est en elegir los temas que tengan ms demanda y menos competencia.

Realiza sondeos: una vez hayas escogido uno o varios de los temas para tu pgina web en base a los parmetros anteriores, es conveniente hacer una encuesta para estimar el grado de aceptacin que tendra tu pgina y decantarte por alguno. Hay pginas web como [Link] que tienen montada toda una comunidad alrededor de las encuestas. Puedes poner tu encuesta en estos sitios para intentar que la conteste el mayor nmero de personas posibles, o tambin puedes preguntar en foros y zonas de debate.

Como organizar una pgina web. Diseo de la estructura

Resumen: Ideas bsicas para crear una estructura para tu web efectiva y usable que llegue a ms visitantes
Llegados a este punto necesita definir la organizacin de la informacin de tu sitio web. Es decir, ha llegado el momento de crear la estructura de tu web, su esqueleto, la base que soportar todo lo dems. La forma en que estructures el contenido de tu web ser determinante para que los usuarios encuentren o no lo que buscan (algo muy relacionado con la usabilidad). Por tanto, sta debe facilitar y agilizar al mximo la bsqueda de informacin de tus visitantes. Al mismo tiempo, tambin es importante disear la estructura de forma que actualizaciones futuras de la web no obliguen a cambiar muchas partes de la pgina. Para crear la estructura, puede ser til hacer un inventario de todo el material que vas a exponer en la pgina e ir organizndolo en un primero momento por temas para despus construir grficamente la estructura de la web.

Aunque poca gente lo hace, es muy til construir varios prototipos (o bocetos) de tu web y probar la reaccin de los usuarios ante ellos. Esto de comprobar la reaccin parece ms complicado de lo que crees, pero un mtodo casero y sencillo que puede aportar informacin para saber si la estructura del sitio es fcil de comprender y manejar, es hacer varias plantillas con diferentes estructuras y pedir a amigos y familiares que naveguen por ellas y nos den su impresin. Cul les resulta ms fcil de entender, ms atractiva, en cul se encuentra mejor una determinada informacin, en cul estn ms claros los contenidos a los que dirigen los enlaces, etc.

Pgina de inicio
La pgina de inicio es la principal puerta de entrada de visitas a tu pgina, por lo que debe poder atrapar al mayor nmero de visitantes que entren. Para ello, debes adaptar su estructura a tu pblico objetivo, haciendo bien visibles los contenidos que ms pueden interesarles. Tambin es importante dejar claro desde el principio el tema de la web, y para eso la pgina de inicio es una buena herramienta. Especifica claramente qu se va a encontrar el usuario al explorar tu pgina, a la gente no le gusta perder el tiempo y a ti no te interesan visitas de este tipo porque no aportan ningn beneficio a tu web. Por otro lado, algo tan sencillo como incluir un enlace bien visible a la pgina principal en todas tus pginas facilita muchsimo la navegacin. En este sentido, algo que se usa mucho y tambin ayuda a los usuarios a navegar por tu web es poner un enlace en el banner o logo de la cabecera que apunte a la pgina principal del sitio.

Diseo del men de navegacin

Una de las cosas ms importantes a la hora de estructurar la pgina es el diseo del men de navegacin. Echa un vistazo a la estructura inicial que creaste, cules son las secciones ms grandes?, cules agrupan ms contenido?, esas pueden ser las secciones que incluyas en el men principal y que sera conveniente que aparecieran en cada pgina de tu web

para facilitar la navegacin. Ahora bien, una vez dentro de cada seccin concreta, el men puede modificarse para mostrar las opciones especficas que ofrece esa seccin (adems de enlaces a las secciones principales). No hay que olvidar que otro tipo de pginas como informacin acerca de la web, aviso legal, poltica de privacidad, formulario de contacto, etc, deben estar convenientemente visibles, por lo que muchas pginas optan por incluir un men horizontal a pie de pgina para enlazar con estas secciones.

Tipos de estructuras de sitios web

Ya se han comentado en este tutorial los principales tipos de estructuras que se usan en la web, si te interesa puedes echarle un vistazo al artculo: Estructurar el contenido de la pgina web.

Por qu registrar tu propio nombre de dominio

Resumen: Por que es importante tener un nombre de dominio y consejos en el registro.
Si tienes una pgina web pero no un nombre de dominio propio, del tipo [Link], deberas considerar seriamente registrar uno. Como se ha dicho hasta la saciedad, un nombre de dominio es tu marca en Internet, la forma que tendrn los dems de reconocerte y recordarte. Lo mejor sera tener en cuenta el registro del dominio desde el primer momento, cuando te dedicas a planificar la web, los objetivos, de qu va a tratar, el dinero de que dispones, etc. Pero si ya la tienes hecha siempre puedes plantearte esta posibilidad despus.

La importancia de tener un nombre de dominio

Si tienes un negocio o pretendes tener una web seria, un dominio propio te proporcionar credibilidad y un sentido de estabilidad. Las pginas gratuitas, del tipo [Link]/miespacioweb/[Link] pueden estar bien si no vas en serio, pero para hacer una web importante o un negocio es muy conveniente utilizar un nombre de dominio propio. Si eliges un nombre de dominio que refleje bien los objetivos de tu pgina y que adems sea fcil, tus visitantes lo recordarn ms fcilmente y podrn regresar a ti con mayor probabilidad si necesitan lo que tu ofreces.

Si cambias de hosting no tendrs que modificar nada del cdigo de tu web. La mayora de los dominios gratuitos los ofrecen las empresas que brindan espacio web gratuito, por lo que si pasado un tiempo no ests contento con ese hosting, al cambiar a otra empresa tendrs que cambiar de direccin web. Esto es muy malo para el posicionamiento en buscadores, pues supone empezar de nuevo en la promocin del dominio, empezar a subir posiciones otra vez, conseguir enlaces, etc.

Si tienes contratado un servicio de alojamiento web para tu pgina, el nombre de dominio parece el siguiente [Link], sabes la importancia de tener un buen hosting; no hay publicidad que tu no hayas contratado, no salen popups molestos, es rpido de cargar y falla lo menos posible. Todo eso mejora la experiencia del usuario, te da credibilidad y cierta seguridad. Un nombre de dominio refuerza esa credibilidad de los usuarios en lo que ofreces.

Cosas que hay que saber para registrar un dominio

En primer lugar, el precio anual de un nombre de dominio es bastante bajo, lo que implica que es asequible para la mayora de personas que tienen una web. Es cierto que vara segn el pas, en Espaa por ejemplo se pueden registrar por un precio entre los 910 euros y los 20 aproximadamente. Cada tanto hay ofertas que te permiten conseguir dominios a precios ms bajos an, y tambin hay compaas que te cobrarn ms por ellos si te dejas. El punto est en comparar precios y servicios. Es muy importante que la empresa te asegure tener el control del dominio, poder modificar la direccin a la que apuntan las DNS si lo deseas y figurar como propietario del mismo. De lo contrario puedes tener problemas para dirigirlo a otro hosting, renovarlo, etc. No te preocupes si al buscar un nombre de dominio para tu web descubres que las palabras que queras estn registradas ya. Es muy frecuente, la clave est en encontrar un equilibrio entre la originalidad y la prctica. Por ejemplo, puede que a tu tienda de flores le viniera muy bien tener el dominio [Link], pero est cogido, por lo que puedes probar con [Link], o cosas parecidas. Por ltimo, recuerda que el registro de dominio no es para toda la vida, tienes que estar atento cada ao para renovarlo y no pasarte del plazo, o de lo contrario alguna persona podra adelantarse y renovarlo a su nombre, lo que significa que todo el trabajo que hayas hecho en base a ese dominio lo habrs perdido.

Como aadir imgenes a una pgina web

Resumen: Gua sobre como aadir imgenes a una pgina web y darles formato.
Para aadir imgenes a una pgina web hay que escribir el siguiente cdigo HTML:

<img src="[Link]">
src indica la ruta del archivo. Si el archivo de imagen se encuentra en la msma carpeta que la pgina web se escribira como en el ejemplo, pero si se encuentra en una carpeta distinta la ruta podra ser as:

src="carpeta/[Link]".
Tambin se puede llamar a una imagen con la direccin completa:

src="[Link]
Ahora bien, es conveniente aadir otros atributos al cdigo de la imagen:

Alto y ancho: es conveniente determinar el ancho y alto de una imagen para evitar al navegador operaciones innecesarias y facilitar que cargue ms rpido la pgina. Para esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es recomendable establecer estos atributos. Por ejemplo:

<img src="[Link]" width="300" height="150">

En este caso la imagen tendra un ancho de 300 pxeles y un alto de 150 pxeles.

Imgenes con enlaces: uno de los mayores usos que se le dan a las imgenes en la webes el de vinculr archivos, utilizarlas como enlaces. Ejemplo:

<a href="carpeta/[Link]"><img src="[Link]"></a>

Donde href establece la ruta de la pgina a la que dirigir la imagen. Otro ejemplo:

<a href="[Link] <img src="carpeta/[Link]"></a>

Atributo alt: este atributo especifica un texto alternativo que se muestra en lugar de la imagen cuando sta no existe o el navegador no es capaz de cargarla. En estos casos, el texto alternativo es la nica forma que tienen los visitantes de conocer el contenido de la imagen. El atributo alt se expresa as:

<img src="[Link]" alt="texto alternativo a mi gusto">

Establecer el borde: toda imagen en la web puede tener un borde de un grosor determinado. Segn tus preferencias podrs determinar si la imagen tiene o no borde, y en caso de tenerlo su grosor. Ejemplos:

Imagen sin borde:

<img src="[Link]" border="0">

Imagen con borde de 3 pxeles:

<img src="[Link]" border="3">

Atributos completos del cdigo de la imagen

Con todo lo anterior, podemos definir bastante bien las propiedades bsicas de la imagen (recordemos que es muy importante el uso de imagenes en los blogs y en portales web). Para denifir otro tipo de detalles visuales hay que hacer uso de CSS. Veamos un ejemplo con lo aprendido:

<a href="[Link]"> <img src="[Link]" width="300" height="150" border="5" alt="texto alternativo de la imagen"></a>

Algunos errores comunes en la utilizacin de imgenes en la web

Reducir el tamao de la imagen directamente en el editor de HTML: si haces esto, no ests reduciendo realmente la imagen, le ests diciendo al navegador que la redimensione en el momento, pero su tamao (y lo que ocupa) sigue siendo igual y la pgina tarda una eternidad en cargar. Como consecuencia, puede ocurrir que tengas una imagen muy pequena en tu web que tarda mucho en cargar, porque en realidad es enorme. Para cambiar el tamao de una imagen utiliza un editor de imgenes, as el peso tambin se reducir y la pgina web tardar menos en cargar. Usar imgenes en formato BMP: por suerte, este formato est desapareciendo cada vez ms de la web, y digo con suerte porque es un tipo de formato que no comprime la imagen, por lo que sta es muy pesada y ralentiza mucho la carga de la pgina. Es mejor usar imgenes .gif, .jpg o .png. No poner etiquetas alt: las imgenes son importantes en la web, pero no aaden contenido a la pgina, por lo que aadir una pequea descripcin a la imagen resulta muy til de cara al posicionamiento en buscadores ya que da informacin a los buscadores acerca del tema de tu web. Ni que decir tiene que en los navegadores en los que las imgenes no se muestran en su lugar aparece el texto escrito en esta etiqueta, por lo que los usuarios que los utilizan tienen una gua para saber qu imagen haba si escribes un texto descriptivo, algo que mejora mucho la accesibilidad web.

Donde encontrar imgenes web

Una alternativa a la creacin de imgenes propias para tu web, es utilizar las que existen disponibles en Internet para su libre uso. Algunas pginas donde puedes comenzar a buscar son:

[Link]: cuenta con una enorme coleccin de fotografas que se pueden usar libremente para complementar nuestras webs. IconShock: esta web tiene una seccin de iconos gratuitos para utilizar en nuestra pgina web de muy buena calidad. [Link]: en la lnea de las anteriores webs, cuentan con una gran coleccin de imgenes listas para usar. Yotophoto: en un buscador de imgenes con licencia copyleft, GNU y dems licencias que permiten la distribucin. Muy til.

Para aadir imgenes a una pgina web hay que escribir el siguiente cdigo HTML:

<img src="[Link]">
src indica la ruta del archivo. Si el archivo de imagen se encuentra en la msma carpeta que la pgina web se escribira como en el ejemplo, pero si se encuentra en una carpeta distinta la ruta podra ser as:

src="carpeta/[Link]".
Tambin se puede llamar a una imagen con la direccin completa:

src="[Link]
Ahora bien, es conveniente aadir otros atributos al cdigo de la imagen:

Alto y ancho: es conveniente determinar el ancho y alto de una imagen para evitar al navegador operaciones innecesarias y facilitar que cargue ms rpido la pgina. Para esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es recomendable establecer estos atributos. Por ejemplo:

<img src="[Link]" width="300" height="150">

En este caso la imagen tendra un ancho de 300 pxeles y un alto de 150 pxeles.

Imgenes con enlaces: uno de los mayores usos que se le dan a las imgenes en la webes el de vinculr archivos, utilizarlas como enlaces. Ejemplo:

<a href="carpeta/[Link]"><img src="[Link]"></a>

Donde href establece la ruta de la pgina a la que dirigir la imagen. Otro ejemplo:

<a href="[Link] <img src="carpeta/[Link]"></a>

Atributo alt: este atributo especifica un texto alternativo que se muestra en lugar de la imagen cuando sta no existe o el navegador no es capaz de cargarla. En estos casos, el texto alternativo es la nica forma que tienen los visitantes de conocer el contenido de la imagen. El atributo alt se expresa as:

<img src="[Link]" alt="texto alternativo a mi gusto">

Establecer el borde: toda imagen en la web puede tener un borde de un grosor determinado. Segn tus preferencias podrs determinar si la imagen tiene o no borde, y en caso de tenerlo su grosor. Ejemplos:

Imagen sin borde:

<img src="[Link]" border="0">

Imagen con borde de 3 pxeles:

<img src="[Link]" border="3">

Atributos completos del cdigo de la imagen

Con todo lo anterior, podemos definir bastante bien las propiedades bsicas de la imagen (recordemos que es muy importante el uso de imagenes en los blogs y en portales web). Para denifir otro tipo de detalles visuales hay que hacer uso de CSS. Veamos un ejemplo con lo aprendido:

<a href="[Link]"> <img src="[Link]" width="300" height="150" border="5" alt="texto alternativo de la imagen"></a>

Algunos errores comunes en la utilizacin de imgenes en la web

Reducir el tamao de la imagen directamente en el editor de HTML: si haces esto, no ests reduciendo realmente la imagen, le ests diciendo al navegador que la redimensione en el momento, pero su tamao (y lo que ocupa) sigue siendo igual y la pgina tarda una eternidad en cargar. Como consecuencia, puede ocurrir que tengas una imagen muy pequena en tu web que tarda mucho en cargar, porque en realidad es

enorme. Para cambiar el tamao de una imagen utiliza un editor de imgenes, as el peso tambin se reducir y la pgina web tardar menos en cargar.

Usar imgenes en formato BMP: por suerte, este formato est desapareciendo cada vez ms de la web, y digo con suerte porque es un tipo de formato que no comprime la imagen, por lo que sta es muy pesada y ralentiza mucho la carga de la pgina. Es mejor usar imgenes .gif, .jpg o .png.

No poner etiquetas alt: las imgenes son importantes en la web, pero no aaden contenido a la pgina, por lo que aadir una pequea descripcin a la imagen resulta muy til de cara al posicionamiento en buscadores ya que da informacin a los buscadores acerca del tema de tu web. Ni que decir tiene que en los navegadores en los que las imgenes no se muestran en su lugar aparece el texto escrito en esta etiqueta, por lo que los usuarios que los utilizan tienen una gua para saber qu imagen haba si escribes un texto descriptivo, algo que mejora mucho la accesibilidad web.

Donde encontrar imgenes web

Una alternativa a la creacin de imgenes propias para tu web, es utilizar las que existen disponibles en Internet para su libre uso. Algunas pginas donde puedes comenzar a buscar son:

[Link]: cuenta con una enorme coleccin de fotografas que se pueden usar libremente para complementar nuestras webs. IconShock: esta web tiene una seccin de iconos gratuitos para utilizar en nuestra pgina web de muy buena calidad. [Link]: en la lnea de las anteriores webs, cuentan con una gran coleccin de imgenes listas para usar. Yotophoto: en un buscador de imgenes con licencia copyleft, GNU y dems licencias que permiten la distribucin. Muy til.

Tratamiento de imgenes para la web

Resumen: Edicin y uso de los distintos tipos de imgenes en la web, as como su optimizacin para que ocupen lo menos posible.
Las imgenes son una parte importante de la web. De hecho, la mayora de las pginas web distribuyen su espacio entre texto e imgenes. stas aaden una nota de color a los sitios y si se usan correctamente, ayudan al usuario a entender de lo que se est hablando.

Tipos de imgenes
Los formatos de imgenes web ms usados son .gif, .jpg y .png:

GIF: es un formato de archivo sin prdida, es decir, se conserva cada pixel de la imgen original, lo que implica que el tamao suele ser mayor que en formatos .JPG. No obstante, para grficos sencillos con pocos colores es muy eficiente. Sin duda su mayor ventaja frente a los otros formatos es que permite crear animaciones JPG: comprime mucho ms las imgenes que los formatos .GIF, por lo que los archivos pesan menos. Es excelente para trabajar con fotografas de muchos colores y texturas, mantiene la calidad con pesos de imagen realmente bajos. Como inconveniente pierde algo de informacin y puede afectar a su calidad, pero en la mayora de los casos no es apreciable a simple vista. No permite crear imgenes animadas. PNG: este formato surgi como alternativa al .GIF debido a algunos problemas legales que empezaron a surgir de su uso. Es, por tanto, muy similar a ste, salvo que no permite crear animaciones.

Herramientas de edicin de imgenes

Ya se coment brevemente en este manual (hacer una web) un poco acerca de los editores de imgenes. Si haces pginas webs deberas tener en tu ordenador un programa de este tipo para poder editar las imgenes a tu gusto. Algunos programas muy buenos son Gimp (gratuito) o Photoshop (de pago, aunque existe versin de prueba), lo mejor es que pruebes tu mismo el que ms te gusta.

Edicin de imgenes
Para crear tu web, necesitars algn programa de edicin de imgenes que te permita modificarlas, cambiar el tamao, aadirles notas de texto, cambiar el formato y sobre todo optimizarlas para la web. Puede parecer algo complementario, pero conforme vayas creando tu web te dars cuenta de que necesitas un programa que te permita editar tus imgenes, ya sea de forma sencilla, como por ejemplo recortando o ampliando su tamao, o con mtodos ms sofisticados como los filtros de imagen. Algunas de las cosas ms bsicas que se pueden hacer con estos editores de imgenes y que nos sirven de ejemplo, son:

Recortar una imagen

Esto es muy til para eliminar de la imagen partes que no queremos. Por ejemplo, puede venirte muy bien la foto de un paisaje como este, pero no querer incluir el marco amarillo:

Redimensionar la imagen
A menudo una imagen es ms grande o ms pequea de lo que necesitamos, y aunque puede establecerse su tamao exacto mediante los atributos width y height, no es la forma adecuada de cambiar su tamao, ya que en realidad no lo estamos modificando, lo que estamos cambiando es su forma de verse en el navegador (el archivo sigue teniendo el mismo tamao). La mejor opcin es utilizar un programa de dibujo como el Photoshop que cambie el tamao real de la imagen.

Rotar una imagen

En ocasiones es til cambiar la orientacin de una imagen, pra esto se puede usar cualquier editor grfico. Puede rotarse de forma vertical u horizontal en varios angulos, en la mayora de los programas buenos te permite rotar la imagen un nmero determinado de grados.

Filtros de imagen
Los filtros pueden llegar a transformar una imagen por completo dndole efectos increbles. Con ellos, podrs dar a tus imgenes un aire diferente. Lo mejor para comprenderlo es ver algunos ejemplos, stos en concreto han sido hecho con Photoshop: Imagen original:

Filtros aplicados:

Optimizar las imgenes

Con optimizar imgenes me refiero a conseguir que ocupen lo menos posible y conserven una buena calidad de imagen. Si las imgenes son muy pesadas (si su tamao es muy grande), laspginas web tardan mucho en cargar y hacemos esperar a los usuarios, lo que no conviene en ningn caso. Cuanto menos ocupen ms rpido cargar tu pgina y menos hars esperar a tus visitantes. Algunas direcciones tiles para optimizar imgenes online son Virtualzone, o SiteReportCard.

Como guardar las pginas web en el servidor

Resumen: Como guardar las pginas web para que no haya problemas al subirlas al servidor.
Una vez tienes hecha la pgina, sta debe ser guardada en formato HTML para que pueda ser vista en los diferentes navegadores y no te de errores al subir los archivos al servidor web . Para esto, tienes que elegir guardar como HTML, as toda la estructura que hayas

creado, con sus enlaces, colores, tamaos de fuente y dems, se guardarn correctamente. Pero tienes que tener algunas cosas en cuenta para elegir el nombre del archivo:

El nombre no puede contener espacios: No puedes guardar una pgina con el nombrepagina [Link], sta debera guardarse de alguna de estas formas: [Link],pagina_web.html o [Link]. Normalmente los servidores web no permiten archivos con espacios, as que siempre hay que utiliza guiones o varias palabras juntas.

El archivo siempre debe acabar en HTML o HTM: la extensin del archivo debe ser .html o .htm para que te guarde la pgina web en el formato correcto y no haya errores. Puedes usar uno de los dos indistintamente, funcionan igual, pero personalmente considero que es ms correcto usar .html, al fin y al cabo estamos hablando de lenguaje HTML, no HTM. En el caso de pginas dinmicas si extensin debe ser .php, .asp, etc. dependiendo de la tencologa que utilices. Para pginas estticas puedes usar la extensin .html.

No estn permitidos los acentos ni smbolos extraos: como $, %, ^, &. No puedes guardar una pgina como pgina^[Link], por ejemplo, ms que nada porque al subirla a tu servidor tendrs problemas en la mayora de hostings, normalmente no se suelen permitir archivos con estos caracteres especiales. No escribas los nombres de archivo en maysculas: es mucho mejor [Link] que [Link]. La pgina se vera igual de las dos maneras, en este caso los servidores web no suelen tener problemas para mostrarlas, el problema es que la gente suele escribir las direcciones web en minsculas. Al escribir una direccin directamente en el navegador, sta se busca tal cual se ha escrito (incluyendo maysculas y minsculas), por lo que si tu pgina tiene el nombre en maysculas y un visitante lo escribe bien, pero en minsculas (que es lo ms habitual), dar un error 404 (pgina no encontrada). Esto sucede porque se diferencia entre maysculas y minsculas, dando lugar a considerarlo como distintos archivos. Nota que para el navegador son diferentes todos estos archivos, aunque tengan el mismo nombre: [Link], [Link], [Link], [Link], [Link], etc.

Si quieres saber como se hace una web desde cero, puedes leer el manual empezar de cero a hacer una web. Tambin es conveniente profundizar ms en la estructura del lenguaje HTML, para ello puedes aprender a travs de algn manual de HTML, tendrs mayor control sobre el desarrollo de tu web y te ser ms fcil hacer cambios y mantenerla.

Programas para hacer tus pginas web

Resumen: Gua de los programas de edicin web, ya sean editores de texto como WYSIWYG y tambin una breve resea a los templates o plantillas web prefabricadas.

Usar un editor visual de HTML (WYSIWYG)

Algunos editores muy conocidos son Dreamweaver, Go Live o NVU. Son software especializado en la creacin de sitios web, construidos para crear y modificar el cdigo HTML, CSS, PHP, etc. de tus pginas web. Tienen funciones muy tiles para un

diseador web, como el editor grfico, que te permite crear webs con pocos conocimientos de HTML ya que se asemeja a un procesador de textos. Otras funciones muy interesantes de estos programas son el permitir remplazar cdigo de mltiples pginas a la vez, la comprobacin de errores de programacin en el cdigo, previsualizar las pginas en diferentes navegadores, etc. En esta misma web hay unmanual de Dreamweaver para que aprendas a manejarlo. Lo ms interesante sin duda para una persona que est aprendiendo a hacer webs es el editor grfico. T creas la pgina como si del Word se tratara; escribes el texto, los ttulos, pones las imgenes, eliges los colores, etc. y el programa te guarda la pgina con el cdigo HTML listo. Es lo que se llama What You See Is What You Get (WYSIWYG), lo que ves es lo que obtienes. Se les llama as con razn, puesto que utilizandolos no es necesario escribir nada de cdigo HTML para crear una pgina web.

La desventaja que tienen estos programas es que si no sabes nada de HTML el diseo de tu pgina va a estar algo limitado, porque con el editor grfico se pueden hacer cosas bsicas o intermedias, pero para funciones ms complicadas es muy recomendable saber un poco de HTML.

Usar un editor de textos o de HTML

Si sabes HTML una buena opcin es programar t mismo todo el cdigo de tu web medianteeditores de cdigo fuente como el Block de notas de Windows (no est diseado para eso pero puede usarse), o algunos un poco ms especializados como Notepad. ste ltimo te colorea el cdigo de diferentes tonos segn el tipo de cdigo que tenga la pgina, lo cual resulta muy til para buscar fragmentos de un vistazo.

Los editores de texto son programas simples pero muy eficaces que permiten guardar documentos de texto sin formato. Al no ofrecer ningn tipo de gua visual, al

contrario que los editores HTML o WYSIWYG, son los ms complicados de utilizar para los que empiezar a hacer pginas web.

Los editores de HTML son bsicamente editores de texto diseados especficamente para hacer pginas web, por tanto traen incorporadas funcionalidades que no tienen los editores de texto genricos, y que facilitan mucho las cosas.

Otros recursos para hacer tus webs

Usar plantillas prefabricadas (templates)
Una plantilla prefabricada (o template) es un diseo ya hecho listo para que lo personalices y adaptes a tu web. En realidad el diseo ya est hecho, osea que no tendrs que hacer la web literalmente, pero en tus manos est adaptarlo exctamente a lo que quieras. Obviamente para adaptarlo a tus necesidades tendrs que utilizar un editor WYSIWYG o HTML, segn tus gustos. Algunos ejemplos de plantillas web (templates) disponibles en Internet:

Las plantillas web se pueden encontrar en varios formatos, como Photoshop o HTML. En la mayora de los casos, estos templates son compatibles con los editores web ms conocidos, como Dreamweaver o FrontPage, por lo que pueden modificarse tranquilamente. Las plantillas web son una forma de conseguir un diseo atractivo sin necesidad de tener muchos conocimientos de desarrollo de pginas web, o tambin una forma de inspirarte para crear tu propio diseo (mirando lo que han hecho otros pueden surgirte ideas). Algunos sitios de templates bastante populares son: Template Monster, Open Source Web Design o Template World.

Crear la pgina web. Consejos

Resumen: Consejos para crear tus pginas web de forma correcta. Hacer buenas pginas web desde el principio, ms amigables a buscadores, mejor diseadas y ms accesibles.

Tips iniciales para hacer una pgina web

Hay algunas ideas que se deben tener en cuenta a la hora de ponerse a disear la pgina web. Algunos consejos:

Usa CSS (hoja de estilos)

Separa el contenido del diseo de tu web usando hojas de estilos (CSS). Es mucho ms fcil editarlo despus, les gusta ms a los buscadores, y las pginas cargan ms rpido. La era de las tablas ha muerto.

Simplifica
La web soporta multitud de formatos, desde imgenes animadas, hasta sonidos, presentanciones en flash, videos Todos estos recursos deben usarse con cautela, si recargas la web con gifs animados o le pones un sonido que tus usuarios no puedan quitar si as lo quieren, es muy probable que se marchen. Es mejor optar por un diseo sencillo que recargarlo en exceso.

Enlaces correctos
Usa palabras que indiquen claramente a donde dirige el enlace, no pongas cosas como click aqu o este sitio, el visitante no sabr a donde va. Diferencia claramente qu es un enlace de lo que no lo es poniendo un color diferente al texto del enlace, as tus usuarios podrn localizarlos con rapidez y visitarlos si les interesa.

Estructura del texto

Crea listas de ideas, prrafos, frases en negrita y en cursiva, subapartados y cualquier otra cosa para diferencias partes en tus contenidos. La gente en la web lee deprisa, as que procura que la lectura de lo ms importante pueda hacerse de un vistazo rpido.

Tipo de fuente
Intenta usar fuentes comunes como Verdana o Arial, que casi con toda seguridad la tendrn instaladas en sus ordenadores todos los usuarios que te visiten. Si la fuente que tienes en tu web no est disponible en el ordenador del usuario, mostrar el texto con otro tipo de fuente, lo que puede llegar a desajustarte el diseo.

Color del texto y del fondo

Procura usar un color de texto y fondo que haga buen contraste para facilitar al mximo la lectura del texto de tu web. Si de por s leer en una pantalla cansa ms que hacerlo en

papel impreso, imagina lo que debe ser si no distingues bien la letra del fondo. Algunos ejemplos:

Fondos claros
Usa fondos de pantalla sencillos o directamente no los uses. Los fondos complicados, con muchos dibujos o colores pueden distraer al usuario del contenido de tu web o incluso dificultarle su lectura.

Imgenes
Los grficos son un recurso de diseo til. Le aaden una nota de color a tu web y le permiten tomarse una pausa al usuario, pero no recargues la pgina con imgenes que no lleven a nada. Si pones imgenes que sirvan para algo, para decorar, para explicar algo, para poner ejemplos, etc. Optimzalas para que pesen lo menos posible y las pginas no tarden mucho en cargarse (a la gente no le gusta esperar). En relacin a esto puedes leer como aadir imgenes a una web y el tratamiento de imgenes para la web.

Navegacin clara
No les hagas al visitante adivinar donde est cada cosa o a qu pgina dirige cada enlace. Si el usuario no sabe a donde ir para conseguir lo que vena buscando se marchar sin pensrselo, en Internet hay miles de alternativas a tu pgina. Asegrate de que los enlaces importante son bien visibles, crea un mapa web, pon enlaces importantes tambin en el pie de pgina, incluye un enlace a la pgina principal en todas tus pginas, etc.

Compatibilidad con navegadores

No hagas una web que slo se vea en Internet Explorer. Es uno de los errores ms comunes de la gente que empieza a hacer webs. Que se vea bien en un navegador no significa que se vea bien en todos, debes asegurarte que se be correctamente por lo menos en los ms importantes (Firefox, Netscape, Opera). Para comprobarlo puedes

usar herramientas como BrowserShots o instalar los navegadores ms usados en tu ordenador y probar cmo se ven las pginas web en ellos.

Resolucin de pantalla
No todos los ordenadores tienen la misma resolucin de pantalla, al igual que con el tema de losnavegadores, debes asegurarte de que tu diseo se vea bien a 800600, 1024768, etc.

Revisa posibles fallos

Frecuentemente debes revisar tu web en busca de posibles fallos, stos no les gustan ni a los visitantes ni a los buscadores. Uno de los ms comunes es el tener enlaces rotos (enlaces con una direccin incorrecta). Puedes revisarlos con la herramienta online de LaWebera, comprobar enlaces rotos.

Pginas en construccin
No llenes el sitio de pginas en construccin. Si todava no tienes creada una seccin no la tienes, no pasa nada, pero es frustrante pinchar un enlace esperando encontrar algo y ver la tpica pantalla de pgina en construccin, no da una buena imagen de tu web. Como alternativa, puedes anunciar futuros contenidos o productos en la web del tipo, prximamente herramienta gratuita para. A parte de evitar la mala sensacin que dejan las pginas en construccin, puedes crear expectativas acerca de novedades y conseguir que tus visitantes vuelvan.

Poner un buscador en tu web

Si tu web tiene muchos contenidos o pginas, puede ser til incluir un buscador para que tus usuarios encuentren ms fcilmente lo que buscan. Es un valor adicional para tu web y mejora mucho la usabilidad. Para poner un buscador en tu web, puedes utilizar programas gratuitos como Google Coop oFree Find.

Nombres de dominios. Claves para adquirir un buen dominio

Si ests pensando en adquirir un dominio para tu pgina web, te dir que seguramente sea una buena decisin si tienes intencin de continuar en Internet durante largo tiempo, pero

antes, tal vez sea conveniente saber algunas cosas para evitar sorpresas desagradables y errores sin vuelta atrs.

Qu es un dominio?
Un nombre de dominio es una identidad en Internet. Sirve para asignar una direccin y localizar computadoras en la Web. Los humanos tenemos ms facilidad para recordar nombres que para recordar nmeros, de modo que nosotros llamamos a un servidor por su nombre. Por tal razn naci un sistema que sustituye las direcciones IP numricas de los ordenadores por nombres que al usuario le sean claras, las DNS. Por ejemplo, es ms fcil recordar [Link] que una direccin IP como podra ser [Link]. Entonces, cuando introduces en la barra de tu navegador el nombre de dominio [Link], los DNS (Domain Name Servers) lo traducen a su respectiva IP conectndote al servidor que aloja estas pginas. As, fue creado un sistema que est organizado de forma jerrquica, del mismo modo que el sistema de las direcciones IP. En dicho sistema, un nombre de una direccin (domain name) pertenece a un top-level-domain. Los Top-level-domains (TLD) se encuentran al final delnombre de dominio. Se trata ms que nada de abreviaturas identificadoras de los pases o de tipos de actividades. Por ejemplo:

.com = comercial .org = organizacin sin nimo de lucro .net = red general .biz = compaas .name = personas privadas .info = servicios de informacin de todo tipo .es = Espaa .it = Italia .de = Alemania .gov = entidades pblicas estadounidenses Por tanto, hay varios tipos de dominios y quien crea el dominio es diferente para cada caso. El organismo que crea un dominio se llama registry y hay un nico registry para cada tipo de dominios. Estos registry son grandes organismos, como por ejemplo:

ESNIC para dominios .es AFILIAS para dominios .info VERISIGN para dominios .com El organismo que estableci y vigila todo el sistema de nombres se llama ICANN, el cual adems es el encargado de crear nuevos dominios y asignarlos a nuevos registry. Normalmente, los usuarios no pueden comprar directamente al registry un dominio, si no que stos venden dominios slo a una serie de empresas autorizadas, denominadas registradores. Una vez que un propietario decide comprar un dominio por medio del registrador, se informa al registry que acta como en una licencia ms. Entonces, la persona pasa a ser propietaria y administradora del dominio durante el tiempo establecido en el contrato. Esta transmisin tiene carcter contractual y, por lo tanto, legal. Adems, es importante resaltar que los nombres de dominio son nicos, es decir, no puedes registrar un dominio que pertenece a otra persona, por lo que para registrar un dominio primero hemos de asegurarnos que est libre. Esto puede saberse fcilmente entrando en cualquier pgina que se dedique al registro de dominios, suelen poner en su portada un cuadro para que busques el dominio que te interesa y veas si est libre o no.

Dominios, subdominios, dominios de primer nivel, etc.

Analicemos el dominio [Link]. El .es es un TLD (Top Level Domain) o dominio de primer nivel (.com, .org, .net y dems tambin lo son). lawebera sera un dominio de segundo nivel perteneciente al TLD .es. Los dominios de segundo nivel son los que estn abiertos al registro, es decir, podemos registrar un nombre de dominio de segundo nivel de cualquiera de los TLD disponibles (esto es lo que verdaderamente registras cuando registras un dominio). A su vez, el dueo del dominio de segundo nivel ([Link]) puede crear los subdominios que quiera directamente en el servidor DNS (por ejemplo, [Link]).

Qu tamao mximo puede tener un dominio y qu caracteres son vlidos en los nombres de dominio?
Se pueden utilizar dominios hasta de 67 caracteres de largo. Nmeros y letras son permitidos en el contenido de los dominios, pero no se permiten espacios ni caracteres especiales (por ejemplo, =, &, $, , tildes, etc.).

Consejos al registrar un nombre de dominio

Resumen: Claves para adquirir un dominio adecuado para tu proyecto web y empezar en Internet con buen pie.

Qu es un servidor DNS?
Cada pgina web tiene una direccin IP asignada. La funcin de los servidores DNS es traducir el nombre de cada pgina a su correspondiente direccin IP. Entonces, DNS (Domain Name System) es un sistema que traduce un nombre de dominio a un nmero IP y, de esta forma, se localiza el servidor donde reside un sitio Web. Comnmente, los dominios necesitan dos servidores DNS para ser localizados en Internet, y suelen tener nombres como estos: ns1.servidor_de_tu_empresa_de_hosting.net ns2.servidor_de_tu_empresa_de_hosting.net

Qu es la redireccin de un dominio?
Muchos webmasters tienen alojada su pgina en sitios gratuitos, lo que significa que suelen tener una direccin larga y poco profesional. Por ejemplo, [Link]/usuarios/nombre. Para evitar este problema, y debido tambin al bajo costo que supone registrar un dominio hoy en da (como media unos 10 15 al ao), muchos webmasters optan por comprar un dominio propio del tipo .com, .es, etc. En estos casos, se necesita redireccionar el dominio al hosting ya existente, es decir, hacer que el dominio apunte a las pginas que ya tienes para que cuando alguien escriba tu nuevo dominio en su navegador se muestre la pgina que elijas.

Qu diferencia hay entre dominios .com, .net, .org, etc.?

Aunque inicialmente los dominio .com estaban destinados a empresas, los .net a servicios de red, los .org a organizaciones, etc., actualmente esto ha perdido su significado y se pueden utilizar indistintamente. Adems, los buscadores tampoco hacen distinciones entre unos y otros.

Recomendaciones
Es recomendable registrar un dominio desde el principio de tener una web o hay que esperar un poco a que tenga cierto xito?
Es altamente recomendable empezar con tu propio dominio y no con un dominio gratuito. Si no empiezas con l, todo el trabajo que hagas promocionando tu web y consiguiendo enlaces, as como el posicionamiento en los buscadores que logres, lo perders cuando necesites o quieras tu propio dominio ya que tu direccin ser diferente. En relacin a esto te puede interesar el tema de los nombres de dominio con palabras clave. Hay personas que como solucin a este problema, registran su dominio y siguen manteniendo el antiguo pero redireccionado al nuevo. No obstante, lo mejor es empezar bien desde el principio, as tendrs todos los enlaces que consigas y todas las entradas en los directorios web apuntando al dominio propio.

Qu extensin elegir?
Teniendo en cuenta que a los buscadores les da igual la extensin del dominio, y a las personas que los visitan por lo general tambin, tienes bastante flexibilidad a la hora de registrar un nombre de dominio. No obstante, nunca est de ms intentar adecuar la extensin del dominio al contenido del sitio que quieras crear. Por ejemplo, si vas a crear una pgina web para una ONG, puede ser ms adecuado registrar un dominio .org (organizacin sin nimo de lucro) que un .com (comercial), aunque esto no es muy importante hoy en da. Personalmente, pienso que es mejor elegir extensiones ms genricas o extendidas, como los .com, .net, .org, .info y .es. A no ser que lo que necesitas sea una palabra clave realmente importante, no recomendara registrar otra extensin. Tambin es importante elegir un buen nombre de dominio.

Afecta la extensin al posicionamiento en los buscadores?

No, no la tienen en cuenta. Tu posicin vendr dada por como optimices el sitio, el contenido, las palabras clave, los enlaces, etc. Aunque es cierto que los sitios que son .com suelen aparecer con ms frecuencia entre las primeras posiciones de los buscadores, eso puede ser debido a causas ajenas al tipo de extensin del dominio. Por ejemplo, hay muchos mas sitios con extensin .com que con otras extensiones y, adems, esos sitios por lo general llevan ms tiempo en Internet (recuerda que los .info o .biz no existan hasta hace pocos aos).

Consejos finales
Ten cuidado con las empresas de hosting que te ofrecen el dominio gratis al contratarles el hosting, si en algn momento quieres transferir tu dominio a otra empresa (cosa no poco frecuente) es probable que te pongan muchas dificultades para hacerlo e intenten retenerte con ellos, o incluso que hayan registrado el dominio a su nombre, por lo que lo controlaran ellos, no t. Desconfa de las empresas que te ofrecen de un dominio por menos de 7 u 8 . Un precio tan bajo no es normal, y ni mucho menos les da para ganar dinero, pero lo hacen a costa de reducir al mnimo sus gastos, por lo que los servicios que ofrecen no suelen ser muy buenos (se nota sobre todo en la atencin al cliente). Adems, es probable que dichas empresas utilicen esos precios bajos para atraer clientes y ofrecerles otros servicios, como alojamiento web, correo, diseo web, etc. con los que esperan recuperar lo que no ganan con la venta de dominios. Antes de contratar los servicios de un registrador de dominios, asegrate de tener el control del dominio, figurar como propietario en el registro y de que te faciliten un gestor de DNS. Bajo mi punto de vista, lo mejor es registra el dominio con una empresa y el alojamiento web con otra diferente, cada una especialista en su campo.

Mantenimiento de una pgina web

Resumen: Gua para llevar al da el mantenimiento de tu pgina web y no caer en el olvido.
No abandones tu proyecto a su suerte una vez lo hayas planificado, creado y colgado en Internet. La clave del xito es el trabajo constante, y este no debera acabar nunca si quieres conseguir buenos resultados y muchas visitas. Si quieres que tus visitantes vuelvan, debes darles algo nuevo que visitar, corregir errores y mantener tu sitio vivo y al da. Como decamos, un sitio web debe ser revisado constantemente en busca de mejoras que hacer (en el diseo, la navegacin por las pginas, las herramientas que ofrece, etc.) y de errores que reparar. En base a los datos de las estadsticas web [logs], puede que te veas en la necesidad de cambiar algunas cosas. Por ejemplo, puedes notar que mucha gente abandona tu web en la pgina de inicio, por lo que sera conveniente plantearse su reestructuracin. O puedes descubrir que la mayora de las personas que entran a tu pgina buscan un tipo especfico de contenido dentro de todo lo que ofreces, por lo que una buena idea sera ofrecer ms contenido de ese tipo.

Por qu mantenerse al da?

Ayuda a mantener a tus visitantes pendientes, vuelven. Ayuda a mejorar y mantener el posicionamiento en buscadores. La web crece y con ella su importancia. Si dejas de cuidar tu trabajo con el tiempo todo lo que has hecho se perder. Las visitas no vienen solas.

El contenido es el rey
Uno de los grandes problemas de muchas pginas web es encontrar buen contenido que aadir a su sitio, y sobre todo contenido nico. Si no dispones de tiempo para hacer tus propiosartculos o reportajes, sera bueno que publicaras artculos de otros autores que te den permiso para hacerlo (por ejemplo, artculos con licencia copyleft). Hay portales que se dedican a recopilar este tipo de artculos de libre distribucin, los cuales puedes usar en tu web. Por desgracia, en espaol hay pocos, la mayora se encuentran en ingls, pero algunos de los que te pueden servir son: Yugler o Articulandia.

Nuevas funcionalidades para tu web

Adems de actualizar el contenido de la web, segn vaya creciendo tu pgina seguramente pienses en aadir nuevas herramientas que te faciliten el trabajo, el uso de la pgina a tus visitantes, el crecimiento de la misma. etc. Puedes aadir muchas utilidades a tu pgina web, como foros, un libro de visitas, un buscador interno, encuestas, etc. Todas estas cosas aumentan el valor de tu web y dan a tus visitantes una razn ms para volver. No tengas pereza en aadirlas.

Revisar los enlaces

Con el paso del tiempo algunas pginas cambian su URL y si tienes enlaces hacia ellas, cuando esto pasa, el enlace que tenas deja de tener valor e incluso molesta porque no lleva a ningn sitio, o como mucho a una pgina de error. Por ejemplo:

Seguro que alguna vez has pinchado en un enlace de una web y te ha salido una pgina de error parecida a la anterior diciendo que la pgina no existe o no se encuentra. Es un mensaje molesto que debes evitar a toda costa que vean los visitantes de tu web. Qu se puede hacer al respecto? sencillo, revisar los enlaces con frecuencia en busca deenlaces rotos. Para ello, tienes herramientas online como la herramienta de [Link] paracomprobar enlaces rotos que escanean tu pgina en busca de links que ya no funcionan. Tambin hay otras herramientas muy buenas por ah que puedes usar de forma gratuita.

Contacto con el usuario

Siempre es bueno poner una pgina de contacto para que tus visitantes puedan mandarte un mensaje si lo ven oportuno. Este recurso tambin es til de cara al mantenimiento de la web, puesto que no es extrao que algunos visitantes te informen acerca de errores que han visto y puede que tu no, o cosas que les gustara encontrar en tu pgina web.

Actualizar la pgina web. La importancia del contenido

Resumen: Actualiza tu web con frecuencia para seguir creciendo. Lo ms importante es el contenido.
Para que la pgina web se mantenga viva y los usuarios sigan visitndola hay que actualizarla constantemente, adems de dedicarse a su mantenimiento, para que todo funcione bien.

Con actualizar la web me refiero a aadir peridicamente nuevos contenidos y recursos que resulten tiles a tus potenciales visitantes. Pero tan importante como aadir nuevo contenido a tu web es eliminar el que se encuentra desfasado o modificarlo para que siga siendo til y vigente. Por ejemplo, si hablas de economa no puedes dejar sin modificar los valores de la bolsa, puesto que maana ya no ser vlidos. En este caso debes actualizarlos constantemente.

Ideas generales al actualizar tu web

Mantener un sito web no es fcil. Si no actualizas sus contenidos no tendrs nada que ofrecer a tus visitantes habituales e irs perdiendo popularidad poco a poco. Hazlo simple: creando pginas complicadas slo conseguirs que te sea ms difcil actualizar. Procura simplificar al mximo la forma de actualizar las pginas de tu web. Por ejemplo, si vas a crear una nueva pgina con un artculo, es mucho ms fcil utilizar como base para hacerla una pgina que tengas ya existente que montarla toda de cero.

Se constante: si en tu pgina has puesto que actualizas una vez al mes procura cumplirlo siempre. No prometas nada que no puedas cumplir y si ves que el trabajo te sobrepasa, mejor que no engaes a tus usuarios y pongas una fecha de actualizacin ms ajustada a la realidad. Piensa lo frustrante que debe ser entrar en una pgina esperando una actualizacin prometida y encontrarte que no est cuando debera. Comprueba los cambios antes de colgar las pginas en Internet: antes de actualizar tu web y dejar que tus visitantes la vean, es muy importante revisar los cambios para ver que todo est bien. Es muy fcil cometer pequeos errores al modificar las pginas, ya sean en el propio cdigo HTML o en el contenido que ests agregando. Por eso, conviene que visualices las pginas en un navegador antes de dejar que otros las vean para buscar esos pequeos fallos y repararlos.

Contenido, contenido, contenido

Como ya he dicho otras veces en este manual (empezar de cero a hacer webs), el contenido es el rey. La actualizacin de la pgina web tiene que significar aadir nuevo contenido a tu sitio, til para el usuario. El contenido (texto) es lo que ansan encontrar los buscadores en tu web cuando la escanean, es de lo que se nutren y en lo que se basan para mostrar sus resultados de bsqueda. Por eso, cuanto ms contenido (y mucho mejor si es contenido nico) ms visitas recibirs de los buscadores.

Qu hay de nuevo?
Cuando actualizas la web con nuevos contenidos es importante que se lo hagas saber a tus visitantes. Para ello es muy recomendable que reserves un espacio en la pgina de inicio o donde creas oportuno para citar las novedades de tu web.

Tambin puedes ponrselo un poco ms fcil a tus visitantes y crear un boletn de novedades con el que enviarles un correo cada vez que actualizas tu pgina web. Hay que tener especial cuidado con las listas de correo, evitando a toda costa enviar mensajes a personas que no nos lo hayan pedido expresamente y guardando su informacin personal con recelo, de lo contrario puedes tener algunos problemas legales.

Copias de seguridad (backups)

Una de las cosas ms importantes a la hora de hacer actualizaciones en tu web es tener siempre una copia de seguridad de tu trabajo anterior. Si algo sale mal siempre puedes recuperar lo que ya tenas. Las copias de seguridad son algo que no se debe descuidar en ningn caso, porque cuando menos te lo esperas te ves repentinamente cambiando de hosting, o tu servidor ha tenido problemas y se ha perdido informacin de la que tenas colgada en Internet. En estos casos, o tienes una copia de seguridad o vuelves a empezar. Muchos servicios de alojamiento web profesional realizan copias de seguridad peridicas de los archivos que almacenas en sus servidores, pero no todos lo hacen, por lo que vigila este dato al contratar el hosting en una empresa de alojamiento web.

Cada cunto actualizar la pgina web?

No hay una fecha exacta. Puedes actualizar diariamente, semanalmente, mensualmente, bimensualmente depende del tipo de web y los servicios que ofrezcas. Por ejemplo, los blogs, por el tipo de formato web que utilizan son pginas que se prestan a la actualizacin diaria o semanal. En cambio, pginas web de empresa no suelen requerir una actualizacin tan constante, puede que con una vez al mes o cada par de meses les baste.

Colgar la pgina web en Internet

Resumen: Un resumen bsico sobre lo que hay que hacer para subir una web a Internet.
Para colgar la web en Internet y que todo el mundo pueda verla necesitas una serie de recursos. No basta con planear la pgina web y desarrollar la web. Una vez la tienes creada hay que hacerla accesible a cualquiera que quiera visitarla. Para ello, los siguientes pasos pueden ayudarte.

1. Contratar un servicio de alojamiento web

El alojamiento web (hosting) es esencial para que puedas subir a Internet todos los archivos que has creado para tu web, junto con las imgenes y carpetas. Cuando contrates el alojamiento web, tendrs que subir todos los archivos que creaste al espacio web que te dar la empresa de hosting, por lo que tendrs que tener cuidado cuando ests haciendo la web de usar enlaces relativos en lugar de absolutos para que funcionen correctamente al subirlos a tu espacio web. Si organizas bien los archivos de tu pgina web en carpetas y enlazas por medio de enlaces relativos no tendrs problema. Hay muchas empresas de alojamiento web, as que hay que tener cuidado de no elegir la primera que encontramos. Tienes ofertas hosting gratuito y de pago suficiente para elegir, por lo que sera conveniente que revisaras a fondo varias empresas que te gusten y mires en foros que opinan otros webmasters sobre ellas para que vayas viendo si son de fiar o no, qu tal es el soporte tcnico, si son rpidos sus servidores, si fallan con frecuencia y sobre todo como responden cuando hay problemas. Un consejo importante, desconfa de las empresas que te ofrecen espacio ilimitado o trfico ilimitado eso no parece posible darlo realmente a da de hoy. Procura hacer todo lo posible por elegir un alojamiento web de calidad, te ahorrars muchos problemas.

2. Registrar un nombre de dominio

Para que alguien pueda visitar tu pgina, esta debe estar en una direccin concreta, y para eso estn los dominios. Puede decirse que dan una direccin a las pginas de tu web para que puedan ser encontradas por cualquiera que lo desee. Hay nombres de dominio gratuitos y de pago, te recomiendo los de pago, aunque eres libre de elegir lo que te apetezca. Un nombre de dominio gratuito suele ser una direccin larga, del tipo [Link]/usuario/web/[Link] dificil de recordar y poco profesional, adems de que con frecuencia insertan publicidad en tu pgina (lo mismo que muchos hostings gratuitos),mientras que los nombres de dominio de pago son los tpicos [Link], [Link], etc. mucho ms profesionales y en la mayora de los casos ms cortos y sencillos de recordar. Actualmente el precio de los dominios es bastante asequible para la mayora de webmasters, por lo que es una opcin muy recomendable si quieres tener una pgina web seria. Nunca est de ms leer algunos consejos para registrar un nombre de dominio y no tener problemas. Tambin es recomendable pensar bien para elegir un buen nombre de dominio porque ser como tu marca en internet.

3. Subir los archivos a tu espacio web

Una vez tienes el dominio y el hosting lo siguiente es subir todos los archivos de la web al espacio que te da el hosting. Lo ms tpico es subir la web por FTP, pero algunas empresas de alojamiento web ofrecen la opcin de subir y gestionar los archivos mediante una aplicacin online. Subir los archivos mediante FTP es muy sencillo. El servicio de hosting te proporcionar unos datos para conectarte a tu espacio web mediante tu programa de FTP y una vez te conectes slo tendrs que copiar todos los archivos y carpetas en tu espacio. Una vez subido todo el material es bueno revisar la web para comprobar que se vea bien en Internet, los enlaces funcionen, las imgenes se muestren, etc.

Herramientas para hacer una pgina web. Editor imgenes, HTML y FTP
Resumen: Aprende desde cero como hacer una web. Herramientas bsicas: editor de imgenes, editor HTML y clientes FTP.
Conforme vayas aprendiendo a hacer webs, irs descubriendo cantidad de herramientas y programas tiles en el desarrollo de pginas web. En realidad, se puede decir que prcticamente hay programas para todo. El objetivo de este artculo no es ofrecer una lista pormenorizada, slo pretende ser una gua introductoria para saber por dnde empezar a trabajar, dede un nivel muy bsico para que todos aquellos que quieran iniciarse en esto del diseo web encuentren cosas por donde empezar. En este artculo vamos a tratar de describir las principales (e imprescindibles) herramientas para la realizacin de un proyecto web, pero conviente que antes sepamos dar los primeros pasos para hacer una web y evitar as perder el tiempo en trabajos que estn mal definidos.

1. Editor de HTML
La principal herramienta va a ser el programa con el que vas crear el cdigo HTML. Si tienes una slida base de conocimientos del lenguaje HTML, lo mejor es utilizar un simple editor de texto como puede ser el bloc de notas de Windows o el editor Emacs en el caso de Linux. Tambin hay otros editores de texto, como NotePad, que estn diseados especialmente para hacer pginas webs, y colorean cada etiqueta HTML de un color, haciendo ms fcil la lectura del cdigo fuente.

Pero si por comodidad o porque ests empezando no dominas el lenguaje HTML, tambin se puede hacer la web de una forma ms visual con programas como pueden ser FrontPage oDreamweaver. Por otro lado, no est dems contar con programas de este tipo, puesto que ofrecen otras funcionalidades muy interesantes para editar un sitio web, como comprobacin y actualizacin de enlaces, cambios en mltiples pginas, plantillas prediseadas, validacin del cdigo, etc.

2. Editor de imgenes
Si vas a utilizar imgenes en tu pgina web (banners, gifs animados, logos, etc.), debers tener algn software que te permita crear y/o retocar imgenes tanto animadas como estticas. Con l podrs, entre otras cosas, optimizar las imgenes, cambiar su formato o crear imgenes propias para botones o mens de navegacin. Existen una gran cantidad de software para este tipo de tareas. Adems, muchos de ellos los podrs encontrar completamente gratis (freeware) o de uso temporalmente limitado (shareware). Te recomiendo que le eches un vistazo a; Adobe Photoshop(edicin y retoque de imgenes en mapa de bits), Flash (para crear animaciones) y Freehand oCorelDraw (para crear imgenes vectoriales). Todos ellos son de pago, si te interesa un programa gratuito y no por ello de baja calidad, te recomiendo Gimp, muy bueno. No obstante, hay que aadir imgenes a nuestras pginas con moderacin y slo cuando stas tengan un fin (aadir ms atractivo a la informacin presentada, explicar grficamente lo expuesto, etc.), ya que las imgenes, debido al peso que tienen, son uno de los principales factores de que muchas pginas web tarden tanto en cargar (los visitantes pueden irse hartos de tanto esperar). Por otro lado, la sobrecarga de imgenes tampoco es aconsejada de cara alposicionamiento en los buscadores, ya que cuantas ms imgenes pones menos texto indexable por los buscadores puedes introducir en tu pgina. Ten en cuenta que a los buscadores les gustan las pginas ricas en contenido, las imgenes deben ser como norma general un complemento de la informacin que ofreces. Los formatos ms aconsejables para imgenes en la web son .jpg y .gif, ya que son formatos comprimidos que reducen sensiblemente su tamao. De todas formas, siempre es recomendable aunque tengamos pocas imgenes optimizarlas para que ocupen menos y, por tanto, la pgina tarde menos en cargar. Optimizar las imgenesbsicamente quiere decir reducir su tamao, evitando al mximo la prdida de calidad. Nuestros visitantes nos lo agradecern y se puede hacer desde Internet totalmente gratis, por ejemploaqu.

3. Cliente FTP
Para poder publicar una pgina web, normalmente debers disponer de un programa que se conecte mediante FTP al servidor de tu hosting. Con este programa podrs subir los archivos de tu pgina a tu servidor para que todo el que quiera pueda acceder a ellas. Por lo general, el FTP se conecta con tu servidor, mostrndote lo que tienes almacenado en l

(tu directorio remoto), al mismo tiempo que te muestra lo que tienes en tu sitio local (tu pc). Son herramientas muy sencillas, que permiten copiar archivos en tu servidor web y tambin copiar archivos de tu servidor a tu ordenador. Algunos clientes de FTP bsicos vienen integrados en los sistemas operativos. Sin embargo, hay disponibles clientes FTP con ms funcionalidades, habitualmente en forma de shareware/freeware para Windows y como software libre para sistemas de tipo Unix. Muchos navegadores recientes tambin llevan integrados clientes FTP. Algunos conocidos son;Cute FTP, SmartFTP y FileZilla FTP. En resumen, teniendo un programa para hacer tus pginas, otro para retocar y crear imgenes y otro para subir los resultados a tu servidor, puedes ir empezando a adentrarte en el mundo del diseo web.

Beneficios de la usabilidad web

Resumen: Beneficios de la usabilidad web y consejos prcticos para hacer sitios ms usables. Pnselo fcil a tus usarios para encontrar lo que buscan en tu web.
Son diversos son beneficios que aporta la usabilidad a la web, por eso hay que tenerla en cuenta desde los primeros momentos del diseo y desarrollo web de un sitio. En el momento deorganizar los cotenidos de la web es importante pensar en la usabilidad, te aportar beneficios como:

La usabilidad permite mayor rapidez en la realizacin de tareas y reduce las prdidas de tiempo. El aprendizaje del manejo de la web es mucho ms rpido e intuituvo, y el usuario enseguida se familiariza con la pgina, haciendo nuestros productos o servicios ms visibles. Los visitantes se sienten ms seguros y necesitan menos ayuda por parte del soporte tcnico de la web, con la consiguiente reduccin de costes y esfuerzos y una percepcin ms positiva de la visitas.

2. Consejos prcticos
Una web til debe anticiparse a las necesidades del usuario, el cual debe tener el control sobre el sitio web en el sentido de poder navegar con soltura y realizar las acciones que desee sin dificultad. Los usuarios deben ser capaces de alcanzar sus objetivos con un mnimo esfuerzo y unos resultados mximos, lo que implica que desde el principio el visitante sea capaz de usar de forma intuitiva los recursos que se le ofrecen. El color de los textos debe contrastar con el del fondo, y el tamao de fuente debe ser suficientemente grande. Los colores han de utilizarse con precaucin de forma que el contenido sea legible. Aunque pueda parecer apropiado que diferentes reas tengan diseos diferentes, la consistencia entre los diseos facilita al usuario el uso de un sitio. Revisa los enlaces peridicamente para evitar enlaces rotos o enlaces a webs que ya no existen. Evita en la medida de lo posible elementos invisibles de navegacin como pueden ser los mens desplegables, indicaciones ocultas, etc. Pueden quedar estticamente atractivos una vez descubiertos, pero obligan al usuario a adivinar dnde estn colocados y cmo se utilizan. Los visitantes no deben sufrir sobrecarga de informacin. Cuando un usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de informacin. Ofrece de forma clara a los usuarios de tu web un medio de contacto con el administrador, esto mejora la opinin sobre la web al no encontrarse slo ante las posibles dificultades que puedan surgir y fomenta la comunicacin entre el diseador y el potencial cliente. Para ello es muy til utilizar formularios implementados directamente en el sitio web, ya que evitas al visitante tener que abrir su gestor de correo electrnico y le ahorras tiempo. Adems, algunos consejos concretos para diferentes partes de la web son:

Cabeceras del sitio: incluir solo las opciones fundamentales, que estn bien definidas tanto en su significado como en su representacin. Evita imgenes grandes y pesadas (tamao) pues te restan espacio para poner contenidos y demoran la carga de la pgina. Registro de usuarios: permite que tus usuarios naveguen por la web sin necesidad de registrarse, ofrceles informacin til para que sepan qu ofreces en tu pgina. Por ejemplo, permite el libre acceso a la consulta de las subastas antes de pujar, consulta de los catlogos de tus productos y poder buscar en todo el sitio antes de registrarse. Puedes crear secciones exclusivas para usuarios dndoles motivos para que se registren cuando quieran, por ejemplo, para adquirir un producto de tu catlogo o para la descarga de software. Simplifica el formulario de registro, solicita slo la informacin necesaria.

Formularios: procura reducir al mximo el numero de campos, no pidas informacin que no necesitas slo por tenerla. Tener que rellenar formularios de registro muy grandes puede hacer que algunos visitantes cambien de opinin y dejen tu pgina. Piensa que cuanto ms corto es, menos pereza da rellenarlo. Evita los combos, es

ms rpido escribir que seleccionar la opcin en el combo, adems la pgina pesar menos sin ellos por lo que el usuario acabar antes el proceso.

Enlaces: procura que la palabra enlazada indique claramente el destino. Por ejemplo, para enlazar una pgina de diseo web: Bien: entra en la pgina de diseo web para ver ms informacin. Mal: para ver ms informacin sobre diseo web pincha aqu.

Color de fondo: si el texto es extenso, es recomendable usar un fondo claro (preferiblemente blanco) y texto oscuro (preferiblemente negro). Velocidad de carga de la pgina: reduciendo el peso de la pgina podemos hacer que el usuario visite ms pginas en el mismo tiempo de conexin. En un sitio donde las pginas bajan con rapidez no da pereza pinchar en los enlaces para seguir leyendo. Aadir demasiados elementos grficos o cdigos muy complejos slo genera pginas ms lentas, por lo que nadie va a apreciar la mejora si al final la web tarda mucho en cargar. Puedes calcular el tiempo de carga de tu pgina web y decidir si neesitas optimizar imgenes, cdigo JavaScript, etc.

Buscador: si tienes una web con muchas pginas (incluso si no) puedes ser muy til proporcionar un buscador interno para que tus visitantes puedan moverse con ms facilidad y encontrar rpidamente la informacin que estn buscando. Hay buscadores gratuitos muy buenos, como [Link].

Sistema de navegacin de la pgina web

Resumen: Aprende a crear un buen sistema de navegacin para tu pgina web y haz que tus visitantes encuentren lo que buscan sin problemas.
Un buen sistema de navegacin es imprescindible en toda pgina web. Es una parte importante de la organizacin de la estructura de la web. Que el usuario sea capaz de moverse con soltura y facilidad por las distintas pginas del sitio, que encuentre lo que busca rpidamente, que no se pierda yendo de un enlace a otro sin saber donde est, que no quede colgado en una pgina concreta sin poder navegar por otras o volver atrs son algunas de los aspectos que hay que cuidar en la navegacin de un sitio web. Veamos algunos puntos importantes.

La pgina de inicio
La pgina de inicio de tu web es la puerta principal de acceso a tu web. Por ella entrarn la mayor parte de visitantes, por lo que hay que cuidar al mximo cada detalle.

Si tu sitio web es pequeo, puedes permitirte el lujo de enlazar a todas las pginas de tu web desde la pgina principal, as el usuario tiene a su alcance toda la informacin disponible en el sitio. Pero en muchos casos incluir un enlace a cada pgina convertira en un caos a la portada del sitio debido a la gran cantidad de pginas internas. En estos casos lo ms conveniente sera enlazar a las secciones principales de la web, desde las cuales se enlazara al contenido de esa seccin concreta, etc.

Men de navegacin
El men de una pgina web es la principal herramienta de navegacin que le podemos facilitar al visitante para que encuentre lo que busca. Es imprescindible para que las personas encuentren las dems pginas de la web, adems del ndice. Los mens de navegacin son bsicamente listas de enlaces a las diferentes pginas o secciones de la web. De su estructuracin depender en gran medida que los visitantes encuentren lo que buscan, por lo que es conveniente pensarse dos veces cmo hacerlo antes de implementarlo en la web. Hay varios tipos de mens de navegacin; podemos encontrarlos en disposicin horizontal;

O vertical;

Como mencionamos antes, para sitios web con un nmero de pginas pequeo puede ser bueno enlazar a todas ellas desde cada pgina para que el usuario tenga en todo momento la informacin disponible en la web a su alcance. Por ejemplo, si es una pgina web informativa sobre tu empresa y no tiene otra finalidad, puede que cuente con 10 15 pginas en total, las cuales pueden perfectamente ser enlazadas desde cada pgina individual. Sin embargo, cuando una web contiene mucha informacin este tipo de mens tiene poco sentido, porque entonces tendramos mens con cientos de enlaces, algo excesivamente largo para ser usable. Lo normal en estos casos es enlazar desde la pgina principal a las secciones ms importantes, y desde cada una de ellas a sus contenidos concretos.

Pie de pgina
El pi de pgina de la web tambin puede usarse para mejorar la navegacin del sitio. Normalmente no se utiliza para poner enlaces a todas las secciones (para eso ya est el men), pero s para poner enlaces importantes o que consideras que deben aparecer en todas las pginas de la web, por ejemplo informacin legal sobre tu empresa, direcciones de contacto, polticas de uso del sitio, etc.

Evitar pginas hurfanas

Una pgina hurfana es aquella desde la cual no se puede acceder a ninguna otra. Cuando el usuario se encuentra con una de estas pginas la confusin y el enfado pueden ser importantes. Es cierto que dndole al botn atrs del navegador o modificando el campo de la url puede llegarse perfectamente a otra pgina del sitio, pero no todo el mundo tiene porqu saberlo, y hacer a la gente molestarse demasiado en navegar por un sitio es signo de falta de usabilidad web. No cuesta nada poner en cada pgina al menos un enlace a la principal.

Enlazar siempre al ndice

Una de las formas de evitar pginas hurfanas y que mejora sin duda la navegabilidad de una web es incluir en cada pgina del sitio un enlace al ndice.

Parece bastante extendido el enlazar a la pgina principal del sitio mediante el banner o logo de cabecera. As, el usuario siempre tiene un recurso para volver al principio y buscar lo que necesita.

Ruta de acceso o dnde estoy?

Es frecuente que aunque el usuario pueda navegar con facilidad por las pginas de tu sitio no sepa exactamente donde est. Para evitar esto es muy til incluir el camino que se sigue desde la pgina principal, pasando por las secciones (principales) hasta la pgina concreta en la que se encuentra el usuario. No hace falta que indiques cada uno de los pasos, con los ms importantes es suficiente, no es cuestin de que se convierta en una gua interminable. Un ejemplo de esto lo encontramos en [Link]:

Es conveniente que cada parte de la ruta tenga su enlace correspondiente, de forma que el usuario pueda ir a esa categora si lo desea. Sin el enlace a cada sitio, la ruta de acceso pierde sentido ya que le dice al usuario donde est pero no le da alternativas.

Incluir un buscador
Para pginas web con mucho contenido es realmente til la inclusin de un buscador interno que permita a los usuarios buscar directamente los temas que le interesan. Pginas web didcticas, de manuales, etc. son sitios que tienen mucho contenido distribuido a su vez en muchas pginas. Buscar una informacin concreta en ellas puede ser complicado dado el volumen de archivos que contienen. Los buscadores mejor la experiencia del usuario en el sitio web y le ayudan a ahorrar tiempo en su bsqueda de informacin. Hay herramientas gratuitas muy buenas para poner un buscador en tu web. Por ejemplo: Google Co-op o Atomz.

Conceptos bsicos de HTML

Resumen: Conceptos bsicos de HTML. Etiquetas fundamentales y estructura bsica de una pgina web.
HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una pgina web. Para toda persona interesada en crear pginas web es importante conocer al menos nociones bsicas de este lenguaje, de esta forma podemos comprender como estn hechas las pginas web, desarrollar sitios con ms flexibilidad y mejor construidos. Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en prrafos, aadir imgenes y vnculos a otras pginas, etc. De ah que el conocimiento de estas etiquetas sea importante para hacer pginas web, mejor dicho imprescindible.

Etiquetas bsicas

<HTML>: indica el comienzo del documento HTML. <HEAD>: indica que empieza la cabecera de la pgina. En ella se suele poner el ttulo (<title>) de la web, una descripcin y otras informaciones relacionadas con el contenido de la pgina. <BODY>: es el cuerpo de la pgina, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imgenes y todos los contenidos de la web.

<H1>, <H2>, etc.: son los ttulos o encabezados. Se utilizan para establecer determinados textos de la pgina como titulares, suelen tener un tamao de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.

<A>: define los enlaces. <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>. <P>: el texto dentro de esta etiqueta forma un prrafo. <IMG>: imgenes. <BR>: salto de lnea. <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI>definimos cada guin dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas. <B> y <STRONG>: se utilizan para resaltar el texto. <U>: texto subrayado. <I>: texto en cursiva.

Ejemplo de pgina bsica

<html> <head>

<title>Ttulo de la pgina</title>

</head>

<body>

<h1>Encabezado de la pgina</h2>

<h3>Encabezado de menor tamao</h3>

<p>Este es el texto de un prrafo.</p>

<p>Este es el texto de otro prrafo. Dentro de este prrafo,

pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo

que quieras.</p>

<p>Tambin podemos poner listas como la siguiente:</p>

<ul>

<li>Guin nmero uno.</li>

<li>Guin nmero dos.</li>

<li>Guin nmero tres.</li>

</ul>

</body>

</html>
Y para que lo entiendas mejor, una pgina bsica con su correspondiente cdigo HTML:

Compatibilidad de tu web con distintos navegadores

Resumen: Podremos estar satisfechos si conseguimos que se vea igual de bien en los ms importantes, como Explorer, Firefox, Opera, Safari y Mozilla.

Qu es la compatibilidad web?
Que una web sea compatible con todos los navegadores significa que se vea igual (o muy similar) en todos ellos. Obviamente esto es bastante complicado, podremos estar satisfechos si conseguimos que se vea igual de bien en los ms importantes, como Explorer, Firefox, Opera, Safari y Mozilla. Si consigues que se vea bien en estos 5, conseguirs que el 99% de tus usuarios vea correctamente tu web. El problema radical en que no todos los navegadores interpretan en cdigo HTML y CSS de la misma manera, entre ellos existen pequeas variaciones que son las que hacen que el resultado no sea el mismo de unos a otros. Algunas de esas diferencias son tan importantes que pueden hacer que partes de tu web no funcionen o no se vean, y como el

propsito de hacer una web es que la vea el mayor nmero de personas (y que stas la vean correctamente), nos interesa que la web funcione en el mayor nmero de navegadores posibles. Por tanto, a la hora de hacer una pgina web no es suficiente con preocuparse por centrarnos en la audiencia adecuada, registrar un nombre de dominio rompedor o tener un diseo agradable al usuario. Todo esto puede verse ensombrecido si un usuario no ve la pgina correctamente al entrar con un navegador que no has tenido en cuenta al crearla. Para que veas un ejemplo leve de lo que hablamos, aqu puedes apreciar como se ve una pgina web en diferentes navegadores. Por supuesto es ficticia y el diseo est hecho descuidado a propsito:

Como hemos dicho, hay casos de incompatibilidad ms graves en los que el diseo se desajusta, no cabe completo en pantalla, scripts o mens que se comportan de manera diferente de un navegador a otro en fin, un desastre, sobre todo si tu web es un negocio en lnea o una pgina de empresa que requieren cuidar el aspecto al mximo para atraer al cliente.

Mejorar la compatibilidad con navegadores

Validar el cdigo de tu sitio web
Validar el cdigo de tu web en base a los estndares del W3C es un buen hbito que conviene que cojas cuanto antes mejor. Bsicamente consiste en escanear tu web en busca de errores de programacin para una vez detectados poder corregirlos. Adems, a parte de detectar errores de codificacin te proporciona una breve explicacin del error, por lo que aprenders cosas nuevas validando tu web. Tener una pgina sin errores es importante porque maximiza la compatibilidad entre navegadores al mismo tiempo que te asegura que tu cdigo siga valiendo para futuras revisiones de HTML, CSS, etc. Tmate tu tiempo para validar el cdigo CSS de tu web. Eso har que te sea ms fcil conseguir que tu sitio se vea igual en los distintos navegadores ya que har que tengas un cdigo ms limpio y sobre todo sin errores. Para validar tu CSS lo mejor es usar las herramientas disponibles, ya que si te propones hacerlo manualmente la tarea ser difcil y larga. Adems, es muy sencillo que se te pasen errores, mientras que usando herramientas online no ocurrir. El validador de CSS del W3C es la mejor opcin para ello, ya que esta entidad es la que se encarga de crear los estndares de la web.

Resetear los estilos CSS

Si no usas ningn estilo CSS en los elementos de tu pgina igualmente tendrn un aspecto determinado. Los ttulos tienen una tamao segn su importancia (H1, H2, H3), los mrgenes tienen un tamao determinado, las citas llevan sangra, etc. Muchos de estos valores por defecto, son iguales de unos navegadores a otros pero otros no, y esos precisamente son los que te crearn problemas a la hora de conseguir que tu web se vea igual en los diferentes navegadores, ya que por mucho estilo que les des, su valor predeterminado sigue contando. Por eso, resetear tu hoja de estilos es una de las mejores medidas que podemos adoptar para prevenir el problema de la incompatibilidad entre navegadores, ya que por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. As, los mrgenes, espacios y tamaos de fuente de ttulos (entre otros) pueden tener diferentes propiedades por defecto de un navegador a otro y provocar que se vean diferentes por mucho formato que le demos nosotros. Al resetear el CSS digamos que ponemos a cero esos valores por defecto y podemos empezar desde el principio a dar el formato que nosotros queramos, controlando el aspecto de cada elemento mucho mejor. Para resetear el CSS se escribe un cdigo CSS al principio de tu hoja de estilos, y despus todo lo que tu vayas creando. El cdigo de Eric Meyer es una de las formas ms conocidas que tenemos de resetear el CSS de nuestra web, muy efectivo:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0;

} body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: "";

} blockquote, q { quotes: "" ""; }

Por otro lado, una forma ms sencilla, aunque no tan completa, de anular los valores por defecto que ms problemas suelen dar (margin y padding) es poner el siguiente cdigo al principio de tu hoja de estilos y luego las reglas que vayas creando:

* {margin:0; padding:0}
Lo que hace este cdigo es dar un margin y padding de 0 a todas las propiedades CSS. Evidentemente no es tan completo como el anterior cdigo, pero si no quieres complicarte mucho la vida o necesitas ahorrar espacio reduciendo la hoja de estilos, este cdigo tambin quita muchos problemas.

Usa tcnicas soportadas

CSS ofrece un montn de tcnicas para mejorar el aspecto de nuestras pginas web, pero no todas son bien soportadas por los navegadores. Lo mejor es intentar evitar el uso de propiedades que puedan causarnos problemas con algunos navegadores, en especial con los ms usados por los visitantes (IE, Firefox). En general, usando buenas prcticas en CSSminimizamos el riesgo de incompatibilidades entre navegadores.

Disear para Firefox, no para Explorer

Una de las cosas que han hecho a Firefox tan popular es que es uno de los ms completos navegadores en cuanto a respetar los estndares web se refiere. Y como l hay muchos otros (cada vez ms) que se preocupan por seguir al mximo los estndares del W3C. Por tanto,diseando para Firefox estamos minimizando el uso de reglas indebidas o malinterpretadas, ya que el aspecto que nos devuelve el navegador de lo que programamos se acerca mucho ms a la regla general que diseando en Internet Explorer. Disear optimizando para Firefox hace de nuestro cdigo un cdigo ms limpio, ms estndar, y por tanto ms universal. Una vez funcione en Firefox, puedes empezar a pensar en que tu sitio se vea bien en Explorer. Si lo haces al revs, cuando consigas que

se vea bien en Explorer tendrs que ir arreglando el cdigo para que se vea bien uno por uno en el resto de navegadores, mucho ms trabajo no?.

Normas elementales en HTML

Resumen: Vamos a ver unas normas bsicas en el uso del HTML, aprendiendo a utilizar las etiquetas y elementos de este lenguaje de creacin de pginas web.
Este tutorial est basado en las recomendaciones del W3C (y II), donde la idea es utilizar CSSsiempre que sea posible, pero seguir incluyendo HTML semntico para maximizar lacompatibilidad con navegadores antiguos. Junto con esta gua, te recomiendo que leas los siguientes documentos:

Conceptos bsicos de HTML. Videotutoriales de HTML y HTML bsico. Como hacer buenas pginas en HTML. Todos los captulos del subapartado Crear la pgina web de este manual.

Etiquetas y elementos HTML son interruptores on / off para los distintos tipos de formateo de texto. A menos que se especifique lo contrario, todo etiqueta de apertura (como <head>) necesita un cierre ( un "off") en su etiqueta de final (</ head>). Ejemplo:

<html>

...

</html>
Siempre que sea posible, incluye las etiquetas de cierre, incluso si no son obligatorias, ya que esto hace que sea ms fcil seguir tu propio marcado y que sea ms fcil de leer. Adems, en el momento en el que ests preparado para dar el salto a XHTML (el lenguaje que est pensado para reemplazar a HTML) te ser ms fcil, ya que en XHTML todas las etiquetas deben cerrarse. Con frecuencia vers diseos HTML con cdigo indentado como el que se muestra a continuacin, es decir, cdigo tabulado con sangras, de forma que los bloque de texto se mueven hacia la derecha insertando espacios para separarlos del texto adyacente que

forme otras estructuras diferentes. Esto hace que sea ms fcil leerlo y comprobar qu etiquetas de cierre se refieren a qu etiquetas. Por ejemplo, esto es claramente errneo:

<p>

<strong>

texto en negrita

<em>texto en negrita y cursiva

texto slo en cursiva

</em>

</ p>
Sin embargo, esto es vlido:

<p>

<strong>

texto en negrita

<em>

texto en negrita y cursiva

</em>

</strong>

<em>

texto solo en cursiva

</em>

</p>

Etiquetas, elementos y atributos

Ya hemos visto lo que es una etiqueta en HTML, y que hay etiquetas de apertura y (en la mayora de los casos) etiquetas de cierre. El navegador lee estas etiquetas y crea una representacin interna de lo que ley. Esta representacin interna se conoce como unelemento. Entonces, el navegador decide cmo mostrar el elemento en la pantalla. Adems, no todos los elementos se muestran en pantalla (como el HEAD),y por el contrario algunos elementos siempre existen, incluso si no los creaste en tu cdigo fuente (como el HTML, HEAD oBODY). Algunos elementos aceptan parmetros adicionales. Por ejemplo, el elemento A puede aceptar el parmetro HREF, que lo convierte en un enlace. Estos parmetros son conocidos comoatributos, y se crean as:

<a href="[Link]">
Ten en cuenta que en HTML, las etiquetas y nombres de atributos se puede escribir en cualquier circunstancia. Algunos diseadores web tienden a utilizar maysculas para

destacarlos en elcdigo fuente, otros escriben todo en minsculas para hacerlos ms fciles de traducir a XHTML ms tarde si es necesario. Mi consejo es que adoptes esta segunda opcin, lo lgico es con el tiempo acabar creando pginas en XHTML. De todas maneras, cualquiera de las dos formas es correcta en HTML.

Ejemplo de estructura de una pgina HTML

Resumen: En este tutorial vamos a explicar las partes de una estructura bsica de una pgina hecha en HTML.
En este tutorial vamos a explicar las partes de una estructura bsica de una pgina hecha en HTML. Como veremos, la seccin del body (donde va toda la informacin que se muestra al usuario), puede y debe hacerse ms compleja, conteniendo capas y estructuras que conformes los mens, el contenido y el pie de pgina, entre otros. Junto con esta gua, te recomiendo que leas los siguientes documentos:

Conceptos bsicos de HTML. Normas elementales en HTML. Videotutoriales de HTML y HTML bsico. Como hacer buenas pginas en HTML. Todos los captulos del subapartado Crear una pgina web de este manual.

Introduccin
Cada pgina HTML debe constar de dos secciones: 1. El HEAD o cabecera, donde est la informacin sobre la pgina web, como el ttulo, una breve descripcin y algunas palabras clave. Tambin puede contener informacin de estilos (CSS) y libreras JavaScript. 2. El BODY o cuerpo, donde est todo el contenido que el usuario va a ver en su navegador. Las siguientes etiquetas HTML se utilizan para construir la estructura bsica de una web:

<html> significa el inicio (y final) del documento. <head> significa el inicio (y final) de la seccin de cabecera del documento. <title> Es el ttulo del documento. Esto se muestra por la mayora de los navegadores como ttulo de la ventana, cuando agregas una web a favoritos, etc. Los motores de bsqueda como Google suelen utilizarlo tambin como ttulo en los resultados de bsqueda, por lo que es muy importante para la optimizacin de la pgina web y

el SEO en general. Por todo esto, debes escoger muy bien el ttulo de cada pgina de tu sitio web y procurar que todos sean nicos y descriptivos.

<body> significa el inicio (y final) del contenido visible del documento (lo que ve el usuario final).

Estructura bsica en HTML

Un ejemplo completo de un documento HTML sera (ojo, slo la estructura bsica):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"[Link]

<html>

<head>

<title>Ttulo de ejemplo</title>

</head>

<body>

<p>Esta es mi web!</p>

</body>

</html>

Introduccin a los elementos y etiquetas de HTML

Qu es el HTML?
HTML es un lenguaje de marcado, y es por mucho el lenguaje ms comnmente utilizado en la Web. Los lenguajes de marcado dan forma a un documento HTML. Determinan qu partes son encabezados, qu partes prrafos, qu partes listas, qu partes enlaces, etc. HTML significa Lenguaje de Marcas de Hipertexto (Hyper Text Markup Language). El HTML fue desarrollado por el cientfico Tim Berners-Lee en 1990. Un archivo HTML es un archivo de texto normal, salvo por el hecho de que contiene etiquetas de formato o marcaje. En HTML, usamos "etiquetas" (tags) para crear la estructura de una pgina web. Estas etiquetas indican al navegador cmo mostrar el texto y las imgenes en el documento. Los archivos HTML deben tener la extensin .htm o .html para que se interpreten correctamente por un navegador como Internet Explorer. Al ser un archivo de texto, se puede crear un archivo HTML utilizando cualquier editor de texto corriente, como el Bloc de notas, WordPad o MSWord, etc.

Etiquetas lgicas en HTML (logical inline tags)

Las etiquetas lgicas HTML estn diseadas para describir (en el explorador) el significado del texto que encierran. Esto tiene un impacto importante en los motores de bsqueda como Google (y en el SEO), puesto que los buscadores analizan esas "etiquetas" para intentar averiguar de qu trata una pgina web. Hay muchas etiquetas lgicas en HTML, entre otras:

<strong>: marca un texto en negrita, denota importancia. <em>: destaca un texto por lo general hace que los navegadores muestren el texto en cursiva. <span>: una etiqueta de lnea neutral. Para darle un aspecto diferente se usa CSS. <div>: un elemento de bloque neutral. Para darle un aspecto diferente tambin se usa CSS.

Aunque estas etiquetas lgicas tienen una forma predeterminada de mostrarse en los navegadores (como Internet Explorer o Firefox), se entiende que el CSS se debera utilizar para darles la apariencia deseada y crear as el diseo de una pgina web.

Etiquetas de bloque vs etiquetas de lnea

En HTML, las etiquetas son "de lnea" o "elementos de bloque".

Elementos de bloque en HTML (block elements)

Un elemento de bloque digamos que existe en su propia caja virtual y est siempre seguido por un salto de lnea (un enter). En otras palabras, un elemento en bloque rompe el flujo del texto para crear un espacio propio alrededor de s mismo que ningn otro elemento puede invadir.

Elementos de lnea en HTML (inline elements)

Las etiquetas de lnea (o elementos de lnea), en cambio, s forman parte del "flujo" del texto en el que se insertan y no forman esa caja virtual de la que hablbamos, ni tienen saltos de lnea. Los elementos de lnea siguen el flujo normal del texto. Por ejemplo en el siguiente texto:

Este es un ejemplo de un elemento de lnea en HTML.

El texto en negrita est contenido dentro de un elemento de lnea o inline tag, en este caso <strong>. Aqu el cdigo:

<p>Este es un ejemplo de un <strong>elemento de

lnea</strong> en HTML.</p>
As, un ejemplo de una etiqueta de bloque es un <div> (caja) un <p> (prrafo) y un ejemplo de una etiqueta de lnea es la <b> (negrita). Para entender este concepto lo ms sencillo es probar lo que sucede en un texto cuando se introducen ambos, haz la prueba.

HTML XHTML Doctype o versin del documento de una pgina web

Resumen: Antes de comenzar a hacer la pgina web en s, tenemos que decirle al navegador qu versin de HTML vamos a utilizar para que sepa interpretarlo correctamente.
Antes de comenzar a hacer la pgina web en s, tenemos que decirle al navegador qu versin de HTML vamos a utilizar para que sepa interpretarlo correctamente. Aqu tienes un resumen con las caractersticas de cada doctype.

HTML 4.01 Transitional, Strict, Frameset

Hay tres versiones de HTML 4.01, y cada una tiene sus propios fines, as que lo mejor es que elijas la ms adecuada para tu proyecto y tu nivel de conocimiento.

HTML Strict
Es la versin ms limpia y simple de HTML. Con este doctype slo puedes usar las partes del HTML que se refieren a la estructura y, en general, no permite utilizar las partes que se relacionan con el estilo (algunas etiquetas de HTML permiten realizar un diseo bsico, pero esto por suerte ha sido reemplazado por el CSS). Si haces tus pginas web basndote en esta versin de HTML te ser mucho ms fcil pasar a XHTML en un futuro.

HTML Transitional
Esta es la versin mixta. Se permite el uso de etiquetas de estilo, que realmente no tienen cabida en HTML, pero que se introdujeron antes de que el CSS existiera. En general, es mejor mantener el marcado (HTML) y el estilo (CSS) totalmente independiente, ya que esto hace ms fcil cambiar el aspecto de la web ms tarde, e incluso compartir el mismo estilo en varias pginas web, pero si todava no dominas HTML y CSS, este doctype seguramente sea la mejor eleccin.

HMTL Frameset
Esta versin de HTML permite utilizar un conjunto de marcos (frames) en lugar del BOBY, por lo que puedes combinar varias pginas en una sola. Parece una tontera, pero es muy importante que definas el tipo de documento de tu web, como se muestra a continuacin, para obtener una interpretacin correcta de tu cdigo

fuente en todos los navegadores actuales. Si no lo haces corres el riesgo de que la pgina no se vea como tu quieres. Este cdigo debera ser lo primero que aparezca en el cdigo fuente de tu pgina, antes incluso de la etiqueta HTML. Los tres doctypes para HTML 4.01 son: Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"[Link]
Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"

"[Link]
Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Frameset//EN" "[Link]

El DOCTYPE en HTML 5
HTML 5, el futuro del HTML, aboga por el uso de un doctype simple:

<!DOCTYPE HTML>
De hecho, en el borrador se refiere a los doctypes como un "todo intil, pero necesario", cuyo propsito es asegurarse de que los navegadores interpreten las pginas web de

forma correcta. El doctype ltimo har esto mismo y adems de forma simplificada. Si haces una pgina web en HTML 5, este doctype debera ser tu primera eleccin, a menos que necesites para validar tus pginas web versiones anteriores de este lenguaje.

XHTML 1.0 Transitional, Strict, Frameset

Utiliza XHTML 1.0 Transitional cuando tu pgina web se ajuste a las normas bsicas XHTML, pero todava utilices algunas etiquetas HTML para la presentacin (estilo):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"

"[Link]

[Link]">
Utiliza XHTML 1.0 Strict cuando tu pgina web se ajuste a las normas de XHTML y los usos de CSS para la separacin total entre contenido y presentacin. Puede ser un poco ms complicado de validar para diseadores novatos, pero el resultado final merece la pena. Las pginas son ms semnticas y ordenadas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"[Link]
XHTML 1.0 Frameset es idntico al doctype transitional, excepto en el uso de la etiqueta <frameset> en lugar de <body>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN" "[Link]

[Link]">

XHTML 1.1 DTD

XHTML 1.1 declaration. Visita el sitio del WC3 para una visin general y de lo que ha cambiado desde la versin 1,0 de XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"[Link]

Dar formato a un texto en HTML. Etiquetas HTML para poner texto en una web
Resumen: A contiunuacin os muestro un listado de etiquetas vlidas para formatear textos en html y darles el estilo y apariencia deseados.
A contiunuacin os muestro un listado de etiquetas vlidas para formatear textos en html y darles el estilo y apariencia deseados en tus pginas web. La idea es usar las etiquetas apropiadas para cada situacin y tipo de texto, dotando de unmarcado semntico adecuado, es decir, darle mayor significado al contenido de la web de cara a tus visitantes, a los buscadores, navegadores, etc.

El uso de las etiquetas HTML para texto, al igual que cualquier otro elemento de tu pgina web, se debe usar combinado con CSS para controlar la expresin exacta de estas etiquetas en pantalla. Por supuesto no es necesario usar todas estas etiquetas para hacer buenas pginas web, pero s que conviene saber que existen para poder aplicarlas cuando sea necesario. La agrupacin aqu expuesta es personal, simplemente para ayudar al lector a encontrar un etiqueta concreta para un fin tambin concreto. Por supuesto se admiten sugerencias.

Etiquetas vlidas fundamentales para dar formato a un texto

Resaltar textos
<strong> Texto de mayor importancia</ strong> Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto. Es una etiqueta importante para el posicionamiento web. <b>texto en negrita</ b> La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es ms correcto usar <strong>. <em> texto en cursiva </ em> Crea nfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>. <h1> ttulos y encabezados</ h1> Crea ttulos, para dar ms o menos importancia a frases de tu texto y establecer orden dentro de la narracin. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas ttulo son importantes para el SEO. <big>texto ms grande</ big> Una forma rpida de aumentar el tamao de la fuente. Para hacer el texto ms pequeo sin usar css se usa <small>. <sub> subndice</ sub> Muestra el texto dentro de estas etiquetas por debajo de la lnea normal, a modo de un subndice. <sup> superndice </ sup> Muestra el texto dentro de estas etiquetas por encima de la lnea normal, a modo de un superndice.

Estructura y disposicin de textos en la pgina

<div>bloque de texto</ div> Establece un bloque personalizado de contenido en tu pgina. Se utilizan sobre todo junto con las hojas de estilos para crear capas y estructuras web. <span> Bloque de texto en lnea</ span> Similar a la etiqueta div, pero el texto contenido dentro de esta etiqueta sigue el flujo normal del resto, mientras que el texto contenido dentro de la etiqueta <div> acta como un bloque separndolo visualmente del resto. Puedes leer ms informacin sobre elementos y etiquetas en HTML.

Texto preformateado
<pre> texto preformateado</ pre> Soportes de texto preformateado. Si envuelve alrededor de este texto, que va a seguir la forma del texto en el cdigo es decir, sin formato extra tiene que poner pulg Si tienes espacio que en su cdigo, ste aparecer espaciadas en la pgina. <samp> Textos de ejemplo</ samp> Se utiliza para mostrar un ejemplo en pantalla, por lo general de una salida de un programa, un script, etc. Es similar en uso a la etiqueta <code>. <code> cdigo</ code> Establece el texto como cdigo, se usa mucho en pginas como esta, para ejemplos de cdigo fuente.

Citas y Referencias
<blockquote>cita larga</ blockquote> Sangra todo el bloque de texto de ambas partes y aade saltos de lnea superior e inferior. Se utiliza para citas largas. <cite>cita</ cite> Muestra una cita (el ttulo de una obra a la que ests haciendo referencia, por ejemplo). <q>citas pequeas</q> Se usa para entrecomillar una cita pequea. A diferencia de <blockquote>, no presenta el texto en un bloque separado sino que sigue el flujo normal de la pgina. <dfn> definicin</ dfn> Pues eso, para formatear un texto en HTML como una definicin. <abbr>abreviaturas</ abbr> Denota una abreviatura, utilizar el atributo title para darle el significado completo.

<acronym>acrnimos</ acronym> Lo mismo que la anterior. Slo que en lugar de para abreviaturas se usa para acrnimos.

Si te interesa, puedes ver ejemplos reales de como se muestran las diferentes etiquetas de texto en la pgina web de w3 schools.

Crear una galera de imgenes solo con CSS y HTML

Resumen: Presentacin de un cdigo hecho de una galera de imgenes desarrollada completamente en CSS y HTML, explicada de forma que puedan realizarse las modificaciones que se deseen.
Muchas veces sucede que, por desconocer todo el potencial que ofrecen los recursos web ms elementales, se aplican herramientas ms complejas y que no todos los ordenadores ni todos los navegadores aceptan. CSS es una poderosa herramienta que brinda una infinidad de recursos que no siempre son bien explotados. Un ejemplo de ello, lo hemos dado con el men desplegable realizado completamente con CSS y HTML, sin necesidad de aplicar otros lenguajes o animaciones de ningn tipo. Este mismo tipo de recursos nos permite mostrar algunos contenidos de forma tal que simulan ser dinmicos. El ejemplo que hoy traemos, se trata de una galera de imgenes muy sencilla, con muy poco cdigo, como veremos ms adelante, y que est basada en los mismos principios con que fue desarrollado el mencionado men desplegable. Es ms, este ejemplo es an ms sencillo. Pero no por sencillo deja de ser atractivo.

Lo que necesitaremos
Para poder realizar el ejercicio, necesitarn de algunos archivos de imagen que estn contenidos en el ejemplo terminado que pueden descargar desde aqu. Luego de descargado el archivo y descomprimido, encontrarn un archivo HTML y un archivo CSS, que tienen el ejemplo ya terminado. Junto a ellos, se encuentra una carpeta img que contiene todas las imgenes necesarias. Dentro de esta carpeta se encuentran dos carpetas ms, llamadas chicas y grandes que son las que tienen las imgenes que utilizaremos en la galera de imgenes propiamente dicha. El ejemplo ya terminado pueden verlo aqu.

Conceptos generales
Podramos decir que este trabajo est basado fundamentalmente en un solo concepto, y es el de la visibilidad de las capas. Con CSS podemos determinar si una capa es visible o no mediante el empleo de la etiqueta visibility, que puede tener los valores visible, hidden y collapse. La galera de imgenes constar de una serie de imgenes en miniatura (thumbnails) alineadas en forma ordenada en dos columnas. Cuando se pasa el puntero por estas imgenes, aparece en un recuadro ubicado a la derecha de estas dos columnas la imagen ampliada. Para realizar esto, debemos emplear una etiqueta y uno de sus posibles valores, que para este ejemplo es fundamental: position: absolute. Ahora explicaremos los principios de funcionamiento. Cada par de imgenes (una imagen ampliada con su respectivo thumbnail) se encuentran formando parte del mismo tem de lista. Cada una de estas imgenes que forman el par, tienen una clase diferente (min y max). La clase min define los atributos del thumbnail. La clase max es la que se refiere a la imagen ampliada, y que tiene una posicin absoluta y un valor hidden de su atributo visibility, lo que hace que en condiciones normales esta imagen no se encuentre visible. Se emplea una pseudo-clase vinculada a la clase max (a:hover .max), que es la que hace que el atributo visibility adquiera valor visible cuando el puntero se posa sobre cualquier elemento que compone el tem de la lista.

Desarrollo del ejemplo

Como pueden apreciar, para que el tema quede ms claro se han definido todos los atributos CSS que estn relacionados con la galera en si misma, en un archivo CSS diferente ([Link]) del que contiene los atributos de los restantes componentes de la pgina, de forma que el tema pueda verse con mayor claridad.

Estructura
En primer lugar, definiremos la estructura del men, que consta simplemente de dos listas no ordenadas (ul), conteniendo cada una de ellas cuatro tems (li). Las listas tienen sus atributos definidos por la clase cat. Como ya dijimos, cada uno de los tems contiene dos imgenes.

Ubicacin de los thumbnails

En primer lugar, debemos ubicar las imgenes en miniatura en dos columnas (cada columna es una lista diferente) y para ello debemos definir en el archivo CSS los atributos de la clase min que se encuentran contenidos en los tems (li).

1
.cat {

2 3 4 5 6 7 8 9 10

list-style-type: none; margin: 0 0 25px 10px; /* Eliminacion de vieta en IE6 */ padding: 0px; /* Eliminacion de vieta en IE6 */ float:left; } li .min { width: 75px; height: 64px; padding: 6px 20px 20px 7px; }

11
La primera clase define que la lista no tendr estilo de lista, se definen los mrgenes y el relleno para que se vea como queremos, y le damos el valor left a la propiedad float, de forma que ambas listas se ubiquen una al lado de la otra flotando a la izquierda. Luego, se definen los atributos de las dimensiones de cada uno de los tems y el relleno de los mismos, en la regla li .min.

Imgenes grandes
Cuando vemos el ejemplo que hemos desarrollado hasta aqu, vemos que se nos presenta un gran espacio en blanco que solo aparecer cubierto por las imgenes grandes cuando el puntero se pose sobre los thumbnails. Es por esta razn, que incorporamos una imagen que contendr un mensaje con instrucciones para el usuario, de forma tal que todo el espacio quedar cubierto. Esto lo realizamos empleando una capa con posicionamiento absoluto, y cuyos atributos aparecen definidos en el archivo CSS con el identificador #base: ?

1 2 3 4

#base { width: 410px; height: 310px; border: solid 1px #ccc;

5 6 7 8 9

position: absolute; top: 250px; /* Provoca la separacion del borde superior */ left: 500px; /* Separa la imagen grande de la pequea */ background: url(img/[Link]); }

Como vemos, tiene un ancho y una altura definidos. Como hemos querido agregar un borde que aparecer separado 5px a cada lado de la imagen, las dimensiones son 10px ms grandes que las de las imgenes. A su vez, esta capa tiene una imagen de relleno, que es la que se presenta cuando ninguna de las imgenes de la galera est visible. Ahora solo resta definir el posicionamiento de las imgenes grandes, as como su condicin de visibilidad, por lo que definiremos a todos los elementos contenidos dentro de un tem de lista con la clase .max. ?

1 2 3 4 5 6

li .max{ visibility: hidden; position: absolute; top: 256px; /* Provoca la separacion del borde superior */ left: 506px; /* Separa la imagen grande de la pequea */ }

Como vemos, se define que en condiciones normales estos elementos (imgenes) estarn no visibles. La posicin (top y left) son seis pixeles ms que los de la capa #base, debido al relleno de 5px por lado que hemos definido y al borde de 1px que tiene dicha capa. A continuacin, mediante el empleo de una pseudo-clase, haremos que la capa sea visible cuando el puntero se pose sobre cualquier elemento con enlace contenido dentro del tem de lista: ?

1 2 3

a:hover .max { visibility: visible; }

El ejemplo ya terminado pueden verlo aqu.

Conclusin
Como pueden ver, el ejemplo es extremadamente sencillo. Se puede ampliar, colocar una mayor cantidad de columnas, modificar las posiciones o cualquier otra cosa que su imaginacin les dicte, sin mayores dificultades.

La especificidad en Hojas de Estilo CSS

Resumen: Un pequeo pero eficaz consejo que puedo dar para todos aquellos que empiezan a desarrollar sus primeras hojas de estilo CSS, es tener en cuenta el factor de la especificidad en CSS, su influencia y la manera de controlarlo.
Un pequeo pero eficaz consejo que puedo dar para todos aquellos que empiezan a desarrollar sus primeras hojas de estilo CSS, es tener en cuenta el factor de la especificidad en CSS, su influencia y la manera de controlarlo. La especificidad es una propiedad pocas veces valorada por muchos desarrolladores web novatos, y que por lo mismo puede causar la desesperacin de ms de uno al momento de aplicar estilos a nuestro cdigo.

Qu es la especificidad en CSS?
En qu consiste? Bsicamente la especificidad se refiere al valor que toma cada uno de los elementos de una hoja de estilo, hay selectores que tienen ms peso e importancia que otros, es decir ms especificidad. Entre ms especificidad exista, tendremos menos posibilidades de equivocarnos al aplicar el estilo que queremos a cierto elemento, y es ah donde la desesperacin de no obtener lo que queremos desaparecer.

Como calcular la especificidad CSS

Existe una forma sencilla de calcular la especificidad CSS, es mediante una frmula considerada incluso como un clculo ya estandarizado. Consiste en sumar los puntos totales de una sentencia CSS en base a los selectores o elementos de los que est compuesto. Se le da un valor de 1 punto a un elemento simple como una etiqueta a, p o div, a un selector de clase se le da el valor de 10 puntos y a un selector de id se le da un valor de

100 puntos, siendo nicamente superado por los atributos de estilos a los que se les da un valor de 1000 puntos. Es decir; supongamos que queremos agregar un estilo los prrafos de nuestro documento, si agregamos en nuestro CSS un selector p{}, este ser utilizado para dar estilo a todos los prrafos del HTML, pero slo se le dar el valor total de 1 punto, esto quiere decir que tiene poco especificidad. Por lo cual si existe otro selector en el mismo CSS que diga as .par p{} tendr mayor importancia que el anterior, ya que le estamos agregando una clase por lo que la especificidad aumenta en 10 puntos es decir 10 puntos por el selector clase ms 1 punto por el elemento nos da 11 puntos. De la misma manera esto se aplica para los id, si agregamos una lnea que diga #parr p{} esta tomar el valor de 101 puntos de especificidad, por lo que ser la ms importante, as podemos crear combinaciones para que los estilos se apliquen correctamente.

Un ejemplo de especificidad con CSS

Con el siguiente cdigo CSS:

p{

background: crimson;//Especificidad de 1 punto

.par{

background: pink;//Especificidad de 10 puntos

[Link]{

background: maroon;//Especificidad de 11 puntos

#parr{

background: orange;//Especificidad de 100 puntos

p#parr{

background: red;//Especificidad de 101 puntos

[Link]#parr{

background:green;//Especificidad de 111 puntos

}
Obtendr los siguientes resultados si inserto este bloque en mi HTML:

<p>El fondo de este prrafo ser color carmes</p>

<p class="par">El fondo de este prrafo ser color

granate</p>

<div class="par">Este div tendr el fondo de color

rosa</div>

<p id="parr" class="par">El fondo de este prrafo ser

de color verde</p>

<p id="parr" style="background: black;">El fondo de este

prrafo ser negro porque use un atributo de estilo

dentro de la etiqueta</p>

<p id="parr">El fondo de este prrafo ser rojo</p>

Tengan en mente estos nmeros al momento de realizar sus CSS y no se confundirn al momento de desplegar su web en su navegador, ya que obtendrn lo que calcularon.

Fondos con gradientes degradados con CSS3

Resumen: En este artculo explicamos las dos formas que hay de hacer fondos con gradientes en CSS3, con cdigos de ejemplo para entender mejor el procedimiento.
Los gradientes o degradados son una de las tcnicas ms utilizadas por el diseo grfico para resaltar y estilizar fondos en las pginas web. Su aplicacin en casi cualquier situacin puede resultar beneficiosa para agregar cierta personalidad al sitio, creando en el mayor nmero de situaciones una mejor sensacin que al utilizar un fondo monocromtico. El uso del trmino gradiente se refiere a la creacin de una transicin gradual, suave y sin saltos bruscos, de un color a otro creando una secuencia de colores que puede ser utilizada para crear efectos como el de sombra y desvanecimiento. Antes de la llegada de las hojas de estilo y la programacin dinmica, los gradientes eran realizados nicamente con programas de ilustracin, teniendo que crear dicho degradado de manera manual y una vez termino haba que cargar la imagen en nuestro servidor web y colocarla como fondo de nuestro sitio. Con el paso del tiempo hubo quienes se aventuraron a crear ciertos scripts o programas para colocar gradientes de forma dinmica desde el lado del servidor web, calculando y estableciendo las propiedades de estilo con lenguajes como PHP. Crear un programa o una imagen nicamente para mostrar dicho efecto en nuestro fondo resultaba bastante inflexible, y pronto fue considerado como una mala prctica por el tiempo que se consuma en cargar el sitio o quizs porque en algunos navegadores el efecto no era el esperado. Con la llegada de CSS3 y su incorporacin en la mayora de los navegadores de renombre, ahora tenemos la oportunidad de crear gradientes de manera sencilla, con el menor de los esfuerzos, sin necesidad de algn programa de edicin digital como Photoshop y con slo cdigo, nada de imgenes.

Formas de crear degradados para tus fondos con CSS3

Hasta el momento existen dos formas establecidas por CSS3 para crear un gradiente, ya que desafortunadamente Webkit y Mozilla no llegaron a un acuerdo en lo que a este tema se refiere, aunque los dos hayan adoptado la misma sintaxis para casi el resto de CSS3. Webkit es un framework que esta presente en navegadores como Safari y Chrome, mientras que el kit de Mozilla controla el CSS3 en Firefox. Es esto y la sintaxis lo nico que diferencia a los dos cdigos que utilizaremos en este artculo, ya que producen bsicamente el mismo resultado. La sintaxis del gradiente Webkit es la siguiente:

-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>? [, <parada>]*)

El tipo puede ser linear o radial, es decir que el degradado se haga mediante lineas o mediante crculos Un punto es un par de valores separados por espacios, puede ser indicado con nmeros, porcentajes o las palabras clave top, bottom, left y right. Radio es un nmero y slo se puede especificar cuando el tipo de degradado es radial. Una parada es una funcin con dos argumentos, un nmero y un color, indicando donde debe terminar el gradiente, tambin se pueden utilizar las funciones from y to para especificar esto. Entonces, si queremos definir un degradado lineal que abarque todo el fondo de nuestra pgina y que vaya del color granate al color carmes, incluiremos en nuestro CSS la siguiente lnea:

body{ background: -webkit-gradient(linear, 0 0, from(maroon), to(crimson)); }

De esta manera estamos indicando con linear que es de tipo lineal, 0 0 que va de la esquina superior izquierda, 0 100% hasta la esquina inferior izquierda, from(maroon) de granate, to(crimson) a carmes. Es entonces que si queremos que el gradiente nicamente cubra una parte del fondo basta con cambiar el porcentaje en el segundo parmetro, si indicamos 0 20% el degradado se terminar en el 20% del fondo y el otro 80% ser del color que le dimos al final en la funcin to(). En caso de que queramos incluir un tercer color en el gradiente utilizaremos color-stop de la siguiente manera:

0 100%,

background: -webkit-gradient(linear, 0 0, 0 100%, from(maroon), color-stop(50%, crimson), colorstop(90%, red) );

Esto indica que el color carmes empezara en el 50% y el color rojo en el 90%, creando un gradiente entre tres colores lo que da un efecto diferente a los degradados comunes. Como mencion al principio, se pueden hacer fondos con gradiente en CSS3 de dos maneras. Ya vimos como poder realizar el efecto con Webkit, ahora veamos como hacer un fondo con gradiente con Mozilla. Primero que nada la sintaxis aqu sera de la siguiente manera:

-moz-linear-gradient( <parada>, <parada> [,

[<punto> || <ngulo>,]? <parada>]*)

El tipo en este caso est definidio al inicio de la sentencia, como vemos linear est en el nombre -moz-linear-gradient, el punto est para definir la posicin horizontal y vertical en donde iniciar el degradado, y se puede usar con porcentaje, pixeles, o palabras claves (left, center, right para horizontal y top, center, bottom para vertical), si no es especificado se inicia en el centro por defecto. Tambin se puede usar un ngulo en vez de dar un punto, por ejemplo si damos 15deg (15 grados) en la sentencia -moz-linear-gradient (left 15deg, marron, crismon); obtendremos un degradado que inicia con 15 grados de inclinacin de izquierda a derecha. Al igual que en Webkit, con Mozilla se puede utilizar el color-stop como parada para definir hasta donde queremos que llegue un color, y donde inicia otro.

Conclusiones
Como podemos ver son sentencias muy parecidas que varan en muy pocas situaciones, con ellas podemos crear miles de combinaciones y experimentando podemos llegar a crear efectos muy buenos para nuestro sitio Web. Recuerda que Internet Explorer an no puede interpretrar CSS3 por lo tanto tampoco gradientes, en cuanto a Safari y Firefox si tienes una versin mayor a la tres podrs usarlos, al igual que en Google Chrome. Para no dejar a nadie resentido o con un fondo que tu no quieres mostrar, trata de incluir un color base para aquellos navegadores que an no soporten el gradiente, esto lo puedes hacer simplemente incluyendo dentro de body en el CSS la siguiente sentencia background: #000000;, con esto si el usuario usa Internet Explorer ver el fondo de color negro.

Animar texto con CSS3 y WebKit para Chrome y Safari

Resumen: Explicacin del uso de las etiquetas pulse y bounce, integradas dentro del motor WebKit (Chrome y Safari) para animar textos con CSS puro.
na de las grandes maravillas sobre el uso del CSS es que con muy poco puedes lograr bastante, es sorprendente como con pequeos cambios que hagas a tu cdigo, unos cuantos atributos o un ajuste de clases, puedes crear un mejor ambiente para atraer, agradar y lograr que el aspecto de tu sitio web sea ms placentero. Muchas veces nos olvidamos de los detalles, cuando en muchas ocasiones estos son fundamentales para lograr el enganche con los visitantes de tu web. La informacin necesita presentarse de manera adecuada, y con los detalles podemos dar ese toque de diferencia que har que un usuario prefiera nuestro sitio sobre los otros. En la actualidad, los navegadores permiten experimentar a gran escala con las hojas de estilo, con excepcin de Internet Explorer, todos soportan la mayora de las propiedades con las que cuenta este lenguaje. En este caso vamos a hablar de distintos tipos de animaciones hechas con CSS.

Animaciones de texto con CSS

Uno de los pequeos pero poderosos efectos que podemos crear hoy en da de manera fcil, es la animacin de texto. Las animaciones, comnmente conocidas en el ambiente del diseo, consisten en agregar un efecto de movimiento a un objeto, en nuestro caso al texto o a un div, lo que le agrega la sensacin de que est en diferentes planos en ciertos momentos. En el pasado existan etiquetas como marquee o blink que podan agregar ciertas animaciones primitivas a nuestro texto, lleg a tal grado el mal uso de ellas que actualmente se encuentran descontinuadas, y al verlas en una pgina pueden causar la indigestin de ms de uno. Hasta hace poco para realizar este efecto de manera correcta se tena que recurrir a herramientas de diseo como Flash. En este momento CSS3 nos ofrece la capacidad para crearlo al agregar unas cuantas lneas de cdigo a nuestra hoja de estilo. Las animaciones CSS (@-webkit-keyframes) son parte del paquete propuesto por WebKit para la estandarizacin de CSS3, es por ello que actualmente slo pueden ser visualizadas en Google Chrome y Safari. Su objetivo es poder brindar al desarrollador la capacidad de crear y realizar contenido grfico sencillo pero a la vez enriquecedor.

Tipos de animaciones de texto con WebKit

Podemos manejar dos tipos de animacin, pulse y bounce, efectos bastante conocidos para aquellos que han manejado algn programa de diseo anteriormente. Para

agregarlos a nuestro objeto, no hay que tener un dominio total de CSS, basta con agregar las siguientes lneas en nuestro CSS; ?

1 2 3 4
font-size: 50px; /* Tamao inicial de la font en la animacin */ @-webkit-keyframes pulse { from { opacity: 0.0; /* Nivel de transparencia inicial */

5 6 7 8 9 10 11 12 13 14 15 16 17
?

} to { opacity: 0.8; /* Nivel de Transparencia final */ font-size: 100px; /* Tamao final de la font en la animacin */ } } #animacionpulse {

-webkit-animation-name: pulse; /* El nombre del efecto que estamos agregando * -webkit-animation-duration: 2s; /* Tiempo que durar la animacin */

-webkit-animation-iteration-count: infinite; /* Las veces que queremos reprodu -webkit-animation-timing-function: ease-in-out;

-webkit-animation-direction: alternate; /* Propiedad utilizada para que el tex }

1 2 3

@-webkit-keyframes bounce { from { left: 0px; }

4 5 6

to { left: 200px; }

7 8 9 10 11

} #animacionbounce { -webkit-animation-name: bounce; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate;

12 13 14 15 16 17 18

width: 50%; padding: 0.2em 1em; position: relative; background: crimson; } /*La posicin relative es necesaria */

Y finalmente agregamos las siguientes lneas en el body de nuestro sitio: ?

1
?

<div id="animacionpulse" style="font-family: Arial; text-align: center;"> Probando

<div id="animacionbounce"> Probando Bounce! </div>

Lo que hacemos bsicamente es agregar la librera de animaciones @-webkit-keyframes, despus especificamos que tipo de efecto queremos usar ya sea pulse como en el primer caso, o bounce como en el segundo, y procedemos a dar los valores necesarios para que se efectu la accin. >>> Aqu podemos ver la demo. <<< (recuerda que slo se ve en Google Chrome y Safari) Como podemos observar los dos efectos son bastantes sencillos de aplicar y muy parecidos en composicin, y si experimentamos podemos crear efectos ms elaborados y complejos agregando atributos a estas estructuras bsicas.

Crear banners animados con CSS y WebKit

Una de las funcionalidades que podemos darle a este efecto, es para crear un banner con una atmsfera donde el elemento seleccionado se encuentre en movimiento mientras que el resto de los elementos se encuentren estticos o se difumen, y as lograr centrar la atencin en ese punto.

Para realizarlo basta con aplicar el elemento webkit-transform que nos permite modificar la estructura del div al momento de la animacin. El cdigo CSS sera el siguiente: ?

1 2 3 4 5 6 7

@-webkit-keyframes pulse { 0% { background-color: black; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); } 20% { background-color: black;

8 9 10 11 12 13 14 15 16 17

opacity: 0.8; -webkit-transform: scale(1.2) rotate(-5deg); } 40% { background-color: black; opacity: 0.6; -webkit-transform: scale(1.0) rotate(5deg); } 55% { background-color: black; opacity: 0.8;

18 19 20 21 22 23 24

-webkit-transform: scale(2.0) rotate(0deg); } 65% { background-color: black; opacity: 0.9; -webkit-transform: scale(2.0) rotate(0deg); }

25 26 27 28 29

100% { background-color: black; opacity: 1.0; -webkit-transform: scale(2.0) rotate(0deg); } }

30 31 32 33 34 35 36 37 38 39
padding: 0.2em 1em; .banner { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; color:FFF; background-color: black; width: 10%;

40 41 42 43 44 45

margin: 6em; }

Y el HTML correspondiente: ?

1 2 3 4

<div> <p>Coches usados!

<span style="font-size:12px">Ven y conoce el nuevo carro 3008. Maneja hacia </div>

Con esto obtenemos un recuadro en movimiento de color negro con el mensaje que incluimos en el div con clase banner. >>> Aqu podemos ver la demo. <<< (recuerda que slo se ve en Google Chrome y Safari)

Conclusiones
Como en todos los casos del diseo, no hay que exagerar el uso de un efecto, la cuestin aqu es saber donde y cuando aplicar cada tcnica. El exceso slo puede confundir e incluso abrumar a la persona que navega por nuestro sitio salga de nuestro hosting. El animar un texto produce un resultado bastante atractivo, pero no por ello se deber aplicar a todo el texto que nos lleguemos a encontrar. Debemos saber bien la funcin de cada parte de nuestro sitio y al tener esto como nocin, nuestro mismo sentido comn nos dir en donde aplicarlo. Por ejemplo, imagina que tenemos una pgina de blog donde constantemente exponemos cierta cantidad de artculos, ahora visualiza todos esos escritos con un efecto de animacin, es algo frustrante No lo crees?, no queremos que este efecto pronto se convierta en otra etiqueta blink. Por otra parte, es muy importante tener en cuenta que este efecto no se visualiza en todos los navegadores ni mucho menos, sino que slo se ve en Chrome y Safari por el momento. Esperemos que con el tiempo se integre en la estandarizacin de CSS3 y el resto de navegadores lo implementen.

La propiedad overflow de CSS en la maquetacin de pginas web

Resumen: De gran utilidad y poco utilizada, la propiedad CSS2 "overflow" puede resultar de gran utilidad en la maquetacin de pginas web.
La aparicin de CSS 2 brind a los diseadores de pginas web algunos elementos que brindan una mayor ductilidad a la hora de distribuir los contenidos en el diseo. Una de las propiedades introducidas es overflow, que posibilita una distribucin ms eficaz de las capas en el diseo. En muchas ocasiones, es necesario para mantener ciertas proporciones en el diseo, asignar a las capas (elementos DIV) determinadas dimensiones, tanto en ancho como en altura. Cuando esto sucede, al momento de introducir los contenidos es posible que los mismos excedan las dimensiones asignadas.

Con CSS1, cuando esto suceda, lo ms frecuente era que las capas aumentaran de tamao hasta cubrir completamente el espacio necesario para los contenidos introducidos. Usualmente, este aumento de tamao de las capas se produce en la altura. Para evitar este efecto, en CSS2 se introdujo el atributo overflow, que sirve para recortar los contenidos que exceden el tamao de las capas. Pero tambin sirve para que, en caso de que se desee que el contenido en exceso sea visible, se agreguen a la capa barras de desplazamiento que permitan que el usuario acceda al resto del contenido y la capa mantenga el tamao deseado. Los valores que pueden asignarse a este atributo son cuatro:

Visible: Este es el valor que tiene por defecto cualquier capa cuyo atributo overflow no se ha enunciado. Cuando se asigna este valor al atributo overflow de una capa, la misma puede tener diferentes comportamientos de acuerdo al navegador del usuario. En los navegadores Firefox, Google Chrome, Opera, Safari, Internet Explorer 7 y 8, la capa mantendr su tamao y el contenido desbordar la misma. En cambio, en Internet Explorer 6, la capa aumenta de tamao hasta cubrir la totalidad de los contenidos ingresados.

Hidden: Cuando se da este valor al atributo overflow y los contenidos superan en tamao a las dimensiones de la capa, los contenidos se recortan al finalizar el tamao indicado, quedando invisibles el resto de los contenidos. Tambin en este caso, y bajo determinadas circunstancias, Internet Explorer 6 y 7 pueden dar algunos errores. En el resto de los navegadores, funciona correctamente en cualquier circunstancia. Scroll: Este valor de la propiedad overflow, hace que la capa mantenga las dimensiones asignadas, y el contenido se mantiene visible en su totalidad, gracias a que aparecen barras de desplazamiento que permiten desplazarse para tener acceso al resto del contenido que no es visible en la capa. Es importante destacar que, an en el caso de que los contenidos no superen el tamao de la capa, las barras de desplazamiento se mostrarn de todas formas.

Auto: Al asignarse el valor auto (automtico), el comportamiento de la capa ser similar al que se obtiene al asignar el valor scroll en caso de que los contenidos superen el tamao de la capa, apareciendo las barras de desplazamiento. La diferencia con el valor anterior radica en que, en los casos en que los contenidos no superen el tamao de la capa, las barras de desplazamiento no aparecen, como si sucede en el caso de asignarse el valor scroll.

La utilidad de este atributo es mltiple, y permite un manejo ms adecuado de las capas, sobre todo en los casos en que las capas deben tener tamaos determinados para cumplir con los requisitos de un diseo. Veamos ahora como funcionan cada uno de estos valores. Para el ejemplo siguiente, crearemoscuatro capas iguales con dimensiones definidas, tanto en altura como en ancho, e introduciremos un texto lo suficientemente largo como para que sea superior a dicho tamao. Crearemos cuatro capas flotantes a la izquierda para que se ubiquen una al lado de la otra.

Para seguir el ejemplo, crearemos dos archivos, el html y el archivo css. Los cdigos que deberemos introducir sern los siguientes:

<html> <head> <title>Ejemplo overflow</title> <link rel="stylesheet" type="text/css" href="[Link]" /> </head> <body> <div id="capa1"> <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p> <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p> </div> <div id="capa2">

<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p> <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p> </div> <div id="capa3"> <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p> <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea

dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p> </div> <div id="capa4"> <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p> <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p> </div> </body> </html>
Y luego el archivo CSS:

#capa1, #capa2, #capa3, #capa4 { width: 200px; height: 200px;

padding: 5px; margin: 5px; border: solid 1px #840; background: #fca; float: left; overflow: visible; }

#capa2

overflow: hidden; }

#capa3

overflow: scroll; }

#capa4

overflow: auto; }
Si empleamos Internet Explorer 7 u 8, Mozilla Firefox, Google Chrome, Safari u Opera, el resultado deber ser el siguiente:

Mientras tanto, si viramos la pgina generada desde un navegador Internet Explorer 6, el resultado sera el siguiente:

El ejemplo de Internet Explorer 6 solo lo hemos colocado con la finalidad de mostrar que en algunos casos, es necesario hacer correcciones para este navegador, ya que toma de modo diferente las propiedades CSS y no se basa en el estndar. En la primera capa, vemos que la misma ha mantenido su tamao, pero el contenido se desborda de la misma. En el segundo, con el valor hidden, vemos que el contenido queda recortado y no es posible acceder al mismo por parte de quien est viendo la pgina. En el tercer caso, habindose marcado el valor scroll, puede apreciarse que la capamantiene su tamao y el contenido no se desborda de la capa y pueden verse las barras de desplazamiento horizontal y vertical, an cuando la barra de desplazamiento horizontal no es necesaria dado que el contenido desborda hacia abajo. En el ltimo caso, con el valor auto, la nica barra de desplazamiento que aparece es la vertical, ya que la barra de desplazamiento horizontal no es necesaria.

Soluciones a los problemas de visualizacin en Internet Explorer

Resumen: Damos un repaso a las tcnicas ms usadas para lidiar con la tarea de conseguir que nuestra web se vea bien en todos los navegadores, poniendo especial atencin a Internet Explorer, puesto que es el que ms problemas causa.
Si ests creando una pgina web y te encuentras ya en la fase de maquetacin web, entonces ests en la fase en la que llega la hora de convertir tu diseo en realidad. Se trata de plasmar aquello que tenas pensado en HTML y CSS. Esto puede resultar emocionante, pero muchas otras veces, y ms si se cuenta con poca experiencia, puede llegar a ser desesperante.

El problema de la visualizacin en Internet Explorer

Conforme se avanza en este proceso de maquetacin, uno se da cuenta que no es suficiente con maquetar intentando que se vea bien en T navegador, hay que intentar que todo usuario que entre a tu web desde cualquier otro navegador, pueda verla tan bien como t. Intuitivamente cabra pensar que esto sucede as por defecto, que sin que tengamos que hacer nada la pgina se va a ver siempre tal y como la estamos viendo nosotros en nuestro navegador. Nada ms lejos de la realidad, cada navegador es un mundo, o mejor dicho tiene una forma ligeramente distinta de renderizar el HTML y el CSS. En el caso de Internet Explorer, cada una de sus versiones (ie6, ie7, ie8) tiene una forma MUY distinta de interpretar el cdigo que t ests escribiendo. Como resultado tenemos un gran problema, un usuario que entre a tu web desdeInternet Explorer 6 muy probablemente no va a ver lo mismo que est viendo un usuario que entra desde Firefox, o incluso desde Internet Explorer 7 u 8. La solucin puede resultar complicada, sobre todo sin experiencia, puesto que conforme arreglas los estropicios de un navegador, con frecuencia algo se estropea en otro.

Internet Explorer 6 y 7, un duro reto para los diseadores

Por mi experiencia de los aos que llevo trabajando como diseadora web, si el cdigo que ests construyendo est bien hecho y si el CSS es correcto, tu web debera verse bien en todos los navegadores comunes, salvo en Internet Explorer 6 y a veces en ie7. Los navegadores ms comunes, que suponen un 99% de la cuota de mercado, son estos: Internet Explorer 6+, Firefox 3+, Chrome, Safari yOpera 9+. Como deca, si tu web est bien hecha, los problemas de visualizacin los vas a tener con Internet Explorer 7 y 6. El uso de Internet Explorer 6, un navegador que tiene ms de 10

aos, tiende a desaparecer aunque a veces parezca lo contrario, pero an lo usa un % de usuarios importante, por lo que no hay que perderlo de vista en nuestros diseos. Parece mentira que todava tengamos estos problemas los diseadores web. Vamos a ver muy pronto la implantacin universal de lenguajes tan avanzados como HTML5 o CSS3, tenemos frameworks de JavaScript como jQuery, que hace efectos increbles en las pginas web pero todava no somos capaces de librarnos de Internet Explorer 6.

Entonces, qu hacemos con Internet Explorer?

Si ests familiarizado con el diseo de pginas web y ms en concreto con el uso de CSS, sabrs lo que son los hacks (y seguramente los habrs aplicado ms de una vez). Para quien no lo sepa, los hacks son trucos que usamos los diseadores para conseguir que las pginas web se vean igual en todos los navegadores, jugamos con los errores de los navegadores para conseguir una correcta visualizacin. Como profesional, no recomiendo su uso. Los hacks son trucos, trampitas que hemos tenido la suerte de descubrir, pero que al fin y al cabo tienen un comportamiento extrao y no habitual, por lo que no podemos estar seguros de que sigan comportndose as en un futuro. Si maquetas tu web usando un hack y ste deja de ser til dentro de un ao, ten por seguro que tu web se ver mal nuevamente. Hay otras tcnicas ms recomendables para conseguir que se vea bien tu web en distintos navegadores. Las vemos a continuacin.

Usar un reset para CSS

Los navegadores tienen por defecto un estilo bsico para el cdigo HTML. Por ejemplo los encabezados (H1, H2, etc.) se visualizan por defecto a mayor tamao y en negrita, los enlaces en azul y subrayados, se dan mrgenes y paddings a ciertos elementos, etc. Esto puede provocar comportamientos extraos de las propiedades CSS a la hora de disear nuestras pginas web, y la mayora de los problemas de compatibilidad entre navegadores pueden venir de ah sin saber nosotros porqu. Lo mejor es empezar una hoja en blanco de verdad, y para eso tenemos que resetearla. Yo suelo usar el reset de Eric Meyer, pero hay otros, como el de Yahoo!. A parte de usar un reset prefabricado, como estos que os presento, lo ideal es adaptarlo a cada diseo en el que trabajemos para lograr una mayor flexibilidad y no escribir cdigo innecesariamente.

Usar una hoja de estilos distinta para Internet Explorer

Aqu viene la parte ms importante de este artculo, donde aprenderemos como hacer una hoja de estilos para Internet Explorer o incluso para una versin concreta del

mismo. Para lograr esto se usan los comentarios condicionales, que son etiquetas que Internet Explorer interpreta, mientras que el resto de navegadores las toman como simples comentarios y las ignoran. Por tanto, todo lo que vaya dentro de esas etiquetas slo ser ledo por Internet Explorer. Esa es toda la magia, bonito no?. Para usar los comentarios condicionales en Internet Explorer, tenemos que escribir en el cdigo fuente de nuestra web, dentro de las etiquetas <head> y </head>, las siguientes lneas: ?

1 2 3 4

<link rel="stylesheet" type="text/css" href="[Link]" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Con esto bsicamente estamos proporcionado a Internet Explorer una hoja de estilos ([Link]) que el resto de navegadores no pueden leer. Como veis colocaremos ENCIMA la hoja de estilos comn a todos los navegadores ([Link]), y debajo los comentarios condicionales con la hoja de estilos para Internet Explorer, donde pondremos todas las correcciones necesarias. Un ejemplo, si te encuentras haciendo la maquetacin de una web y tienes un problema con los mrgenes del id #header, por ejemplo, puedes darle un margen en el CSS comn (que leern todos los navegadores, incluido Internet Explorer) y darle un margen distinto en el CSS para Explorer (que slo leer Explorer, y sobrescribir el valor del CSS comn).

Usar una hoja de estilos para una versin concreta de Internet Explorer
Esto tambin es posible, y lo haremos igualmente por medio de los comentarios condicionales. En el cdigo anterior, tendremos que sustituir estas lneas: ?

1 2 3

<!--[if IE]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Por alguna de las siguientes, dependiendo de a qu versin de Explorer queramos apuntar:

Comentarios condicionales para todos los navegadores menos IE

?

1 2 3

<!--[if !IE]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales slo para IE 7

?

1 2 3

<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="[Link]"> <![endif]-->

Comentarios condicionales slo para IE 6

?

1 2 3

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales slo para IE 5

?

1 2 3

<!--[if IE 5]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales slo para IE 5.5

?

1 2 3

<!--[if IE 5.5]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales para IE 6 y versiones ms antiguas

?

1 2 3
?

<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

1 2 3

<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales para IE 7 y versiones ms antiguas

?

1 2 3
?

<!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

1 2 3

<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales para IE 8 y versiones ms antiguas

?

1 2 3
?

<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

1 2 3

<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales para IE 6 y versiones ms modernas

?

1 2 3
?

<!--[if gt IE 5.5]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

1 2 3

<!--[if gte IE 6]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales para IE 7 y versiones ms modernas

?

1 2 3
?

<!--[if gt IE 6]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

1 2 3

<!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Comentarios condicionales para IE 8 y versiones ms modernas

?

1 2 3
?

<!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

1 2 3

<!--[if gte IE 8]> <link rel="stylesheet" type="text/css" href="[Link]" /> <![endif]-->

Otras alternativas: Universal IE 6 CSS

Disear una pgina web y conseguir que una web se vea bien en Internet Explorer 6 es una tarea muy complicada. Muchas empresas y profesionales estn dejando poco a poco de dar soporte a este navegador, ignorndolo en sus diseos. Esto es debido principalmente a que su uso se est reduciendo con el paso del tiempo en beneficio del uso de navegadores ms modernos y seguros. Y no nos engaemos, tambin se debe a que resulta muchas veces una pesadilla lidiar con este navegador. En lugar de ignorar por completo a sus usuarios, y permitir que una web se vea rematadamente mal en ie6, podemos optar por una solucin alternativa que no deje fuera al porcentaje de usuarios nada despreciable que an siguen utilizndolo. Para ello, la gente de for a beautiful web ha creado un proyecto interesante, universal IE 6 CSS. Bsicamente lo que han hecho es crear una hoja de estilos muy bsica que permite que nuestra web se visualice correctamente en Internet Explorer 6. Este es el cdigo que hay que poner: ?

1 2 3 4 5 6 7 8 9 10 11

<!--[if !IE 6]>

<link rel="stylesheet" type="text/css" media="screen, projection" href="css-comu <!--<![endif]-->

<!--[if gte IE 7]>

<link rel="stylesheet" type="text/css" media="screen, projection" href="css-ie.c <![endif]-->

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" media="screen, projection" href="[Link] <![endif]-->

Ahora s, con el uso de estas tcnicas, estaremos en mejores condiciones de hacer pginas web que puedan ser visualizadas y navegadas del mismo modo (en la manera de lo posible) en todos los navegadores.

Cambiar el estilo CSS de una web dinmicamente. Parte I JavaScript

Resumen: Vemos una primera parte de este mini-manual que vamos a tener sobre cmo modificar dinamicamente los estilos CSS en nuestra pgina web. En esta primera parte vemos como hacerlo con JavaScript.
En numerosas ocasiones, varios desarrolladores y/o diseadores web se han topado con la necesidad de llevar a cabo una adaptacin dinmica de estilos en espacios de un sitio Web. Es comn encontrar clientes y patrocinadores que deseen mostrar un conjunto estandarizado de informacin arraigado por distintos estilos, con el objetivo de adaptarse al medio o al momento. Dichos estilos, generados en base a los patrones de diseo de nuestra eleccin, se plasmarn en el sitio en algn momento, que ser determinado por alguna condicin y/o variable establecida previamente, y con ello lograr obtener el dinamismo necesario para desplegar dicha informacin con distintos patrones de estilo. Este dinamismo es especialmente til para aquellos proyectos donde es preciso plasmar varios mensajes en poco espacio, o donde se desea manejar un ambiente ms ad hoc a la situacin del visitante de nuestro sitio. El uso de estilos mediante CSS nos permite crear toneladas de trucos ingeniosos y adaptaciones increbles, especialmente con la incursin de CSS3 ha ido adentrndose en terrenos anteriormente desconocidos para las hojas de estilo, pero como lenguaje en muchas circunstancias su funcin sigue limitndose a lo estilstico. Su manejo de dinamismo no ha sido bien adaptado, y es por ello que en esta clase de proyectos es an recomendable respaldarnos y utilizar un lenguaje como JavaScript, o en su defecto un lenguaje del lado servidor como PHP, que nos permita llevar a cabo el uso de variables dinmicas y condicionamiento.

Cambiar estilos CSS dinmicamente con JavaScript

Mediante JavaScript obtenemos la capacidad de crear funciones que nos regresen resultados basados en operaciones y clculos, podemos obtener los atributos de los elementos, nos permite manejar clases predefinidas para tomar directamente datos y utilizarlos como condicionales, e incluso nos da la posibilidad de obtener informacin de APIs o Webservices, para que en base a los datos recibidos podamos cambiar el estilo de nuestro sitio, sin necesidad de usar bases de datos o hosting sofisticado. Supongamos que hemos sido requeridos para desarrollar una pgina web o blog donde el color del fondo pueda ser elegido por el usuario. Al incorporar a JavaScript al juego del diseo, esta tarea ser tan sencilla de codificar que en menos de lo que esperamos ser totalmente funcional. El primer paso es conocer la estructura que utiliza JavaScript paraa manejar el estilo CSS de todos aquellos elementos que cuentan con una id asignada, a los que llamaremos

objetos. Un objeto tendr varios atributos los cuales podemos llamar adhiriendo un punto al nombre del objeto, seguido del nombre del atributo que queremos obtener o modificar ([Link]), por ejemplo si tenemos un elemento div cuyo id es header, al momento de escribir [Link] estamos llamando al atributo style de dicho elemento. Tambin podemos mandar llamar con el nombre de la etiqueta del elemento, en el caso del ejemplo anterior, si escribimos [Link] llamaremos a todos los elementos div que se encuentran en nuestro cdigo, dentro de los cuales tambin se encuentra el div header. Para modificar los atributos de estilo CSS existen dos formas bsicas, la primera es recurrir al atributo style y la segunda modificar el atributo class. En lo personal me inclino ms por utilizar la segunda opcin pues es ms fcil de manejar, controlar y estandarizar el estilo de esa manera. Como nuestro objetivo es modificar el fondo de toda la pgina, entonces debemos adaptar la sintaxis para que modifique directamente el elemento body, para lo que podemos recurrir al elemento document de JavaScript. Tomando en cuenta todos los factores, la estructura quedar conformada como alguna de las siguientes maneras, [Link] o [Link]=nombre. Ahora debemos determinar de que manera el usuario podr elegir el color de fondo, puede ser mediante elementos de formulario como un select box donde elija una opcin, un campo de texto donde inserte el nombre, o podemos recurrir a un elemento ms visual y hacerlo mediante un men que muestre los colores de fondo disponibles. Si utilizamos el atributo style nuestro cdigo debe quedar estructurado de la siguiente manera: ?

1 2 3 4 5 6 7 8 9

<html> <header> <style> body {

background-color: #000000; color: #FFFFFF; padding: 20px; font: 18px Arial, Tahoma; } div {

10 11 12 13 14

width: 50px; height: 50px; border: 1px solid #FFFFFF; } </style> <script>

15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

function cambiar_fondo_con_style(colorsel){ var color = [Link](colorsel).[Link]; [Link]= color; } </script> </header> <body> <p>Da click en un recuadro para cambiar el fondo de la pgina</p>

<div id = "1" style = "background-color: #999;" onclick = "cambiar_fondo_con_style(i

<div id = "2" style = "background-color: #333;" onclick = "cambiar_fondo_con_style(i

<div id = "3" style = "background-color: #666;" onclick = "cambiar_fondo_con_style(i </body> </html>

Agregamos los estilos necesarios para agregar color al cuerpo y letras de la pgina, as como para darle una medida estndar a los recuadros del men donde elegiremos el color. >>> Puedes ver el ejemplo funcionando aqu <<< Creamos una funcin para el cambio dinmico de fondo, a la cual le enviaremos como parmetro el id de los recuadros. Dentro de esta funcin guardamos en una variable de nombre color el cdigo que corresponde al color de ese recuadro y finalmente asignamos ese cdigo al fondo del elemento body. Dicha funcin ser llamada mediante un evento onclick agregado en cada elemento div, para que al momento de dar click con el puntero del Mouse sobre algn recuadro, automticamente tome el color de ste como fondo.

Pero si deseamos utilizar class en vez del atributo style lo que debemos hacer es estructurar nuestro cdigo de la siguiente manera: ?

1 2 3 4 5 6 7 8 9 10 11 12

<html> <header> <style> body {

background-color: #000000; color: #FFFFFF; padding: 20px; font: 18px Arial, Tahoma; } div { width: 50px; height: 50px; border: 1px solid #FFFFFF; }

13 14 15 16 17 18 19 20 21 22 23 24

.fondo1 { background-color: #999; } .fondo2 { background-color: #333; } .fondo3 { background-color: #666; } </style> <script> function cambiar_fondo_con_class(id){ [Link]='fondo'+id;

25 26 27 28 29

} </script> </header> <body> <p>Da click en un recuadro para cambiar el fondo de la pgina</p> <div id="1" class ="fondo1" onclick="cambiar_fondo_con_class(id)"></div>

30 31 32 33 34 35 36 37

<div id="2" class ="fondo2" onclick="cambiar_fondo_con_class(id)"></div> <div id="3" class ="fondo3" onclick="cambiar_fondo_con_class(id)"></div> </body> </html>

>>> Puedes ver el ejemplo funcionando aqu <<< De esta manera nos ahorramos utilizar el atributo dentro de cada elemento y la funcin de JavaScript queda mucho ms limpia. Continuaremos cambiando el CSS dinmicamente con PHP en el siguiente artculo

Cambiar el estilo CSS de una web dinmicamente. Parte II PHP

Resumen: Vemos la segunda parte de este mini-manual que vamos a tener sobre cmo modificar dinamicamente los estilos CSS en nuestra pgina web. En esta segunda parte vemos como hacerlo con PHP.
Retomando el tutorial para cambiar el CSS dinmicamente, en el anterior captulo vimos como cambiar el CSS por medio de JavaScript, ahora hablaremos de cmo cambiar el css dinmicamente utilizando PHP. Por su parte PHP, al ser un lenguaje del lado servidor nos abre una gama ms extensa de posibilidades a realizar, en el caso del ejemplo que acabamos de realizar con JavaScript, se puede adaptar y agregar la funcionalidad de guardar en una variable de sesin o en su

defecto en una cookie, el fondo que eligi el usuario para as cada vez que este ingrese, el fondo sea justo el escogido. El manejo de informacin obtenida mediante formularios se vuelve ms sencillo con PHP, al contar con los mtodos GET y POST podemos crear un formulario sencillo para que el cliente elija las caractersticas que ms le agraden para el sitio. Podemos crear un formulario en PHP que de la opcin de elegir un color de fondo de una lista desplegable, o incluso podemos dar la opcin para que el usuario ingrese el nombre del color de fondo que quiera, todo esto de la siguiente manera:

<html> <head> <title>Elegir color de fondo con PHP</title> <?php $fondo = $_GET['colorlista']; $nombre = $_GET['nombrecolor']; ?> <style> body { <?php if (empty($nombre)) { if (!empty($fondo)) { ?> background: <?php echo $fondo ?>; <?php } else { ?> background: LimeGreen ;

<?php } ?> <?php } else { ?> background: <?php echo $nombre?>; <?php } ?> } </style> </head>

<body> <form action="#" method="GET"> <span>Selecciona un color de la lista: </span> <select id=colorlista name="colorlista"> <option value="LimeGreen" <?php if($_GET['color']=="LimeGreen") echo "selected="selected""; ?> >Lima</option> <option value="YellowGreen" <?php if($_GET['color']=="YellowGreen") echo "selected="selected""; ?> >Amarillo verdoso</option>

<option value="Crimson" <?php if($_GET['color']=="Crimson") echo "selected="selected""; ?> >Carmes</option> <option value="SteelBlue" <?php if($_GET['color']=="SteelBlue") echo "selected="selected""; ?> >Azul Acero</option> </select> <span> Escribe el nombre en ingls de un color:</span> <input type="text" name="nombrecolor" /><br/> <input name="cambiarfondo" type="submit" value="Cambiar el fondo!" /> </form> </body> </html>
Creamos un formulario con dos campos, un select box y un input text, donde utilizamos elmtodo GET para obtener la informacin una vez enviada a travs del botn cambiarfondo, una vez recibida creamos las condiciones para cambiar el fondo del sitio mediante CSS, imprimiendo el valor recibido dentro del atributo background del elemento body. Al crear un cdigo como el siguiente, podemos agregar una gran interactividad con el usuario, y podemos ampliar el dinamismo si aplicamos herramientas de AJAX para obtener una respuesta inmediata del servidor y no tener que esperar a que el visitante de click en el botn. Esta misma metodologa podemos aplicarla para realizar cambios dinmicos a todos los fondosde los diferentes elementos de nuestra pgina, podemos modificar los bordes, sombras e inclusoanimaciones gracias a las nuevas propiedades de CSS3. Las posibilidades son muchas, es cuestin de invertir un poco de tiempo y aplicar nuestro ingenio para poder hacer maravillas. En el siguiente artculo de esta entrega veremos como podemos adaptar y jugar con el ambiente de nuestro sitio, basndonos en la hora en que nos visitan.

Men y galera de imgenes tipo slide con CSS y HTML

Resumen: Como conseguir la simulacin de un "efecto slide" en mens y galeras de imgenes, solo con CSS y HTML.
En otros artculos hemos visto como se puede simular algunos efectos dinmicos empleando soloCSS y HTML. En este artculo les proponemos simular un slide de imgenes para un men vertical u horizontal o para una galera de imgenes. A continuacin desarrollaremos el ejemplo con los cdigos correspondientes explicados, de forma que se pueda comprender el funcionamiento y aplicarlo en la forma que se crea ms conveniente. Este efecto es ms sencillo que los casos mostrados anteriormente, y nos muestra que para conseguir algunos efectos interesantes no es necesario utilizar cdigos complejos, emplearscripts en otros lenguajes o utilizar animaciones. Basta con conocer los principios bsicos de lamaquetacin y el potencial de las hojas de estilo en cascada y emplear un poco de imaginacin. Mientras preparamos los archivos para que puedan descargarlos y mostrar el ejemplo terminado para que lo puedan ver en funcionamiento, pueden copiar los cdigos que se encuentran en el artculo.

Principio de funcionamiento
El principio en el cual est basado este ejemplo, es mucho ms simple que en los casos del men desplegable y la galera de imgenes que hemos descrito en otros artculos, y se basa en el comportamiento de las capas flotantes y la utilizacin de la pseudoclase :hover. La pseudoclase :hover se utiliza para modificar los parmetros de un elemento cuando elpuntero pasa sobre l. Normalmente se le utiliza para que se modifique un enlace y cambie de color o cambie el subrayado cuando el puntero se posa sobre l. Pero tambin se pueden modificar otras propiedades, como las dimensiones (width y height, ancho y altura) de una imagen o una capa.

Ejemplo
Puedes ver el ejemplo en funcionamiento aqu: slide con CSS y HTML, y tambin puedesdescargarte los archivos del ejemplo.

Los cdigos HTML y CSS

En primer lugar les dejaremos el cdigo HTML:

<html> <head> <title>Ejemplo</title> <link rel="stylesheet" href="[Link]" type="text/css" /> </head> <body> <div id="izquierda"> <ul id="menu"> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li>

</ul> </div> <div class="derecha"> <ul id="menu2"> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> <li><a href="#"><img src="img/[Link]" alt="#" title="#" /></a></li> </ul> </div> <div class="derecha"> <ul id="galeria"> <li><img src="img/[Link]" alt="#" title="#" /></li>

<li><img src="img/[Link]" alt="#" title="#" /></li> <li><img src="img/[Link]" alt="#" title="#" /></li> <li><img src="img/[Link]" alt="#" title="#" /></li> <li><img src="img/[Link]" alt="#" title="#" /></li> <li><img src="img/[Link]" alt="#" title="#" /></li> <li><img src="img/[Link]" alt="#" title="#" /></li> </ul> </div> </body> </html>
A continuacin, les damos el cdigo del archivo CSS, que se llamar [Link] y se debe ubicar en el mismo directorio que la pgina [Link]. En caso de querer renombrar el archivo o colocarlo dentro de un subdirectorio, como se hace normalmente, se debe modificar la ruta del enlace que se encuentra entre <head> y </head>.

/*

CAPAS CONTENEDORAS

*/

#izquierda

width: 170px; float: left;

.derecha { width: 750px; float: left; }

/*

ELEMENTOS DEL MENU LATERAL

*/

#menu { padding:0; margin:0 auto; list-style-type:none; width:160px; height:312px; } #menu li a { height:30px; width:160px; float:left; border-bottom:2px solid #fff;

overflow: hidden; } #menu li a img { border:0; } #menu li a:hover { height:120px; }

/*

ELEMENTOS DEL MENU SUPERIOR */

#menu2 { padding:0; margin:0 auto; list-style-type:none; height:120px; width:354px; } #menu2 li a { width:30px; height:120px;

float:left; border-right:2px solid #fff; overflow: hidden; } #menu2 li a img { border:0; } #menu2 li a:hover { background:#eee; width:160px; }

/*

ELEMENTOS DE LA GALERIA DE IMAGENES */

#galeria { padding:0; margin:40px auto 0 auto; list-style-type:none; height:300px; width:774px; border:1px solid #888;

} #galeria li { width:60px; height:300px; float:left; border-left:2px solid #000; } #galeria li img { height:300px; width:60px; border:0; } #galeria li:hover { background:#eee; width:400px; } #galeria li:hover img { width:400px; }

Explicacin
En primer lugar diremos que el ejemplo se encuentra dividido en tres capas flotantes, una a la izquierda, en forma de columna lateral, donde se ubica el ejemplo de men vertical. A la derecha, dos capas contienen el men horizontal y el ejemplo de una galera de imgenes, una arriba y la otra abajo. Las capas utilizadas utilizan un identificador (#izquierda) y una clase (.derecha) y son flotantes a la izquierda.

La capa contenedora
En los mens y la galera se emplea el mismo cdigo con leves modificaciones. En primer lugar, debemos limitar el tamao de la capa que contiene el men, que tiene el identificador #menu en el archivo CSS, lo que debe ser bien calculado ya que un error en esto puede originar fallas en el funcionamiento. El ancho de esta capa debe ser el ancho de las imgenes que se utilizarn, que en este caso es de 160 pixeles. El clculo debe hacerse en la altura de la capa contenedora. Colocaremos siete imgenes, que en su tamao plegado tendrn 30 pixeles mas 2 pixeles del borde blanco, es decir, un total de 32 pixeles, y en su tamao desplegado es de 120. Como el tamao de la capa debe ser igual al de seis imgenes plegadas y una desplegada, el clculo que se debe hacer es (6*32) + 120, lo que da un total de 312 pixeles. Otras propiedades utilizadas son el margen, que en este caso es 0 auto, para que se centre en la capa contenedora; en esta capa tambin se determina que las listas no tendrn estilo de lista, para que no aparezcan los marcadores de tems.

Los tems
En el caso de los mens, cada uno de los tems de la lista contiene un enlace, por lo que para darles el formato a todos, utilizaremos #menu li a (formato del tem que contiene un enlace dentro de la capa #menu). Las propiedades que determinaremos son las de las imgenes contradas, por lo que la altura ser de 30 pixeles. Para que las capas se superpongan y no queden desplegadas (vlido solo para los mens, ya que el caso de la galera tiene la diferencia que las imgenes contradas estn redimensionadas), es necesario que los tems de men sean flotantes, lo que queda indicado con la propiedad correspondiente. Para ganar en efecto decorativo, se ha determinado que cada tem de men tenga un borde blanco de 2 pixeles. Luego, se determina que todo lo que sobresalga de las dimensiones de la capa quede invisible mediante la propiedad overflow:hidden. De no colocarse, todas las imgenes quedarn en su tamao original.

Imgenes con enlaces

Las imgenes con enlace tienen por defecto un borde azul de 1 pixel, que debe ser eliminado para que el mismo no se vea, utilizando la propiedad border: 0 en #menu li a img, es decir, en las imgenes con enlace en un tem de men dentro de la capa #menu.

Las imgenes desplegadas

Cuando el puntero pasa o se posa sobre una de las imgenes contradas, se activa lapseudoclase :hover, que en este caso determina que la altura de la imagen pase de los 30 pixeles a los 120 pixeles, que es la medida real de cada una de las imgenes utilizadas.

El efecto
Cuando una de las imgenes contradas, desplaza hacia abajo a las capas que se encuentran debajo de ella, excepto la ltima, que solo completa el espacio disponible en la capa #menu, haciendo que se parezca a un efecto slide rpido.

El men horizontal
El caso del men horizontal es igual que el anterior, con la excepcin que la capa base, en este caso #menu2, es ms ancha que alta, al igual que las dimensiones de las imgenes contradas, con lo que el desplazamiento forzosamente se realiza hacia la derecha. El clculo de las dimensiones de la capa #menu2 debe realizarse con el ancho de las imgenes, en lugar de la altura como en el caso anterior. Otra diferencia, es que el borde de la capa contrada est a la izquierda.

La galera de imgenes
La galera de imgenes es igual al ejemplo del men horizontal (puede hacerse tambin con desplazamiento vertical), con la excepcin de que no contiene enlaces, con lo que el cdigo cambia ligeramente.

Como hacer fondos elsticos para ttulos y mens

Resumen: Como hacer para que un fondo de imgenes se adapte a la longitud del texto, siguiendo dos mtodos diferentes. Ejemplo en ttulos y en mens.

Las capacidades de CSS son enormes, lo que permiten que, con un poco de imaginacin, se puedan realizar efectos muy atractivos. En el presente artculo, mostraremos dos formas de hacer que el fondo se adapte a la extensin del texto, algo que como vern a continuacin, parte de conceptos bsicos muy simples. Algunos de los conceptos elementales que emplearemos en adelante, pueden verse en los siguientes artculos: Utilizacin de la repeticin y posicin de fondos en la maquetacin de pginas web Diseo de menus y submenus con CSS

Ttulos con fondo elstico

En primer lugar, veremos cmo hacer que el fondo de un ttulo o subttulo tome el tamao necesario para cubrir la extensin del texto asignado. Pero adems, veremos que se trata de un primer mtodo, ya que en el ejemplo siguiente, utilizaremos otra forma de hacerlo. Estos dos mtodos, pueden utilizarse en cualquier tipo de texto que sea necesario que cuente con un fondo. Para seguir ambos ejemplos, crearemos una sola pgina web en HTML o XHTML, y crearemos unarchivo CSS que colocaremos en una carpeta que denominaremos archivos. Para albergar las imgenes, crearemos un fichero que llamaremos imgenes. Ambas carpetas estarn en la raz del sitio, es decir, en la misma carpeta en la que se encontrar el archivo HTML. En caso de que deseemos modificar esta estructura, deberemos realizar los cambios correspondientes en los enlaces de los cdigos que presentaremos como ejemplo. Para realizar el ejemplo, debern adems, descargar las siguientes imgenes, simplemente copindolas desde esta pgina

En primer lugar, daremos los cdigos de ejemplo, para que puedan ver como se han dispuesto los diferentes elementos, para luego ir detallando la forma en que funciona. En primer lugar, elcdigo HTML:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[Link] <html xmlns="[Link] xml:lang="es" > <head> <title>Ttulos lquidos</title> <link rel="stylesheet" type="text/css" href="archivos/[Link]" /> </head> <body> <div id="pagina"> <div id="titulo"> <h2>Subttulo de la pgina</h2> </div> <div id="titulo"> <h2>Entrar</h2> </div> <div id="titulo"> <h2>Ttulo ms largo que los anteriores, para ver como se comporta.</h2> </div> </div>

</body> </html>
A continuacin, el cdigo CSS:

html

margin: 0; padding: 0; }

#pagina { width: 900px; margin: 0 auto; }

#titulo { height: 63px; background: url(../imagenes/[Link]) no-repeat right; padding: 0; display: table; }

#titulo h2

height: 45px; padding: 18px 50px 0px 50px; background: url(../imagenes/[Link]) no-repeat left; font: bold 20px arial, helvetica, sans-serif; color: white; }
En el archivo HTML podemos ver que en primer lugar encontramos una capa marcada con el identificador pagina, que sirve simplemente para acotar el espacio a 900 pixeles y centrar todo el trabajo. En el archivo CSS, adems, hemos eliminado el margin y padding que los navegadores muestran por defecto para la etiqueta <html>. Entrando en el ejemplo, vemos que cada ttulo est compuesto por una capa y un ttulo <h2> dentro de la misma. La capa ttulo tiene una altura de 63 pixeles, que se corresponde con la altura de la imagen que utilizaremos como fondo. La imagen que se coloca como fondo de esta capa, es lo suficientemente ancha como para que, en caso de que el ttulo se extienda por todo el ancho de la pgina, este espacio quede cubierto. Para que el borde redondeado de la imagen seleccionada aparezca a la derecha, se debeposicionar la imagen de fondo hacia la derecha, colocando el valor right en la propiedad background-position o utilizando el mtodo abreviado, como est en el ejemplo, colocando el valor al final del enlace a la imagen. Con esto, la imagen comenzar a visualizarse desde la derecha, por lo que lo que sobre, quedar cortado por la izquierda. Pero ahora nos encontramos con el inconveniente de que la capa tratar de ocupar todo el ancho disponible. Para que esto no suceda y se limite a cubrir el espacio ocupado por el texto, agregamos el valor table a la propiedad display. Esto quiere decir que esta capa se comportar como una tabla, las que en caso de no estar determinadas sus dimensiones, solo ocupan el espacio determinado por el contenido. El borde izquierdo y el contenido est determinado por la etiqueta <h2>. Adems de disponer la forma en que se visualizar el texto (fuente, color, etc.), se le agrega como fondo la imagen que da el borde izquierdo. Al contrario de la imagen de fondo de la capa, esta imagen debe posicionarse a la izquierda y sin mrgenes. Al estar superpuesta a la imagen de fondo de la capa, da el efecto de que se trata del principio de una misma

imagen. La parte que ofrece mayores dificultades, es combinar la altura con el relleno superior (padding-top). Se debe tener en cuenta que el tamao final de un objeto es la suma de las dimensiones otorgadas al mismo ms el relleno y los bordes. Por ello, para que el texto se vea en la mitad del fondo, se adopt un relleno superior de 18 pixeles, lo que fue necesario descontar de la altura (45px + 18px = 63px). Para que el texto no comience encima del doblez que muestra la imagen, fue necesario establecer un relleno a la izquierda de 50 pixeles, que para que el texto se muestre centrado, fue necesario compensar con un relleno igual a la derecha.

Men con tems de fondo elstico

El ejemplo anterior, puede trasladarse a cualquier elemento, incluyendo los tems de men. Pero para desarrollar el ejemplo que seguiremos ahora, hemos optado por hacerlo de otra forma, que tambin puede aplicarse al ejemplo anterior sin mayores dificultades, y que consiste en realizarlo al revs. Si se sigue el ejemplo anterior, es necesario agregar el siguiente cdigo al archivo HTML:

<div id="menu"> <ul> <li><a href="#">tem 1</a></li> <li><a href="#">Otro tem ms</a></li> <li><a href="#">tem de men</a></li> <li><a href="#">Corto</a></li> <li><a href="#">tem ms largo an</a></li> </ul> </div>
Y las siguientes lneas en el archivo CSS:

#menu ul { list-style: none;

#menu ul li { float: left; background: url(../imagenes/[Link]) no-repeat left; margin-left: 10px; }

#menu ul li a { text-decoration: none; color: white; font: bold 12px arial, helvetica, sans-serif; background: url(../imagenes/[Link]) no-repeat right; margin-left: 20px; padding: 0 30px 0 10px; line-height: 32px; display: block; }

#menu ul li a:hover {

color: black; text-decoration: underline; }

Como puede verse, se trata simplemente de una lista, a la cual se le han quitado los marcadores de los tems (list-style: none), aunque esto no es imprescindible y solo se trata de algo esttico. Luego se hace que los tems de men sean flotantes y se le asigna un fondo, el que se trata de una imagen larga que se posiciona a la izquierda, de forma que el borde redondeado izquierdo es proporcionado por la misma. Luego se hace que el tem que contiene un enlace (#menu ul li a) tambin presente una imagen de fondo, la que en este caso se muestra a la derecha y solo contiene el borde derecho de la imagen final. A diferencia del ejemplo anterior, es necesario otorgar un margen izquierdo igual al ancho de la imagen de fondo del lado izquierdo, para que la imagen ms larga no se monte encima de la corta. Para determinar la altura del tem, se emplea la propiedad line-height en lugar de dar un valor de la altura.

Conclusin
Para conseguir algunos efectos, es posible emplear varios mtodos diferentes, todos vlidos y que dan el mismo resultado. En CSS no existen lmites para el desarrollo, por lo que el nico lmite con que se cuenta, es el de la propia imaginacin.

Simular frames (marcos) con HTML y CSS

Resumen: Efecto muy sencillo donde se simula la utilizacin de marcos, y que solo se realiza con HTML y CSS.
A pesar de ser un recurso muy interesante desde el punto de vista de las posibilidades que genera, tanto para los webmasters como para los usuarios, el uso de frames o marcos ha sido cuestionado debido a que supone dificultades para el posicionamiento en buscadores de la pgina que los utiliza. Sin embargo, en el caso de que se desee utilizar algo similar para brindar a los usuarios la posibilidad de cambiar los contenidos que se muestran en la pgina mediante el uso de

un men(sin que esto implique navegar a otra pgina) puede utilizarse un recurso CSS que mostraremos a continuacin y simular la utilizacin de marcos. Este recurso ya lo hemos utilizado en la creacin de una galera de imgenes solo con HTML y CSS, y tambin guarda similitudes con la creacin de mens desplegables utilizando estos lenguajes.

Principios de funcionamiento
El secreto de este recurso consiste en que ambos contenidos se encuentran presentes en doscapas superpuestas. El efecto se consigue con la utilizacin de capas con posicionamiento absoluto, con ancho y alto fijos, y cuyos contenidos que desborden no sean visibles utilizando el valor hidden de la propiedad overflow. Se utilizan enlaces para que llamen al contenido deseado, el que en forma automtica se mostrar por encima del otro contenido.

Desarrollo
El archivo HTML
Trabajaremos con dos archivos, el HTML y un archivo CSS. Para el ejemplo, hemos elegido crear una pgina en XHMTL 1.1. Colocaremos en el encabezado del documento el ttulo del mismo y el enlace para la hoja de estilo. Luego de colocar el ttulo mediante el uso de etiquetas h1, ubicaremos las dos capas principales, que tendrn posicionamiento absoluto. La primera, que tendr el identificador columna, que contendr la lista que hace las veces de men. La segunda, llamada contenido, que ser la que tendr en su interior las dos capas con los contenidos que se alternarn, que tendrn los identificadores marco1 y marco2. Dentro de stos ltimos, colocaremos contenidos de ejemplo, para mostrar el efecto en toda su magnitud. En los tems del men que se colocar en la columna izquierda, se colocarn enlaces a las capas marco1 y marco2, que son enlaces internos. Cuando se coloca un enlace interno, nos lleva a una parte de la pgina donde hemos colocado un ancla. En este caso, se utilizan los propios identificadores CSS como destino de los enlaces, solo que en lugar de navegar a otra parte de la pgina, se nos mostrar una capa que se encuentra oculta por otra:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[Link]

<html xmlns="[Link] xml:lang="es">

<head> <title>Ejemplo</title> <link rel="stylesheet" type="text/css" href="[Link]" /> </head> <body> <h1>Ejemplo de simulacin de marcos o frames</h1>

<div id="columna"> <h2>Men</h2> <ul> <li><a href="#marco1">Marco 1</a></li> <li><a href="#marco2">Marco 2</a></li> </ul> </div>

<div id="contenido"> <div id="marco1"> <h2>Contenido 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper sem quis felis pulvinar laoreet. Donec euismod erat semper diam sodales non vehicula mauris elementum. Aliquam commodo sollicitudin nisl, eget consequat turpis tempor vitae. Suspendisse rhoncus erat nec tellus vulputate ac egestas nulla tristique. Mauris nisl enim, fringilla non dapibus ac, tincidunt ullamcorper ligula. Etiam ut tellus eros. Donec congue dignissim feugiat. Aenean pellentesque convallis leo ut facilisis. Vestibulum ac turpis quis felis vestibulum vulputate a ac eros. Aenean ultricies sapien quis sapien congue nec rhoncus ligula consectetur. Nam dolor orci, feugiat vel vestibulum sit amet, pellentesque quis sem. Proin tempus mauris quis lacus tempus fringilla. Cras ut justo nec nunc porta hendrerit.</p> <p>Nulla turpis nunc, posuere at varius a, fermentum non orci. Aenean condimentum erat vel justo luctus consequat. Donec vehicula erat in risus pretium faucibus. Curabitur tempus vehicula libero non commodo. Nullam eu mauris a nulla molestie sodales eu vitae ligula. Nulla elementum sem quis dolor tincidunt nec pellentesque mauris ultrices. Maecenas imperdiet, erat ac porta rutrum, metus elit lacinia lectus, sit amet pulvinar risus metus quis tortor. Morbi sed nisi turpis, sit amet convallis nulla. Fusce quis ullamcorper mauris. Integer commodo semper posuere. Fusce elementum nisl ac augue consequat nec pulvinar dolor laoreet. Mauris nulla tortor, mollis quis imperdiet vel, rhoncus quis erat. Aliquam lectus metus, consectetur vitae feugiat vel, tincidunt nec velit. </p> </div>

<div id="marco2">

<h2>Contenido 2</h2> <p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac vulputate ac, dictum non arcu. Phasellus suscipit bibendum massa vel iaculis. Nullam bibendum viverra orci id aliquet. Duis consequat neque id lectus aliquet sed feugiat nisl adipiscing. Nunc suscipit est nec purus faucibus ultrices. </p> <p>Mauris at velit nulla, id bibendum neque. Nullam et augue id elit convallis fringilla vel non urna. Nulla lectus ante, fermentum nec dapibus vitae, tincidunt vel lectus. Pellentesque luctus quam a mi mollis gravida. Curabitur est lorem, aliquam sed varius nec, adipiscing vel sapien. Donec at tortor tellus. Suspendisse vitae neque vitae odio mollis ultricies ac sed mi. Aenean et nisl non mauris molestie tempor et sed eros. Maecenas scelerisque placerat eros et bibendum. Mauris venenatis, enim sodales elementum consectetur, tellus nisi euismod sem, dapibus pulvinar lectus lorem nec enim. Quisque auctor fermentum scelerisque. Etiam sed nulla quis eros pellentesque convallis sit amet eu neque. Aenean mattis placerat vehicula. Cras eget lacus odio. Cras commodo fringilla pharetra. In eget lacus metus, dignissim rutrum diam. Fusce sed magna ut nulla cursus feugiat. Fusce fringilla quam id quam auctor feugiat. Nulla tincidunt venenatis diam, in varius libero imperdiet vitae. </p> </div> </div>

</body> </html>

El archivo CSS
Lo ms interesante de este ejemplo se encuentra en las propiedades CSS y en la utilizacin de los enlaces para llamar a las capas. En primer lugar, se colocarn todas las propiedades necesarios para dar un determinado formato a los distintos elementos que componen la pgina, como prrafos, ttulos, listas, etc. Luego detallaremos las propiedades de la capa que contendr la lista y que servir como una especie barra lateral (sidebar), cuyas propiedades no detallaremos porque no tienen inters para el ejemplo. La capa contenido, tambin tiene posicin absoluta y se ha determinado que el contenido que la desborde no sea visible, ya que de otro modo, cuando una de las capas tiene contenido excesivo, este desbordar hacia abajo, an cuando la capa visible sea la otra. Finalmente, se han dado las dimensiones para las capas marco1 y marco2, que simplemente sern de 100% tanto para el ancho como para la altura, ocupando la totalidad de la capa que los contiene. Gracias a ello, cuando una de las dos capas es llamada por el enlace correspondiente, sta cubre totalmente a la otra capa.

html

font: normal 13px arial,helvetica,sans-serif; }

h1

text-align: center; color: #987; }

h2

text-align: center; color: #777; }

ul { list-style: circle; color: #888; }

ul li a { color: #888; text-decoration: none; font-weight: bold; }

ul li a:hover { color: #f00; }

p { color: #456; }

/* Capas del ejemplo

*/

div#columna { border: solid 1px #ccc; position: absolute; left: 30px; top: 80px; width: 150px; height: 350px; }

div#contenido { border: solid 1px #ccc; position: absolute; overflow: hidden; left: 200px; top: 80px;

width: 580px; height: 350px; padding: 0 20px; }

div#marco1, div#marco2 { height: 100%; width: 100%; }

Conclusin
Este es otro ejemplo de como, con elementos muy simples de HTML y CSS, se pueden conseguir efectos que suplanten a elementos ms complejos y que pueden darnos dificultades en elposicionamiento o en la accesibilidad de la pgina.

Cambiar el estilo CSS de una web dinmicamente. Parte III Las horas del da
Resumen: En esta tercera parte vamos a empezar a ver como cambiar el estilo CSS de una web dinmicamente en funcin de las horas del da.
El dinamismo adoptado en nuestro sitio, puede llevarse a un mayor grado de personalizacin y autenticidad con la adopcin de rutinas de desarrollo ms complejas, elaboradas especialmente para modificar el diseo de una pgina dinmicamente en base a factores que detonen los distintos estilos. Podemos innovar y buscar formas nicas de mezclar nuestros CSS con funciones de JavaScript o algn lenguaje del lado servidor, para poder ofrecerle a nuestro usuario una

experiencia distinta a la que ofrecen el resto de los sitios, creando ambientes ms ad hoc a lo que al visitante le gusta. Es muy poco comn que se juegue con factores cruzados en CSS, muchas veces utilizamos funciones que van de JavaScript a PHP y viceversa, utilizamos JSON y XML para enviar y recibir datos, AJAX para respuestas instantneas, pero en muy pocas ocasiones aprovechamos el dinamismo para aplicarlo a los estilos. Podemos empezar a buscar implementar diseos basados en los resultados obtenidos por funciones de JavaScript, con ejemplos sencillos como mostrar un estilo en base a la parte del da en que nos visita el usuario. El hecho de cambiar la apariencia de nuestro sitio web en base a la hora o perodo del da en que nos visitan, aade especializacin en nuestros diseos, puede mejorar la experiencia del visitante y por su puesto divertir o entretener, dependiendo del tipo o sector de visitantes que tenemos comnmente. Existen dos maneras esenciales para realizar esta tarea, la primera y ms sencilla de ellas esutilizar JavaScript, gracias a sus funciones podemos desplegar los estilos en base a la hora que tiene el usuario en su computadora, puesto que es un lenguaje del lado cliente, donde no hay necesidad de descargar ni instalar algo para desarrollar la aplicacin. La otra parte, es realizarlo mediante algn lenguaje de lado del servidor, como es el caso comn de PHP, [Link] o JSP, que a diferencia de JavaScript nos desplegar el estilo en base a la hora del servidor donde se encuentre nuestra aplicacin, es por ello que para poder utilizar esta opcin tenemos que tener instalado y funcionado una infraestructura que acte como servidor Web en una computadora. Ambas maneras se pueden utilizar, todo depende de que enfoque queramos darle a lo que vamos a desarrollar, puesto que esencialmente hacen lo mismo y al final obtendremos un resultado bastante similar, pero tambin depender de que tan relacionados estemos con uno u otro lenguaje. Una vez definido si vamos a cambiar estilos CSS dinmicamente desde el lado del cliente o del servidor, debemos empezar a pensar en el aspecto del diseo, lo fundamental es definir cuantos layouts queremos mostrar a los largo del da, dato necesario para establecer el intervalo de tiempo que durar cada estilo. Se puede presentar la necesidad de mostrar nicamente dos estilos diferentes, uno para el da y otro para la noche, o se puede optar por tener estilos ms concretos los cuales pueden irse rotando cada cierto nmero de horas, todo depender de la especificidad que queramos imprimir en la experiencia del usuario al navegar por el sitio. Como base del ejercicio podemos desarrollar un estilo distinto para las tres etapas ms relevantes del da, la maana, tarde y la noche, los cuales cambiarn el aspecto del sitio cada ocho horas, calculo basado en las 24 horas que tiene el da, divididas entre las 3 etapas que lo conforman nos da como resultado 8 horas por cada estilo, aunque esto es

en gran parte relativo y si agregamos otros estilos para etapas como el amanecer y el ocaso podemos asignar menos tiempo a estas, todo depende de perspectivas. Fundamentndonos en el nmero establecido de estilos que deseamos, empezaremos a disear patrones y combinaciones de colores relacionados a cada etapa del da, tomando lo relevante de cada una de ellas y distinguiendo lo que observamos en el ambiente en las horas que conforman la etapa. Debemos trabajar sobre una estructura base, la cual muestre de manera correcta los colores establecidos. Es recomendable, en un principio, desarrollar un template sencillo para ir identificando de que manera se acoplaran los colores y adaptarlos a nuestros gustos, para ello es aconsejable usar una estructura web que contenga los divs ms comunes en un sitio, una cabecera, un men, un contenedor, un div para contenido escrito, alguna barra lateral y un pie de pgina. Partiendo de esto, nuestro cdigo HTML lucira de la siguiente manera:

<html> <head> <meta charset="utf-8"> </head> <body> <div id ="principal"> <div id="contenedor"> <div id="cabecera"> <h1 id="titulo">Estilos de Prueba</h1> <div id="descripcion">CSS basado en las etapas del da.</div> </div> <div id="navegacion">

</div> <div id="contenido"> <div> <h3>Artculo de Prueba</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum augue, dictum luctus blandit vestibulum, sagittis eu tortor. Pellentesque ut enim quis est semper pretium at rhoncus leo. Integer vitae nibh sed turpis varius porta a et ipsum.</p> <p></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum augue, dictum luctus blandit vestibulum, sagittis eu tortor. Pellentesque ut enim quis est semper pretium at rhoncus leo. Integer vitae nibh sed turpis varius porta a et ipsum. Curabitur venenatis odio vitae augue dapibus mattis at id leo. Ut enim enim, tincidunt sit amet congue non, molestie sed orci. Nunc adipiscing, est nec iaculis laoreet, lectus ipsum tincidunt elit, mattis facilisis urna quam vitae elit. Nullam eu elit a purus gravida mattis. Vivamus pharetra eleifend nunc nec malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Pellentesque consequat, lacus pretium dapibus eleifend, nulla ante vulputate augue, id elementum nunc odio ut ante. Morbi purus dolor, lobortis ut eleifend ut, fringilla vel quam. Proin quis arcu eu est tristique adipiscing. Mauris ligula mi, egestas sed commodo eget, vulputate quis justo. Curabitur dictum porta risus in facilisis. Vivamus quis malesuada ipsum. Sed varius faucibus tincidunt. Quisque luctus erat a dolor molestie consequat. </p>

</div> </div> <div> <ul> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> </ul>

</div> <div> <ul>

<li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> <li>Lorem ipsum</li> <li>Dolor sit amet</li> <li>Consectetur adipiscing</li> </ul>

</div>

<div style="display: block;" id="pie"> </div> </div> </div> </body> </html>

El entorno se ira creando agregando los colores que escogimos a dicha estructura, en el ejemplo que estamos desarrollando para este artculo, se escogieron colores amarillo claro para la maana, naranja-marrn para la tarde y negro-gris para la noche. Contina

CSS avanzado: la propiedad content

Resumen: Una de las propiedades menos conocidas de CSS 2.1, pero que tiene un potencial enorme. En un futuro no muy lejano, cuando la mayora de los navegadores respeten los estndares, su uso seguramente se incrementar.
La razn fundamental para que muchos diseadores de pginas web optaran por no utilizar algunas propiedades CSS avanzadas es que no eran soportadas por algunos navegadores, como por ejemplo las versiones 6 y 7 de Internet Explorer. Utilizar algunas de estas tiles propiedades, podra significar que buena parte del trabajo de diseo no fuera visible con estos navegadores, lo que implica que buena parte del pblico no pudiera ver los mismos resultados que cualquiera de los usuarios que utilizan navegadores que respetan los estndares de la W3C, como Opera, Safari y Mozilla Firefox. Sin embargo, con la aparicin de Internet Explorer 8 que soporta estas propiedades CSS, y suponiendo que buena parte del pblico que utiliza versiones anteriores de Internet Explorer terminar con el tiempo actualizando su navegador, es de esperarse que los diseadores tengan la posibilidad de utilizar este tipo de recursos con total libertad.

La propiedad content
Esta propiedad tiene la capacidad de generar contenido en forma dinmica, y solo puede ser aplicada a los pseudo-elementos :before y :after y suele utilizarse en combinacin con las propiedades counter-reset y counter-increment, como veremos ms adelante. Los valores que se utilizan son tan variados como posibilidades de elementos a introducir existen: cadenas de texto, URLs, apertura y cierre de comillas, contadores, etc. Su valor inicial es normal, que en la prctica (si bien desde el punto de vista lgico tienen un valor diferente) cumple la misma funcin que el valor none, ya que ambos evitan que el pseudo-elemento que se aplica no se genere. Dado que el valor generado forma parte del elemento, hereda todas las propiedades CSS. Otros valores que pueden utilizarse, son open-quote, close-quote, no-open-quote y noclose-quote, que siempre deben estar acompaados de la propiedad quotes en cuyo valor se debe introducir el tipo de comillas que se utilizar. El valor ms avanzado que

puede utilizarse, es el que permite mostrar el valor de una propiedad utilizada en el elemento sobre el que se utiliza esta propiedad, mediante la utilizacin del valor attr(). Debemos sealar que el empleo de esta propiedad es controvertida por parte de muchos desarrolladores, ya que stos consideran que la generacin de contenidos dinmicos no forma parte de las atribuciones de CSS, cuyo cometido es controlar el aspecto y la presentacin de los contenidos. Sin embargo, el hecho de que forme parte del estndar, significa que puede utilizrsele libremente y que genera un cdigo vlido como cualquier otra propiedad CSS.

Sintaxis y ejemplos
Si bien la sintaxis es similar a la que se utiliza en el resto de las propiedades CSS, algunas de las caractersticas propias de esta propiedad hacen que pueda tornarse un poco ms compleja. Dado que se aplica solo a los pseudo-elementos :before y :after, se debe tener especial cuidado de colocarlos junto a la etiqueta correspondiente. Tngase en cuenta que en el caso de que se quiera introducir una cadena de texto como valor, el texto debe ser colocado entre comillas dobles. Veamos un ejemplo: ?

1 2 3

p:before

content: "Hola a todos: " }

En el ejemplo, se ha introducido como valor una cadena de texto, que aparecer antes de cualquier texto que se introduzca en los prrafos de la pgina. Si se quiere evitar que este texto aparezca solo en algunos prrafos, bastar con marcar con un identificador o una clase al o a los prrafos que se desee, como puede verse en el ejemplo siguiente: ?

1 2 3
?

[Link]:before { content: "Hola a casi todos: " }

<p class="hola">Estamos bien</p>

En el ejemplo que damos, todos los prrafos marcados con la clase hola se iniciarn con la cadena de texto que se incluye. Las complicaciones pueden comenzar cuando se necesite utilizar algunos smbolos propios de la sintaxis CSS en el texto a incluir, como pueden ser las comillas o cualquier otro smbolo utilizado en la sintaxis, lo que producir un conflicto con las comillas que deben incluirse en la cadena de texto para que los

navegadores la identifiquen como tales, en cuyo caso se deber optar por insertar comillas simples () o colocar una barra invertida () delante de cada una de las comillas: ?

1 2 3 4 5 6 7

[Link]:before { content: "Contenido 'CSS' " }

[Link]:before

content: "Contenido "CSS" " }

Las cadenas de texto utilizadas como valor de esta propiedad, solo se toman como texto plano, por lo que en caso de utilizarse etiquetas HTML, stas se mostrarn como parte del texto y no generarn ningn otro efecto. Como se dijo anteriormente, tambin puede utilizarse para abrir y cerrar comillas utilizando los valores open-quote y close-quote, y deben estar acompaados de la propiedad quotes que llevar como valores las comillas que se utilizarn para la apertura y cierre. En caso de que las comillas que se utilicen sean del mismo tipo () que las que se emplean para encerrar el valor, se deben utilizar el smbolo () de escape para que no se genere conflicto. ?

1 2 3 4

blockquote { quotes: "" " " ""; }

blockquote:before {

5
content: open-quote;

6 7 8 9 10
}

blockquote:after { content: close-quote;

11
?

<blockquote>Nota especial</blockquote>

Tambin pueden utilizarse los valores no-open-quote y no-close-quote, que sirven para evitar que aparezcan las comillas de apertura y cierre, pero manteniendo la jerarqua en el anidamiento de las comillas. El valor attr() introduce antes o despus (segn se utilice :after o :before) el valor del atributo que se coloque entre los parntesis. Estos atributos son, por ejemplo, title, href, etc. En caso de que este atributo no se encuentre presente en el elemento, se generar una cadena de texto vaca. Veamos un ejemplo de la utilizacin llamando al atributo title: ?

1 2 3 4 5 6 7
?

p:before

content: " (" attr(title) ")" }

a:after { content: " (" attr(href) ")"; }

1 2

<p title="titulo">Ttulo</p> <a href="[Link] es nuestra URL:</a>

En el ejemplo que vemos anteriormente, como se han colocado parntesis para que sean introducidos como parte de la cadena de texto, en caso de que algn prrafo no tenga el atributo title determinado, aparecern los parntesis solos, ya que el atributo title genera una cadena de texto vaca. Otra forma de utilizar el valor attr(), es para el atributo href, con lo que podremos colocar laURL especificada en un elemento como un texto, como tambin podemos ver en el cdigo de ejemplo anterior.

Utilizacin con otras propiedades

Una de las utilizaciones ms interesantes de esta propiedad, es la que se realiza en conjunto con las propiedades counter-reset y counter-increment, que se utilizan para generar contadores para diversas utilidades. Dado que es necesario conocer en profundidad ambas propiedades, la utilizacin de la propiedad content en la elaboracin de contadores dinmicos se describir en el artculo correspondiente a estas dos propiedades.

CSS avanzado: las propiedades counterreset y counter-increment

Resumen: Estas propiedades son de las de mayor complejidad en CSS, pero que pueden resultar muy tiles para algunos tipos de trabajos, sobre todo en maquetacin de textos.
La propiedad counter-reset que fue introducida en el estndar CSS 2.1, si bien puede decirse que tiene un principio de funcionamiento sencillo, dado que se trata de una herramienta de gran flexibilidad y que puede utilizarse en combinacin con varias propiedades CSS, su funcionamiento puede resultar un poco complejo y es esta la razn por la cual hemos considerado que se deba incluir bajo el ttulo de CSS avanzado. En forma sencilla, podra decirse que indica el nombre de uno o varios contadores y el valor en el que se inicia cada uno de ellos. Se le utiliza siempre en combinacin con la propiedad counter-increment, que es la propiedad que controla el incremento que se producir en el contador. Ambas propiedades son aplicables a todo tipo de elementos que pueden introducirse en undocumento HTML.

Sintaxis
En primer lugar, trataremos la sintaxis de cada una de las propiedades por separado, para luego ver algunos ejemplos de cmo utilizar ambas propiedades en conjunto. El tipo de sintaxis es similar en ambas propiedades; luego de la apertura de la llave, se introduce el o los nombres de los contadores cuyas propiedades se vayan a determinar, seguido de un nmero indicador del valor de inicio del contador o del incremento (siempre en nmeros enteros), segn sea la propiedad utilizada. ?

body {

2 3 4 5 6 7
} }

counter-reset: ejemplo 0;

p:before { content: counter(ejemplo); counter-increment: ejemplo 1;

8
El nombre es obligatorio, mientras que en caso de que el nmero no exista, los navegadorestoman el valor base. Este valor, en la propiedad counter-reset es cero, mientras que en la propiedad counter-increment es uno. Pero sin lugar a dudas, la mejor forma de conocer las caractersticas de estas propiedades, es conocer el funcionamiento, as que a continuacin veremos algunos ejemplos de su utilizacin, donde describiremos las diferentes formas de aplicarlas.

Ejemplos
?

1 2 3 4 5 6 7 8
?

body { counter-reset: ejemplo 0; }

p:before { content: "Prrafo " counter(ejemplo) ": "; counter-increment: ejemplo 1; }

1 2

<p>Prrafo de ejemplo.</p> <p>Segundo prrafo de ejemplo.</p>

En el ejemplo que hemos visto, en primer lugar hemos creado el contador en el propio elemento body, lo que quiere decir que cuando el navegador se encuentra con dicha etiqueta inicia el contador de nombre ejemplo y se inicia en 0 (lo que equivale a decir

que cuando aparezca un elemento marcado con una propiedad de contador que utilice ejemplo, tendr el valor 1); luego, el contador ejemplo podr utilizarse en cualquier elemento contenido dentro de las etiquetas body. A continuacin nos encontramos con que a los elementos <p> se les agrega el pseudoelemento :before y que se le agrega contenido dinmico con la propiedad content. Este contenido dinmico est formado por la palabra Prrafo (como se ve, la palabra es seguida de un espacio en blanco para que el mismo aparezca en el texto concatenado), el nmero generado por el contador y otro texto concatenado, que en este caso es el signo de puntuacin seguido de un espacio en blanco. El resultado es: Prrafo 1: Prrafo de ejemplo. Prrafo 2: Segundo prrafo de ejemplo. Ahora veremos la utilizacin de ms de un contador para un mismo elemento: ?

1 2 3 4 5 6 7 8

body { counter-reset: ejemplo 0 elemento 0; }

p:before { content: "Elemento " counter(elemento) ", " "Prrafo " counter(ejemplo) ": "; counter-increment: ejemplo 1 elemento 1; }

Como podemos ver, se pueden crear varios contadores para un mismo elemento y utilizarlos a la vez. El resultado del ejemplo anterior es el siguiente: Elemento 1, Prrafo 1: Prrafo de ejemplo. Elemento 2, Prrafo 2: Segundo prrafo de ejemplo. Esta propiedad tiene en cuenta el anidamiento de los diferentes elementos, como podremos ver en el siguiente ejemplo, en el cual anidamos listas ordenadas. Para una visualizacin de los ejemplos que draremos en adelante, es necesario que recreen los ejemplos brindados en pginas HTML de ejemplo y las visualicen en su navegador: ?

ol

2 3 4 5 6 7

counter-reset: lista; list-style: none; }

ol li:before { content: "Nmero " counter(lista) " "; counter-increment: lista 1;

8 9
?

1 2 3 4
<li>Elemento <ol> <li>Elemento</li> <li>Elemento</li>

5 6 7 8 9 10 11 12 13 14

<ol> <li>Elemento</li> <li>Elemento <ol> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li> </ol> </li> <li>Elemento</li> </ol>

15 16 17 18

</li> <li>Elemento</li> </ol>

En las listas (que pueden ser ordenadas o no ordenadas si se va a eliminar el estilo de las mismas) se ha colocado un texto generado en forma dinmica con un contador, que se reinicia en cada elemento anidado, ya que se considera un elemento diferente del padre. Aprovechando esta caracterstica, se pueden realizar algunas modificaciones para mostrar las listas en forma diferente, como en el ejemplo siguiente: ?

1 2 3 4 5 6 7 8 9
?

[Link]

counter-reset: otra; list-style: none; }

[Link] li:before { content: "Nmero " counters(otra, '.') " "; counter-increment: otra 1; }

1 2 3 4 5 6 7 8 9 10 11 12 13

<ol class="lista"> <li>Elemento</li> <li>Elemento</li> <li>Elemento <ol class="lista"> <li>Elemento</li> <li>Elemento <ol class="lista"> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li> </ol> </li> <li>Elemento</li>

14 15 16 17 18

</ol> </li> <li>Elemento</li> </ol>

En este ejemplo, vemos que en lugar de utilizar la funcin counter(), hemos utilizado la funcin counters(), que tiene la capacidad de iniciar ms de un contador concatenado siguiendo la anidacin de los elementos.

Otras caractersticas
Las propias caractersticas de los contadores, que generan una secuencia de nmeros, hace que cuando se encuentran bajo la influencia de ciertas propiedades, sus caractersticas puedan variar. Si se utiliza la propiedad display con el valor none, el elemento afectado no iniciar el contador (en caso de que se trate del elemento inicial) o no formar parte de los elementos contados. Es decir que, el elemento posterior tendr el nmero que en caso de no estar afectado por display: none; le correspondera a ste. ?

1 2 3 4 5 6 7 8 9 10 11 12 13

<ol class="lista"> <li>Elemento</li> <li style="visibility: hidden;">Elemento</li> <li>Elemento <ol class="lista"> <li>Elemento</li> <li>Elemento <ol class="lista"> <li style="display: none;">Elemento</li> <li>Elemento</li> <li>Elemento</li> </ol> </li> <li>Elemento</li>

14 15 16 17 18

</ol> </li> <li>Elemento</li> </ol>

Sin embargo, si un elemento que est siendo contado est afectado por la propiedad visibility con el valor hidden, el elemento seguir siendo contado, por lo que el elemento siguiente tendr el valor que le corresponde, ya que el elementos invisible no se ve, pero se encuentra formando parte del documento. En el prximo artculo, veremos algunos ejemplos ms de la utilizacin de estas propiedades, poco utilizadas debido a que Internet Explorer recin las ha incorporado en su ltima versin. De todas formas, son propiedades que otorgan elementos muy interesantes para los diseadores de pginas web.

Ejemplo de utilizacin de propiedades CSS avanzadas

Resumen: Allgunos ejemplos de utilizacin de las propiedades CSS avanzadas "content", "counter-reset" y "counter-increment".
Ya hemos visto una descripcin de las propiedades content, counter-reset y counterincrement, con algunos ejemplos elementales de la utilizacin de estas propiedades. Sin embargo, estos ejemplos bsicos solo nos muestra una parte de las posibilidades de estas poderosas herramientas CSS. Es por ello que en el presente artculo mostraremos algunos ejemplos ms avanzados de estas propiedades CSS.

Utilizacin de imgenes como contenido

Para incluir una imagen como contenido de la propiedad content, solo es necesario incluir una URL dirigida a una imagen para que ella se incluya antes o despus del contenido de la etiqueta HTML. En el ejemplo que hemos seleccionado, incluiremos una imagen en el inicio de los prrafos. Los cdigos empleados para este ejemplo son los siguientes: ?

1<p class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus nibh

2lacinia iaculis, consequat at ipsum. Maecenas aliquet dapibus felis eget faucibus. Pe

<p class="img">Donec fringilla elit dui. Cum sociis natoque penatibus et magnis dis p volutpat. Maecenas sed libero sed nulla mattis placerat quis ut tortor. Nam fringilla

1 2 3

[Link]:before { content: url(imagenes/[Link]) " "; }

Como puede verse, la propiedad content tiene como valor una URL que est dirigida a una imagen. Luego de la URL, se ha establecido un espacio en blanco (entre comillas), para que la imagen aparezca separada del contenido de la etiqueta <p>. Tengan en cuenta que, para diferenciar aquellos prrafos que se mostrarn con la propiedad content de los dems prrafos, es conveniente utilizar una clase. El resultado es el siguiente:

Divisin de textos en captulos

Una de las utilizaciones ms corrientes de las propiedades counter-reset y counterincrement, es la divisin de textos en captulos, secciones, etc., como mostraremos en el ejemplo que contina: ?

1 2 3 4 5

body

counter-reset: capitulo 0; }

h2 {

6 7 8 9 10 11

font: normal 16px tahoma, verdana, sans-serif; color: #f60; }

h2:before

content: "Captulo " counter(capitulo) " - "; counter-increment: capitulo 1;

12 13 14
?

color: #06f; }

<h2>Ttulo de seccin</h2>

1 2 3

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In purus nibh, elementu iaculis, consequat at ipsum. Maecenas aliquet dapibus felis eget faucibus. Pellentesq <h2>Segundo ttulo de seccin</h2> <p>Donec fringilla elit dui. Cum sociis natoque penatibus et magnis dis parturient molestie quis convallis nisl vehicula.</p>

4Maecenas sed libero sed nulla mattis placerat quis ut tortor. Nam fringilla nulla vol

En el ejemplo, vemos como ante cada ttulo <h2> se antepone un contenido que comienza con la palabra Captulo, seguida de un espacio en blanco, para finalizar con un nmero, que se presentar en forma incremental en cada uno de los ttulos. Para una mejor visualizacin del ejemplo, hemos dado un color diferente a los elementos incluidos en la propiedad content, de forma tal que se diferencie del resto del texto de la etiqueta HTML, aunque esto no es absolutamente necesario.

Creacin de un ndice de tres niveles

Una de las formas ms avanzadas de la utilizacin de estas propiedades, es la creacin de numeraciones con varios niveles. Para llevar adelante este tipo de numeraciones, es necesario que se utilice la funcin counters en lugar de la funcin counter en la propiedad content. La funcin counters puede incluir ms de un elemento, como puede verse en el cdigo del ejemplo, en el que luego del nombre del contador que se utilizar, aparece encerrado en comillas simples un punto, el que se utilizar como separador de los diferentes nmeros de los contadores. El cdigo de ejemplo es el siguiente: ?

1 2 3 4 5 6 7 8 9

<ol class="lista"> <li>Elemento de ndice</li> <li>Elemento de ndice</li> <li>Elemento de ndice</li> <ol class="lista"> <li>Elemento de ndice</li> <li>Elemento de ndice</li> <ol class="lista"> <li>Elemento de ndice</li> <li>Elemento de ndice</li>

10 11 12 13 14
</li>

<li>Elemento de ndice</li> </ol> </li> <li>Elemento de ndice</li> </ol>

15 16 17 18
?

<li>Elemento de ndice</li> </ol>

1 2

[Link]

counter-reset: lista 0; list-style: none;

3 4 5 6 7 8 9 10 11 12 13

clear: both; padding: 10px 30px; }

[Link] li { padding: 2px 10px; width: 200px; font: normal 12px tahoma, verdana, sans-serif; color: black; }

[Link] [Link] li {

14
color: blue;

15 16 17

[Link] [Link] [Link] li {

18 19 20 21 22 23

color: red; }

[Link] li:before { content: "Captulo " counters(lista, '.') " - "; counter-increment: lista 1; }

24 25 26
Para el ejemplo se han utilizado listas, pero pueden utilizarse otras etiquetas que puedan anidarse, como es el caso de los <div>, dentro de los cuales se deben utilizar prrafos para que lleven la numeracin generada por los contadores. El ejemplo que vemos en el cdigo, se ver de la siguiente forma:

Creacin de listas con numeracin corrida

El ejemplo que sigue a continuacin muestra como se pueden utilizar listas ordenadas para generar tres listas flotantes que tengan numeracin corrida, es decir, que el primer elemento de la segunda lista tendr el nmero siguiente al ltimo elemento de la primera lista. ?

1 2

<ol class="flotante1"> <li>Elemento</li>

3 4 5 6 7

<li>Elemento</li> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li> </ol> <ol class="flotante2">

8 9 10 11 12 13 14 15 16

<li>Elemento</li> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li> </ol> <ol class="flotante3"> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li> <li>Elemento</li>

17 18 19 20
?

<li>Elemento</li> </ol>

1 2 3 4

.flotante1, .flotante2, .flotante3 { float: left; width: 29%; padding: 1%; border: solid 1px #aaa;

5 6 7 8

margin-left: 1%; list-style: none; }

9 10 11 12 13 14

.flotante1 li, .flotante2 li, .flotante3 li background: #eee; border: solid 1px #fff; padding: 1px 10px; }

ol.flotante1 {

15
counter-reset: uno 0;

16 17 18 19 20 21 22 23 24 25 26 27

ol.flotante1 li:after

content: " " counter(uno); counter-increment: uno 1; }

ol.flotante2 li:after

content: " " counter(uno); counter-increment: uno 1; }

ol.flotante3 li:after

28 29 30 31 32 33

content: " " counter(uno); counter-increment: uno 1; }

En el cdigo vemos que se ha creado una clase diferente para cada una de las listas ordenadas, de forma tal de poder establecer la numeracin de inicio de cada uno de los contadores. El ejemplo que vemos en este caso, se ver de esta forma:

Conclusin
Por supuesto que estos son solo algunos ejemplos de las muchas posibilidades que ofrece la utilizacin de estas propiedades. En definitiva, adems de la aplicacin de los ejemplos concretos que se puedan encontrar, siempre la imaginacin propia es la mejor forma de encontrar todas las utilidades posibles para cualquier tipo de propiedad CSS, a lo que debemos agregar mucha prctica.

CSS avanzado: la propiedad display (primera parte)

Resumen: A pesar de ser una propiedad conocida, generalmente se encuentra subutilizada por parte de los diseadores, muchas veces debido al desconocimiento de todo su potencial.
Mientras muchos diseadores de pginas web siguen solicitando la implementacin de una mayor cantidad de propiedades de CSS 3, la mayora de ellos desconocen muchas de las utilidades que tienen algunas de las propiedades del actual CSS 2.1, y como consecuencia de ello las subutilizan. Algunas de ellas, como en el caso de la propiedad display que comenzamos a analizar con este artculo, son utilizadas con frecuencia, pero en modo muy simple y sin que se comprenda muy bien no solo el alcance de la propiedad en si misma, sino que adems se desconocen las posibilidades que ofrecen muchos de sus valores. La mayora de los diseadores apenas conocen el uso de tres o cuatro de estos valores.

Conceptos generales
Podra decirse que esta propiedad define el tipo de caja que genera un elemento. Todos los elementos generados en el HTML ocupan un espacio (aunque mediante el uso de la propiedad float puede hacerse que los elementos dejen de ocupar este espacio

aunque permanezcan visibles) y pueden comportarse de muchas formas. Este comportamiento de los elementos y la forma en que se comportan respecto de los elementos adyacentes, est regido por la propiedad display. Esta propiedad solo admite el uso de uno de los valores posibles. Estos valores son: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, tableheader-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none e inherit, siendo su valor inicial inline y es aplicable a todos los elementos, sin que estos hereden la propiedad.

Display: none
Es la forma ms simple que presenta esta propiedad, en la que se indica al elemento que no genere ninguna caja, con lo que el elemento simplemente desaparece. Como consecuencia de ello, el elemento deja de ocupar un espacio en la presentacin del documento, por lo que los elementos adyacentes simplemente ignoran su presencia y ocupan su espacio. Esto ltimo es lo que la diferencia del valor hidden de la propiedad visibility, con la que el elemento deja de ser visible, pero contina ocupando el espacio asignado, con el efecto consiguiente en los elementos adyacentes. Este valor se le utiliza generalmente en el desarrollo de elementos dinmicos con javascript, adems de poder utilizarse junto a pseudo-clases en el desarrollo de algunos efectos visuales que simulan efectos dinmicos exclusivamente desarrollados con HTML y CSS, como en el siguiente ejemplo: Men desplegable

Display: block

1 2
?

<p class="bloque">Elemento con comportamiento en bloque</p> <p class="bloque">Otro elemento que se comporta como bloque</p>

.bloque {

2 3 4 5

padding: 10px; background: #ccc; display: block; }

Cuando un elemento es marcado con este valor de la propiedad display, el mismo se comporta como bloque. Este comportamiento como bloque quiere decir que:

El elemento no permitir la ubicacin de elementos adyacentes. En caso de que sus dimensiones no sean determinadas, ocupar todo el ancho disponible dentro del elemento contenedor, y tendr una altura que ser determinada por el contenido. Cuando se determina el ancho, el elemento ocupar solo la extensin determinada, pero sin permitir la ubicacin de elementos adyacentes, an cuando haya espacio suficiente para que se ubique en l otro elemento.

Display: inline

1 2
?

<p class="linea">Elemento con comportamiento en lnea</p> <p class="linea">Otro elemento que se comporta en lnea</p>

1 2 3 4 5

.linea

padding: 10px; background: #ddd; display: inline; }

Los elementos cuya propiedad display tienen el valor inline se comportan como elementos en lnea, lo que quiere decir que:

Estos elementos permiten la ubicacin de elementos adyacentes. No puede determinarse el ancho ni la altura de estos elementos, ya que como elementos en lnea, las dimensiones de los mismos son determinadas por el contenido.

Display: inline-block

1 2
?

<p class="linblock">Elemento con comportamiento en lnea y en bloque</p> <p class="linblock">Otro elemento que se comporta en lnea y en bloque</p>

1 2 3 4 5 6

.linblock { padding: 10px; background: #f60; display: inline-block; width: 150px; }

Los elementos que tienen en su propiedad display este valor, tienen parte del comportamiento de los valores inline y block. Se comportan como si se tratara de elementos de bloque, pero que permiten la presencia de elementos adyacentes, lo que es propio de los elementos en lnea. Las caractersticas de estos elementos son:

Permiten elementos adyacentes, como si se tratara de elementos en lnea. Pueden determinarse sus dimensiones, como los elementos de bloque. Cuando no se determina su extensin, ocupan todo el espacio disponible, como sucede con los elementos de bloque. La posicin que ocupan estos elementos, es similar a los elementos en lnea, lo que quiere decir que la parte inferior del elemento se apoyar en la base de la lnea.

Display: list-item

1 2
?

<p class="lista">Elemento con comportamiento tem de lista</p> <p class="lista">Otro elemento que se comporta como tem de lista</p>

1 2 3 4

.lista

display: list-item; list-style-type: square; }

Este valor hace que el elemento se comporte como si se tratara de un tem de lista, es decir, como si se tratara de un elemento <li>. Su comportamiento es exactamente igual que si se tratara de un tem de lista, por lo que soporta las propiedades de este tipo de elementos, como list-style. Al igual que los tems de lista, su comportamiento respecto de los dems elementos es similar a los elementos de bloque, por lo que no permite la presencia de elementos adyacentes y pueden determinarse todas sus dimensiones.

Display: run-in

1 2
?

<p class="runin">Elemento con comportamiento tem de lista</p> <p class="bloque">Otro elemento que se comporta como tem de lista</p>

1 2 3 4

.runin

display: run-in; background: #6af; }

Este es uno de los valores que otorgan un comportamiento ms difcil de comprender, ya que el mismo es variable dependiendo de los elementos adyacentes. Tambin la implementacin de este valor de la propiedad display puede resultar complicada por el hecho de que no todos los navegadores la muestran en forma correcta (en la actualidad, solo muestran los elementos en forma correcta los navegadores Google Chrome, Opera e Internet Explorer 8. Mozilla Firefox, ni siquiera en su versin 4 que est en fase beta, lo muestra correctamente).

De todas formas, a pesar de que es muy probable que debido al inconveniente generado por las diferencias entre los navegadores este valor sea muy pocas veces utilizado, daremos a conocer como funciona, ya que se encuentra dentro del estndar de W3C y su implementacin debera ser posible en cualquier navegador. Cuando un elemento cuya propiedad display tiene el valor run-in tiene a continuacin un elemento cuya propiedad display tiene como valor block, el elemento se comporta como si el valor fuera inline y se ubica dentro del elemento con display: block. En los navegadores que no soportan este valor, ambos elementos se muestran como elementos de bloque y separados. Para todos los dems casos, el elemento marcado con este valor se comporta como un elemento de bloque.

Otros valores
El resto de los valores de esta propiedad son aquellos que hacen que los elementos se comporten como si se tratara de tablas o como partes de ellas, como tablas, filas, columnas y celdas, o como grupos de ellas. Dado que se trata de una cantidad importante de valores, explicaremos el comportamiento de los elementos marcados con ellos en el prximo artculo.

CSS avanzado: la propiedad display (segunda parte)

Resumen: La propiedad "display" puede utilizarse para mostrar los elementos como si se trataran de tablas o como partes de tablas.
Dentro de los valores que tiene la propiedad display, los que estn relacionados con las tablasson aquellos en los que mayores diferencias hay entre los navegadores, y en muchos casos ni siquiera estn soportados. Si bien es cierto que la maquetacin con tablas es incorrecta, tanto desde el punto de vista semntico como desde el punto de vista prctico, hay que reconocer que las tablas presentan algunas ventajas en lo que refiere a la sencillez con que se pueden posicionar los elementos en algunos casos. Para aquellos casos en los que el uso de las tablas puede resultar una ventaja, CSS presenta estos valores de la propiedad display, que hace que los elementos se comporten como tablas o partes de tablas. Es importante decir que cuando decimos se comporten como tablas o partes de tablas, es solo referido al posicionamiento. En el ejemplo siguiente, vemos que mientras las celdas de las tablas (en la parte superior de la imagen), el espacio natural que existe entre lasceldas de una

tabla, no aparece en el caso de los elementos marcados con el valor table-cell de la propiedad display (en la parte inferior de la imagen). Para lograr que se vean del mismo modo, hay que utilizar la propiedad border-spacing.

Nota importante: Todas estas propiedades tienen una reciente aplicacin en los [Link] Firefox comenz a soportarlo recin con la aparicin de la versin 3, mientras que enInternet Explorer no se haba implementado hasta la aparicin de Internet Explorer 8. Esto quiere decir que en el caso de utilizar navegadores como Internet Explorer 6 y 7 o una versin antigua de los dems navegadores, estos elementos se comportarn tal como si no tuvieran la propiedad display determinada.

Usar tablas o los valores de tablas de display?

Los valores de tablas de la propiedad display son tiles para que los elementos se comporten como si se tratara de tablas. Sin embargo, en caso de tener que ingresar datos tabulados, lo correcto es utilizar tablas ya que HTML dispone de las mismas para ello.

Table, table-row y table-cell

En la imagen anterior, vemos la utilizacin de tres de los valores de la propiedad, table, table-row y table-cell. En este caso se encuentran aplicados a capas (div), que cumplen con los mismos propsitos que los elementos correspondientes de las tablas (tabla, fila y celda respectivamente). Es posible (salvo para Google Chrome) utilizar solo la propiedad table-cell cuando disponemos de los elementos en una sola fila. Para el caso de Google Chrome, es necesario que los elementos se encuentren dentro de una capa que tenga la propiedad display con el valor table-row, ya que de otra forma, los elementos se comportarn como si la propiedad no estuviera determinada.

Inline-table
Se trata de un valor bastante peculiar, ya que produce que el elemento se comporte como tabla, pero a diferencia de stas, se mantiene en lnea, es decir, sin salto de lnea anterior ni posterior. Es importante marcar que, mientras en casi todos los navegadores el

elemento marcado con inline-table se desarrolla desde la lnea hacia abajo, en Google Chrome los elementos se desarrollan hacia arriba de la lnea. Ejemplo:

Table-column
Los elementos contenidos dentro de ste elemento, se comportan como si se tratara de una columna, lo que en el correspondiente HTML sera <column>.

Otros valores
Dentro de la propiedad, hay valores que hacen que los elementos se comporten como si se trataran de grupos de partes de tablas, como grupos de filas y grupos de columnas. En cada uno de los casos, pueden ser grupos de una o ms filas o columnas respectivamente. De similares caractersticas son los elementos table-header-group (thead en HTML) y table-footer-group (tfoot en HTML), que determinan al grupo de filas del encabezado y pie de los elementos dispuestos en forma de tabla. Otro caso especial es el de tablecaption, que hace que el elemento se comporte como si se tratara de ttulos de la tabla.

Cdigo utilizado
Para que puedan llevar adelante las prcticas con los valores de la propiedad display, les dejamos el cdigo que hemos empleado que aparecen en las imgenes, de forma que puedan hacer todas las modificaciones que consideren necesarias para comprender el funcionamiento de los elementos que utilizan estos valores. ?

1 2 3 4

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[Link] <html xmlns="[Link] xml:lang="es">

5 6 7 8 9 10

<head> <title>Ejemplo</title> <link rel="stylesheet" type="text/css" href="[Link]" /> </head> <body>

<div id="contenedor">

11 12 13 14 15 16 17 18 19 20
<td>Elemento</td> <table> <tr> <td>Elemento en lnea</td> <td>Elemento</td> <td>Elemento</td> <td>Elemento</td> </tr> <tr> <td>Elemento</td>

21 22 23 24 25 26 27 28 29 30 31

<td>Elemento</td> <td>Elemento</td> </tr> </table>

<div class="tabla"> <div class="fila"> <div class="celda">Elemento largo</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div> </div>

32 33 34 35 36

<div class="fila"> <div class="celda">Elemento</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div> </div>

37 38 39 40 41 42 43 44 45 46 47

</div>

<br /> <br />

<div>Este es un ejemplo de <div class="tabla-linea"> <div class="fila"> <div class="celda">Elemento largo</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div>

48 49 50 51 52 53 54 55 56 57

</div> <div class="fila"> <div class="celda">Elemento</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div> </div> </div> "inline-table"</div>

<br />

58
<br />

59 60 61 62 63 64
<div class="celda">Elemento</div> <div class="tabla"> <div class="col"> <div class="fila"> <div class="celda">Elemento</div> <div class="celda">Elemento</div>

65 66 67 68 69 70 71 72 73

</div> </div> <div class="col"> <div class="fila"> <div class="celda">Elemento largo</div> <div class="celda">Elemento</div> <div class="celda">Elemento</div> </div> </div> </div>

74 75 76 77 78 79 80 81 82 83 84 85

</div>

</body> </html>

1 2 3 4 5

#contenedor { width: 700px; margin: auto; }

td, table

6
border: solid 1px #000;

7 8 9 10 11 12 13 14 15 16 17 18

table { text-align: center; margin-bottom: 20px; }

.celda

border: solid 1px #000; display: table-cell; }

.fila {

19
display: table-row;

20 21 22 23 24 25 26

.col

display: column; }

.tabla

27 28 29 30 31 32

display: table; border-spacing: 2px; text-align: center; border: solid 1px #000; }

.tabla-linea

33 34 35 36 37 38 39 40

display: inline-table; border-spacing: 2px; text-align: center; border: solid 1px #000; }

CSS avanzado: la propiedad whitespace

Resumen: Una propiedad poco utilizada, que permite al diseador manejar los espacios en blanco y los saltos de lnea de los textos incluidos en el cdigo HTML.
Esta tambin es una de las propiedades CSS que son poco utilizadas por los diseadores, sobre todo aquellos que recin comienzan, debido fundamentalmente al desconocimiento acerca de sus posibles aplicaciones. Esta propiedad se encuentra soportada por todos los navegadores, por lo que su aplicacin es factible en todos los casos. Se emplea para determinar la forma en que el navegador tomar los espacios en blanco y lossaltos de lnea. Para comprender mejor esto, debemos entender como los navegadores interpretan la presencia de los espacios en blanco y los saltos de lnea, cuando la propiedad white-space no se encuentra especificada o cuando se encuentra en normal, que es suvalor inicial.

A diferencia de lo que sucede con los diferentes editores de texto, cuando dentro de un cdigo HTML se encuentra un texto en el cual alguna o varias de las palabras se encuentran separadas por ms de un espacio en blanco consecutivos, el navegador simplifica y deja solo uno de los espacios en blanco, haciendo caso omiso de la presencia de los dems. En lo que respecta a los saltos de lnea, los navegadores emplean (al igual que en los editores de texto) todos los saltos de lnea necesarios para que el texto no salga de los lmites impuestos, pero no respeta los saltos de lnea propios del texto. En el ejemplo siguiente, veremos un prrafo en el que se han colocado deliberadamente una gran cantidad de espacios en blanco entre las palabras y saltos de lnea, y veremos como el navegador coloca tantos saltos de lnea como sea necesario para que el texto no se salga de los 600 pixeles que tiene cada prrafo de ancho. Junto al prrafo nombrado, hemos colocado otro con los espacios en blanco simples, para que se pueda comprobar que, a pesar de ser diferentes, el navegador los muestra de la misma forma: ?

1varius dui velit. Donec nec nunc ipsum, vitae pretium magna. Praesent non urna leo, n 2 3
<p>Lorem ipsum lorem tellus, dolor tempor vel sit amet, a, consectetur adipiscing inceptos himenaeos. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem tellus, tem

4
Donec ultrices volutpat ac justo.

5 6

Aenean a orci ac justo gravida

porta. Vivamus varius

dui velit. Donec nec nu

Praesent non urna leo, non accumsan felis. Class

aptent taciti sociosqu ad lito

1 2 3 4 5 6 7

{ width: 600px; margin: 10px auto; padding: 5px; border: solid 2px #f60; font: normal 13px arial, helvetica, sans-serif; }

Los valores de la propiedad

A esta propiedad se le pueden asignar cinco valores propios, adems del valor inherit (heredado), que son:

normal: Por ser el valor inicial de la propiedad, se aplica a todos los elementos en los que no se determina la propiedad. Los espacios en blanco son simplificados, dejndose uno solo entre cada palabra, y se aplican todos los saltos de lnea necesarios (adems de los que sean determinados por la etiqueta <br> o <br />) para que el texto se mantenga dentro de los lmites impuestos por el tamao del selector. Sin embargo, los saltos de lnea naturales del texto no son respetados. Podemos ver el ejemplo anterior para ver como se comporta, mientras que en el ejemplo que sigue, veremos su comportamiento en el primer prrafo.

pre: Cuando se aplica este valor, el navegador respeta todos los espacios en blancoque encuentre. Los saltos de lnea que los navegadores colocan en forma automtica en otros casos, cuando se aplica este valor no se colocan, por lo que el contenido puede desbordar los lmites del elemento. Los saltos del lnea del texto original son respetados. En el ejemplo siguiente, veremos su aplicacin en el segundo prrafo.

nowrap: El tratamiento de los espacios en blanco es igual que cuando se aplica el modo normal, es decir, que se eliminan todos los espacios en blanco sobrantes. La diferencia con el modo normal es que no se aplican los saltos de lnea a menos que se encuentren incluidos en el texto origianal, por lo que el contenido puede desbordar los lmites del elemento. En el ejemplo que se da a continuacin, vemos su aplicacin en el tercer prrafo.

pre-wrap: La aplicacin de este valor de la propiedad hace que el navegador deje todos los espacios en blanco del contenido. A diferencia del valor pre, en este caso el navegador colocar los saltos de lnea necesarios para que el contenido no desborde el tamao del elemento en el que se aplica. Tambin son respetados los saltos de lnea originales. En el ejemplo que sigue, se aplica en el cuarto prrafo.

Pre-line: Cuando se aplica este valor, se deja un solo espacio en blanco, eliminndose el resto, mientras que se respetan los saltos de lnea originales y se ajusta el texto, agregando los saltos de lnea necesarios. En el quinto prrafo del ejemplo siguiente, vemos como es su aplicacin.

? 1

2 3 4 5 6

<p id="normal">Lorem Donec lorem tellus,

ipsum tempor vel

dolor ultrices

sit a,

amet,

consectetu

volutpat ac justo.

Aenean a orci ac justo gravida

porta. Vivamus varius

dui velit. Donec ne

Praesent non urna leo, non accumsan felis. Class

aptent taciti sociosqu ad

<p id="pre">Lorem

ipsum tempor vel

dolor ultrices

sit a,

amet,

consectetur

7 8 9 10 11 12 13 14 15 16 17 18

Donec

lorem

tellus,

volutpat ac justo.

Aenean a orci ac justo gravida

porta. Vivamus varius

dui velit. Donec ne

Praesent non urna leo, non accumsan felis. Class

aptent taciti sociosqu ad

<p id="nowrap">Lorem Donec lorem tellus,

ipsum tempor vel

dolor ultrices

sit a,

amet,

consectetu

volutpat ac justo.

Aenean a orci ac justo gravida

porta. Vivamus varius

dui velit. Donec ne

Praesent non urna leo, non accumsan felis. Class

aptent taciti sociosqu ad

<p id="prewrap">Lorem Donec lorem tellus,

ipsum tempor vel

dolor ultrices

sit a,

amet,

consectet

volutpat ac justo.

Aenean a orci ac justo gravida

porta. Vivamus varius

dui velit. Donec ne

Praesent non urna leo, non accumsan felis. Class

aptent taciti sociosqu ad

19 20 21 22 23 24
?
p { width: 600px; <p id="preline">Lorem Donec lorem tellus, ipsum tempor vel dolor ultrices sit a, amet,

consectet

volutpat ac justo.

Aenean a orci ac justo gravida

porta. Vivamus varius

dui velit. Donec ne

Praesent non urna leo, non accumsan felis. Class

aptent taciti sociosqu ad

2 3 4 5 6 7

margin: 10px auto; padding: 5px; border: solid 2px #f60; font: normal 13px arial, helvetica, sans-serif; }

p#normal {

8
white-space: normal;

9 10 11 12 13 14 15 16 17 18 19 20 21 22

p#pre { white-space: pre; }

p#nowrap { white-space: nowrap; }

p#prewrap

white-space: pre-wrap; }

p#preline

23
white-space: pre-line;

24 25 26 27

Algunos trucos CSS simples para la maquetacin de pginas web

Resumen: Ejemplos CSS sencillos para maquetacin de pginas web.
El lenguaje CSS permite maquetar las pginas web utilizando las capas para ello. Pero quienes se inician en este tema, suelen encontrar algunos problemas que les resulta imposible de resolver, mayormente por falta de conocimiento de las posibilidades en la aplicacin de algunas propiedades o valores de las mismas. Hemos visto en otros artculos, que los diseadores de pginas web, an algunos con cierta experiencia, que desconocen estos temas en profundidad, y terminan recurriendo a complicadas soluciones cuando podran optar por emplear algunas propiedades CSS cuyo uso no es extendido. En realidad se trata de pequeos problemas que tienen soluciones sencillas y que solo requiere el conocimiento completo de todas las posibilidades, adems de imaginacin para

su aplicacin. Es por ello que hoy traemos algunos trucos para ejemplificar la forma en que se deben solucionar los problemas de maquetacin. Si bien estos ejemplos pueden aplicarse libremente, la intencin de presentarlos es que sirvan de ejemplo para que estudien exhaustivamente todas las propiedades CSS y el alcance de sus valores, lo que har que el trabajo se simplifique enormemente.

Imagen flotante sin que el texto se ajuste

Cuando intentamos incorporar una imagen flotante junto a un prrafo, el texto del prrafo tiende a envolver a la imagen. Esto generalmente es el efecto deseado, para que no aparezcanespacios en blanco debajo de la imagen. Sin embargo, es posible que algn diseo requiera que la imagen mantenga una posicin (como si ocupara una columna) y que el texto no ocupe espacio debajo de ella. Esto es muy simple de hacer, y basta con la aplicacin de capas ymrgenes. En primer lugar, veremos como queda la maquetacin cuando colocamos una imagen flotante junto a un prrafo:

<div id="capa"> <img src="imagenes/[Link]" alt="agua" /> <p>El agua (del latn aqua) es una sustancia cuya molcula est formada por dos tomos de hidrgeno y uno de oxgeno (H2O). Es esencial para la supervivencia de todas las formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en su estado lquido, pero la misma puede hallarse en su forma slida llamada hielo, y en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza terrestre.[2] Se localiza principalmente en los ocanos donde se concentra el 96,5% del agua total, los glaciares y casquetes polares poseen el 1,74%, los depsitos

subterrneos (acuferos), los permafrost y los glaciares continentales suponen el 1,72% y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo, atmsfera, embalses, ros y seres vivos.[3] El agua es un elemento comn del sistema solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada, principalmente, en forma de hielo; de hecho, es el material base de los cometas y el vapor que compone sus colas.</p> </div> #capa { width: 610px; padding: 10px; margin: 10px; border: 1px solid #f60; background: #fed; }

#capa img { float: left; margin: 0 10px 10px 0;

A continuacin veremos el ejemplo. Se trata simplemente de crear dos capas. La primera, es una capa contenedora, a la que hemos dado algunos elementos de diseo (borde, fondo, etc.), a la que hemos dado el identificador principal. Dentro de esta capa, crearemos una segunda capa, a la que daremos el identificador flotante, cuya caracterstica principal es que tendr lapropiedad float y dentro de la cual incluiremos la imagen. Luego, dentro de la capa principal, incluiremos el prrafo. Los cdigos y el resultado son los siguientes:

<div id="principal"> <div id="flotante"> <img src="imagenes/[Link]" alt="agua" /> </div> <p>El agua (del latn aqua) es una sustancia cuya molcula est formada por dos tomos de hidrgeno y uno de oxgeno (H2O). Es esencial para la supervivencia de todas las formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en

su estado lquido, pero la misma puede hallarse en su forma slida llamada hielo, y en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza terrestre.[2] Se localiza principalmente en los ocanos donde se concentra el 96,5% del agua total, los glaciares y casquetes polares poseen el 1,74%, los depsitos subterrneos (acuferos), los permafrost y los glaciares continentales suponen el 1,72% y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo, atmsfera, embalses, ros y seres vivos.[3] El agua es un elemento comn del sistema solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada, principalmente, en forma de hielo; de hecho, es el material base de los cometas y el vapor que compone sus colas.</p> </div> #principal{ width: 610px; padding: 10px; margin: 10px; border: 1px solid #f60;

background: #fed; }

#principal #flotante{ float: left; width: 300px; }

#principal p{ margin-top: 0; margin-left: 310px; }

Lo que produce el efecto deseado es:

La capa flotante tiene la propiedad float a la izquierda. El prrafo (identificado como #principal p en el cdigo CSS) tiene un margen derecho tal que es igual al ancho de la capa principal menos el ancho de la capa flotante, lo que permite que sta se coloque a la derecha del prrafo. El margen otorgado al prrafo es lo que hace que el texto no contine hacia la derecha luego de que el espacio ocupado por la imagen finalice.

Esto puede hacerse tambin con la imagen flotante hacia la derecha. Para ello deberemos solo cambiar el float: de izquierda a derecha, al igual que el margen que se da al prrafo, con lo que el texto aparecer a la derecha y la imagen a la izquierda.

Esquina doblada en capa

El siguiente ejemplo, se trata simplemente de crear una capa que aparente una hoja cuya esquina inferior derecha est doblada. Para ello deberemos contar con la siguiente imagen, la que para utilizarla solo debern utilizar el botn derecho del ratn sobre ella y emplear la opcin Guardar como:

A continuacin mostraremos los cdigos que hemos utilizado en este ejemplo y la imagen resultante, para posteriormente explicar como lo hemos hecho:

<div id="oscuro"> <div id="esquina"> <p>El agua (del latn aqua) es una sustancia cuya molcula est formada por dos tomos de hidrgeno y uno de oxgeno (H2O). Es esencial para la supervivencia de todas las formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en su estado lquido, pero la misma puede hallarse en su forma slida llamada hielo, y en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza

terrestre.[2] Se localiza principalmente en los ocanos donde se concentra el 96,5% del agua total, los glaciares y casquetes polares poseen el 1,74%, los depsitos subterrneos (acuferos), los permafrost y los glaciares continentales suponen el 1,72% y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo, atmsfera, embalses, ros y seres vivos.[3] El agua es un elemento comn del sistema solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada, principalmente, en forma de hielo; de hecho, es el material base de los cometas y el vapor que compone sus colas.</p> </div> </div> #oscuro {

width: 420px; background: #444; padding: 60px; }

#esquina

background: #fff url(imagenes/[Link]) bottom right no-repeat; }

#esquina p

padding: 50px; margin: 0; }

La imagen de la esquina doblada tiene dos colores fundamentales: el gris oscuro del fondo, y el color blanco de la mayor parte del resto de la imagen, que coincide con los bordes de la misma (esto es importante para que no existan diferencias con el resto de la capa). El truco solo consiste en utilizar una propiedad de la que ha hemos hablado, que es el posicionamiento de las imgenes de fondo.

En primer lugar crearemos la capa contenedora, que ser de color gris oscuro para que coincida con el fondo de la imagen. Luego crearemos la capa donde se insertar el texto (o cualquier otro contenido), cuyo fondo tiene el siguiente cdigo CSS:

#esquina

background: #fff url(imagenes/[Link]) bottom right no-repeat; }

Se trata en realidad de varias propiedades que se encuentran simplificadas:

Background-color, que tiene el valor #fff y que es visible en todos los puntos de la capa que no se encuentran cubiertos por la imagen. Background-image, cuyo valor es la URL de la imagen de la esquina doblada. Background-position, que tiene los valores bottom y right, para que la imagen de fondo se ubique en la esquina inferior derecha de la capa. Background-repeat, que tiene el valor no-repeat, para que no ocupe el resto de la capa y sea visible una sola vez.

Adems, se debe hacer que el prrafo o cualquier otro contenido que se encuentre en la capa tenga un relleno tal que dicho contenido no se monte sobre la imagen utilizada en la esquina. Este efecto puede utilizarse (modificando la posicin de la imagen de fondo y utilizando una imagen apropiada) en cualquiera de las cuatro esquinas de la capa.

Propiedades bsicas para el manejo de CSS3: Textos (parte 1)

Resumen: Primera parte de una serie que expondr las propiedades ms utilizadas de CSS3, en esta parte nos enfocamos a la estilizacin de textos.
Como hemos planteado en temas anteriores, la incursin y manejo de CSS3 en nuestros proyectos se debe de empezar a convertir en un hbito de constante uso y su aprendizaje debe ser uno de nuestros objetivos ms inmediatos. Si bien estamos conscientes que an falta para su total estandarizacin, la tercera versin de este lenguaje de estilo nos ofrece una gran variedad de propiedades sencillas y poco robustas para la creacin y adaptacin de efectos a nuestros elementos, por lo que la balanza se inclina a favor de su uso.

Cuantiosas son las ventajas al manejarlo, con unas cuantas lneas podemos realizar sombreados o transparencias, incluso llegar a crear complejas animaciones apoyndonos con meta lenguajes como HTML5, y gracias a ello nuestros sitios se harn menos pesados y ms eficientes. El ahorro de tiempo en el desarrollo, el apresurar la edicin, as como la economizacin de espacio y tiempo de respuesta de nuestro servidor sin duda hacen de CSS3 una gran opcin. Es por ello que en este artculo traemos una serie de propiedades bsicas para empezar a estudiar este lenguaje, son sencillas pero muy potentes, nos permitirn darle a nuestro sitio un estilo nico y bien estructurado en cuestin de minutos, sin necesidad de programas de edicin ni hacks, solo cdigo plano y sencillo que ser correctamente visible en la mayora de los navegadores.

Navegadores y CSS3
Desafortunadamente CSS3 an no es compatible con todos los navegadores que existen en el mercado, an rondan versiones muy antiguas que se siguen utilizando por lo que algunos de estos navegadores ni siquiera son compatibles con frameworks de JavaScript o formatos como PNG, esta clase de navegadores por obvias razones se pueden considerar obsoletos, pero por cuestiones de uso siguen siendo tomados en cuenta, ya que muchos de los usuarios siguen utilizndolos y se niegan a cambiar. Fuera de los navegadores obsoletos, CSS3 funciona a la perfeccin en Firefox, Google Chrome, Opera y Safari, mientras que en Internet Explorer funciona a partir de su versin 9la cual se encuentra en perodo BETA en este momento. La clave para empezar a utilizar CSS3 est en determinar si estamos o no de acuerdo en que obtendremos una presentacin ligeramente diferente de un navegador a otro, es decir, puede que Internet Explorer 8 muestre esquinas de 90 grados en vez de mostrarlas radialmente o puede darse que un botn se mire con una forma diferente, si esto es de tu desagrado entonces puedes decidir no utilizar estas tcnicas, pero siempre hay que tener en mente el hecho de que no es necesario que un sitio Web siempre luzca idntico en todos los navegadores.

Propiedades de texto con CSS3

Unas de las propiedades ms populares en el uso de CSS3 son aquellas que se aplican a la edicin y estilizacin de textos, muchas de estas fueron incluidas desde la versin anterior de CSS pero por cuestiones de implementacin se decidieron postergar para adaptarlas mejor en esta entrega. CSS3 ha permitido ahorrarnos el hecho de editar una imagen exclusivamente para mostrar un texto, el hecho de tener que subir dicha ilustracin a nuestro servidor nicamente para que nuestro texto luciera de manera presentable nos poda poner los pelos de punta, ya que no slo era cuestin de subir 1 o 2, muchas veces se tena que subir bastantes

imgenes, las cules a su vez llevaban un tiempo invertido en su edicin y representaban mayor tiempo descarga para los usuarios. Entre las propiedades ms comunes podemos encontrar a text-shadow, text-stroke y text-overflow, las cuales son fciles de aplicar y aunque algunas son ms exclusivas que otras, pueden ser adaptadas a partir de diseos hechos previamente con algn editor de imgenes como Photoshop, en cuestin de minutos.

Text-shadow
El efecto text-shadow consiste en agregar una sombra a nuestro texto, la cual se encontrara difuminada en distintos grados que varian segn los valores proporcionados a travs de cuatro parmetros, los cuales son x-offset y y-offest que indican el desplazamiento horizontal y vertical de la sombra es decir a que distancia estar la sombra del texto, blur que indica el desenfoque y finalmente el cuarto parmetro es el color de la sombra, en caso de no proporcionar un color se tomar el color de texto como el valor default.

h2 { text-shadow: 0 5px 3px #CCC; color: #000; font-size: 40px; }

Tambin podemos agregar mltiples sombras mediante el uso de comas como separadores

h2 { text-shadow: 0 2px 0 #FFF, 0 1px 5px #CCC; color: #000; font-size: 40px; }

Text-stroke
Antes de empezar con la descripcin, hay que mencionar que este mtodo slo funciona para Web-kit por lo que hay que tener cuidado al momento de utilizarlo y estar consientes que slo lucir bien en Chrome y Safari. El objetivo de este efecto es mostrar nuestro texto como si se subrayara el contorno de las letras, creando un trazo que puede adaptarse al tamao y color deseado, es especialmente til si se desea utilizar letras y fondo del mismo color.

h2 { -webkit-text-stroke: 3px black; color: crimson; font-size: 70px; }

Text-overflow
Esta propiedad puede ser utilizada para cortar la extensin de un texto que exceda la medida del contenedor en el cual se encuentra, proveyendo de una muestra para que el usuario pueda interesarse en leer el texto completo. Se le pueden asignar dos valores los cuales son clip y ellipsis, la diferencia entre estos dos valores es que el clip no cortar palabras mientras que ellipsis muestra tres puntos que se despliegan al final del texto de muestra indicando que existe ms texto.

#texto { text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 200px; }

Conclusin
>>> Puedes ver aqu algunos ejemplos simples del funcionamiento del CSS3 explicado. Las tres propiedades analizadas en esta parte del artculo son consideradas como parte del grupo de las ms sencillas, por su fcil aplicacin y edicin, pero CSS3 no se ha limitado nicamente a esta clase de estilos, podemos indagar un poco ms y realizar efectos un poco ms elaborados y avanzados mediante herramientas como el set de animacin proporcionado por webkit a travs de su propiedad keyframes, que nos ofrece los efectos pulse y bounce para enriquecer el contenido. Como podemos observar con muy poco hemos logrado darle un gran estilo a nuestro sitio, con esta pequea serie de atributos y el ingenio se puede llegar a realizar bastantes proyectos de gran calidad, es cuestin de no limitarnos y saber aprovechar las bondades que nos ofrecen los lenguajes de la actualidad. CSS3 no es un obstculo, es un aliado, as que no veas como un inconveniente el hecho de que luzca distinto en los navegadores, pronto llegara su total estandarizacin y debemos estar ms que familiarizados con el lenguaje en el siguiente artculo de la serie explicaremos ms atributos relacionados a otros elementos de una pgina Web.

Propiedades bsicas para el manejo de CSS3: Capas (parte 2)

Resumen: Segunda parte de una serie que expondr las propiedades ms utilizadas de CSS3, en esta parte nos enfocamos a la estilizacin de capas (div).
Existe una serie de propiedades de estilo enfocados a la estilizacin de las capas en las que se divide nuestro sitio, dichas capas son comnmente denominadas Divs, por el nombre dado a su etiqueta, y bsicamente consisten en secciones que nos permiten mantener un cierto orden en nuestro documento HTML, estableciendo zonas y lmites que nos han hecho desechar a las tablas como elemento de maquetacin. Su uso puede variar segn la funcin que desee darle el autor de la pgina, por lo que su estilo puede encontrarse en constante cambio. El hecho de que deban adaptarse al entorno del sitio los convierte en una clase de elementos que deben permanecer flexibles ante la edicin, por lo que no es recomendable la aplicacin o uso de imgenes y patrones fijos para manejar su estilo. Con estos elementos se ha experimentado para llevar al extremo el diseo de una pgina web y gracias a esto han surgido varios de los mejores diseos web conocidos, actualmente CSS3 nos ofrece la posibilidad de que con unas cuantas lneas de cdigo

podamos replicar lo que los antiguos diseadores grficos hacan en base a layouts y editores de imgenes. Si an tienes dudas sobre lo que es un Div y la funcin que cumple dentro del documento HTML, te recomendamos leer el siguiente artculo.

Border-radius
Uno de los efectos ms populares desde antes del desarrollo de CSS3, son las esquinas redondeadas. Anteriormente este proceso se llevaba acabo mediante las llamadas imgenes mscara, las cuales se encargaban de cubrir nicamente las esquinas mediante una transparencia para simular que se haba agregado una curvatura. Actualmente CSS3 nos permite agregar dicho efecto a nuestros Divs con simplemente un grupo de tres lneas, border-radius, las cuales incluiremos en la declaracin CSS de nuestro div: ?

1 2 3

-moz-border-radius: 5px; //Firefox -webkit-border-radius: 5px; //Chrome, Safari border-radius: 5px; //Safari 5, IE9

Con esto abarcamos tanto Firefox, Chrome, Safari e Internet Explorer 9, aclarando que en un futuro border-radius bastar para que pueda visualizarse en todos los navegadores, actualmente solamente es reconocido en Internet Explorer 9 y Safari 5.

Box-shadow
Un efecto sencillo y de buena presentacin es box-shadow, el cual agrega una sensacin inmediata de profundidad a los elementos y capas a las que se lo aplicamos, respetando un patrn y no exagerando los valores en la sombra podemos crear vistas bastante agradables para el espectador con tan solo agregar estas lneas: ?

1 2 3

-webkit-box-shadow: 2px 2px 25px #CCCCCC; -moz-box-shadow: 2px 2px 25px #CCCCCC; box-shadow: 2px 2px 25px #CCCCCC;

Al igual que en radius, usaremos tres lneas dentro de la sentencia Div, y daremos cuatro parmetros. El primer y segundo parmetro sirven para indicar la posicin de la sombra (x,y), el tercer parmetro indica la difuminacin, mientras que el cuarto es el color que queremos darle a la sombra.

Si queremos agregar sombras mltiples basta con separarlas con una coma de la siguiente manera: box-shadow: 2px 2px 25px #CCCCCC, -2px -2px #999;

RGBA
El modelo RGBA ha sido utilizado durante aos en programas de edicin de imgenes como Photoshop, sin embargo en el campo de la programacin web la aplicacin del campo alpha para la transparencia haba estado en un constante proceso de transicin, lo que provoco un dolor de cabeza al querer aplicarlas sin la ayuda de algn editor. En mucha ocasiones se deseaba tener un Div transparente con texto contenido, pero al momento de aplicar dicha transparencia el texto tambin se vea afectado, por lo que se optaba por poner un div encima de otro y miles de trucos que a la larga significaban ms trabajo. Para evitar este tipo de cosas RGBA entro en funcin. Para aplicar el efecto basta con utilizar la declaracin rgba(255, 0, 0, 0.2), donde usaremos cuatro parmetros, de los cules los primeros tres sirven para indicar el color que queremos utilizar en base al patrn RGB, el cual es utilizado por muchos editores de imgenes desde Paint hasta Photoshop, mientras que el ltimo parmetro indica el nivel alpha de transparencia.

Cdigo final
>>> Aqu puedes ver el ejemplo de CSS3 en funcionamiento <<< En el siguiente cdigo podemos apreciar los tres efectos en un slo Div: ?

1 <html> 2 3 4
body{ <head> <title>Propiedades de divs</title> <style>

5 6 7

background: url('[Link] }

8 div#prueba{ 9 background: rgba(255, 122, 0, 0.5);

10color: #FFF; 11font-size: 10px; 12 13 14 15

border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 12px;

16 17 18
-webkit-box-shadow: 2px 2px 25px #D2691E; -moz-box-shadow: 2px 2px 25px #D2691E;

19box-shadow: 2px 2px 25px #D2691E; 20} 21 22</style> 23</head> 24 25<body>

26ultrices posuere cubilia Curae; Donec odio mi, tempor in fermentum a, dignissim eu t 27 28 29</body> 30</html> 31

<div id="prueba"> La webera, lorem ipsum dolor sit amet, consectetur adipiscing elit

molestie dignissim. Nam luctus suscipit magna eget posuere. In pretium elementum fer tortor mattis placerat. Praesent iaculis, urna non laoreet consectetur, erat purus v

Propiedades bsicas para el manejo de CSS3: Fondos (parte 3)

Resumen: Tercera parte de una serie que expondr las propiedades ms utilizadas de CSS3, en esta parte nos enfocamos a la estilizacin de

fondos. l fondo o background es uno de los elementos ms subestimados a la hora

de disear nuestro sitio web, muchas veces cometemos el error de no darle la importancia necesaria y continuamos sin identificar la relevancia que este tiene sobre el entorno, ya que l solo puede causar un completo desentono ambiental o nos puede ayudar a crear la armona entre el resto de los elementos. Despus de manejar el texto y las capas a nuestro favor, el fondo puede parecer intrascendente, pero si lo manejamos mal el resto de los elementos no lucirn. Imagina que tienes un sitio que maneje capas de color azul elctrico y uses un fondo de color rojo chillante, al menos que ests haciendo una pgina de Mario Bross, esto nunca lucir bien y es por ello que debes aprender a combinar tu fondo con el resto del sitio. Con esta serie de elementos que pondremos en prctica, podemos darle un toque ms adecuado a nuestros fondos, olvidndonos de los trucos o hacks que usbamos en el pasado para que el fondo se adaptar y funcionar como queramos, adems aprenderemos tcnicas que anteriormente nada ms eran posible realizarlas mediante un editor de imgenes.

Fondos mltiples con CSS3

Uno de los principales obstculos que nos encontrbamos en el pasado, era el no poderdesplegar ms de una imagen a la vez en nuestros fondos, esto cambia con CSS3. No es precisamente una prctica recomendada, ya que puede causar contrastes no adecuados, pero debemos admitir que el hecho de poder usar varias imgenes de fondo nos abre una gama de posibilidades para poner en prctica nuestra creatividad. Creemos un ejemplo sencillo, supongamos que tenemos dos imgenes de [Link] y queremos agregarlas como fondo de nuestra capa principal, simplemente estructuramos un cdigo como el siguiente: ?

1 2 3 4 5 6 7

.lawebera { border: 1px solid #000; height: 150px; width: 400px; background: url("[Link] 0 0 no-repeat,

url("[Link] 100% 0 no-repea }

Donde indicamos que la imagen [Link] estar ubicada en la parte izquierda de nuestro fondo mientras que [Link] ocupar la parte derecha. Esto solo se aplicar para aquellos div que tengas asignada la clase lawebera.

Tamao del fondo

Anteriormente era difcil poder adaptar una imagen para que se mostrar de manera extendida en nuestro fondo, debamos aplicar ciertos trucos para poder lograr este efecto y al final muchas veces no se consegua lo esperado. Muchas veces buscamos poder tener una sola imagen extendida como fondo, y para ahorrar recursos, ancho de banda y dems factores, utilizamos imgenes de tamao relativamente pequeo, por lo que necesitamos adaptarla para que se muestre en toda la ventana. Basta con utilizar un par de lneas de cdigo para aplicar esta tcnica: ?

1 2

background: url("[Link] no-repeat; background-size: 100% 100%;

La sentencia background-size aceptar dos parmetros que sern las dimensiones de la imagen de fondo (x, y). Hay que aclarar que este bloque de cdigo nicamente funcionar en Chrome y Safari, si queremos agregar esta funcionalidad para el resto de los navegadores debemos crear un cdigo como el siguiente: ?

1 2 3 4 5 6 7 8

body, html { height: 100%; } body{ background: url('[Link] no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; padding:45px; }

9
>>> Aqu puedes ver el ejemplo de CSS3 en funcionamiento <<< Esta es una tcnica que an tiene mucho potencial de refinamiento y mejora, pero por el momento se ha convertido en una gran utilidad.

Fondos difuminados y gradientes

Como consejo, trata de utilizar tcnicas relacionadas al manejo de colores en el fondo, no necesariamente debemos de poner una imagen para lograr obtener un buen efecto en nuestro sitio, muchas veces estas pueden obstaculizar o estropear nuestro proceso, e incluso pueden hacer pesada la descarga, es por ello que es recomendable aprender a manejar los colores. Si deseas aprender ms sobre gradientes y fondos con varios colores te recomendamos que visites el enlace anterior.

Men multicolor con XHTML y CSS

Resumen: Ejemplo de men en el que cad tem tiene un color diferente, empleando solo XHMTL y CSS.
Ya hemos visto en otros ejemplos de mens realizados con HTML o XHTML y CSS, que las posibilidades para realizar diferentes efectos son muy bastas, y que estos lenguajes tienen como nico lmite la propia imaginacin que pongamos en el desarrollo. En el ejemplo que traemos hoy, todos los tems de men tienen colores diferentes, consiguiendo un efecto muy atractivo. Generalmente los mens desarrollados en pginas web, tienen todos los tems de men del mismo color y forma. Sin embargo, es posible hacer que cada tem se muestre diferente de los dems, simplemente aplicando un identificador a cada uno de ellos, y dando caractersticas diferentes en el archivo CSS. El ejemplo que mostraremos a continuacin, es muy sencillo, pero el resultado es atractivo. Durante el desarrollo, explicaremos en forma detallada como funciona. En primer lugar, generaremos los documentos necesarios. Creamos un archivo XHTML 1.0 estricto, con el DTDque corresponde. En el encabezado pondremos el ttulo y el enlace al archivo CSS, que en el caso del ejemplo se encuentra en la raz del sitio.

El siguiente es el cdigo que deberemos introducir: ?

1 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link] <html lang="es" xml:lang="es" xmlns="[Link]

3 4 5 6

<head> <title>Menu de ejemplo</title> <link href="[Link]" rel="Stylesheet" type="text/css" media="screen" /> </head>

Luego, dentro de la etiqueta body, crearemos una capa (div), cuya nica finalidad es darle unaposicin al men. Dentro de la capa, crearemos la lista sin ordenar (ul) con los seis tems que tiene el men de ejemplo. Cada tem (li) del men tendr un identificador. Marcando en forma genrica a cada tem, es decir, dando formato a los tems de men (li), daremos las caractersticas que les son comunes a todos los tems, mientras que con el identificador lograremos darle las caractersticas particulares de cada uno de ellos. Como vemos en el cdigo de ejemplo que damos a continuacin, cada tem tiene un identificador propio. Dentro de cada tem, veremos los enlaces con sus respectivos textos. ?

1 2 3 4 5 6 7 8 9

<body>

<div id="menu">

<ul> <li id="item-uno"> <a href="#">Enlace uno</a> </li>

<li id="item-dos">

10 11 12 13 14 15 16 17

<a href="#">Enlace dos</a> </li>

<li id="item-tres"> <a href="#">Enlace tres</a> </li>

<li id="item-cuatro">

18 19 20 21 22 23 24

<a href="#">Enlace cuatro</a> </li>

<li id="item-cinco"> <a href="#">Enlace cinco</a> </li>

<li id="item-seis">

25 26 27 28 29 30 31 32 33
</body> </div>

<a href="#">Enlace seis</a> </li> </ul>

Ahora veremos el archivo CSS con los elementos necesarios para que el men se vea como deseamos. ?

1 2 3 4 5 6 7 8

body

margin: 0; padding: 0; font: normal 13px arial, helvetica, sans-serif; background: #000; }

#menu { width: 900px;

9 10 11 12 13 14

margin: 0 auto; margin-top: 50px; }

#menu ul

list-style: none; margin: 0;

15 16 17 18 19 20 21 22 23 24 25

#menu ul li { margin: 0; float: left; }

#menu ul li a { margin:0 2px; width: 138px; font-weight:bold; font-size:1.5em;

26 27 28 29 30 31 32 33 34 35

text-align: center; line-height: 44px; display:block; text-decoration: none }

#menu ul li a:hover { color:#000; }

36 37 38 39 40

#item-uno a { border-bottom:5px solid #f00; color: #f00 }

#item-dos a {

41
border-bottom:5px solid #f80;

42 43 44 45 46 47 48 49 50 51 52

color: #f80; }

#item-tres a { border-bottom:5px solid #ff0; color: #ff0; }

#item-cuatro a { border-bottom:5px solid #8f0; color: #8f0; }

53 54 55 56 57 58 59 60 61 62
#item-seis a { border-bottom:5px solid #08f; color: #08f; } #item-cinco a { border-bottom:5px solid #0ff; color: #0ff; }

63 64 65 66 67 68 69
} #item-dos a:hover { background:#f80; #item-uno a:hover { background:#f00; }

70 71 72 73 74 75 76 77 78 79 80 81 82
#item-seis a:hover { #item-cinco a:hover { background:#0ff; } #item-cuatro a:hover { background:#8f0; } #item-tres a:hover { background:#ff0; }

83 84 85 86 87 88 89

background:#08f; }

90 91
Como vemos, el fondo de la pgina es negro, y tiene como finalidad hacer que los colores de los tems de men se destaquen ms por contraste. Tambin se han eliminado los mrgenes que algunos navegadores tienen por defecto y se han determinado las caractersticas de la fuentepara todos los elementos de la pgina. Luego eliminamos los mrgenes que las listas tienen por defecto y tambin el estilo de lista, de forma que no se muestren los botones que encabezan cada tem (#menu ul). Debajo, hacemos que cada tem de la lista sea flotante y tambin quitamos los mrgenes que tienen por defecto (#menu ul li). Mediante #menu ul li a daremos los elementos comunes a cada tem del men. En primer lugar, determinamos mrgenes, dimensiones, fuentes y alineacin, adems de agregar la propiedad display: block, para hacer que los tems de lista con enlace dejen de comportarse comoelementos de lnea. De otra forma, sera imposible hacer que tomen las dimensiones deseadas. Mediante el empleo de ls pseudo-clase:hover, determinamos el comportamiento del tem (solo el color del texto del enlace) cuando el puntero pasa sobre l. El hecho de que hayamos incluido lapropiedad display, hace que todo el tem, no solo el texto, se modifique cuando el puntero pasa sobre l. Debajo, utilizando el identificador individual de cada tem, damos formato a cada uno de los tems de men, dando un borde inferior (ver imagen) y color al texto. Ms abajo, tambin empleamos la pseudo clase :hover en cada tem particular, para darle un color de fondo cuando el puntero pasa sobre el tem. El texto en este caso es negro, debido a que lo hemos determinado de esta forma en #menu ul li a:hover, como podemos ver en el cdigo que entregamos.

Otra forma de hacerlo

Tambin es posible hacerlo utilizando una imagen con los colores del men. Si bien tiene muchas puntos en comn con el men que dejamos hoy, hay elementos que son totalmente diferentes, y que veremos en un artculo posterior.

Columnas mltiples con CSS3: column-count, column-gap, columnwidth y column-rule

Resumen: Vemos como hacer con CSS3 columnas mltiples, un mtodo muy sencillo de crear una estructura en columnas para tu web.

El oscuro pasado de las tablas en la maquetacin web

El uso de tablas para estructurar un sitio resulta nicamente cmodo para quienes se reusan a aprender los nuevos estndares que ofrecen varias y mejores alternativas, el simple hecho de seguir utilizndolas para presentar informacin que no es propiamente tabular resulta abrumador. La culpable de todo esto es la maldita costumbre, muchos crecimos como diseadores webutilizando las tablas como un elemento omnipresente que tena cabida en cada parte de nuestros sitios, para casi todo lo que necesitaba presentar informacin exista una celda o una tabla completa que entraba al rescate. Con ellas matbamos la accesibilidad y la flexibilidad del sitio pero en aquel entonces no nos importaba, era preferible complicarnos la vida utilizando gifs como separadores dentro de las celdas para que el sitio funcionar y se viera bonito, a adaptarlo para utilizar tecnologas emergentes como el CSS, limitadamente utilizado en aquellos aos. Gracias a nosotros que crecimos con ese estilo y propagamos el cdigo por la red, hoy existen muchos desarrolladores principiantes confundidos que se preguntan Cundo y cmo debo utilizar tablas?, es fcil detectar que en Internet an existen sitios que utilizan estos elementos para maquetacin web, existen ejemplos por la red y mtodos de solucin que an recomiendan el uso de tablas incorrectamente, y por otro lado se encuentran con la nueva era de la estandarizacin donde van surgiendo cada vez ms nuevos estndares y mejores maneras de estructurar el cdigo.

La nueva era, divs para crear estructuras

Si t haz llegado hasta aqu con esa encrucijada de utilizarlas o no, te tengo una respuesta muy sencilla, utiliza las tablas nicamente para presentar datos que lo ameriten, ya sea un conjunto de listas compuestas por varios datos, informacin estructurada de manera tabular, y aquella que es obtenida mediante una consulta a una base de datos. Por nada del mundo las utilices para maquetacin, para crear headers, o footers, si lo que deseas es estructurar las partes de tu sitio web debes utilizar las capas, representadas por la etiqueta div, y vers que con ello reduces el tiempo de carga de tu sitio, as como muchas otras ventajas relacionadas tanto con el hosting, semntica y con el ahorro de tiempo tanto para ti como para el usuario. Una vez definido esto, reconoceremos a las capas div como las autnticas salvadoras que han venido a aclarar el panorama de la estructuracin de nuestros sitios, pero Podemos manejarlas de una mejor manera para optimizar an ms dicha estructura?, por supuesto para ello existen lenguajes como CSS3 que nos vienen a ambientar an ms la fiesta.

CSS3 o cmo flexibilizar nuestras maquetas

Desde 2005, ao en que vio la luz por primera vez el proyecto de CSS3, se empezaron a desarrollar especificaciones con distintas funciones y tareas adaptables para la estructuracin de nuestro sitio web, estilos aplicables a nuestras capas para hacer de ests ms flexibles y adaptables al medio donde se desplegar la informacin. Una de ests funcionalidades son las columnas mltiples, las cuales son generadas nica y exclusivamente por estilos, sin necesidad de agregar separadores ni mucho menos celdas para desplegar la informacin en forma de tabloide. En la actualidad son poco conocidas y raramente utilizadas, todo esto producido por la falta de soporte en Internet Explorer, ya que slo son admitidas y desplegadas en los navegadores basados en WebKit y en Mozilla, por lo que si tienen pensado desarrollar un proyecto para todos los navegadores deben considerar crear una versin alterna para aquellos que usen IE8 o inferior. Bsicamente lo que produciremos al agregar esta propiedad a los elementos de nuestro sitio, es convertir una lnea continua o un prrafo grande en varias columnas, tomando como base los atributos column-count, column-gap, column-rule y column width para darle la forma deseada. Lo primero que debemos hacer es crear nuestra estructura del sitio de la siguiente manera: ?
<!DOCTYPE html>

1 2 3 4

<html> <head> <meta charset="utf-8"> <title>Columnas Mltiples con CSS3</title>

5 </head> 6 <body> 7 8 <div id="contenedor"> 9 10 11

<p> <h1>Diario "El Amarillista"</h1> <img src="[Link] alt="Cae Nave <h2>Cae nave espacial en Kuala Lumpur</h2>

12

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a lectus nec fe tristique. Vestibulum lacinia sapien a purus bibendum iaculis nec vitae sapien. Quis

13mi et orci. Donec feugiat cursus consectetur. Nunc scelerisque, nisl sed feugiat fau
lacus ut mi accumsan quis commodo sapien aliquam. Donec sapien nulla, placerat quis

14malesuada pellentesque est et dictum. Vivamus ac erat vel augue facilisis rhoncus. C 15 16 17 18 19
Agregamos un gran prrafo con el famoso Lorem ipsum para ver como funciona la propiedad, dicho prrafo est dentro de una capa llamada contenedor y en base a esto aplicaremos el siguiente estilo a la relacin: ?
</body> </html> </p>

</div>

1 2 3 4 5 6 7 8

#contenedor p { -webkit-column-count: 3; -webkit-column-gap: 10px; -moz-column-count: 3; -moz-column-gap: 10px; column-count: 3; column-gap: 10px; }

Como se puede apreciar escribimos las mismas dos lneas de atributos en tres ocasiones pero con diferentes prefijos, esto lo hacemos para que la funcin sea compatible con la mayora de los navegadores, el prefijo webkit es para Safari y Chrome, moz para Mozilla y los atributos sin prefijo son para aquellos navegadores que as lo requieran. El atributo column-count sirve para especificar en cuantas columnas queremos que se despliegue la informacin, en nuestro caso son tres. Por su parte el atributo columngapsirve para establecer el espacio que existir como separador entre cada columna, a lo que nosotros le damos el valor de 10 pxeles. Si deseamos agregar ms control sobre el funcionamiento de las columnas podemos utilizar otros dos atributos, column-width que nos permite determinar cuanto medir cada columna ycolumn-rule que permite agregar especificaciones a las divisiones entre cada columna, comnmente usado para establecer un borde (column-rule: solid #000000 1px;).

Podemos detallar ms el estilo de los diferentes elementos del sitio agregando ms gama de colores y creando efectos como el difuminado sobre el encabezado; todo lo que creamos necesario para que nuestro sitio luzca de la mejor manera. A nuestra pgina de ejemplo he decidido agregar lo siguiente: ?

1 2 3 4 5 6

body{ background: #282828; } #contenedor { width: 500px; margin: auto; background: #F0F0F0;

7 8 9 10 11 12 13 14 15 16

padding: 10px; font: 12px helvetica, arial, sans-serif; }

img { width: 100%; } h1{ color: #303030; font-size: 48px; text-shadow: 2px 2px 5px #505050;

17 18 19 20 21 22 23

} #contenedor p { -webkit-column-count: 3; -webkit-column-gap: 10px;

-moz-column-count: 3; -moz-column-gap: 10px;

24 25 26 27 28 29
Dicho estilo deber aadirse a nuestro cdigo con alguno de los dos mtodos conocidos, ya sea escribindolo directamente dentro de las etiquetas head o agregndolo como un archivo externo con extensin .css. Cualquiera que sea la manera de hacerlo obtendremos como resultado una pgina en forma de tabloide en colores grises lista para ser publicada. Como pudimos observar es un mtodo bastante sencillo, fcil de aplicar y sobre todo de aprender, no hay necesidad de complicarnos la vida con tablas, ni de utilizar mtodos an ms arcaicos como el salto de lnea ni los gifs transparentes para separar, con esto nuestro cdigo quedar limpio y claro.
column-count: 3; column-gap: 10px; }

Expansin de una imagen de fondo con CSS

Resumen: En este artculo explicamos dos mtodos CSS distintos para expandir la imagen de fondo y tome el tamao de la ventana del navegador.
Muchas son las ocasiones en las que se nos presenta la necesidad de utilizar una imagen de fondo para nuestro sitio que se encuentre en estado expandido, y de tal manera abarque toda la ventana del navegador, sea cual sea su medidas. El comn uso del escritorio como entorno de trabajo y su facilidad de adaptar una imagen al tamao de la pantalla, hace que nos sea muy familiar el uso de imgenes expandidas de fondo y aunque para adaptarlas en un sitio web no resulte tan sencillo como pueda parecer, el uso de tcnicas como las siguientes nos pueden facilitar el trabajo. Antes de la incorporacin de las hojas de estilo a nuestros desarrollos, era bastante complicado lograr esta adaptacin de imgenes, se tena que recurrir a varios trucos para lograr el efecto deseado, e incluso se tena que personalizar de navegador en navegador, teniendo que recurrir muchas veces al uso de JavaScript. En la actualidad CSS, y sobre todo CSS3, nos han extendido la mano para llevarnos por un camino de simplicidad y estandarizacin al realizar esta clase de funciones,

permitindonos utilizar un mismo cdigo para cada navegador obteniendo resultados exactos o muy similares, con las claras excepciones de los navegadores antiguos que no soportan la tecnologa. Desgraciadamente, debido a estas excepciones mencionadas, CSS3 sigue siendo un tema tab para muchos desarrolladores, temiendo que usuarios que tengan una versin instalada de Internet Explorer que sea anterior a la 9, no puedan ver correctamente el sitio. Es por esto, que en consideracin a los gustos de cada programador, hemos agregado dos mtodos distintos para lograr el mismo resultado, explicando en que navegadores funcionar cada uno de ellos. El objetivo es sencillo, queremos lograr que la imagen de fondo del sitio cubra toda la ventana del navegador, en todo momento, sin que existan espacios en blanco y logrando que la imagen este correctamente escalada, respete su proporcin de altura y anchura, no genere barras de desplazamiento y que se encuentre centrada, todo esto utilizando cdigo sencillo sin recurrir a herramientas elegantes, y tratando de que sea visible en la mayora de los navegadores.

Mtodo con CSS3

La maravilla del uso de CSS3 es que no solo nos convierte en desarrolladores progresivos y vanguardistas, cosa de la que muchos presumen, si no que nos hace ser ms pragmticos y resolver problemas de manera mucho ms sencilla. Gracias al uso de la propiedad background-size, el efecto de fondo extendido puede hacerse posible utilizando exclusivamente CSS. Para definirlo, utilizaremos el elemento html y dentro de su sentencia de estilo definiremos las propiedades para el ajuste del tamao de la imagen: ?

1 2 3 4 5 6 7

html { background: url(imagenes/[Link]) no-repeat center center fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; }

En dicha sentencia, con la propiedad background establecemos un fondo fijo que llevara la imagen cuyo nombre es [Link], dicha imagen es centrada y arreglada para que no sea repetida. Finalmente mediante la propiedad background-size, ya mencionada, ajustamos el tamao para que cubra la ventana del navegador.

Como se puede observar se utilizaron 3 variaciones de la propiedad, esto es para que la sentencia pueda funcionar en tres distintos navegadores, moz para firefox y los derivados del proyecto Mozilla, webkit para safari y chrome, y finalmente o para Opera. Esta medida es nicamente de prevencin, y con ello nuestro efecto se podr observar perfectamente en cualquier navegador Firefox que sea igual o superior a la version 3.6, en Safari 3 o superior, Opera 9.5 en adelante, Google Chrome y en la ms reciente versin de Internet Explorer, la nmero 9.

Mtodo con CSS bsico

En caso de que CSS3 te resulte complicado, o simplemente quieras tener un mayor rango de navegadores a abarcar podemos utilizar este mtodo que utiliza nicamente CSS bsico. Si bien es un poco ms de cdigo por programar, resulta ms digerible para las versiones antiguas de navegadores, incluidos los famosos Internet Explorer 6 y 7. En este mtodo utilizamos el elemento img, al cual le establecemos una altura mnima conmin-height, lo que permite llenar la ventana del navegador de manera vertical, despus establecemos una anchura (width) de 100% para realizar el llenado horizontal. De igual manera establecemos una anchura mnima (min-width) para que la imagen no se haga ms pequea que su tamao original. El truco aqu consiste en verificar si la ventana del navegador es menor que el tamao verdadero de la imagen, al saberlo podemos utilizar porcentajes y margenes negativos para mantener centrada la imagen sin importar el tamao de la ventana. Para ello utilizamos una bsqueda de tamao mediante la sentencia @media, esto podemos observarlo en el siguiente cdigo: ?

1 2 3 4 5 6 7 8 9 10

img#imagen_de_fondo { /* Rellenamos el fondo */ min-height: 100%; min-width: 800px;

/* Escalamiento proporcional */ width: 100%; height: auto;

/* Posicionamiento */

11 12 13 14 15 16
}

position: fixed; top: 0; left: 0;

@media screen and (max-width: 800px) { /* Hacemos la bsqueda y si coincide modif img#imagen_de_fondo {

17 18 19 20 21
} }

left: 50%; margin-left: -400px;

/* Agregamos un margen negativo que repres

Este mtodo funcionar de manera correcta en cualquier versin de los navegadores Firefox, Chrome, Opera y Safari, por su parte tambin funcionar a la perfeccin en Internet Explorer 9, mientras que en las versiones 7 y 8 puede fallar con imgenes muy pequeas.

Cmo cambiar el estilo de nuestro sitio dinmicamente? Parte IV Final

Resumen: Vemos la ltima parte de este mini-manual sobre cmo modificar dinamicamente los estilos CSS en nuestra pgina web. En esta ltima entrega terminamos el ejemplo de las horas del da.
Continuando con el tema de cambiar estilos dinmicamente en base a las horas del da. El primer estilo a desarrollar ser el de la maana, que contendr colores ms claros que el resto, empezando por un fondo basado en un gradiente circular que ira desde el blanco hasta un amarillo claro.

Cdigo CSS para cambiar los estilos dinmicamente

?

1 2 3

* { margin: 0; padding: 0; }

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
margin: 0px; #contenedor { width: 922px; margin: 0px auto; padding: 0px; border: 1px solid #dfdfdf; background: #FFF8DC; color: #DEB887; font: 1.0em/150% 'arial', sans-serif; } #cabecera { float: left; width: 100%; height: 95px; } body { height: 100%; background: #DEB887; font-size: 14px;

background: -moz-radial-gradient(center 45deg, circle closest-corner, #FFFFFF 0%

background: -webkit-gradient(radial, center center, 0, center center, 770, from(

25 26 27

padding: 0px; background: #FFEBCD; }

28 29 30 31 32

#cabecera #titulo { margin: 20px 0px 0px 30px; padding: 0px; color: #DEB887; font: bold 2.5em 'arial black', sans-serif; text-align: left;

33 34 35 36 37 38 39 40 41

} #cabecera div#descripcion { margin: 5px 0px 0px 30px; padding: 0px; color: #DEB887; font-size: 1.2em; text-align: left; }

#navegacion {

42
float: left;

43 44 45 46 47 48 49 50 51 52

width: 93%; margin: 0px; padding: 10px 2% 0px 5%; background: #FFDEAD; } #contenido { float: left; width: 450px; margin: 20px 0px 0px; padding: 0px; background: #FFEBCD;

53 54

font-size: 1.0em; text-align: left;

55 56 57 58 59

} #contenido p { margin: 15px 25px; padding: 0px; } #contenido h3 {

60 61 62 63 64 65 66 67 68 69

margin: 20px 25px 10px; font: bold 1.0em 'arial', sans-serif; text-align: left; }

.lateral { width: 200px; float: left; margin: 20px 5px 10px 0px; padding: 0px 0px 0px 20px; background: #F5DEB3;

70 71 72 73 74 75 76 77 78 79

font-size: 1.0em; text-align: left; } #pie { clear:both; width: 100%; height: 35px; margin: 0px; padding: 20px 0px 0px; background: #FFDEAD; font-size: 0.8em;

80 81

text-align: right; }

82 83 84 85 86 87 88 89 90
En la definicin de este estilo CSS podemos identificar los puntos claves para trabajar con el resto. Los elementos background, color y border, son los responsables de adaptar los colores al fondo, letra y borde de cada div, estos sern los elementos que cambiaremos para agregar la particularidad de cada etapa del da. Estilo CSS para la tarde: ?

1 2

* { margin: 0; padding: 0;

3 4 5 6 7 8 9 10 11
}

} body { height: 100%; background: #FF8C00; font-size: 14px;

background: -moz-radial-gradient(center 45deg, circle closest-corner, #D2B48C 0%

background: -webkit-gradient(radial, center center, 0, center center, 770, from(

#contenedor { width: 922px;

12 13

margin: 0px auto; padding: 0px;

14 15 16 17 18

border: 1px solid #FFAD04; background: #FFCC66; color: #FF8C00; font: 1.0em/150% 'arial', sans-serif; } #cabecera {

19 20 21 22 23 24 25 26 27

float: left; width: 100%; height: 95px; margin: 0px; padding: 0px; background: #F0A300; } #cabecera #titulo { margin: 20px 0px 0px 30px; padding: 0px;

28 29 30 31 32 33 34 35 36 37

color: #FFDB91; font: bold 2.5em 'arial black', sans-serif; text-align: left; } #cabecera div#descripcion { margin: 5px 0px 0px 30px; padding: 0px; color: #FFDB91; font-size: 1.2em; text-align: left; }

38 39 40
#navegacion { float: left;

41 42 43 44 45

width: 93%; margin: 0px; padding: 10px 2% 0px 5%; background: #FFAD04; } #contenido {

46 47 48 49 50 51 52 53 54

float: left; width: 450px; margin: 20px 0px 0px; padding: 0px; background: #FFDB91; font-size: 1.0em; text-align: left; } #contenido p { margin: 15px 25px;

55 56 57 58 59 60 61 62 63 64 65

padding: 0px; } #contenido h3 { margin: 20px 25px 10px; font: bold 1.0em 'arial', sans-serif; text-align: left; }

.lateral { width: 200px; float: left; margin: 20px 5px 10px 0px;

66 67

padding: 0px 0px 0px 20px; background: #FFC753;

68 69 70 71 72

font-size: 1.0em; text-align: left; } #pie { clear:both; width: 100%;

73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

height: 35px; margin: 0px; padding: 20px 0px 0px; background: #FFAD04; font-size: 0.8em; text-align: right; }

Estilo CSS para la noche: ?

1 2

* { margin: 0; padding: 0;

3 4

} body {

5 6 7 8 9
}

height: 100%; background: #dfdfdf; font-size: 14px;

background: -moz-radial-gradient(center 45deg, circle closest-corner, #333333 0%

background: -webkit-gradient(radial, center center, 0, center center, 770, from(

10 11 12 13 14 15 16 17 18

#contenedor { width: 922px; margin: 0px auto; padding: 0px; border: 1px solid #000000; background: #555555; color: #333333; font: 1.0em/150% 'arial', sans-serif; } #cabecera {

19 20 21 22 23 24 25 26 27 28

float: left; width: 100%; height: 95px; margin: 0px; padding: 0px; background: #333333; } #cabecera #titulo { margin: 20px 0px 0px 30px; padding: 0px; color: #666666;

29 30 31

font: bold 2.5em 'arial black', sans-serif; text-align: left; }

32 33 34 35 36

#cabecera div#descripcion { margin: 5px 0px 0px 30px; padding: 0px; color: #666666; font-size: 1.2em; text-align: left;

37 38 39 40 41 42 43 44 45 46

#navegacion { float: left; width: 93%; margin: 0px; padding: 10px 2% 0px 5%; background: #000000; } #contenido { float: left;

47 48 49 50 51 52 53 54 55 56

width: 450px; margin: 20px 0px 0px; padding: 0px; background: #999999; font-size: 1.0em; text-align: left; } #contenido p { margin: 15px 25px; padding: 0px; }

57 58

#contenido h3 { margin: 20px 25px 10px;

59 60 61 62 63 64

font: bold 1.0em 'arial', sans-serif; text-align: left; }

.lateral { width: 200px; float: left;

65 66 67 68 69 70 71 72 73

margin: 20px 5px 10px 0px; padding: 0px 0px 0px 20px; background: #666666; font-size: 1.0em; text-align: left; } #pie { clear:both; width: 100%; height: 35px;

74 75 76 77 78 79 80 81 82 83 84 85

margin: 0px; padding: 20px 0px 0px; background: #000000; font-size: 0.8em; text-align: right; }

86 87 88
Una vez concluidos los estilos CSS, empezaremos a idear un sistema de condicionamiento basado en horas, si definimos que mostraremos un "layout" distinto cada ocho horas entonces debemos estructurarlo en base a este perodo. JavaScript como la mayora de los lenguajes de programacin, cuenta con un nmero de funciones y atributos predefinidos que nos ayudan a obtener valores especficos para realizar operaciones con ellos. En cuestin de Tiempo, existen funciones como getTime y getHours que podemos utilizar para obtener los valores necesarios para estructurar el condicionamiento mencionado, con datos directamente extrados de nuestro cliente. Tomando los valores obtenidos como base, podemos iniciar la codificacin de condiciones necesarias para desplegar el estilo que diseamos para ese valor especfico, algo como lo siguiente:

Cdigo JavaScript para cambiar el CSS dinmicamente

?
function obtenerCSS()

1 2 3 4 5 6 7 8 9 10 11

{ fechadehoy = new Date(); tiempoactual=[Link](); [Link](tiempoactual); horaactual = [Link]();

if (horaactual > 20) colores = "[Link]"; else if (horaactual > 12) colores = "[Link]";

else if (horaactual > 4) colores = "[Link]";

12 13 14 15 16

else if (horaactual > 1) colores else colores = "[Link]"; = "[Link]";

var css = '<';

css+='link rel="stylesheet" href="' + colores

+ '" \/';

css+='>'

17 18
[Link](css);

19 20 21 22

Bsicamente lo que realizamos es obtener el tiempo en base a la fecha actual y extraerle la hora para poder utilizar el valor en las condiciones que determinan que combinacin de colores utilizar. Una vez definida la combinacin formamos la etiqueta "link" para agregar el css y lo escribimos en el documento. Dicho cdigo lo guardamos en un archivo con extensin .js, el cual agregaremos en nuestro cdigo HTML principal, para mandar llamar a dicha funcin, esto lo haremos dentro del campo de la siguiente manera: ?

<script type="text/javascript">obtenerCSS();</script>

Hay que recordar que este cdigo funcionar en base al reloj de la computadora del usuario por lo que funcionar correctamente si este se encuentra bien ajustado; es decir, si el usuario por alguna razn tiene su reloj adelantado o atrasado recibir un estilo que no corresponde a la verdadera etapa del da. A pesar de este problema, por razones de personalizacin es preferente usar el tiempo obtenido del lado cliente en vez del servidor, para que el usuario reciba el CSS correspondiente a la hora actual de su ciudad. El utilizar estilos de CSS dinmicos se puede llevar a un nivel ms avanzado, utilizar aplicaciones externas y web services para obtener informacin relevante y utilizarla para llevar a cabo cambios de estilo, en el siguiente artculo de esta serie veremos como poder utilizar esta clase de informacin.

Sombras y dimensiones con CSS3 box-shadow

Resumen: En este artculo practicamos con propiedades CSS3 para agregar sombras a las imgenes y efectos de profundidad al sitio.
El agregar efectos de sombra ha sido uno de los trucos ms recurridos para realzar las imgenes que desplegamos en nuestros sitios Web. Desde que el uso de Photoshop y otros programas de edicin ha venido a la alza, este efecto se ha practicado cotidianamente como parte de un ritual de estilizacin proporcionada por los diseadores grficos. En la actualidad ya no es requerido el llevar un tutorial completo sobre edicin de imgenes para poder aplicar esta clase de efectos, ya que CSS nos permite utilizarlos an sin tener conocimientos previos de diseo, facilitando las cosas a los programadores que nos hemos enfocado ms en el funcionamiento de los sitios y que ahora podemos tener un mejor trato del entorno visual.

Box-shadow de CSS3
Box-shadow es una propiedad CSS3 que permite a los diseadores y desarrolladores implementar fcilmente sombras sobre cualquier elemento de tipo capa. Con esta propiedad podemos especificar las propiedades de la sombra que queremos desplegar proporcionando valores de tamao, color, offset, y el desenfoque deseado. Al agregar una sombra creamos un efecto de dimensin y cambia la perspectiva de la imagen, al realizar esto con CSS nos ahorramos el hecho de tener una imagen con cada efecto ya aplicado, simplemente basta con tener la imagen base a la cual podemos aadirle y quitarle efectos mediante propiedades como la ya mencionada. En este artculo nos enfocaremos a dar un efecto de sombra base para despus crear una sombra que de dimensin para darle vida a nuestra imagen plana.

Aplicando la propiedad CSS3 box-shadow

La imagen
Lo primero que necesitamos para llevar a cabo esta prctica es una imagen plana que no tenga ningn tipo de borde ni efecto aadido, de tal manera que podamos aplicar nuestros propios bordes con CSS sin que haya conflicto con la imagen base.

Dicha imagen ser colocada dentro de un elemento div, al cual posteriormente le vamos a aplicar los estilos CSS necesarios para lograr el efecto. ?

1 2 3

<div id="contenedorImg"> <img src="[Link]" /> </div>

Aadiendo el borde
Despus de definir la imagen pasamos a aadir la clase base box-shadow, la cual nos proporcionar un tipo de borde difuminado alrededor de la imagen que produce el efecto tridimensional que buscamos. Como buena propiedad CSS, el efecto producido por boxshadow puede ser modificado y alterado, podemos ajustar su tamao aadiendo pxeles en las propiedades de los elementos. Nuestro CSS quedara definido de la siguiente manera: ?

1 2 3 4 5 6

.sombra-borde { width: 600px; -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5); -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5); box-shadow: 1px 2px 4px rgba(0,0,0,.5); }

Y al aplicarlo a nuestro HTML obtendramos una imagen as:

Sombra profunda
Despus de tener listo la aplicacin de la sombra a la caja contenedora, continuamos con la creacin de una clase de estilo que agregue un efecto sombra profunda para nuestra imagen. Esta sombra nos dar una sensacin de mayor profundidad y para ello definimos un cdigo CSS como el siguiente, entorno al elemento div que contiene la imagen: ?

1
.sombra-profunda:after {

2
-moz-transform: skew(-40deg);

3 4 5 6 7 8 9 10 11

-webkit-transform: skew(-40deg); -moz-box-shadow: 70px 0 10px 40px rgba(0,0,0,.2); 70px 0 10px 40px rgba(0,0,0,.2);

-webkit-box-shadow:

box-shadow: 70px 0 10px 40px rgba(0, 0, 0, 0.2); content: ""; height: 40px; left: 0; position: absolute; top: 360px; width: 550px;

12 13

Con este cdigo la sombra queda sobre la imagen, pero esto lo vamos a corregir en el siguiente paso.

Ajustar el orden del ndice Z (z-index)

Por ltimo, cambiamos el orden del ndice Z de nuestra sombra, dicho ndice indica el orden en que se mostrarn los elementos en el sitio, con ello se evita el empalmar elementos sobre otros ms importantes, en este caso lo utilizamos para lograr el efecto de profundidad necesario y evitar que la sombra quede en el primer marco del sitio. Al darle un valor de -1 a la propiedad z-index logramos pasar la sombra al fondo y con esto completar el marco visual que estamos buscando. ?

z-index: -1;

Como se puede apreciar en la imagen final, hemos logrado transformar lo plano en algo tridimensional y slo con unos cuantos pasos sencillos. Basta con aplicar al div contenedor de la imagen las clases que creamos en este artculo, para as poder observar los resultados. ?

1 2 3

<div id="contenedorImg" class="sombra-borde sombra-profunda"> <img src="[Link]" /> </div>

CSS: Correcto uso de capas flotantes (float) con overflow

Resumen: En este artculo explicamos como corregir el uso de flotantes dentro de un contenedor con la propiedad overflow
El desprestigio que adquiere un sitio al utilizar tablas como contenedores de informacin es conocido por todo desarrollador web que tenga un mnimo de experiencia en estandarizacin de cdigo. El llamar a dichos elementos para mostrar informacin o imgenes nicamente para ahorrarnos unos pasos y tener alineado nuestro contenido es considerado una de las faltas ms graves en la maquetacin de pginas web. Con el paso de los aos la aplicacin de las tablas en sitios se fue limitando de tal manera que en la actualidad la mayora de los sitios nicamente las utilizan para mostrar datos tabulares, lo que fue y siempre ser su nico motivo de existencia. Gracias a esta adecuacin, dichas estructuras han cado en desuso para dar formato a contenido, por lo que varios mtodos para alinear y mostrar informacin han tenido que surgir para cumplir con esta funcin. La respuesta inmediata a esta clase de problemas la podemos encontrar en el lenguaje de estilo CSS. Si bien CSS3 nos ha sorprendido con el uso de columnas mltiples en nuestros documentos, en esta ocasin nos centraremos en el uso de capas con propiedades flotantes para poder explicar nuestro ejemplo de Overflow.

Como es de saberse el uso de capas mediante elementos div se ha convertido en la forma ms comn y adecuada de mostrar informacin en nuestro sitio. A cada una de estas capas se le puede dar valores que permitan editar su tamao, posicin y estilo, por ejemplo si quisiramos colocar dos capas con bloques de contenido en un mismo nivel de manera paralela verticalmente utilizaramos la propiedades float para mandar una al lado izquierdo y otra al lado derecho.

Las capas flotantes con CSS

El problema que vamos a abarcar en el estudio de este artculo se produce precisamente al manejar dichas propiedades de flotacin. Hay que aclarar que no por ello debemos discriminar a la propiedad float, pues es una de las maneras ms adecuadas para colocar divs a lo largo y ancho de la pgina y su implementacin vino a revolucionar lo que anteriormente era la maquetacin y estructuracin de un sitio. Bsicamente lo que ocurre al crear capas en un sitio es que un elemento div siempre se colocaba debajo del anterior elemento del mismo tipo, lo que hace que la informacin se muestre en una sola columna aunque modifiquemos el tamao y estilo de la capa. Esto se puede evitar gracias a la propiedad float la cual crea el efecto necesario para que las capas estn flotando en la pgina y podamos moverlas y colocarlas a disposicin.

La estructura
Por ejemplo, si suponemos que se desea tener una estructura de sitio con tres capas de presentacin, una de ellas que sirva para contener toda la informacin y las otras dos para representar las columnas, se debe optar por manejar tres elementos de tipo div los cuales despus sern adecuados mediante CSS. ?

1 2 3 4 5 6 7 8

<div id="contenedor"> <div id="columnaIzq"> <p>Soy la columna izquierda de esta pgina y muestro contenido</p> </div> <div id="columnaDer"> <p>Soy la columna derecha de esta pgina y tambin muestro contenido</p> </div> </div>

Como es de suponerse queremos que una de las columnas se muestre al lado izquierdo del contenedor y la otra al lado derecho, para ello debemos usar la propiedad flotadora ya mencionada y el cdigo quedara de la siguiente manera: ?

1
#contenedor{

2 3 4 5 6 7 8 9 10 11
} } }

background-color: SteelBlue; padding:5px;

#columnaIzq{ width:300px; float:left;

#columnaDer{ width:300px; float:right;

12
El nico problema de esta estructura es que el div contenedor no tiene idea de que las otras dos capas existen, puesto que las dos estn flotando por encima de l, por lo que actua como un contenedor vaco y simplemente no se muestra. Si pegamos el cdigo que acabamos de realizar en nuestra pgina web podremos ver que apenas se alcanza a distinguir una lnea con el colorSteelBlue de fondo, ese es nuestro div contenedor, por su parte las columnas se muestran pero no de la manera en que queremos.

La solucin momentnea
Muchos de nosotros improvisamos y a la carrera sacamos proyectos por cuestiones de tiempo o desesperacin, existen soluciones poco prcticas o incluso momentneas que nos pueden ayudar. El uso de algn elemento al final del div contenedor puede ayudar a que la capa se extienda y abarque los dos elementos de columnas. Por ejemplo podemos aadir una cierta cantidad de espacios en blanco mediante el cdigo al final del div o de saltos de lnea mediante la etiqueta hasta que el contenedor abarque lo suficiente como para obtener el resultado que queremos. O incluso vernos un poco ms sofisticados y utilizar esta misma etiqueta de salto de lnea pero con un atributo clear cuyo valor sea all, lo que forzar al contenedor a extenderse para mostrar el contenido, por lo que si cambiamos el cdigo HTML a este:

1 2 3 4 5 6 7 8 9

<div id="contenedor"> <div id="columnaIzq"> <p>Soy la columna izquierda de esta pgina y muestro contenido</p> </div> <div id="columnaDer"> <p>Soy la columna derecha de esta pgina y tambin muestro contenido</p> </div> <br clear="all" /> </div>

El resultado puede parecer el indicado, pero quizs no sea la forma ms adecuada de obtenerlo.

Overflow de CSS y capas flotantes

Si bien con el salto de lnea se pudo desplegar correctamente nuestro div contenedor, estamos utilizando una etiqueta de contenido que no tiene ms propsito que mostrar bien la estructura, por ello es mejor pensar en una solucin que venga desde el diseo y no desde el contenido. Para esta situacin es cuando podemos utilizar la propiedad overflow que nos ofrece CSS. La principal funcin de dicha propiedad es permitirnos modelar las capas de tal manera que el navegador sepa cmo mostrar el contenido cuando este no puede ser colocado de manera completa, pero en esta ocasin toma una funcin complementara y permite que los elementos flotantes sean reconocidos por el elemento contenedor. Para esta funcin se puede utilizar cualquier valor de los permitidos para la propiedad Overflow, ya sea hidden, scroll o auto, todas funcionan, pero por cuestiones de esttica optaremos en esta ocasin por el valor hidden que simplemente no muestra nada. Habiendo dicho esto, modificamos el cdigo de nuestro CSS y las propiedades del div contenedor quedan de la siguiente manera: ?

1 2 3

#contenedor{ background-color: SteelBlue; padding:5px;

4 5
}

overflow: hidden;

En cuanto al cdigo HTML, ya no ser necesario usar el salto de lnea por lo que podemos volver al cdigo original mostrado en el primer ejemplo. Finalmente debemos aclarar que este truco funciona en todos los navegadores que soportan CSS aunque en algunos casos debemos utilizar un width o un height especfico.

CSS Media queries

Resumen: En este artculo explicamos como adaptar nuestros sitios al tamao de la ventana del navegador y de los dispositivos mediante los "media queries" de CSS.
Brindar comodidad en la visualizacin y soporte para diversos tamaos de pantalla, se ha convertido en una prioridad para todos los sitios web que desean crear gratas experiencias en el manejo de sus sistemas por parte del usuario final. Adems con la popularizacin de internet desde el mvil, es ms importante si cabe usar este tipo de recursos. Con la variedad de dispositivos que actualmente existen en el mercado, la web mvil, etc. el manejo adecuado del tamao de pantalla y la manera en que se despliega el sitio es un factor determinante para que el usuario frecuente y utilice un sitio, ya que si este no puede ser observado correctamente su potencial se ve reducido. Para lograr este soporte, en el pasado, era comn recurrir a efectos y trucos que nos ofrecaJavaScript, para que de esa manera el sitio se ajustar a la medida de la ventana donde el usuario haba abierto el sitio, o pero an se modificaba arbitrariamente el ancho del navegador donde se desplegaba el sitio, actuando en contra de lo que el usuario realmente deseaba. Afortunadamente en la actualidad este proceso se ha simplificado en gran manera, a tal grado que con un par de lneas podemos dar soporte a los tamaos de pantalla ms utilizados por los usuarios, ya sea el tamao de un monitor de escritorio, una tablet o un smartphone. Todo esto se ha conseguido gracias al uso de CSS y sus nuevas estandarizaciones, entre las cuales nos encontramos a los media queries quienes sern los que nos ayuden a llevar a cabo esta tarea.

Soporte de CSS media queries en navegadores

Antes de empezar con el desarrollo, debemos establecer que los mtodos que vamos a explicar en este artculo slo tendrn efecto en ciertos navegadores, si tu deseas dar

soporte a todos los navegadores que an estn en uso por parte de los usuarios, entonces puedes tomar algn otro tutorial o conseguir un truco por Internet que te permita conseguir el mismo efecto mediantehacks, slo recuerda que no hay que maritizarse mucho con esto pues es muy poco probable que un smartphone o una tablet venga con Internet Explorer 7 como navegador, puesto que son instrumentos relativamente recientes. Los navegadores que soportan los Media Queries de CSS son Firefox en su versin 3.5 y posteriores, Google Chrome en todas sus versiones, Safari en su versin 3 y posteriores, Opera en la versin 9.5 y posteriores y finalmente Internet Explorer que los incorpor a partir de su versin 9. Ahora que ya sabemos los navegadores donde se pueden utilizar hay que identificar en que partes del cdigo podemos colocar los media queries.

Donde colocar los media queries

El mtodo ms comn a utilizar es incluir nuestros media queries dentro de la hoja de estiloprincipal. Para llamarlos basta con incluir la etiqueta @media en nuestra sentencia. Veamos la estructura: ?

1 2 3

@media screen and (min-width : 1024px){ /* Aqu ira el estilo para este tamao de pantalla */ }

Como se puede observar en la sentencia utilizamos la palabra screen despus de la etiqueta@media, esto sirve para indicar el formato al cual aplicaremos el estilo, este puede tener distintos valores como all, screen o print, en nuestro caso nos enfocaremos nicamente a screen ya que nos estamos refiriendo al tamao de pantalla. Despus de establecer el formato damos la siguiente parte min-width: 1024px, con esto especificamos cual ser el tamao mnimo que deba tener la pantalla para que el estilo pueda ser aplicado, en este caso yo le di el valor de 1024 pxeles ya que es un estndar de tamao de monitor para las computadoras de escritorio. Si definimos una hoja de estilo como la siguiente: ?

1 2 3

<style> #contenedor{ background: crimson; width:200px;

4 5 6 7 8 9

height: 200px; }

@media screen and (min-width : 1024px){ #contenedor{ background: blue; }

10 11 12 13

} </style>

Al momento de abrir nuestra pgina veremos un bloque contenedor de fondo carmes, pero al momento en que disminuyamos el tamao el browser a una cantidad menor de 1024 pxeles de ancho el contenedor cambiar de color y ahora ser azul. Podemos lograr el mismo efecto llevando a cabo otras manera de llamado, como por ejemplo la importacin de hojas de estilo especficas para cada tamao.

Importando desde la hoja de estilo

Mediante la etiqueta @import podemos mandar llamar a un archivo CSS externo que contenga todas las caractersticas deseadas para un tamao de pantalla especfico. Supongamos que tenemos un css definido para los monitores de de computadoras de escritorio pequeas, cuya anchura es de 600 px en adelante, si quisiramos llamar a esa hoja de estilo bastara con realizar la siguiente sentencia: ?

1 2 3

<style> @import url( [Link] ) screen and ( min-width: 600px ); </style>

Hay que tener en cuenta que tambin podemos agregar reglas mediante la aplicacin de una coma, al igual que se hace al utilizar varios selectores.

Enlace a una hoja de estilo

Si no queremos importar en la hoja de estilo podemos incluir la hoja directamente en el cdigo HTML para eso hacemos el llamado mediante la etiqueta link estableciendo el atributo media para especificar el formato y la anchura. ?

<link rel="stylesheet" media="screen and (min-width: 600px)" href="escritorioPequen

Rastreando un dispositivo especfico

Finalmente si lo que deseas es rastrear por dispositivo puedes usar la propiedad maxdevice-width. Esto te permite llamar hojas de estilo que hayan sido hechas con la nica finalidad de que la pgina se despliegue bien en otra clase de dispositivo. Por ejemplo, si quisieramos mandar llamar una hoja de estilo para desplegar correctamente la pgina en un iPhone haramos una llamada como la siguiente: ?

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="disp

Crear botones con propiedades CSS3

Resumen: En este artculo prcticamos la estilizacin de botones con CSS3, utilizando gradientes, sombras y bordes
Cubrir los conceptos bsicos de un tema es fundamental en cualquier mbito donde nos desarrollemos, gracias a esto podremos establecer las bases necesarias para el correcto aprendizaje, lo que nos permitir lograr un buen enfoque y una mejor comprensin de temas ms complejos. Uno de estos temas considerados por varios como elementales al momento de empezar a disear mediante CSS, es la elaboracin y estilizacin de elementos de un formulario, como lo es el caso de los botones los cuales siempre hacen resaltar o en otros casos deslucir el ambiente de una pgina.

Cmo se hacan botones antes de CSS3?

En el pasado era de lo ms comn tener que recurrir a programas de edicin de imgenes para poder lograr un buen efecto en nuestros botones. El sombreado, las fuentes estilizadas y el aspecto tridimensional tena que ser aplicado mediante las herramientas que nos proporcionaba Photoshop, Corel Draw o algn otro programa de diseo que

tenamos a la mano, y una vez concluida la imagen debamos complementar con trabajo en HTML y CSS. Para el caso de CSS se tena que hacer uso de pseudo selectores, particularmente para captar los eventos de colocacin del mouse y activacin del botn lo que permita cambiar la imagen de fondo o modificar su posicin, para as dar un efecto de aplastado al botn. Al principio puede parecer fcil crear tres o cuatro imgenes distintas para un slo botn pero cuando cuentas con varios elementos del mismo tipo que tienen distintos estilos, la cosa se complica, por lo que se empez a optar por tener una sola imagen para cada botn y en esa misma imagen tener representado cada uno de los eventos. El tener una sola imagen de fondo representaba un menor tiempo de descarga de la pgina y agilizaba el desempeo del sitio, es por ello que era muy comn encontrar en nuestras hojas de estilos sentencias como: ?

1 2 3 4 5 6 7 8 9 10

[Link]{ background: url("[Link]"); } [Link]:hover, [Link]:focus{ background-position: 0 -124px; }

[Link]:active{ background-position: 0 -248px; }

Las cuales mediante la propiedad background-position y con valores negativos se encargaban de mover la imagen que se mostraba como fondo de nuestro botn. Si bien esto vino a simplificar y reducir el tiempo de carga de la pgina, an as tenamos que crear de una a tres imgenes por cada botn o por cada estilo con el que contaba la pgina, esto representaba tiempo y la necesidad de tener conocimiento en algn programa de diseo para poder utilizarlo. Pero todo esto quedo en el olvido al momento de que CSS3 implement todos los efectos necesarios para llevar a cabo esta clase de ediciones, y ahora el diseo de botones CSS3 se puede hacer directamente en nuestro cdigo.

Diseo de botones con CSS3

El uso de gradientes, sombras, bordes redondeados y transiciones de manera combinada mediante CSS nos permite crear botones con estilos a granel. La poca dependencia de esta manera de desarrollo hace que el diseador se sienta ms libre y pueda experimentar con distintos colores en el mismo cdigo fuente de la pgina. En este artculo realizaremos un ejemplo de botn basado en los tpicos estilos que vamos a encontrar en casi cualquier sitio web. Utilizaremos un div contenedor con un elemento de tipo link que funcionar como tablet, a dicho elemento le aplicaremos bordes, gradientes y sombreado para dar un aspecto tridimensional. El texto del botn tambin ser editado mediante CSS y lucir con sombras para dar un efecto de profundidad.

Estructura HTML del boton

Nuestra estructura HTML tal y como fue descrita anteriormente, quedara de la siguiente manera: ?

1 2 3

<div id="contenedor"> <a href="#" class="btnAzul">Da Click</a> </div>

Como se puede apreciar es una estructura bastante simple y lo fundamental de ella es elemento de anclaje, el cual recibe una clase a la que hemos llamado btnAzul y ser la encargada de recibir todos los efectos mediante CSS.

Estilos CSS3 para el botn

Nuestro cdigo CSS comenzar con algunos estilos bsicos de configuracin lo que nos permitir apreciar mejor el elemento. ?

1 2 3 4 5

[Link] { display: block; width: 250px; height: 60px; padding: 25px 0 0 0;

6 7
}

margin: 0 auto;

Un elemento de anclaje es por defecto de tipo inline ya que son utilizados para mostrar y representar links, en nuestro caso queremos un tablet por lo que se vuelve necesario cambiar el tipo de display a tipo bloque y para ello declaramos la sentencia display: block. Esto permitir que especifiquemos un ancho y una altura para el elemento, para finalmente agregar un padding en la parte superior para separar el texto del borde y el margen auto se encargar de centrar dicho texto. Despus de establecer el elemento base, pasamos a darle formato y edicin. ?

1
[Link] {

2
display: block;

3 4 5 6 7 8 9 10 11 12 13 14

width: 250px; height: 60px; padding: 25px 0 0 0; margin: 0 auto;

background: #4682B4; background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87C

box-shadow: inset 0px 0px 6px #fff; -webkit-box-shadow: inset 0px 0px 6px #fff; border: 1px solid #62C2F9; border-radius: 10px;

15 16

La propiedad box-shadow nos servir para darle un efecto de resplandor interno, muy parecido al que se puede dar con Photoshop. Al agregar la propiedad inset hace que la sombra se coloque al interior del elemento, contrario al comportamiento natural de la propiedad que agrega el efecto en el exterior.

En esta ocasin no vamos a utilizar los parmetros de offset en ninguno de los ejes de la sombra, pero si utilizaremos la propiedad blur para agregar un tipo de borrando y suavizar el efecto de flujo. A esto adicionamos un borde simple de 1 pxel de ancho y las esquinas se redondean mediante la propiedad border-radius. Despus de tener establecido el estilo para el fondo de nuestro botn, pasamos a establecer el estilo del texto. ?

1 2 3 4 5 6 7 8 9 10 11

[Link] { display: block; width: 250px; height: 60px; padding: 25px 0 0 0; margin: 0 auto;

background: #4682B4; background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87C

box-shadow: inset 0px 0px 6px #fff;

12 13 14 15 16 17 18 19 20 21
}

-webkit-box-shadow: inset 0px 0px 6px #fff; border: 1px solid #62C2F9; border-radius: 10px;

font: bold 25px Helvetica, Sans-Serif; text-align: center; text-transform: uppercase; text-decoration: none; color: #3090C7; text-shadow: 0px 1px 2px #62C2F9;

22

23
Establecemos el tipo de fuente, su tamao, lo alineamos al centro del elemento, transformamos todas las letras a maysculas para darle uniformidad, quitamos todo tipo de decoracin, definimos su color y finalmente establecemos un sombreado para darle un efecto de insercin. Lo que hacemos con la propiedad text-shadow es bsicamente darle 1 pxel de offset en el eje Y y crear un blur de 2 pxeles. El resultado final:

Y aqu el ejemplo funcionando: Botones con CSS3 Con esto se logra obtener un botn de diseo sencillo pero que atrae, a partir de aqu podemos utilizar pseudo selectores si queremos y hacer uso de estos mismos efectos para disear el botn cuando el mouse se posicione sobre l o le de click.

Pseudo elementos CSS :before y :after

Resumen: En este artculo damos a conocer los aspectos generales sobre el uso de los pseudo elementos ":before" y ":after", as como su implementacin en CSS.
Si tu eres de las personas que comnmente visita sitios de enseanza y artculos sobre diseo web, quizs hayas notado que ltimamente se han elaborado muchos tutoriales que manejan la creacin de imgenes y diseos CSS mediante el uso de los pseudo elementos :before y :after. El reciente enfoque que se ha dado a esta temtica quizs se ha producido por la flexibilidad de estos elementos y la capacidad de creacin que nos ofrecen. Si bien el uso de pseudo elementos, no es algo recien inventado, su potencial no haba sido totalmente exprimido hasta hace poco, y esta experimentacin con ellos ha hecho que su exposicin sea mayor en estos das. A lo largo de este artculo trataremos de dar a conocer y ensear los aspectos generales sobre como utilizar dichos pseudo elementos, para que con esta informacin y conocimiento tengan una mejor idea de como se lograron todas esas cosas geniales que se muestran en los tutoriales.

Funcin de un pseudo elemento CSS

Primero que nada tenemos que aclarar que :before y :after no son los nicos pseudo elementos que existen, la lista completa abarca a :first-letter, :first-line, :before, :after y ::selection, pero como en esta ocasin nos estamos enfocado nicamente a los dos ya mencionados, cada vez que nos refiramos con el termino pseudo elemento nos enfocaremos a :after y :before. La funcin de un pseudo elemento es sencilla, bsicamente es hacer lo que su nombre indica, crear un elemento falso para insertarlo antes o despus del contenido del elemento al que se ha orientado. La creacin de estos elementos no cambia nada en el documento, slo se incluyen para obtener cambios que sean visibles para el usuario. Dichos elementos nuevos son capaces de recibir unestilo CSS por lo que fueron aprovechados para hacer trazos sobre los elementos del sitio.

Codificacin de los pseudo elementos CSS

La codificacin de los pseudo elementos es bastante sencilla de realizar, basta con recordar dos sencillos aspectos para crearlos de manera correcta. Primero debemos crear un selector que indique a que elemento le vamos a crear pseudo elementos, es decir tenemos que definir en que parte del documento se aadirn los elementos falsos que utilizaremos. Por ejemplo si quisieramos crear un pseudo elemento que se encuentre antes de un div identificado como icono entonces la sintaxis de mi selector quedara as#icono:before. Si omitimos darle un elemento antes de llamar a :after o :before, la sentencia funcionar pero no nos servir de mucho, al menos de que desees que se inserte algn tipo de contenido antes o despus de cada elemento que compone el DOM de tu sitio. El segundo aspecto a considerar es la propiedad content, toda declaracin de pseudo elemento debe tener dicha propiedad CSS si quiere que su creacin surja efecto, ya que sin ella no podremos insertar nada en los pseudo elementos que se crearon. En pocas palabrascontent, como su nombre lo indica, es la encargada de portar el nuevo contenido. Se puede presentar el caso en que no se necesite contenido, en estas ocasiones puedes utilizar la propiedad content vaca, pero por ningn motivo la debes de quitar. Este caso se puede presentar cuando utilizamos cajas vacas a las que nicamente agregamos estilos. Una vez analizados estos dos aspectos, podemos definir que nuestra sintaxis bsica quedar de esta manera: ?

1 2 3 4 5 6 7

#icono:before { content: "Hola"; }

#icono:after { content: "Mundo"; }

Con este cdigo insertaremos un Hola antes del div icono y un Mundo despus.

Contenido insertido
El contenido que se inserta mediante pseudo elementos nicamente ser visible en el cdigo CSS y por defecto este se inserta con un estilo inline, es por ello que si queremos mostrar el contenido de manera correcta muchas veces tenemos que recurrir a propiedades CSS. El uso de la propiedad display con un valor de block es muy comn al momento de manejar pseudo elementos, esta propiedad nos permite mostrar al elemento con un bloque y darle una altura y anchura personalizada.

Colocacin del contenido

Quizs si tomamos un concepto muy literal de lo que significa cada pseudo elemento, nuestra mente imagine que el contenido agregado se colocar arriba y abajo del elemento definido por el selector, esto es comn de pensar pues nosotros examinamos a una pgina web como algo plano bidimensional donde el antes significa arriba y el despus significa abajo. Pero en esta ocasin, con el manejo de pseudo elementos, tenemos que imaginar a estas nuevas partes como hijos del elemento que se indico en el selector. Hijos cuyo contenido ser insertado antes o despus del contenido propio del elemento padre.

Tipos de Contenido
Como ya se pudo apreciar en el ejemplo que se dio anteriormente el contenido puede ser de tipo texto, pero qu hay de otros tipos, qu tenemos que hacer para insertar por ejemplo una imagen, es bsicamente lo mismo slo con pequeas diferencias. Si queremos plasmar una imagen en un pseudo elemento creado antes de un prrafo haramos algo como esto:

1 2 3

p:before { content: url([Link]); }

Como se puede apreciar nicamente cambiamos el valor de la propiedad content por una URL de imagen y removimos las comillas para que no se piense que es una cadena de texto.

Soporte en navegadores
Como punto final para este artculo quiero mencionar que los pseudo elementos son soportados en la actualidad por casi todos los navegadores, Chrome a partir de sus versin 2, Firefox a partir de su versin 3, Safari desde la 1.3, Opera 9.2 en adelante e Internet Explorer desde su versin 8 aunque con algunos bugs.

El mal uso de etiquetas HTML

Resumen: Veremos algunas de las etiquetas que comnmente son utilizadas de manera incorrecta, tratando de especificar en que fallamos y de que manera podemos usarlas correctamente.
Es comn que por factores como la costumbre que nos fue heredada por nuestros predecesores o el uso comn que se les da en la programacin informal, hayamos utilizadoetiquetas HTML de manera errnea en ms de un caso y durante mucho tiempo. Al ver el cdigo fuente de varias pginas podemos apreciar a menudo los mismos errores que aparecen una y otra vez, estos errores suelen ser producidos por los hbitos que recogimos durante nuestros primeros das en el mundo de la codificacin o por la falta de esclarecimiento sobre la verdadera funcin de cada etiqueta. En este artculo veremos algunas de las etiquetas que comnmente son utilizadas de manera incorrecta, tratando de especificar en que fallamos y de que manera podemos usarlas correctamente.

Etiqueta br
Es muy probable que esta etiqueta haya estado a tu lado casi desde el da en que te iniciaste como programador web, es una de las etiquetas de uso ms comn al momento de codificar y por lo tanto una de las que ms reciben un mal uso; y es que basta con

recordar que fue hasta la aparicin de CSS cuando dejamos de usarla para hacer prcticamente todo lo referente a espacios entre dos bloques de elementos. Esta etiqueta no se debe de utilizar para crear espacios vacos en tus documentos o contenido, su funcin es nicamente dar un salto de lnea en una oracin. Si lo que deseas es tener espacio entre un elemento y otro entonces la etiqueta para eso es p, que nos ayuda a crear prrafos, y podemos complementarlo con la adicin de mrgenes mediante CSS, lo que nos permitir determinar la distancia entre los elementos. Un claro ejemplo del mal uso de esta etiqueta se puede observar al utilizar editores del tipoWYSIWYG (What You See Is What You Get Lo que ves es lo que obtienes), estos programas se encargan de maquetar el sitio utilizando estas etiquetas y prrafos vacos para recrear el diseo que tu hiciste, es por ello que es bastante recomendable mantenerte alejado de esta clase de editores.

Etiqueta div
Esta etiqueta quizs no ha estado dentro de tu repertorio durante tanto tiempo como la etiqueta br, pero sin duda se ha convertido en una de las ms utilizadas en los ltimos aos. La etiqueta div vino a cambiar la manera en que disebamos la estructura de nuestras pginas, permitiendo establecer capas y niveles con los cuales, mediante el apoyo de CSS, podamos adaptar nuestro sitio. Pero la fascinacin por su uso termin llevando a ms de uno a la rutina, su implementacin se fue haciendo ms comn y para situaciones donde realmente no debera de usarse, hay sitios que basan prcticamente toda su estructura de elementos en divs, incluso para mostrar elementos de texto o imagen, esto est totalmente mal. No tenemos que rodear todos los elementos de un sitio con un div, quien te diga lo contrario esta mintiendo, no existe ninguna estandarizacin que nos obligue a ello, ni mucho menos utilizarlos en lugar de etiquetas cuya funcin especifica es la que estamos haciendo, como mostrar una imagen. Es perfectamente aceptable utilizar la etiqueta div para definir la estructura de la pgina, pero siempre tratando de hacer uso de etiquetas ms adecuadas y especializadas para los elementos de tu pgina, etiquetas como el prrafo y las listas pueden ser una opcin mucho ms semnticamente correcta.

Etiqueta title
Una etiqueta fundamental en cualquier estructura de cdigo HTML es title, su funcin es bsica para el sitio ya que sin ella nuestra pgina no tendra un ttulo que indique de que trata el contenido que estamos por ver, el problema es que su uso se ha venido degradando ltimamente para convertirla en una etiqueta ms de meta-data y con funciones de SEO.

No estamos en contra del SEO para nada, pero si queremos hacer un uso adecuado de etiquetas debemos respetar su funcin. En el caso de title su funcin es muy sencilla, se encargar de mostrar una descripcin concisa del contenido de la pgina, donde ser importante incluir palabras clave relacionadas, lo que permitir a la pgina ser reconocida por los motores de bsqueda, pero no debemos abusar de esto. Es comn caer en extremos al momento de utilizar esta etiqueta, o simplemente no ponemos nada importante en ella o la llenamos de informacin que realmente no tiene cabida en ella. Debemos evitar estos dos extremos y utilizar las etiquetas meta para esta clase de informacin.

Etiqueta img
El problema con la etiqueta img es utilizarla demasiado, no uses imgenes para casos donde realmente no se requiera, no tienes que convertir todo en imgenes recuerda que esto es malo para que la pgina pueda ser analizada por motores de bsqueda, en esta nueva era donde el contenido lo es todo es muy importante no encapsular tu informacin en imgenes. A veces incluso se cometen errores al utilizar algunos de sus atributos, como el caso de alt, cuya funcin es contener una descripcin precisa de la imagen, sin embargo la mayor parte del tiempo tiene texto irrelevante.

Etiqueta small
Esta etiqueta quizs no es tan popular como el resto, pero se ha mantenido durante varias versiones del lenguaje y es importante definir su funcin. Con ella nos encargamos de definir eltexto catalogado como Smallprint, es decir todo aquel que hable de condiciones de uso o marcos legales. Generalmente los desarrolladores cometen el error de utilizarla para definir el tamao de un texto, cuando quieren que este se vea pequeo, pero para eso se debe definir un tamao mediante CSS no utilizando esta etiqueta.

Conclusin
Existen muchos casos de etiquetas que son utilizadas de manera errnea, muchos pueden abogar por el caso diciendo que lo que importa al final es el producto, pero No te sentiras mejor si tu producto ofrecera tambin calidad en el cdigo?, para qu utilizar etiquetas en algo que no es su funcin si ya existe otra que si fue hecha para eso. No nos olvidemos de investigar antes de actuar, si tenemos una duda sobre la funcin de una etiqueta o queremos saber si la que estamos usando para una tarea es la correcta, debemos sentarnos y leer un poco antes de codificar. Se que suena a ms trabajo pero al final es la nica forma de eliminar esos malos hbitos que hemos adquirido con el tiempo.

Hacer tablas con HTML y CSS

Resumen: Estudiamos cmo hacer tablas en HTML y darles estilo mediante el uso de propiedades CSS.
Debemos admitir que la mayor parte del tiempo que utilizamos las palabras CSS y Tablas en una misma oracin es para demeritar a esta estructura y mostrar los beneficios de utilizar estilos en su lugar al momento de llevar acabo la maquetacin de nuestro sitio, pero en esta ocasin nos encargaremos de plantear una alternativa que nos permitir combinar estos dos elementos, es decir tener una estructura de tabla formada utilizando CSS. El desuso de las tablas como herramienta de diseo se ha venido promoviendo desde hace aos, diseadores y desarrolladores han decidi no seguir utilizando esta clase de estructura por el simple hecho de no respetar los estndares, pero Esto cambia si utilizamos CSS?, y si es as Cundo es que debemos utilizar dichas tablas CSS?.

Creacin de tablas CSS

Tenemos que aclarar que el modelo que utilizaremos para crear tablas con CSS est basado en la manera que HTML4 crea dichas estructuras. Este modelo cuenta con soporte en una gran cantidad de navegadores, pudindose utilizar en cualquiera de los navegadores actuales. Si trabajaste con tablas anteriormente no te costar ningn problema empezar a desarrollarlas con CSS, ambos modelos son muy parecidos, las filas siguen siendo el elemento primario, se especifican de forma explcita y las columnas se dereivan de la forma en que las filas y celdas se establezcan. Cada elemento de la tabla HTML tiene un valor equivalente en la propiedad display de CSS. La nica diferencia real es que no hay distincin entre td y th. A continuacin mostramos los elementos de una tabla HTML y su correspondiente valor de display en CSS.

&lt;br /&gt;table { display: table }&lt;br /&gt;tr { display: table-row }& group }&lt;br /&gt;tfoot { display: table-footer-group }&lt;br /&gt;col { di 1 th { display: table-cell }&lt;br /&gt;caption { display: table-caption }&lt;br /&gt

Tambin podemos hacer cambios de posicin, como los ttulos caption que se pueden colocar encima o debajo de la tabla utilizando la propiedad caption-side, los valores pueden sertop o bottom segn la posicin que deseas. Conociendo esto y con la experiencia que tuvimos anteriormente con estas estructuras, ya no nos debe resultar difcil establecer nuestra primera tabla con CSS, para ello plantemos un cdigo HTML como el siguiente:

&lt;br /&gt;&amp;lt;div id="tabla"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; &am class="celda" id="celdaA1"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPA /&gt;&lt;%%KEEPWHITESPACE%%&gt; &amp;lt;/div&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE /&gt;&lt;%%KEEPWHITESPACE%%&gt; &amp;lt;span class="celda" id="celdaB1"&amp;gt;&am 1 id="celdaB2"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; &amp id="fila3"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt; &amp;lt;span class="celda /&gt;&lt;%%KEEPWHITESPACE%%&gt; &amp;lt;span class="celda" id="celdaC2"&amp;gt;&am /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;

Y finalmente con un estilo CSS como este:

?
1
&lt;br /&gt;#tabla {display: table;}&lt;br /&gt;.fila

{display: table-row;}&lt;b

Se establece la estructura simplemente utilizando elementos tipo div y span, sin necesidad de recurrir a etiquetas obsoletas. Simplemente con leer el cdigo anterior podemos deducir rpidamente la estructura que tendr la tabla.

Uso de las tablas CSS

Si ya tenemos la estructura y sabemos como representarla con CSS, llega el momento de definir en qu casos utilizar tablas para presentar contenido. Tal como sucede con las tablas hechas con cdigo HTML4, su uso se debe limitar a desplegar nicamente datos que realmente merezcan ser representados de manera tabular. Si decides utilizar para dar orden y posicionamiento a un sitio sabemos que existen mejores maneras as que resulta mejor ahorrarnos su uso para esto. Si su funcin es la misma, y no podemos sacarle ventaja para el posicionamiento, entoncesQu marca la diferencia con las tablas normales? Siendo honestos son pocos los casos de tablas hechas con CSS que se pueden observar a lo largo de la web, generalmente si quieres representar datos estadsticos o tabulares utilizas tablas normales y si quieres disear un sitio utilizas otras tcnicas. La ventaja por la que muchos pudieran abogar es que el CSS es un lenguaje ms sencillo para realizar cambios, que es menos rgido, pero al final en la prctica ambas estructuras lucirn igual de rgidas. Lo que si se puede considerar una ventaja, es el hecho de que escribir algo ms semnticamente aceptado en estos das, ya que estamos utilizando elementos que describen mejor el contenido que estamos exponiendo. Otra ventaja que se le puede dar es el uso de identificadores para cada celda, o cada fila y columna, de esta manera se puede hacer una mayor especificacin de los estilos que queremos para la tabla. Quizs sea difcil encontrar una verdadera razn de peso para elegir utilizar tablas CSS sobre las tablas normales, al final el desarrollador optar por aquella que le resulte ms sencillo utilizar o comprender, y que claro cumpla con los requerimientos de su proyecto. Al final tenemos que entender que las tablas CSS cumplen ms con una funcin visual, una representacin de la estructura que comnmente tenamos que utilizar a travs de la etiqueta table.

Conclusin
Las tablas CSS son muy fciles de comprender y de utilizarse, simplemente basta con recordar lapropiedad display de CSS que corresponde a cada etiqueta de la tabla que comnmente utilizamos. Existen muchas buenas funcionalidades que nos ofrecen las tablas CSS, como es el caso de la habilidad para colapsar mediante la propiedad visibility: collapse, las cuales pueden ser utilizadas como solucin para algunos problemas especficos, sin embargo no proveen de una ventaja relevante sobre sus antecesoras y actualmente existen mejores formas de lograr un orden y posicionamiento en un sitio.

A pesar de esto existe la opcin de utilizarlas, y como tal se tiene que conocer la manera de declararlas, ese fue el propsito de este artculo.

Cmo darle un uso apropiado a CSS3?

Resumen: CSS3 nos ha brindado muchas nuevas herramientas que nos permiten crear grandes efectos, pero es muy probable que les estemos dando un enfoque inadecuado, en este artculo tratamos de definir un uso correcto.
Cuando algo es de reciente creacin y es presentado o liberado ante la sociedad, la reaccin de las personas ante ello generalmente oscila entre dos extremos, enaltecer la novedad o demeritarla al compararla con lo que ya exista. En el caso de las tecnologas de la informacin, por la misma naturaleza que representan, la balanza se inclina ms por la aceptacin y rpida idolatracin de lo nuevo. Tal es el caso de los nuevos estndares que han venido a formar parte de los desarrollos web en este ltimo ao, estamos hablando de CSS3 y HTML5. En esta ocasin nos enfocaremos en CSS3, un estndar bastante emocionante que nos permite crear cosas que antes solo eran posibles de crearse a travs de un editor de imgenes, su potencial ha hecho pensar a ms de uno que los misterios de los diseadores han sido revelados y todo desarrollador tendr a su alcance el cdigo necesario para llevar a cabo una serie de efectos de manera sencilla.

Qu representa el uso de CSS3?

CSS3 propone una navegacin ms rpida, menores tiempos de respuesta producidos por una reduccin de imgenes, las cuales ya no sern requeridas para disear botones o efectos de texto. Tambin deja atrs una excesiva dependencia de JavaScript para fines de representacin visual, como lo son las animaciones, dando como resultado menos cdigo y mejor rendimiento. Representa una futura menor dependencia de software para grficos que resultan bastante caros, como es el caso de Photoshop, Illustrator o Corel, que si bien seguirn siendo tiles su funcin se enfocar a efectos o ediciones ms avanzadas. A pesar de todo esto, al parecer CSS3 no representa un cambio en el esquema del diseo visual, an se tratar con los mismos usuarios, el mismo contenido y la misma filosofa de diseo, es por ello que se debe tener cuidado con la manera en que lo utilizamos.

Las nuevas capacidades que nos ofrece CSS3 deben ser tratadas igual que cualquier otra tecnologa web con la que hemos trabajados, es decir siempre debemos preocuparnos por dar apoyo y crear un diseado centrado en el usuario, siempre respetando el objetivo y los propsitos de nuestro sitio. Si CSS3 salta esta regla, entonces se convertir en un elemento que limite nuestro proceso de produccin.

CSS3 no cambia al diseo

Si bien CSS3 representa una simplificacin de procesos, en lo que se refiere a los principios bsicos del diseo y las prcticas para lograr una mejor presentacin visual nada ha sido alterado, an cuando se nos han dado efectos de transicin muy elegante y de fantasa. Todas ests son herramientas superficiales del diseo web, e incluso ya las tenamos desde antes de CSS3. Desde la perspectiva ms importante, la del usuario, las nuevas propiedades estticas de CSS3 influyen menos, ya que la mayora de las persona que navegan por nuestros sitios no notarn la diferencia entre un efecto de colores sutil o uno rudimentario, al menos de que influya en su experiencia durante su estada en el sitio o claro que el usuario sea otro diseador o desarrollador web. El verdadero cambio de paradigma viene en la nueva forma de abordar y llevar a cabo nuestro proceso de diseo de pginas web. En la actualidad, con CSS3 tenemos la facilidad de producir diseos ms flexibles que permiten optimizar la experiencia del usuario, el uso de herramientas como las consultas de medios media queries) permiten mejorar el rendimiento y la visualizacin en base al dispositivo de navegacin que utilice el usuario y con esto se introducen un gran nmero de nuevos conceptos a nuestra tradicional metodologa de construccin de sitios. Con los nuevos selectores CSS3, tenemos una capacidad de envolver de manera ms fcil y sencilla los elementos HTML para poder realizar efectos de animacin sin el uso de JavaScript o algn framework como jQuery. Tenemos que tener claro que CSS3 no es slo sombras y gradientes difuminados que hacen ver genial nuestro texto, eso es slo la superficie, el nivel del tope. Su uso se debe de plantear para tratar de mejorar la experiencia del usuario y ser capaz de producir mejores sitios de una manera ms eficiente.

Uso adecuado de CSS3

Si bien CSS3 nos ha brindado nuevas herramientas y propiedades, esta en nosotros el poder darles el uso adecuado y lograr una mejor usabilidad a nuestros sitios, creando mejor interacciones. No debemos caer en concentrar nuestra atencin nicamente en las nuevas caractersticas superficiales, cuando decidamos utilizar CSS3 en nuestro trabajo, debemos siempre tener en cuenta que la funcin es ms importante que la forma.

Siempre debemos tener como regla general el usar CSS3 nicamente cuando exista una buena razn para hacerlo, no queremos sacrificar la visualizacin del sitio en navegadores antiguos nada ms por un capricho, y si ya te decidiste a usarlo no lo hagas en exceso, piensa bien donde aplicars cada efecto y no lo uses como si no hubiera un maana, recuerda que no todo se lleva bien con una sombra o un gradiente, ya que puede afectar la legibilidad o la visualizacin de un elemento. Tenemos que poner la usabilidad, la accesibilidad y la experiencia del usuario como la prioridad mxima del diseo, todo lo dems resultar secundario y en base a esto se deben de plantear los objetivos. Es por esto que debemos tener planes para asegurar una buena visualizacin, si bien CSS3 no es soportado por navegadores antiguos, existen alternativas que nos permitirn lograr una buena experiencia para ese tipo de usuarios, como por ejemplo el uso de transparencias con imgenes PNG, o crear los gradientes y sombras mediante algn editor, as cuando nuestro cdigo detecte que el navegador no soporta CSS3 entrar el plan emergente a cubrir esos huecos con imgenes. Con el uso de CSS3 se debe lograr tener un apoyo, que nos permita llegar a una buena usabilidad y accesibilidad, nos debe permitir mejorar el rendimiento y acelerar el desarrollo de los sitios web. Si no conseguimos ninguno de estos tres factores, entonces CSS3 realmente no es la herramienta adecuada para nuestro proyecto.

Tips de maquetacin web con CSS y CSS3

Resumen: Vemos algunos consejos para maquetar webs hoy en da, intentando agilizar la forma de maquetar las pginas web por medio de las nuevas caractersticas de CSS3.
CSS, junto con HTML, es la herramienta bsica para la maquetacin de pginas web. Sus capacidades para manejar los elementos artsticos y de formato permiten hacer mejores diseo web de una manera simple y eficiente. Y con la llegada de CSS3 el campo de posibilidades se ampla an ms, haciendo la maquetacin ms flexible y optimizada, puesto que muchas veces nos ahorramos el uso de imgenes para efectos como degradados, sombras o bordes redondeados. Tu habilidad para manejar con propiedad estas hojas de estilo en cascada puede crear la gran diferencia entre un sitio normal y uno con el toque experto de creatividad que atrae al visitante. Desde que se cre CSS como la herramienta que iba a facilitar la tarea al diseador, se sospechaba que su crecimiento no iba a tener lmites. Es as que ya est vigente CSS3,

con novedades que hacen todava ms accesible la presentacin elegante y profesional de tus pginas. Prcticamente, no hay excusas. Todo depende de tu imaginacin.

Usa modelos de calidad

Si navegas con frecuencia por los sitios que presentan las mejores pginas de la red, te encontrars con diseos web sorprendentes. Por supuesto que los contenidos suelen ser similares en medios equivalentes. Por ejemplo, las noticias del da son las mismas en una gran cantidad de pginas informativas. La diferencia radica en la forma de presentar esas noticias. El balance de colores, la distribucin de los bloques de informacin, la presencia de imgenes ilustrativas en cantidad y ubicacin justas, equilibran el conjunto y lo transforman en un espacio que da placer a los sentidos. Claro, detrs de todo esto estn las hojas de estilo en cascada o CSS. Como diseador web, es siempre bueno revisar en profundidad ese excelente material. Nada te impide analizar los detalles, los elementos que cada diseador utiliz, reproducirlos en tus propios proyectos y ver los resultados. De estos modelos de calidad puedes aprender mucho, combinar los efectos ms interesantes y lograr as resultados propios, originales y de excelencia.

Diseo web con CSS: el clsico posicionamiento de capas

El conocimiento profundo de las hojas de estilo es elemental si deseas obtener los mejores resultados de tu diseo. Varios aspectos de CSS son fundamentales para lograrlo. Uno de ellos es el posicionamiento de las divisiones en la pgina. La propiedad position te asiste en esta tarea: ?

#div-01 {position: static;}

Static es slo necesaria para anular un posicionamiento anterior, ya que static equivale al flujo normal de los objetos sobre la pgina. ?

#div-01 {position: relative; top: 20; right: 20;}

Relative establece una posicin relativa al elemento anterior y debe ir acompaada de palabras de ubicacin, como top, bottom, right, left. ?

#div-01 {position: absolute; top: 0; left: 0;}

Absolute implica que el elemento se ubicar en la posicin exacta indicada (en este ejemplo, en la esquina superior izquierda de la pgina). ?

#div-01 {float: left; width: 200px;}

La propiedad float desplaza al objeto hacia la derecha o la izquierda, segn el parmetro elegido, con lo cual es el medio idneo para crear columnas de informacin. Se pueden realizar combinaciones de estas propiedades. Por ejemplo, una divisin con posicin absoluta en la esquina superior izquierda, puede incluir dos divisiones internas flotando a izquierda y derecha. Para ahondar todava ms en el tema del posicionamiento de objetos en la pgina, ser necesario tambin diferenciar los objetos que conforman bloques de aqullos que slo pueden seguir la secuencia natural de la pgina. Los nicos elementos que pueden adquirir la propiedad float, por ejemplo, son los que forman bloques (divisiones, imgenes, prrafos estructurados, listas). Es decir, los objetos que por defecto o porque se lo hayamos establecido, tengan la propiedad display:block.

Mejores diseos con CSS3

El concepto original de CSS fue el de separar el contenido web de su apariencia. Esto fue conseguido con cierto xito hasta el momento, aunque ciertos efectos requieren trucos o maniobras algo complicadas o confusas. La llegada del ltimo nivel de CSS, CSS3, trajo consigo una cantidad de mejoras que obvian tales trucos y los transforman en medios normales del CSS. Es necesario estudiar y aplicar estas flamantes utilidades a los nuevos diseos para obtener todo el provecho de la herramienta. Entre otras mejoras, CSS3 incorpora lo siguiente: Manejo de reas Rectangulares: Mediante simples instrucciones se pueden manejar caractersticas de los objetos rectangulares (boxes), tales como tipo y color del borde, sombras, bordes redondeados. Multiplicidad de Imgenes en Fondos: Ahora pueden ubicarse varias imgenes como fondo en un bloque (o en la pgina completa), en forma de capas, de tal forma que resulte en una combinacin de imgenes. Esto se realiza muy fcilmente con la sentencia background-image, en la cual las diferentes ilustraciones se enumeran separadas por comas. Otras mejoras de CSS3: Existen algunas otras novedades para facilitar la maquetacin, como efectos sobre el texto

(en particular sombreado y manejo del texto excedente), colores y administracin de opacidad y transparencia. A travs de la combinacin de estas novedades ms las herramientas tradicionales de CSS, los diseadores web han conseguido formidables resultados y hasta ilustraciones de gran calidad y detalle sin utilizar imgenes. Hay que probarlo.

Maquetacin web utilizando header y footer de HTML5

Resumen: En este artculo elaboramos un layout bsico centrdonos en la utilizacin de dos elementos de HTML5: header y footer.
En este artculo mostraremos una forma muy sencilla de estructurar un sitio web con un layout bastante bsico que har uso de dos elementos que son parte de la ms reciente versin de HTML. Nos estamos refiriendo al elemento header, utilizado para definir los encabezados de distintas secciones, conteniendo elementos de navegacin, logos, entre otro contenido, y el elemento footer que nos ayuda a crear un apartado donde se mostrar informacin complementaria de la seccin a la que fue agregado, generalmente utilizado para mostrar links hacia contenido relacionado y licencias de copyright. Si consideras un inconveniente el hecho de manejar las etiquetas header o footer dentro de tu layout por ser parte de HTML5, una versin no reconocida por navegadores antiguos, puedes reemplazar todas las secciones definidas por estos elementos con capas de elementos div. El layout lucir de la misma manera, la nica diferencia se ver reflejada en la semntica del sitio, tenemos que recordar que estos elementos fueron integrados en HTML5 para definir de manera exacta las partes de la interfaz donde se mostrar la informacin que contienen. El propsito de crear este layout es dividir nuestra rea principal de contenido en tres zonas distintas que son las de ms comn uso en las pginas de internet de la actualidad, utilizaremos un encabezado principal, un pie de pgina y por supuesto un cuerpo de contenido.

Header
El encabezado del sitio es la primera parte que se muestra en la interfaz de una pgina web, aunque esto no significa que necesariamente sea la primera parte del cdigo. En esta seccin encontraremos regularmente los mens de navegacin, barras de bsqueda, el logo del sitio o empresa y quizs algn login para usuarios.

Debemos aclarar que aunque el elemento header ser utilizado para definir el encabezado del sitio, esta etiqueta no fue hecha exclusivamente para esta funcin, ya que puede ser utilizada para definir el encabezado de cualquier contenedor y del contenido que en este se muestra. Con esto me refiero a que si tenemos un div dentro de nuestro contenido y esta capa tiene alguna clase de informacin, podemos darle un encabezado con esta misma etiqueta.

Footer
Esta seccin es utilizada generalmente para mostrar logos adicionales, enlaces hacia otros sitios, secciones de la pgina, mapas del sitio, informacin de derechos, licencias y copyright. De las tres secciones puede resultar la menos importante por as decirlo, aunque en realidad son muchas las pginas que manejan esta seccin dentro de sus layouts, ya que permite una navegacin ms sencilla y deja en claro, en un lugar visible, como manejas, proteges y utilizas tu contenido. Al igual que el elemento header, esta etiqueta no fue hecha exclusivamente para ser pie del sitio en general, ya que puede utilizarse para cualquier otro contenedor de informacin, aunque resulta ms comn nicamente utilizarlo en el layout general.

Definicin de las reas

Lo primero que debemos hacer, es crear el cdigo que le diga al navegador que parte de la informacin ser el englobada en el encabezado, cual ser nuestro contenido y que mostraremos en el pie de nuestra pgina, este es el patrn que observaremos con regularidad. Para ello debemos empezar con algo simple, como defnir en que parte del cdigo incluiremos la informacin disponible. Anteriormente la etiqueta utilizada para definir todas las partes de un layout era div, a estascapas se les daba algn ID o clase para distinguirlas, darles estilo y posicionarlas, de esta manera cada capa actuaba de manera independiente y podan ser colocadas en distintos lugares. Ahora HTML5 nos da la opcin de utilizar etiqueta especficas para cada seccin, la cual nos ayudar a tener mejor orden en el cdigo, facilitando el crawling, el uso de robot y mejorando el SEO de nuestras pginas, ya que el contenido se encontrar mejor organizado. Para definir las tres reas empezaremos con un cdigo bastante bsico como el siguiente, el cual ir dentro de nuestro elemento body: ?

1 2 3

<header> <!-- Aqu ir la informacin del encabezado --> </header>

4 5 6 7 8 9 10
</footer> <footer> <!-- Este ser nuestro pie de pgina --> <div id="cuerpo"> <!-- Aqu estar el contenido principal --> </div>

11
Como ya dijimos, esto es un patrn de diseo, no significa que necesariamente tengamos que tener las tres secciones en nuestro sitio, si quieres modificar esta estructura y nicamente utilizar ciertas secciones, o agregar ms puedes hacerlo.

Agregar contenido
En nuestro encabezado iremos agregando elementos que sean de uso comn, como por ejemplo un ttulo para la pgina y un men de navegacin. Para ello utilizamos la etiqueta h2 la cual nos permite definir que estamos utilizando un tipo de encabezado para escribir el ttulo, y para el men utilizaremos una lista desordenada a la cual le daremos su respectivo formato. Dicha lista deber de estar incluida en un elemento nav, el cual tambin es parte de la nueva versin de HTML, y fue creado para definir especficamente elementos de navegacin como los mens. ?

1 2 3 4

<header> <h2>Mi sitio web</h2> <nav> <h3>Navega</h3> <ul>

5 6 7 8

<li><a href="#">Seccin 1</a></li> <li><a href="#">Seccin 2</a></li> <li><a href="#">Seccin 3</a></li> <li><a href="#">Seccin 4</a></li>

9 10 11 12

</ul> </nav> </header>

Despus de tener nuestro encabezado pasamos a definir el contenido del sitio, en esta ocasin utilizaremos texto de prueba para simular una entrada de blog. En este caso utilizaremos un elemento div para definir la seccin, no debemos tener miedo en usarlo ya que para esto fueron hechos, simplemente ahora contamos con etiquetas ms especializadas, pero los div siguen siendo los elementos ms utilizados dentro de nuestro layout. ?
<div id="cuerpo">

1 2

<h2>Entrada</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum tempus l luctus et ultrices posuere cubilia Curae; Morbi in lorem sapien. Pellentesque tempor 3eros, in accumsan diam rutrum vel. Phasellus et tellus in arcu faucibus placerat vita amet mattis mauris adipiscing. Donec non lorem tortor. Sed arcu nulla, tincidunt sed 4bibendum ipsum vel mi imperdiet quis ornare orci imperdiet. Nam vulputate scelerisque </div>

Y finalmente nuestro footer: ?

1 2 3

<footer> Todos los derechos reservados 2012, Mi sitio web. Diseado por: xxxxx. </footer>

Estilo
Una vez que tenemos la estructura y su contenido pasamos a dar estilo con CSS, lo que permitir mostrar las secciones de manera adecuada, empezaremos con el encabezado. La lista ser el principal elemento a editar, debemos agregar un estilo inline que permita mostrar los elementos en una sola lnea como men, de igual forma podemos agregar cualquier estilo que deseemos a nuestro encabezado utilizando header como selector, aunque recuerda que esto tambin se aplicar si utilizas esta etiqueta en alguna otra parte del cdigo, por lo que puedes utilizar un ID o un selector ms avanzado. ?

1
ul{

2 3 4 5 6 7 8 9 10 11 12

padding-left:0; }

li{ list-style: none; display: inline; padding-right: 10px; }

body > header{ background: #333; }

13
Lo que hicimos con el selector del header fue nicamente aplicar el estilo al header que es hijo directo de body, esto quiere decir que solamente se aplicar al header que definimos como encabezado de pgina. Si no ests muy relacionado con CSS no te preocupes esto ser lo ms avanzado en relacin en este tema por el momento, en un selector podemos utilizar el smbolo mayor que (>) para agregar especificidad y seleccionar hijos directos de un elemento padre, en este caso body es el padre de header y en caso de que CSS no encuentre ningn hijo directo con esa etiqueta el estilo simplemente no se aplica. Ahora apliquemos al resto del sitio dos colores distintos para distinguir cada parte: ?

1 2 3 4 5 6 7

#contenido{ background: #CCC; }

body > footer{ background: #666; }

8 9 10 11

body{ color: #FFF; }

Obviamente no estoy sugiriendo que utilices esta combinacin de colores en tu sitio, simplemente estamos probando un punto y dando forma a un layout bsico, lo que nos permitir identificar claramente cada parte del sitio.

Factores relevantes sobre el uso de floats en el layout

Resumen: En este artculo explicamos los puntos ms importantes a tener en consideracin para lograr un uso correcto de la propiedad float al momento de aplicarse a los elementos que forman parte en nuestro layout.
Durante muchos aos, el uso de la propiedad float para el posicionamiento de elementos dentro de un layout, ha representado uno de los mayores retos y dolores de cabeza para los diseadores web que se han aventurado a utilizarla sin tener conocimiento exacto de su funcionamiento o correcta implementacin. Y no es para menos, puesto que float es uno de los conceptos menos aprehensibles por la intuicin y cuando esta propiedad es utilizada generalmente obtenemos como resultado algo que no esperbamos. Al utilizar elementos posicionados mediante float de manera incorrecta, estos pueden causar grandes problemas de visibilidad y usabilidad a nuestros sitios, rompiendo muchas veces con el layout disponible y haciendo que trabajemos el doble con tal de lograr un comportamiento ms o menos deseable. Es por ello muchos diseadores prefieren llegar al extremo de evitar completamente su uso, omitiendo el hecho de que los layouts realizados mediante elementos flotantes son uno de los ms adecuados a los estndares. El problema no radica en la propiedad en si, lo hace en la forma en que sta es interpretada por los desarrolladores, diseadores y alguno que otro navegador. Por esta malinterpretacin, su concepto es considerado algo tan escasamente intuitivo; sin embargo, si echamos un vistazo a su teora y documentacin veremos que no es algo realmente tan complejo como parece, ya que la mayora de los problemas y bugs son producidos por versiones antiguas de navegadores, en su mayora de Internet Explorer.

Puntos importantes sobre los elementos flotantes

Para encontrar la razn por la que se dio el nacimiento de la propiedad float en CSS, nos tendramos que remontar mucho tiempo atrs en la historia del Internet, al punto donde los desarrolladores web buscaron obtener la habilidad para mostrar un texto alrededor de las imgenes que se desplegaban en los navegadores. Dicha prctica llego a ser implementada a partir de Netscape 1.1 y tiempo despus fue aadida al nuevo lenguaje de estilo al cual se le dio el nombre de CSS.

El trmino float fue utilizado para describir la manera en que el elemento flota de un lado a otro, de arriba hacia abajo, al momento de poseer esta propiedad y sin necesidad de aplicar algo ms que intervenga en su posicin. Si bien su funcin se describe desde las primeras mejoras que se hicieron a la versin 2 del lenguaje HTML, fue hasta su implementacin en CSS cuando empez a tener un reconocimiento pblico y a la par de esto empezaron a surgir la mayora de las malinterpretaciones de la propiedad.

Una capa o caja que reciba la propiedad float tendr un comportamiento especial, distinto al del resto de los elementos que son posicionados con otros mtodos, puesto que al principio el elemento que cuente con esta propiedad si se posiciona como parte del flujo normal, pero en cierto punto se saca del flujo y se desplaza hacia la izquierda o derecha de nuestra pgina retirndose lo ms posible. Cuando un elemento es retirado del flujo normal, todo el contenido que se encuentra dentro de ese flujo tiende a ignorar a dicho elemento por completo y por lo tanto no hace espacio para que sea ocupado por ste.

Al momento de asignarle la propiedad float, el elemento se convierte en un bloque, en una caja la cual puede variar su posicin oscilando de izquierda a derecha dependiendo del valor que reciba la propiedad. Las opciones en el marcado seran bsicamente tres,float: left, float right o float: none, para dar un alineado a la izquierda, derecha o simplemente no dar la propiedad. Tenemos que recordar siempre dar un ancho a los elementos que reciban la propiedad, este debe ser especificado mediante la propiedad width, ya que en caso de no contar con esta medida los resultados al momento de aplicar float pueden resultar poco predecibles. Esta regla se puede romper en caso de que apliquemos la propiedad a una imagen que ya tiene un ancho implcito, pero si un elemento float no tiene un ancho explcito o implcito en sus propiedades, ocupar todo su bloque contenedor de manera horizontal, imitando el comportamiento de los elementos no flotantes y no dejando la posibilidad de que el resto del contenido lo rodee.

A diferencia de las cajas en el flujo normal, los mrgenes verticales de una caja flotante no se contraen con los mrgenes de las cajas que se encuentran encima o debajo de ella. Adems, una caja flotante puede superponer otras cajas a nivel de bloque adyacentes a ella en el flujo normal.

Un elemento flotante siempre ocupar un lugar al extremo izquierdo o derecho del elemento que lo contiene, no existe tal costa como un float centrado, algo que puede ser difcil de entender si vas empezando con el diseo web, pero fcil de recordar conforme avanzas en la prctica.

Cuando hacemos flotar un elemento este se coloca hasta el extremo borde de la direccin que indicamos, ya sea derecha o izquierda, si despus de esto hacemos flotar otro elemento y lo mandamos a la misma direccin, este se va a desplazar hasta que alcance el borde del primer elemento flotante. Si seguimos flotando elemento en la misma direccin estos se irn acumulando hasta que no haya suficiente espacio, cuando esto ocurre se empezaran a desplazar hacia abajo del layout hasta que todos quepan.

Al momento de utilizar la propiedad tenemos que estar concientes de que la posicin vertical del elemento ser la que comnmente ocupara si estuviera dentro del flujo normal, mientras que la posicin horizontal depender de la caja contenedora del elemento, si no esta dentro de ninguna otra capa o caja, entonces la ventana el cuerpo de nuestro documento ser su lmite.

Todas las cajas que sean creadas antes o despus del elemento flotante, fluirn verticalmente de manera normal como si el elemento no existiera. Sin embargo, aquellas cajas que sean creadas al lado de la flotante sern acortadas con fin de dar espacio para que sta se muestre. Si queremos elaborar un layout utilizando nicamente elementos de tipo div con la propiedad float: left, estos se alinearn uno tras otro formando columnas. Si al final de este layout quisiramos agregar un footer o una caja que abarque de manera completa la pantalla, basta con aplicar la propiedad clear: both a dicho elemento, de esa manera no importa el tamao de las columnas que se crearon.