Aplicación de 5 minutos con Cake
Cake es un entorno de desarrollo rápido para PHP basado en el modelo MVC (Si, como Rails) que es muy fácil de usar y muy potente para desarrollar aplicaciones con pocas lineas de código. A continuación te voy a enseñar como instalarlo y usar sus características de scaffolding para crear un sencillo y muy básico gestionador de bookmarks.
1. Instalando Cake
Antes que nada, necesitas tener un entorno de desarrollo adecuado en tu maquina para correr PHP y MySQL. Existen paquetes completos, listos para instalar como Apache2triad y xampp para windows y Mamp para Mac. Si no sabes qué es todo ésto, igual es conveniente investigar algo antes de seguir leyendo.
Si ya tienes Apache y PHP, instalar Cake no tiene ninguna gracia, solo ve y descarga la última versión estable desde CakeForge y descomprime el archivo en una carpeta visible desde tu servidor web. Para este ejemplo vamos a llamar a esa carpeta cake
.
2. Crea la tabla en tu base de datos
Usa la siguiente estructura para crear una tabla en tu base de datos:
CREATE TABLE bookmarks ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, name VARCHAR(255) NOT NULL, url VARCHAR(255) NOT NULL, created DATETIME, modified DATETIME, PRIMARY KEY (id) );
3. Configura la conexion a tu base de datos
Ahora ve al directorio app/config y busca un fichero llamado database.php.default y renómbralo a sólo database.php. Ábrelo para editarlo y cambia las los valores de host,login,password y databasepara que se ajusten a tu configuración. Despues guarda los cambios.
class DATABASE_CONFIG
{
var $test = array('driver' => 'mysql',
'connect' => 'mysql_connect',
'host' => 'localhost',
'login' => 'user',
'password' => 'password',
'database' => 'project_name',
'prefix' => '');
var $test = array('driver' => 'mysql',
'connect' => 'mysql_connect',
'host' => 'localhost',
'login' => 'user',
'password' => 'password',
'database' => 'project_name-test',
'prefix' => '');
}
Para la mayoría de las aplicaciones, esta parte será la unica vez que edites un archivo de configuración.
4. Crea un modelo
Dentro de la carpeta /app/models crea un nuevo fichero llamado bookmark.php. Copia y pega en ese archivo el código que está a continuación y guarda.
<?php
class Bookmark extends AppModel
{
var $name = 'Bookmark';
}
?>
5. Crea un controlador
Dentro de la carpeta /app/controllers crea un nuevo fichero llamado bookmarks_controller.php. Copia y pega en ese archivo el código que está a continuación y guarda.
<?php
class BookmarksController extends AppController
{
var $name = 'Bookmarks';
var $scaffold;
}
?>
6. ¡Es todo!
Ahora dirige tu navegador a http://localhost/cake/bookmarks y mira como cake ha creado una miniaplicación 100% usable para tí.
Disclaimer: Este tutorial ha sido traducido y adaptado de éste otro por Graham Bird
Tips de Diseño Web: Banderas de Fin de Sección
Pasa que uno diseña con lo mejor en mente pero siempre se debe estar preparado para lo peor. A mi me gusta mucho maquetar directamente en HTML y me preocupo por tener una estructura bien sólida de HTML tan válido y semántico como sea posible antes de poner una sola línea de CSS. Me gusta tener todas las etiquetas correctamente identadas para distinguir los elementos anidados y asegurarme de que nada se me escape. Además si en algun momento necesito añadir algun otro modulo, es más sencillo si el codigo está bonito y bien identado. Algo asi como este bebé:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Pretty Code - Qué código más bonito</title>
</head>
<body>
<h1>Que código tan chido</h1>
<div id="afuera">
<h2>Lo de afuera no importa</h2>
<div class="adentro">
<h3>Lo que importa es lo de adentro</h3>
<p class="uno">
Donec leo risus, tincidunt quis, pharetra sed,
eleifend et, libero. Morbi sollicitudin consectetuer nisl.
Duis dictum, turpis quis tincidunt laoreet,
nisi tortor convallis libero, vitae mollis libero nunc at pede.
</p>
<p class="dos">
Vestibulum augue lectus, sagittis id, congue in, consectetuer ac, dolor.
Integer sed lacus ut pede ullamcorper rutrum.
Sed tincidunt hendrerit ante. Nunc tempor blandit lacus.
Curabitur porttitor est auctor elit. Nulla libero ipsum,
</p>
<p class="tres">
imperdiet et, mollis vitae, ornare ut, elit.
In hac habitasse platea dictumst.
Fusce eu nibh vitae turpis rhoncus porta. Nam ultricies.
Curabitur posuere gravida nulla. Curabitur sapien.
</p>
</div>
</div>
</body>
</html>
Pero la triste realidad es que rara vez el código que escribes pasa tal cual a producción. Generalmente tienes que pasarlo por un CMS o un sistema de plantillas y/o generar las páginas dinamicamente. Luego ves el sitio en tu navegador y por fuera se ve igual que como lo habías diseñado pero cuando das “ver código fuente” te encuentras con que tu bebé código ha mutado en un deforme y amorfo monstruo de tags (el siguiente ejemplo es una dramatización):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>Pretty Code - Qué código más bonito</title>
</head>
<body>
<h1>Que código tan chido</h1>
<div id="afuera">
<h2>Lo de afuera no importa</h2>
<div class="adentro">
<h3>Lo que importa es lo de adentro</h3>
<p class="uno"> Donec leo risus, tincidunt quis, pharetra sed, eleifend et, libero. Morbi sollicitudin consectetuer nisl. Duis dictum, turpis quis ncidunt laoreet, nisi tortor convallis libero, vitae mollis libero nunc at pede.
</p>
<p class="dos">
Vestibulum augue lectus, sagittis id, congue in, consectetuer ac, dolor.
Integer sed lacus ut pede ullamcorper rutrum. Sed tincidunt hendrerit ante. Nunc tempor blandit lacus. Curabitur porttitor est auctor elit. Nulla libero ipsum,
</p>
<p class="tres">
imperdiet et, mollis vitae, ornare ut, elit. In hac habitasse platea dictumst.
Fusce eu nibh vitae turpis rhoncus porta. Nam ultricies. Curabitur posuere gravida nulla. Curabitur sapien.
</p>
</div>
</div>
</body>
</html>
Diganme, ¿Pueden encontrarle sentido, forma o estructura a eso? ahora multipliquenlo por diez e imaginen que necesitan duplicar todo el <div id="afuera"> por alguna extraña ocurrencia de su cliente (no pongo ejemplos, ustredes saben).
Es relativamente fácil saber donde comienza cada sección y donde se está abriendo un nuevo elemento — sobre todo en un editor que coloree la sintaxis. ¿Pero el final?. ¿Cual de todos esos </divs> corresponde a <div id="afuera">?
La solución a la que yo llegué es la de usar unas banderas — o flags
— dentro de un comentario al final de cada sección denotada por un id o class de la siguiente forma:
<div id="afuera">
<div class="adentro">
</div>< !-- /.adentro -->
</div>< !-- /#afuera -->
La diagonal o barra (/) significa que es el final de un elemento y uso el gato (#) y el punto (.) para significar si estamos cerrando un identificador o una clase, respectivamente.
Esto no soluciona el asunto de las identaciones deformes pero almenos me ha ayuda a escanear más rápido mi código y mover y modificar secciones enteras sin mayor problema. Como dije, esto no le va a salvar la vida a nadie, pero a mi me pareció util y quise compartirselos.
Tips de Diseño Web: Resetear márgenes
Seguro que ya te ha pasado: terminas tu diseño en un navegador y al mirarlo en otro aparecen por todos lados espacios inexplicables o elementos encimados con valores salidos de quien sabe donde que rompen tu diseño y te ponen al borde del llanto. Sollozando, empiezas a moverle a los valores de margin y padding a cuanto elemento te parezca sospechoso hasta que todo se ve como debe de verse. Ahora regresas al primer navegador y ¡Oh sorpresa! Todo está inexplicablemente movido. Ahora si sueltate llorando.
Los valores por defecto de los navegadores son lo peor. Especialmente los margenes y los paddings se vuelven un problema porque cada navegador le pone a cada elemento el valor que se le ha pegado la gana. Afortunadamente, despues de mucho tiempo de diseñar con los ojos hinchados a causa del llanto por fin dí con una solución — no recuerdo como — y ahora la comparto con ustedes: Resetea todo a cero.
*{
margin:0;
padding:0;
}
Esa regla amigos mios, vale oro. Pónganla religiosamente al principio de todas sus hojas de estilo y se ahorraran muchos dolores de cabeza.
Despues solo habrá que añadir los valores necesarios segun se vayan necesitando:
h1,h2,h3,h4,h5,p,ul,blockquote{
margin-bottom:1em;
}
Inyección de vacío
Una de las metas del rediseño era tener la posibilidad de dar diferentes formatos a cada tipo de post. Creo que no es correcto que un post rapido y una reseña, un articulo de fondo y una noticia luzcan todo de la misma manera.
Ya que lo que necesitaba era flexibilidad, llegué a la conclusión de que la manera más correcta de obtenerla desde un punto de vista de diseño era utilizando una reticula y adaptar religiosamente el diseño a ella. Reconozco que mi decisión fue influenciada por éste, éste y especialmente éste articulo
Antes de escribir una sola línea de XHTML o CSS me senté a maquetar un diseño en photoshop e hice lo posible por no pensar mientras diseñaba como iba a hacer para convertir ese diseño en un sitio web funcional y enfocarme solamente en presentar la información de la mejor manera posible. Ésta es una pequeña parte de esa maqueta final:
Cuando quedé 99% contento con el diseño que había planeado entonces una de muchas preguntas vino a mi mente: ¿Cómo rayos voy a hacer para que esas imágenes floten en su propia columna junto al texto?
La primera opción que consideré fue usar margenes negativos: mover la imágen un numero de pixeles a la izquierda igual a su ancho y luego subir el siguiente parrafo un numero de pixeles igual a la altura de la imagen. Algo así es lo que había usado en Disenamos
div.cont{
padding-left:120px;
}
img.side_img{
margin-left:-110px;
border:1px solid #ccc;
}
.clear_element{
margin-top:-100px;
}
<div class="cont">
<img src="imagen.gif" width="100" height="100" class="side_img" alt="imagen de ejemplo"/>
<p class="clear_element">
este parrafo debe tener un margen negativo igual a la imágen que se va a desplazar arriba
</p>
</div>
Sin embargo, esta no era una solución viable ya que había que establecer de antemano la altura de las imagenes — algo que yo no quería hacer — y usar clases como anclas de estilo
tanto en la imágen como en el elemento siguiente. Asi que tuve que buscar otra solución.
La siguiente opción fue jugar con posicionamiento y gracias a algunos extraños convenientes comportamientos de position:relative y position:absolute pude lograr imagenes que flotaran en una columna paralela al texto, de una anchura fija sí — ajustadas a la retícula— pero de altura variable.
El markup necesario es algo asi:
<div class="cont">
<h2>Encabezado</h2>
<img src="imagen.jpg" alt="imagen de ejemplo" class="side_img"/>
<p>
Praesent malesuada. Curabitur hendrerit aliquam libero.
Duis ante risus, fringilla sed, convallis in, porttitor vitae, ipsum.
Nulla facilisi. Nullam feugiat est vel ligula.
Cras commodo libero et ligula. Nulla vestibulum ante ac dui.
Pellentesque habitant morbi tristique senectus et
</p>
</div>
El secreto está en posicionar relativamente (position:relative) el elemento que va a contener el texto y las imágenes ( en este caso es <div class="cont">) pero sin especificar ningun valor para top ni left, de esta manera el elemento queda intacto dentro del flujo normal de la página pero ahora será posible aplicar posición absoluta a sus descendientes.
Para crear la columna donde flotarán las imágenes ( a esto se refiere el vacío
del título, figúrese usted) especificamos un padding igual o mayor al tamaño predefinido de las imágenes (100px en el ejemplo).
El truco para que las imágenes floten es aplicarles, en la hoja de estilo correspondiente, position:absolute. Con esto, la imágen desaparece del flujo normal de la pagina y el resto de los elementos se recorren como si no existiera.
El posicionamiento absoluto se refiere a que es posible especificar las coordenadas de un elemento respecto al primer ancestro posicionado. Por eso posicionamos relativamente el elemento contenedor, para que poder colocar las imagenes con respecto a este, si no se encuentra ningun ancestro posicionado entonces los elementos se posicionan respecto al elemento body, esto es igual a la ventana del navegador. Especificados en pares, las reglas de css top, bottom,left yright señalan la posición deseada del elemento. Si no se especifica ningun valor para estas reglas, toman el valor por defecto auto, que es igual a la posición que tendría el elemento en el flujo normal del documento. Para colocarlo a la izquierda del contenedor sin afectar su posición vertical especificamos solo la regla left:0 (o puede ser left:5px, para simular un padding).
Puse un ejemplo de los pasos a seguir aquí: Tecnica de Inyección de Vacío
Esta técnica se puede usar no solamente para imagenes sino tambien para posicionar cualquier elemento de bloque con anchura definida y en cualquier posición con respecto al elemento padre ((yo la usé mucho en dospuntocero 2.0). Aca hay un par de ejemplos más: más Tecnica de Inyección de Vacío
Espero que les sea de utilidad.
Haz una radio privada con GoogleTalk
Esto debe ser muy obvio para usuarios avanzados pero yo lo acabo de descubrir experimentando hace rato (a falta de micro, hay que ponerse creativos): Comparte lo que estás escuchando mediante Vo/IP.
- En WInXP Ve a Inicio > Todos los Programas > Accesorios > Entretenimiento > Control de Volumen ( ¡Uf! probablemente tengas un ícono de volumen en el sistem tray, dale doble click que es más rapido)
- En el cuadro de dialogo de Control de Volumen ve a opciones > propiedades y selecciona Ajustar propiedades de > Grabación. En Mostrar los controles de volumen siguientes: asegurate que esté seleccionado Mezcla Estéreo. Aceptar.
- Ahora de nuevo en el dialogo de Control de Volumen, activa la casilla seleccionar debajo del control y trépale al volumen.
- Abre tu reproductor de música predilecto y pon una rola muy cursi y romantica. (Un bolero de Luis Miguel debe funcionar)
- Busca a la chava(o) con la que quieres quedar bien entre tus contactos de GoogleTalk o Skype y dale al boton de llamar. Ella (o él) podrá escuchar todo lo que tu estés escuchando en tu computadora.
- Opcionalmente puedes acompañar con un mensaje instantaneo que diga algo como
Que curioso, oí esta canción y pensé en tí
- Cuando te pregunten como lo hiciste, los mandas para acá.
Post no patrocinado por Google Talk.
Vector Worn Look
Desde hace un rato por aqui y por allá se ha puesto muy de moda dotar a los diseños de un aspecto de viejo y desgastado que produce diseños cálidos y cargados de nostalgia, en oposición a la frialdad del minimalísmo y el look techie.
Hacer bitmaps desgastados es relativamente fácil de lograr en Photoshop si sigues los tutoriales de Wicked Worn Look pero ¿Qué si quieres hacer lo mismo o algo parecido con vectores?
Yo necesitaba hacer una playera para mi grupo, iba a estar impresa en serigrafía y quería que tuviera un aspecto de desgastado, como cuando la tinta se empieza a caer por el uso. Esta idea no es nueva, ya marcas como Furor y Diesel lo han hecho, pero verán, no con mi logotipo.
Como mi herramienta vectorial preferida es Corel Draw pues les plático como logré esto utilizando ademas Corel Trace:
Para empezar necesitas abrir un logotipo bonito o una tipografía interesante, de preferencia de lineas gruesas y plastas abundantes.
Para producir el pincel con el que desgastaremos el gráfico esta bien una pequeña foto, el chiste es que tenga mucho contraste y baja resolución. A mi me gustó esta de Seraph. Impórtala en tu documento.
Ahora lo que vamos a hacer es vectorizar la imágen utilizando la utilidad Corel Trace para hacerlo, elige el comando Bitmaps->Trace Bitmap teniendo la pequeña imágen seleccionada.
Ya en Trace seleccionamos la herrramienta Outline y trazamos la imágen con un 90 de Accuracy
Este es el resultado en vista wireframe.
Cierra Corel Trace y guarda los cambios. De regreso en corel tenemos ya la imágen vectorizada sobre la foto original. Seleccionalo y desagrupalo.
Elimina algunos objetos, de preferencia los mas grandes. Aqui no hay reglas, solo sigue tu instinto asesino y quita objetos hasta que te sientas agusto.
Ahora selecciona todos los objetos que te quedaron (aqui tenía 300 todavía) y abre el cuadro de dialogo Align and Distribute. En la pestaña distribute elige estos parametros:
Ahora tenemos un conjunto aleatorio de objetos abstratos sin sentido. ¡Cool!
Este paso es opcional, podrías simplemente agruparlo todo y cambiarle el color pero a mi me gusta tener la menor cantidad de objetos posibles. Asi que usando Weld, una de las herramientas booleanas de Corel Draw, convertimos todo en un solo objeto. Nota aclaratoria: Esto va a producir una curva muy compleja, si planeas exportar a otro formato vectorial es mejor agrupar.
Entonces ya sea que soldes o que agrupes, ya tienes tu pincel solo hace falta cambiarle el color y ponerlo encima de tu logotipo o tipografía.
Y asi es como queda. Ya de aquí puedes filmar tu positivo, quemar tu marco y empezar a hacer tus playeras a la moda.
Cómo hacer una buena página web
Continuamente veo páginas técnicamente mal diseñadas (ni siquiera las empresas gordas se salvan). Los culpables son webmasters que dicen saber HTML, pero que lo estudiaron hace años, cuando aún no existía CSS. Esto intenta ser un “manual de buen comportamiento” para los que colaboran con Internet escribiendo páginas web. Explicaré cómo hacer que una página se vea bien en todos los navegadores, usando HTML 4.01 Strict, que luego te permitirá pasar a lenguajes mejores, como XHTML, sin esfuerzo.
Daniel Clemente ha sacado una estupenda guía para aprender las bases de XHTML y CSS apegado a estándares: HTML correcto: Cómo hacer una buena página web
No lo he leído todo, pero a grandes rasgos puedo decir que hacía buena falta un recurso así y en español ahora que apenas comienza la evangelizacion hacia los estándares entre los hispanoparlantes.
Sólo que el diseño no me termina de gustar (eso de rodear cada parrafo con un borde y un efecto de hover me parece terrible idea). No es que esté mal pero luce muy developer-oriented una arregladita a la hoja de estílos y quedará más que listo para ser atráctivo para los diseñadores.
Paletas de sabores
Una de las cosas mas dificiles de hacer cuando se comienza un proyecto nuevo es elegir la paleta de colores que utilizaremos. Recientemente me he topado con esta técnica para obtener una paleta a partir de una fotografía, y la he utilizado en algunos proyectos (que todavía son secretos, sorry) con resultados notablemente geniales.
Lo primero es elegir una fotografía, el tema puede ser lo de menos, lo importante son los colores. Busca en stock exchange o en las imágenes de google o donde quieras, a mi por ejemplo me gustó esta: Sunflower por Vertis (detalle) por que tiene una muy buena riqueza tonal.
Ahora puedes abrirla en tu editor de imágenes favorito y aplicarle un filtro de pixeleado. En photoshop yo lo hice así: Filter->Pixelate->Mosaic… y en el cuadro de dialogo elegí un valor de 68 para cell size. Tu puedes jugar con los valores hasta que tengas una serie de cuadros de colores sólidos. En mi caso el resultado fue éste:
Entonces puedes usar la herramienta gotero, para copiar los colores con los que formarás tu paleta. A mi por lo general me gusta elegir dos colores oscuros, dos claros y dos acentos, para formar una paleta de seis colores aunque probablemente en el proyecto no los use todos ( a veces si, me gustan mucho los colores).
Recuerda que si quieres obtener los valores hexadecimales de los colores debes seleccionar web color sliders en el menú desplegable de la paleta colors
Viste con estilo - 3era lección
Bienvenidos, sean todos ustedes a la tercera entrega de su tutorial favorito. Si estan por aquí por primera vez, tal vez quieran visitar la primera y segunda parte antes de continuar Pero si ya están listos, pues adelante, vamos a seguir confeccionando vestiditos.
Tipos de buen gusto
Uno de los principales elementos que hacen que un diseño sea un buen diseño es la composición tipográfica. Igualmente una mala elección en este campo puede hacer que un diseño que pudo ser bueno se deslice inevitablemente en los terrenos de lo mediocre y amateur. En el diseño web estamos tipográficamente hablando, bastante limitados ya que tenemos a nuestra disposición una reducida selección de fuentes que la mayoría de lo susuarios tengan instaladas en su sistema. Y aunque por un lado esa es una desventaja, también es cierto que nos obliga a ser más creativos con las tipografías que están a nuestra disposición.
El cuerpo del delíto
Empezaremos con el cuerpo del post. Como dijimos en la lección pasada nuestro layout es semilíquido por lo cual, el texto de las entradas se ajusta al tamaño de ventana del navegador. Sin embargo esto puede presentar un problema para aquellas personas con un monitor grande ya que el texto se ajustaría a líneas de texto larguísimas muy dificiles para la lectura.
Dentro de las especificaciones de CSS existe una propiedad muy util para estos casos: max-width por medio de la cual es posible definir de antemano la anchura maxima que debe alcanzar un determinado elemento cuando el contenedor se ensanche.
Asi que si añadimos un selector para la clase .blogbody y le indicamos que no importa cuan enorme sea la anchura de su contenedor la suya no excedera la anchura de 50 letras “M” (max-width:50em;). ¿Fácil no?
La mala noticia es que Internet Explorer no soporta esta propiedad por lo que a los usuarios de este navegador que tengan monitores grandes le sera mas dificil la lectura. ¡Lástima! pero el resto de navegadores buenos desplegaran el contenido como se debe.
Para que el texto quede justificado usamos la propiedad text-align:justify; despues ajustamos un poco los margenes para separar cada post del siguiente (margin:30px 0 10em 0;) y listo!
Encabezados (como éste)
Ahora vamos a aplicarle algo de estílo a los títulos. En esta ocasión, para contrastar con el cuerpo del texto vamos a utilizar un tipografía serif para todos los títulos. Aplicamos, en nuestra hoja de estilo la siguiente regla
h2,h3,h4,h5{
font-family:georgia, "times new roman", serif;
color:#960;
}
Como ven, es posible aplicar una regla a varios selectores a la vez, esto para evitar redundancias en el código. En este caso queremos que todos los encabezados, excepto el h1 del que nos ocuparemos después, tengan la misma tipografía y color. Una vez establecidas las características generales podemos afinar cada uno de los detalles, por ejemplo para los títulos de cada post (h3) aplícaremos la siguiente regla.
h3{
font-size:250%;
letter-spacing:-.05em;
text-indent:10%;
width:100%;
border-bottom:1px solid #330;
}
¿Muchas cosas nuevas aqui verdad? Vamos a explicarlas una por una.
font-size:250%; significa que el tamaño de la fuente será 250% del tamaño definido en el body. Queremos encabezados grandes.
letter-spacing:-.05em; Aqui definimos el espaciado entre caracteres (lo que cualquier tipógrafo conoce como tracking ) y le definimos un valor negativo de -0.5em para que los caracteres se vean mas unidos entre si. Cuestión de gustos, a mi me agradan los títulos con un tracking reducido. Tal vez te estés preguntado que reyos significa ese em. Pues bien, los ems son unidades relativas y representa el ancho de una letra “M” en la fuente actual.
text-indent es el valor de identacion o sangría de un texto. En este caso le asignamos un valor relativo de 10% del ancho total de la linea. Definimos que la línea debe ser tan ancha como el bloque que lo contiene (width:100%; ) y debe presentar un borde inferior de 2 pixeles de espesor y que sea una línea continua (border-bottom:1px solid #330;)
Los enlaces
Ahora vamos a ver un concepto nuevo: Las pseudo-clases.Las pseudo-clases son utilizadas para distinguir entre diferentes estados de un mismo elemento. Un mismo enlace presenta cuatro estados distintos:
- El enlace en su estado normal
- Cuando ya ha sido visitado
- Cuando el puntero del mouse le pasa por encima
- Cuando está activo
a:link, a:visited, a:hover y a:active donde cada una corresponde respectivamente a uno de los enlistados arriba. Para nuestro diseño, nosotros utilizaremos el siguiente código:
a:link{
text-decoration:none;
color:#369;
}
a:visited{
text-decoration:line-through;
color:#666;
}
a:hover{
text-decoration:underline;
color:#ce3554;
}
a:active{
text-decoration:none;
color:#ce3554;
}
Para el estado normal del enlace (a:link) seleccionamos un bonito color azul (#369) y desactivamos el subrayado que tiene por defecto (text-decoration:none;) . Los enlaces ya visitados (a:visited) aparecerán en un gris mas tenue que el del cuerpo del texto y tachados (text-decoration:line-through;).
Una cosa muy importante en términos de usabilidad es agregar siempre a los enlaces un estado de hover para que el usuario sepa que se trata de un elemento interactivo. En este caso, cuando el puntero del mouse pase por un enlace (a:hover) reparecera el subrayado (text-decoration:underline;) y el texto cambiará de color. Y para cuando el enlace se encuentre activo(a:active) , dejaremos el mismo color del hover, solo que sin el subrayado.
Ahora… los otros enlaces.
El problema con el estílo anterior, es que mientras se ve muy bien en el cuerpo del texto, no se ve tan bien en la barra lateral (#links) que además esta llenísima de enlaces. Pero bueno, esto con CSS no representa ningun problema.
Como lo que queremos hacer es aplicarle estilo a los enlaces contenidos dentro de el elemento con el identificador #links solo tenemos que crear un selector dodne escribiremos la ruta hasta ese elemento. Primero, el elemento contenedor de mayor jerarquía seguido por el de menor separados por un espacio y asi consecutivamente hasta llegar al elemento objetivo. En este caso el código sería el siguiente:
#links a:link{
text-decoration:none;
display:block;
margin:0;
padding:2px 15px;
color:#c93;
}
#links a:visited{
text-decoration:none;
color:#000;
background:#666;
}
#links a:hover, #links a:active {
text-decoration:none;
color:#000;
background:#960;
}
No hay mayores novedades aquí. Seguramente ahora ya pueden ver el código e imaginarse como luce. Esta vez jugamos tambien con los colores de fondo y utilizamos la misma regla para a:hover y para a:visited .
Antes de dejar por la paz la barra de lateral, vamos a añadir algo de espacio entre las distintas secciones , esto lo lograremos facilmente modificando el margen superior margin-top de la clase .sidetitle que corresponde dentro de nuestro código al título de cada sección. YA que estamos aquí, aprovechamos para hacer que dichos títulos aparezcan centrados ( text-align:center;) y todos en mayusculas (text-transform:uppercase;.
.sidetitle{
text-transform:uppercase;
text-align:center;
margin-top:30px;
margin-bottom:5px;
}
Detalles finales.
Al final de cada post viene un elemento div con clase .posted que contiene la información sobre esa entrada: el autor , el enlace permanente, los comentarios y los trackbacks . Es importante diferenciarlo del cuerpo del post y para ello vamos a utilizar la siguiente regla:
.posted{
font-size:90%;
padding:15px;
margin-top:50px;
background:#eee;
border: 1px solid #930;
}
Ahora vamos a hacer algo creativo con los encabezados de fecha que como sabemos, en nuestro código pretence al elemento h3. Escribamos la siguiente regla:
h2{
font-size:110%;
position:relative;
padding:5px;
left:-75px;
top:6em;
width:50px;
color:#ce3554;
}
La propiedad position:relative;nos permite colocar un elemento en una posoción relativa a la que le corresponde en el flujo normal del documento. Así nosotros movemos nuestro elemento 75 pixeles a la izquierda, 6 ems hacía abajo y asignamos una anchura de 50 pixeles. Lo que provocará que quede alineado con el título del post en el espacio del margen izquierdo. Se ve bien ¿no?
Asi es como quedó nuestra plantilla hasta ahorita, como ven no hemos utilizado ni una sola imagen aún, sin embargo solo mediante la tipografía estamos dotando a nuestra página de una personalidad propia.
Nos vemos en la siguiente.
Viste con estilo - 2da lección
Hola, amiguitos y amiguitas CSSeros bienvenidos sean a esta segunda lección de…
En la lección pasada veíamos que lo mas importante para poder vestir nuestra pagina requeríamos de una estructura básica. Aprendimos sobre modulos, etiquetas y selectores y modificamos el tipo y color de letra de nuestra página y la ultima vez que la vimos la habíamos dejado así
En esta entrega vamos a comenzar a darle forma a nuestro diseño.
El Layout (no pienso traducir esa palabra)
A grandes rasgos, en jerga de diseño, se le llama layout a la guía que muestra la manera en que los modulos o elementos de diseño están distribuídos en un campo virtual, pudiendo ser este una pagina de revista, una etiqueta, o como en este caso, la pantalla de una dispositivo electrónico. El componente principal de un layout es por lo general una retícula (o red o rejilla) donde cada elemento esta justificado respecto a los demas, y tiene como función mantener la armonía, el equilibrio y la congruencia del diseño.
En terminos de diseño web, hay basicamente dos tipos de layout: el Liquido (liquid) y el Fijo (fixed). El primero es mas gustado por los AI ya que no los elementos de los que está compuesto no tienen definidas ninguna medida fija, sino que son relativas al tamaño de pantalla y el tamaño de fuente que el usuario elija. Los layouts fijos son mas del gusto de los diseñadores gráficos, aqui el control es total puesto que todas las medidas estan especificadas a nivel pixel. Asi es posible hacer intrincados diseños a costa de sacrificar la flexibilidad.
Pero no todo es negro y blanco, entre estos dos extremos hay una gran variedad de grises, es decir, layouts híbridos que aprovechan lo mejor de ambos mundos. Para este experimento he decidido utilizar un layout mas o menos asi:
Donde el encabezado y la barra lateral tienen medidas fijas mientras el contenido se adapte al tamaño de la ventana del usuario. Osea que, utilizaremos un layout semilíquido.
Identidad y Clase
Como ya se habrán dado cuenta, dentro de algunas etiquetas de nuestro código se encuentran argumentos como id="content" y class="blog". Ambos sirven para diferenciar unos elementos de otros y para que sean mas faciles de alcanzar por las hojas de estilo y el DOM. Id sirve para definir un identificador unico, es decir, que sólo puede ser aplicado a un elemento, mientras que Class define una clase que puede ser aplicada a uno o varios elementos a la vez. Los nombres de las clases y los identificadores diferencian entre mayusculas y minusculas y no deben contener espacios. Un mismo elemento puede tener definido un identificador y una clase.
Posicionamiento
Antes que nada, vamos a añadir algunas propiedades al elemento body. Primero, configuraremos el tamaño de la fuente a 12 pixeles, para esto usaremos font-size:12px . Ademas, para evitar el error de algunos navegadores que añaden un margen por defecto a todas las páginas añadiremos estas dos reglas:
padding:0;
margin:0;
Ahora lo que vamos a hacer es posicionar el encabezado de nuestro layout para ello utlizaremos el elemento <div id="banner">. Para modificar las propiedades de un elemento con identificador debemos crear un selector de indentidad en nuestra hoja de estilos y para ello utilizamos la siguiente sintaxis: elemento#identificador o si lo desean simplemente #identificador osea que para este caso cualquiera de estas dos opciones es correcta:
div#banner#banner
Comencemos a definir sus propiedades. Lo primero que vamos a hacer es decirle al navegador que vamos a poner este elemento en donde se nos pegue la gana, independientemente de su posición dentro del código, para esto utilizamos la propiedad position:absolute;. Ahora hay que definir que queremos que se muestre hasta arriba ( top:0; ) y a la izquierda ( left:0; ) que se extienda a todo lo ancho de la página ( width:100%; ) y de alto deseamos que mida 200 pixeles ( height:200px; ).
Hay dos tipos de unidades de medida, las relativas y las “absolutas”. Aqui definimos la anchura del elemento con una unidad relativa a su contenedor (en este caso body) y la altura en una medida absoluta en pixeles. Cuando especificamos una medida cuyo valor es cero, no es necesario especificar ninguna unidad.
Ahora, para hacer la barra lateral modificaremos las propidades del elemento <div id="links">. Definimos el selector #links y como no conocemos el ancho de la ventana del usuario, le indicamos al navegador que queremos que se muestre a la derecha y debajo del banner ( position:absolute; top:200px; right:0; ). Esta vez definimos la anchura en pixeles ( width: 220px;) y la altura para que se ajuste automáticamente al contenido ( height: auto; ). Por ultimo, para que no quede el texto tan cerca a las orillas añadimos un padding de 10 pixeles (padding es el espacio entre el contenido y el contenedor). Aqui pueden ver el resultado
Me permití ademas, cambiar el color del fondo en el encabezado y fondo y color de la letra en la barra lateral.
Margenes
Como ya habrán notado, el encabezado y la barra lateral quedan por encima del contenido. Siguiendo la lógica que hemos usado hasta ahorita, lo lógico sería ahora modificar el elemento <div id="content"> . Pero como queremos que el contenido se adapte al tamaño de ventana del usuario no podemos especificar ni posicionamiento ni ancho ni alto absolutos. Asi que, vamos a recurrir mas bien a otro elemento dentro de #content que es <div class="blog">. Esta vez es una clase no un identificador asi que, utilizaremos un selector de clase que al igual que los otros puede ser expresado de dos maneras:
div.blog.blog
Como en este caso no vamos a utilizar position:absolute; significa que el elemento va a estar en el lugar que le toca por su posición en el código y utilizaremos márgenes para evitar que se encime con otros elementos. Los márgenes pueden especificarse por separado con margin-top,margin-right,margin-bottom y margin-left, pero se puede abreviar de la siguiente manera: margin:superior, derecho, inferior, izquierdo y asi nos ahorramos unos cuantos bytes en la hoja de estilo.
Entonces vamos a añadir la siguiente propiedad al elemento .blog: margin:225px 300px 50px 100px; ¡ y voila ! pueden ver aquí el resultado.
Traten a cambiar el tamaño de la ventana y vean como el contenido se ajusta sin afectar el tamaño del encabezado y la barra lateral.
Este es el código hasta ahorita:
body{
font-family:Verdana,Helvetica,Arial, Sans-serif;
font-size:12px;
padding:0;
margin:0;
color:#333;
}
#banner{
position:absolute;
top:0px;
left:0px;
width:100%;
height:200px;
background:#ce3554;
}
.blog{
margin:225px 300px 50px 100px;
}
#links{
position:absolute;
right:0;
top:200px;
width:220px;
height:auto;
padding:10px;
color:#fff;
background:#333;
}
Como ven, esto ya esta empezando a tomar forma. Pero nuestro diseño se ve como otros miles de diseños que hay en toda la internet, así que en la siguiente lección comenzaremos a darle personalidad propia. ¿Saz? los veo entonces.
Dudas, comentarios y sugerencias serán bien recibidas.
¡Abur!
Viste con estilo - 1era lección
Bueno amiguitos y amiguitas, bienvenidos sean a la primera lección de este fantabuloso experimento. ¿Ya tiene listas sus tijeras de punta chata y su pegamento blanco resistol 850? ¡Pues tirenlos a un lado porque no los vamos a necesitar!
Antes de empezar
Este curso trata exclusivamente de diseño, o mas especificamente dicho, la manera en que yo diseño y que bueno, al menos a mi me funciona. Por lo regular un diseño efectivo requiere de extensa planeación e investigación, pero ya habrá tiempo para todos de aprender con ello despues. Ahorita la cosa es divertirse y aprender algunas cosillas mientras aprendemos.
Materiales
Necesitarás:
- Una página con la que estés dispuesto a jugar. Para este curso utilizaremos la plantilla por defecto de movable type version 2.64 (es la que yo tengo). Si no tienes MT y quieres aprender a instalarlo, aqui y aqui hay dos buenísimos tutoriales pa que te avientes.
-
Cliente FTP (y al menos el conocimiento básico para utilizarlo) por si quieres subir imagenes a tu servidor mas facilmente. Si no, de cualquier forma puedes utilizar la interfase de MT para ello.
-
Editor HTML. Puedes editar tu código directamente en MT, pero creeme que no hay como un buen editor que ademas coloreé el codigo. Yo utilizo HTML kit y lo recomiendo ampliamente. Tiene un cliente FTP integrado y ademas puedes editar los archivos directamente en el servidor . Y lo mejor de todo: es gratuito.
-
Editor de Imagenes Especialmente útil si quieres añadir imágenes a tu sitio. Yo definitivamente elijo Photoshop CS pero supongo que fireworks o Paint Shop Pro igual funcionarán.
-
Tu bebida favorita y algo de botana. (Yo soy especialmente productivo cuando consumo donitas bimbo y una pepsi de lata)
¡Manos a la obra!
Antes que otra cosa pase, veamos como luce nuestro conejillo de indias antes de que empecemos a experimentar. ¿Ya lo vieron? otra vez despidanse de el, porque probablemente quede traumatizado despues del proceso.
Ok. ahora hagamos algo drástico. Vayan a la plantilla de estilos, aqui es donde vamos a trabajar. Seleccionen todo el texto pertenecientes a su hoja de estilos y después presionen la tecla suprimir de su teclado. Guarden y Reconstruyan. Ahora su página debe de lucir mas o menos así ¿Mencioné que sería drástico…?
La estructura.
El estado actual de la pagina es el de una pagina sin estilo. Como mencioné antes diseñar con CSS es como vestir tus paginas, pues bien, para poder vestirla mejor lo importante es que primero que nada, el código de tu página tenga una estructura sólida.
De eso es, en primera instancia, de lo que se tratan los estándares web.
El HTML es el lenguaje en el que esta escrita la web y su principal función es la de dar estructura y forma a los contenidos de la web para que pueda ser interpretada de la misma manera en multitud de dispositivos y plataformas distintas.
Asi que, antes de empezar a vestir nuestra página demosle un vistazo a su estructura. Ande, vaya y vea el codigo fuente de Quedadencias examinelo cuidadosamente y aqui lo espero… ¿Ya? A grandes rasgos la estructura de la página es esta:
<body>
<div id="banner">
<h1><a href="#" accesskey="1">Quedadencias</a></h1>
<span class="description"></span>
</div>
<div id="content">
<div class="blog">
<h2 class="date"> Julio 17, 2004 </h2>
<div class="blogbody">
<a name="000221"></a>
<h3 class="title">Título</h3>
[...] Aqui va el post
<div class="posted">Escrito por sosa en: <a href="#">12:24 AM</a>
| <a href="#">Comentarios (0)</a>
| <a href="#">TrackBack (0)</a>
</div>
</div>
</div>
</div>
<div id="links">
<div align="center" class="calendar">
[...] Aqui va el código del calendario
</div>
<div class="sidetitle">
[...] Titulo de un sección lateral
</div>
<div class="side">
[...] COntenido de sección lateral
</div>
<div class="syndicate">
<a href="#">Sindica éste sitio (XML)</a>
</div>
<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type 2.64</a><br />
</div>
</div>
<br clear="all" />
</body>
Las palabras entre (<) y (>) se llaman etiquetas y son la base del lenguaje XHTML su función es proporcionar de una estructura lógica a los documentos. Veamos la primera etiqueta, esa es <body> y es la que marca el comienzo del cuerpo del documento. Al final de la estructura nos encontraremos con </body> que es una etiqueta de cierre por eso tiene una barra o diagonal (/) antes del nombre. A cada etiqueta de apertura le debe corresponder siempre una de cierre (algunas excepciones las veremos después) y entre una y otra pueden estar contenidas otros pares de etiquetas. Asi, dentro de <body> y </body> se encuentran <div id="banner">, <div id="content"> y <div id="links"> y dentro de <div id="content"> está <div class="blog"> y así sucesivamente. A esta particularidad se le llama anidación. Ilustrémoslo gráficamente:
La etiqueta <div> define a un elemento — como su nombre lo indica — tiene como función semántica dividir la estructura del contenido en secciones osea que — por si hay diseñadores entre la audiencia — los divs son los módulos de los que disponemos para construír nuestro diseño.
Yo no me llamo Javier ( Elementos padres, hijos y herencia )
Como vemos en el esquema de arriba, el elemento body es el de mayor jerarquía y el que contiene a todos los demas. Cuando un elemento A contiene a otro, digamos B se dice entonces que A es padre de B y B es hijo de A. Si ademas dentro de B está contenido un elemento C entonces A Es padre de B y abuelo de C o mejor dicho, su ancestro. A esto se le llama herencia, las propiedades de los padres son pasadas a los hijos y luego a los nietos y los tataranietos etc. (A todos de igual forma y en partes sin necesidad de que nadie muera… mejor que la vida real ¿no?)
Mucho bla, bla, bla y poca acción
Bueno, regresemos a nuestra hoja de estilos, aquella que hace un rato dejamos completamente en blanco, ahí escriba lo siguiente:
body{
font-family:Verdana,Helvetica,Arial,Sans-serif;
color:#333;
}
guarde, reconstruya y vea los resultados.
¿Quiere saber que es lo que hicimo? bueno, dejeme le explico.
Para dar estilo a nuestras páginas (X)HTML lo que hacemos es crear dentro de nuestras hojas de estilo es crear selectores que esten enlazados a uno o varios elementos dentro de nuestro código. Cualquier elemento HTML dentro de nuestra página puede convertirse en un selector de CSS como en este caso lo hicimos con body.
Ya que body es el elemento con mayor jerarquía dentro de la estructura de nuestra página al crear un selector para este y modificar sus propiedades, estas propiedades serán heredadas por el resto de los elementos hijos. Las propiedades se definen dentro de llaves (o corchetes o curly brackets como le llamen ustedes) ( {...} ) después del nombre del selector. CSS no reconoce lo saltos de línea, asi que pueden escribirlo todo en varias líneas para que su código sea mas claro y fácil de leer. Para definir una propiedad se utiliza la siguiente sintáxis propiedad:valor[,valor2[,valor3...] ]
Ahora veamos algo de las dos propiedades que definimos:
Con font-family declaramos la familia tipográfica que utilizaremos en nuestro diseño. En este caso elegí en primer lugar Verdana que al ser la primera en la lista de fuentes, será la que se despliegue preferentemente. Si el usuario no la tiene instalada se ira por la segunda opción en este caso Helvetica que es más común en Mac o Arial para Windows. La ultima sans-serif es una fuente genérica, es decir en caso de no encontrar ninguna otra de la lista el navegador incluirá cualquier fuente san-serif. Es importante siempre nombrar al menos una fuente genérica en nuestras hojas de estilos.
color define el color del texto. Su valor se puede expresar de varias maneras:
- Por medio de constantes, hay 16 nombres de color aceptados por la W3C que son aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow y white.
- Por medio de valores rgb por ejemplo
rgb(255,0,0)= rojo. - Por su valor hexagecimal, como
#ffffff= blanco y#ff0000= rojo . Donde cada par de numeros representa un valor de 0 a 255 de rojo, verde y azul respectivamente. Ademas, estos se pueden resumir:#990000=#900y#999999=#999
En este caso he elegido #333 un color oscuro que no llega a ser negro, y que sobre el fondo blanco porporciona suficiente contraste para dar buena legibilidad sin llegar a lastimar la vista. Es importante notar que ya desde este punto estamos tomando decisiones de diseño.
Por ahora es todo de esta primera lección. Tal vez parezca que no avanzamos mucho, pero hemos sentado las bases y después de esto, todo es pura diversión.
Dudas y sugerencias ya saben, en los comentarios.
Viste con estilo en 5 lecciones
Vestiditos para tus paginas
Diseñar una pagina utilizando hojas de estilo o CSS , puede ser un concepto extraño si no tienes ninguna experiencia en diseño web, pero verdaderamente rarísimo si eres veterano del diseño y todavía diseñas usando tablas o un editor WYSIWYG como Dreamweaver o Frontpage. Hace poco más de un año todavía, yo aún diseñaba a la antigüita pero cuando descubrí el mundo de posibilidades que esta nueva forma de concebir el diseño web ofrece, me dedique de lleno a aprenderlo, a abrazarlo y no he vuelto a mirar atras (aunque que suena a lavado de coco de una empresa de ventas multinivel).
Ahora quiero compartír con ustedes algo de lo que he aprendído para que puedan ustedes conocer los beneficios del CSS de una manera práctica y sencilla. Después de 5 lecciones usted pensará que estoy completamente loco o concordará conmigo que realízar un diseño web con mucho estílo es como hacerle vestiditos a sus páginas.
El reto
Aunque veremos algunos conceptos básicos de XHTML el propósito de esta serie de artículos es mostrar como “vestir” una página utilizando CSS sin necesidad de tocar en lo absoluto el codigo y para ejemplificarlo de la manera más prácticamente posible, he resuelto utilizar para nuestros experimentos la plantilla por defecto de Movable Type. De esta manera , tenemos un codigo válido y que probablemente sea muy común en cualquier cantidad de blogs circulando por ahí.
¿El conejillo de indias? Esta paginilla que inicié hace poco con unos amigos y que permanece dignamente en el anonimato porque para eso fue concebida. Pero ya que por flojera sigue teniendo la plantilla default de MT resulta perfecta para nuestros experimentos. ;)- primera lección
- segunda lección
- tercer lección
- cuarta lección (próximamente)
- quinta lección (próximamente)
Tu navegador apesta
Cómo desplegar contenido específico para internet explorer
Como ya algunos notaron, hasta el diseño de éste sitio pone su granito de arena en la mentada campaña de desinternetexplorerización ya que despliega un mensaje específico para los usuarios de este infame navegador. Si no lo han notado, anden vayan y desempolven su IE para que veand e lo que hablo, aqui los espero.
¿Estan de vuelta conmigo? Bien. El reto que me puse a mi mismo fué no modificar en lo absoluto el codigo HTML del sitio y sin embargo cambiar totalmetne el look del sitio utilizando solamente hojas de estilo. Así que esa es la premisa, no usar màs que CSS para lograr nuestro cometido.
Resulta que, el elemento de diseño que escogí para adornar esa solitaría esquina superior derecha era una especie de robot que pareciera flotar sobre el fondo. Esto fué bastante fácil de hacer sin alterar el HTML de mi anterior diseño ya que tenia un elemento DIV llamado cover (lo utilizaba para desplegar un encabezado al azar en el anterior diseño) que ya no iba a utilizar, asi que llo puse donde quería y le cambié el fondo por un bonito PNG transparente que me daba el efecto que necesitaba.
Desgraciadamente, al ver mi diseño en IE recordé que no soporta ese tipo de transparencias, así que e lugar de flotar con singular gracia y belleza, mi robot tenìa un espantoso fondo fris que obstruìa parte del conenido y el diseño. ¿Que hacer en estos casos? ¿Desechar algo que quieres hacer solo porque el explorador que casi todo mundo usa no se le pega la gana desplegarlo bien? A mi se me ocurriò otra solución.
Cuando declaras una propiedad en una hoja de estílo el valor que le asignes sobreescribe cualquier valor anterior que hubiese tenido antes. Es decir, si yo en una hoja de estilos declarara algo asi:
body {
background-color:white;
background-color:red;
}
el fondo de la página sería rojo, ya que la segunda declaración es la que cuenta. Para evitar que una segunda declaración de una regla sobrescriba un valor asignado CSS nos permite usar !important seguido del valor. Lo que indica que no importa qué se declare después este valor no será sobreescrito. Asi, en :
body {
background-color:white !important;
background-color:red;
}
el color de la página quedaría blanco.
Bueno eso no sucede en IE porque simplemente no soporta la declaración !important. Eso es algo malo, pero podemos tomar ventaja de ello. He aqui lo que yo hice:
#cover{
background:transparent url('images/robot.png') no-repeat !important;
background:transparent url('images/ie_sucks.gif') no-repeat;
}
de esta manera para todos los navegadores que soporten !important el fondo sera robot.png, para el resto será ie_sucks.gif.
Otra forma de aplicar esta técnica es mediante la propiedad display:block y display:none que puede ser utilizada para mostrar o esconder un elemento de bloque, como puede ser un DIV. Por ejemplo, miremos el siguiente código:
<div id="good_browser">
Estás utilizando un buen navegador, se ve que eres conocedor.
</div>
<div id="suckin_browser">
Your browser sucks.
Tienes la puerta abierta para que sinnúmero de aplicaciones
malignas que poblan la red hagan lo que quieran con tu sistema.
Cambiate a <a href="http://www.mozilla.org"> algo mejor</a>
</div>
tenemos dos elementos de bloque (DIV) con dos diferentes identificadores #good_browser y #suckin_browser. Ahora, si este código aplicamos las siguientes reglas de CSS:
body {
background-color:white !important;
background-color:red;
}
#suckin_browser{
display:none !important;
display:block;
}
#good_browser{
display:block !important;
display:none;
}
Tendremos un mensaje para IE y otro para el resto de los navegadores. Vean el ejemplo (es necesario verlo en ambos navegadores pa’ que se note el efecto)
Esta técnica puede ser utilizada de muchas maneras distinatas, puede mostrar un pequeño mensaje por ahí , mas amigables que los mìos si quieren o de plano pueden ponerse un tanto drásticos y reservarse el derecho de admisión solo para aquellos usuarios conocedores que sean dignos de ver su selecto contenido. Ver ejemplo drástico
Espero que les sea de alguna utilidad.
No soy guru
Durante el rediseño de este sitio, y en algunos otros proyectos en los que estoy trabajando, he venido aprendiendo mucho sobre CSS y estándares aplicados (porque una cosa es la teoría y otra la práctica) por lo tanto, aunque no soy ningun guru me gustaría compartír con ustedes, queridos tres lectores algo de lo que he aprendido. Inauguramos la sección tutoriales. (Corte simbólico de listón)