jueves, 19 de julio de 2012

Un programador/desarrollador ideal

Soy desarrollador desde mi infacia (13 años de edad), trabajé en una empresa como desarrollador, fundé una comunidad de desarrolladores (http://www.4Geeks.co), tengo un startup de tecnología (http://www.societs.com) y he quebrado otros varios.. Todo este background de tecnología y emprendimiento ha sido una mezcla muy interesante para mí porque he podido ver el perfil que debe tener un desarrollador desde adentro y desde afuera.

Quiero escribir un ensayo explicando las 4 premisas que yo considero deben darse para tener un desarrollador "ideal".

Debe ser un solucionador de problemas

No es casualidad que muchas universidades den la carrera de programación como una Ingeniería, después de todo el ingenio del desarrollador es uno de sus mayores valores. El problema esta en el sindrome del "No se puede". 

Estoy cansado de escuchar desarrolladores que en lugar de poner soluciones ponen trabas, tal véz por falta de creatividad, desinterés en el problema a solucionar (no lo ven como un reto) o simplemente por estupidez. La cosa es que el departamento de tecnología de cualquier compañía debería ser el último en dar su opinión, y debe tener un lider que este dispuesto a resolver todos los problemas técnicos.

Les recomiendo leer está lectura titulada: La carta a garcia donde se demuestra la importancia y significado que tiene la palabra "resolver".

No tener titulo universitario en ninguna carrera afin a la programación

Hay dos razones que me llevan a esta conclusión:
  1. El modelo de estudio universitario esta errado:
    Si es verdad que una buena base es necesaria, pero ¿5 años de carrera para tener una base?. Yo considero que la programación debe y puede ser aprendida de forma autodidacta, los modelos universitarios actuales no evolucionan a la velocidad que deberían, ni creo que en algún momento puedan hacerlo, todos los profesores son superados por los alumnos, el modelo de enseñanza para este tipo de carreras debe ser reinventado.

    Yo aprendí a programar en el estudio de mi casa, durante varias madrugadas, leyendo
    este curso de Desarrolloweb.com. Si yo quisiera estudiar programación hoy en día, probablemente me uniría a una de las miles de comunidades que existen en el mundo de la programación, y seguiría la recomendación de los mejores programadores en esos grupos.
    Si te enseñan a programar y no lo aprendes tu mismo como un autodidacta, te están creando malas mañas, tienes que ser autodidacta desde el principio o sino no sobrevives a los cambios.
  2. La programación no es un fin, sino un medio:

    Otro problema que hay en los desarrolladores criados por académicos, es la falta de entendimiento práctico de la programación o falta de visión. Si estudias y ejerces carreras de otras industrias, tienes la ventaja de conocer un pedazo del mundo como es, conoces problemas típicos de esa industria y tu mente se activa a intentar solucionarlos con la programación (que aprendiste de forma autodidacta).

    Si revisas las historias de éxito de startups más grandes, podrás ver que son muy pocos los casos que deben su éxito a una "muy buena arquitectura técnica", todo lo contrario, estamos acostumbrados a ver ballenitas en twitter, errores 404, etc.

    Si trabajas en la industria del turismo por muchos años probablemente vas a poder crear una plataforma como despegar.com, si estuviste en 10 escuelas para aprender diferentes idiomas vas a fundar OpenEnglish.com, si te toco ir a las juntas de condominios vecinales todas las semanas (como a mí) fundarás Societs.com, si trabajas en bienes raices, lo tuyo es nestio.com, airbnb.com y así sucesivamente.
Ser autodidacta

Este punto ya lo explique un poco en los otros dos puntos que he mencionado, pero vamos a profundizar unas lineas...

Facebook saca un nuevo release de su API todas las semanas, Google App Engine lo hace mensualmente, cada día ocurren cambios más frecuentemente en el mundo de la programación, nosotros hicimos un estudio intenso para conocer la mejor herramienta para realizar el proyecto http://dev.4geeks.co/ivoted, decidimos hacerlo en APE, y cuando lo terminamos (6 meses después) ya Node.js era una mejor solución.

Entonces ¿Quién me va a enseñar Node.js? Nadie! Un desarrollador ideal tiene que estar feliz por aprender esa nueva y mejor tecnología y hacer el salto en pocos días.

Debe hablar inglés

Tantos lenguajes que hay que aprender: Python, Javascript, HTML (si es un lenguaje aunque algunos digan que no), Ruby, C#, Java, Objective C, etc. Y resulta que descuidamos el idioma mas importante de todos: INGLES!

Todas las documentaciones están en ingles, los foros en inglés, los grupos en inglés, los comentarios del código en inglés. Incluso si instalas tu sistema operativo en inglés, te va a ir mejor, porque vas a poder copiar y pegar los errores en google para obtener más respuestas.


Bueno para cerrar, les quiero dejar una frase para que recuerden: "La programación no es un problema tecnico", es un medio, un instrumento para resolver problemas no técnicos que existen en la cotidianidad.

Continuar leyendo...

jueves, 26 de mayo de 2011

Porque no he escrito mas en este blog - Parte I: Mi infancia


Sé que he abandonado bastante este blog, y una de las razones es que hace 1 ano y medio decidí renunciar a mi trabajo como desarrollador en Cinet Solutions y emprender mi propio negocio.

Han pasado muchas cosas, ha sido una experiencia increíble, llena de muchos aprendizajes y emociones y quiero compartir un poco con ustedes como es mi vida como emprendedor hoy en día para ver si los motivo un poco a hacer lo mismo.


Cuando te encanta la tecnología, y la vives dentro de tus venas en tu día a día, sucede un efecto muy similar al de Neo en Matrix, no ves problemas sino soluciones tecnológicas. Es increíble como la cotidianidad se convierte en una maquina de ideas, no hay un momento donde no estés pensando "Que excelente seria que se pudiera esto, o esto otro".

Todo empezó en mi 8vo grado del colegio cuando tenía 13 anos, que logre utilizar Microsoft Front Page para crear mi primera pagina web. De que era la pagina? Obviamente de Dragón Ball! eso era lo que me encantaba, estaba enamorado de Bulma y quería ser como Vegeta! Me pasaba todo el día subiendo imágenes de Dragon Ball a mi pagina y deseando que alguien la leyera. En ese momento había un boom de servicios gratuitos de hosting como geocities.com y lycoos.com, todos te permitían hostear tu pagina gratis con la condición de que dejaras banners de publicidad en el site.

Luego de crear miles de páginas y de copiarme otras miles (hice 2 páginas de dragon ball, una de shakira, una de limp bizkit y hasta una de un concurso de haloween que la pagina fortunecity.com estaba publicitando (no llegue ni a los primeros 100 puestos) decidí hacer una página para la gente de mi colegio y cree promo2003stc.tk: Que increíble la acogida de la pagina, me convertí en una mini-celebridad en todo el colegio, incluso en los niveles de mas abajo, todo el mundo me veía como "El chamo que creo la pagina web de los de quinto año".

Para ese entonces ya tenía 16 años, la pagina permitía subir las fotos de la promoción, tenia encuestas de los mas sexys, encuestas de los mas simpáticos, una sección de anécdotas (en esos momentos uno se está graduando y entra una melancolía), una sección de caricaturas y montajes, etc. En fin, era una mini red social, aunque en ese momento nadie sabía lo que era ese término, y facebook y Hi5 no habían dado señales de vida en Venezuela.

Con esa pagina comprobé una vez más mi pasión por la tecnología y me sirvió para estar REALMENTE CLARO de que era lo que quería estudiar (tenia dudas entre ser guitarrista/músico o ingeniero informático) y empecé mis estudios en ingeniería informática en la UCAB (Universidad Católica Andrés Bello) de Venezuela.

Empecé la universidad y empezó mi verdadero emprendimiento! Continuo en un próximo post, déjenme sus comentarios! Y siganme en www.Poclu.com/alejandro

Continuar leyendo...

domingo, 1 de mayo de 2011

Sobre emprendimiento en la web 2.0


Emprender en la web 2.0 tiene sus caracteristicas muy particulares que lo hacen muy diferente al emprendimiento tradicional:

1. Facil desarrollo: Si bien hacer una red social de calidad a nivel tecnico es un reto, lograr pasar de nada a una version beta se puede lograr en muy poco tiempo (en semanas) y con poco esfuerzo. Utilizar las ultimas tenologias (frameworks) puede ser una buena estrategia para acelerar este proceso de desarrollo.

2. Rapido feedback: Una vez que la version beta esta lista, obtener feedback de los usuarios es muy sencillo gracias a la viralidad de las redes sociales e internet. Hay que tener herramientas para interactuar con los usuarios y saber cuales deben ser los proximos cambios para lograr ese ansiado "product-market fit".

3. Iteraciones cortas: Carlos R Villanueva construllo la UCV completa sin caminos, cuando le preguntaron porque, dijo que esperaria a que la gente caminara por el monte, y cuando el paso de la gente crearan caminos de tierra, el construiria los caminos por esos recorridos. El mismo principio aplica aqui, no trates de construir una mega-aplicacion, sal con una version beta muy limitada y deja que los usuarios te digan hacia donde dirigirte. Ve soltando las funcionalidades que te pidan en tiempos cortos.

4. Atraer primeros usuarios: Es uno de los grandes desafios,este articulo de mashable (http://on.mash.to/lcmJ8E) explica como lo lograron las grandes redes sociales de hoy en dia.

5. Monetizar: Ganar dinero es otro de los retos, este tema lo dejo para mi post de los proximos dias.



Continuar leyendo...

viernes, 6 de agosto de 2010

Posicionamiento en buscadores - Inscripcion en directorios de páginas


Cuando google salió, su gran y recolucionario método de indexación se debió a una técnica fundamental, google decidió tomar los vínculos (links) que existían entre las paginas como una recomendación, es decir, si mi blog tiene un enlace hacia tu blog, entonces, quiere decir que yo considero que tu blog es bueno. Otro factor a tomar en cuenta es la importancia que tiene esa página que me está recomendado, no es lo mismo que la página del periódico New York times tenga un vinculo hacia tu pagina a que el bloginternetdeveloping.blogspot.com, por supuesto que la del NY Times es más importante, lamentablemente para mi . Para entender mejor esto pueden revisar la figura 1.

Figura 1

Page Rank : PageRank (PR) es un valor numérico que representa la importancia que una página web tiene en Internet.


Cuando uno quiere subir de posición a una página web que no es muy conocida, es probable que tampoco tenga ningún link o vinculo que apunte hacia esa página, entonces, ¿Cómo podemos empezar a obtener vínculos hacia nuestra web? Es muy sencillo:

Inscríbanla en todos los directorios de páginas que existen en internet (O por lo menos en los más importantes, es decir, aquellos directorios que estén mejor posicionados en google). El directorio web gratuito y software libre más importante del mundo es http://www.dmoz.org/, tiene un Page Rank de 7 y para poder ser incluido en ese directorio debes pasar por unas estrictas normas y validaciones por parte de sus editores.

Mi recomendación es que busquen la mayor cantidad de directorios posibles y se inscriban en todos, es una tarea fastidiosa, pero será muy reconfortante cuando vean su página subir puestos en google rápidamente.


Continuar leyendo...

Posicionamiento en buscadores - Utilizacion de etiquetas h1, h2, Strong, etc.


Durante los inicios del diseño web, las etiquetas h1, h2 era muy utilizadas para representar títulos y subtítulos de las paginas, esto se debía a que le colocaban un formato al texto que estos elementos HTML tienen un comportamiento especifico, ideal para resaltar textos. Por ejemplo, la etiqueta h1 lo que hace es hace muy grande y negrito el texto que esta contenido dentro de ella.

Hoy en día con la utilización de estilos CSS podemos sobre-escribir el comportamiento natural de una h1 y colocarlo del tamaño, color y forma que deseemos, sin embargo, google sigue considerando los textos que se encuentren dentro de las etiquetas h1, h2, h3, etc. Como los textos más importantes de la pagina, los que resumen en cierta manera todo el contenido de la pagina (Los títulos, subtítulos, etc.).

Aprovechandonos de estos conocimientos sobre los buscadores, es muy recomendable mantener esa conducta estandar que la comunidad adopto inicialmente, cada vez que veamos un titulo debemos colocarlo dentro de una etiquera h (h1,h2,h3,h4 o h5), despues si queremos le damos el estilo (color, tamaño, grosor, etc.) que queramos.

La etiqueta <strong> tambien es entendida por google para resaltar una palabra clave dentro de la pagina, solo que en menor medida que las etiquetas h.

Es importante recalcar que no debemos abusar tampoco de estas etiquetas, ya que se puede perder el sentido de la importancia del texto, si colocamos todos nuestros textos dentro de una etiqueta <strong> o <h1> no estamos logrando nada porque google no sabe cuales son los terminos mas importantes, seria como cuando leemos todo un texto en mayuscula, puede aturdirnos y al todo ser importante, en realidad, nada es importante.

Continuar leyendo...

jueves, 5 de agosto de 2010

Posicionamiento en buscadores - Tiempo de carga de una pagina web


Esta es un área muy técnica que debe ser atendida con mucha paciencia por parte del desarrollador, pero cada vez vale más la pena tomarla en cuenta porque según el nuevo motor de google llamado Caffeine este es uno de los factores más importantes al momento de posicionar la pagina en el buscador.

Hay miles de factores que perjudican el tiempo de visualización promedio de una página web: Que tan pesadas son las imágenes y recursos, la cantidad de peticiones que hace la pagina, la cantidad de scripts externos que se importan, la velocidad del servidor, la presencia de consultas a la BD muy pesadas, etc.

Podríamos estar todo el día nombrando cosas, pero como hay muchos artículos que hablan sobre optimización de consultas SQL, hosting de servidores, etc. Yo les voy a mencionar solo algunos tips que no parecen tan obvios, pero pueden ayudar bastante a disminuir el tiempo de carga de tu página.

  • Bajar el tamaño y calidad de todas tus imágenes de la pagina (Y utilizar la menor cantidad posible).
  • Comprimir códigos CSS y Javascript: Comprimir los códigos tiene como inmediata consecuencia lógica que pesen muchísimo menos, y por lo tanto que sean mucho mas rápidos de descargar. Para hacer esto hay un programa muy recomendado llamado YUI Compresor, este programa con un algoritmo logra eliminar todos los espacios en blanco, códigos que sobran, etc. De una página web.
  • Unificar tus imágenes en una sola: Una de las metas para hacer más veloz la carga de tu pagina es reducir el número de request que se hacen antes de cargarla o justo al momento de cargarla, si uno tiene 5 imágenes diferentes en una misma página web, es posible unificarlas en una sola imágenes y hacer 5 request a la misma imagen, entonces, como el navegador tiene memoria cache, en realidad solo pide la imagen al servidor la primera vez y de ahí en adelante la carga directamente desde la cache. Para poder poner todo en una sola imagen, deben recorrer la imagen con una propiedad llamada backround-position: 0px 0px; (Primero el movimiento de la posición en X y luego en Y). Por ejemplo ,a siguiente imagen de la figura 1:
Figura 1

Tiene 12 imágenes azules diferentes, donde cada una explica algún punto de la herramienta http://www.tucondominio.com.

Para optimizar esto debemos realizar una sola imagen que vamos recorriendo con el backgroundposition y se le pone el width y height necesario para que la imagen deseada se vea correctamente.


Figura 2

El codigo css para lograr una pagina web como la mostrada en la figura 2 es el siguiente:

.functionTitle{ font-size: 16px;font-weight: bold; padding: 0; margin: 0px;}
#content{ position: relative;display: block;}
#content ul{padding: 0; margin: 0;}
#content li{display: inline-table;width: 350px; margin: 0;margin-left: 50px;padding: 0; font-size: 12px;}
div#calendario{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 0px 0px;height: 80px; margin-right: 30px;}
div#balances{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 60px 0px;height: 80px; margin-right: 30px;}
div#votaciones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 182px 0px; height: 80px;margin-right: 30px;}
div#peticiones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 243px 0px; height: 80px;margin-right: 30px;}
div#servicios{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 60px 90px; height: 80px;margin-right: 30px;}
div#condominio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 182px 90px;height: 80px;margin-right: 30px;}
div#reglamentos{position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 243px 90px;height: 80px;margin-right: 30px;}
div#edificio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: -60px 0px; height: 80px;margin-right: 30px;}
div#espacios
{position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: 1px -80px; height: 80px;margin-right: 30px;}
div#cartelera
{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: -60px -80px;height: 80px;margin-right: 30px;}
div#asociacion
{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px; background-position: 121px 88px;height: 80px;margin-right: 30px;}
div#perfil{ position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: 121px 0px; height: 80px;margin-right: 30px;}
h2{ color: #F0BC60; font-size: 20px;text-transform: uppercase;
background: url(../../images/tucondominio/imagenes-contacto.png) no-repeat; background-position: 0px 18px;}


  • Carga lazy-load de imagenes con JQuery: Jquery es una librería o framework para Javascript que permite programar funcionalidades geniales con unas pocas líneas de código, uno de los “plugins” o componentes que se han desarrollado hasta el momento es llamado laztload. Este plugin permite cargar solo las imágenes de una página web que están siendo visualizadas por el navegador, es decir, si la pagina es muy larga y tiene imágenes por todo el sitio, entonces este plugin no cargará las imágenes si no haz llegado a esa parte de la pagina (haciendo scroll). Esto reduce los tiempos de carga por aunque no haz cargado muchas imágenes, google Jura que ya la pagina termino de visualizarse y lo da por terminado. El mejor ejemplo de lazyload lo consigues en la página web http://www.mashable.com
Para revisar el tiempo de caga de una web les recomiento esta herramienta gratuita.


Continuar leyendo...

Posicionamiento en buscadores - Maquetacion

Una vez que tenemos los URL amigables implementados debemos elaborar nuestras páginas utilizando CSS, debemos EVITAR la utilización de tablas en la gran mayoria de nuestros diseños. CSS es una tecnología utilizada para visualizar (maquetar, dar format, colorear, etc.) de una mejor manera.

Cuando google o cualquier otro buscador entra en tu pagina, no está interesado en saber si es estéticamente agradable, si es usable, ni nada por el estilo, lo único que a un buscador le importa cuando entra a tu pagina es el contenido (de que se trata la pagina, de que habla.). Cuando el robot de un buscador (por ejemplo el googlebot de GOOGLE) entra en tu página, lo primero que hace es limpiar todos los CSS que encuentre para concentrarse únicamente en el contenido de la página. Por esta razón la utilización de tablas te perjudica porque las tablas no son ignoradas por los robots de los buscadores, sino que más bien son consideradas parte del contenido, lo que perjudica el posicionamiento de tu página en los buscadores.

Es importante acotar que si bien las tablas no son amigables a los buscadores, toadvía son una tecnologia importante y útil para ciertas ocaciones, y tienen propiedades tales como

THEAD, TBODY, TFOOT

que pueden resultar muy prácticas.

Para entender más sobre maquetación en css les dejo este tutorial que he realizado hace algún tiempo que explica los conceptos basicos de CSS.

Continuar leyendo...

martes, 3 de agosto de 2010

Posicionamiento en buscadores - URL amigable (Frendly URL)

¿Qué es el paso de variables por URL? Es una tecnica muy utilizada por todos los desarrollares, frameworks y entornos de desarrollo web que existen en la acutalidad. El protocolo HTTP cuenta con una serie de metodos basicos para garantizar el funcionamiento de una pagina web, uno de ellos es el metodo GET, que sirve para obtener valores de variables a partir de un URL, de esta manera si yo tengo una pagina web con una direccion (URL) como la siguiente:

http://www.mipagina.com/intex.php?idioma=es

Puedo obtener el valor de la variable "idioma" en cualquier momento, y cambiar dinamicamente, en funcion del valor de esa variable, para imprimir el valor de la variable "idioma" en el lenguaje de programacion php no hace falta mas que la siguiente linea de codigo:

echo $_GET["idioma"];

Es muy típico de un programador utilizar el paso de variables por url, haciendo que este url se vuelva difícil de leer para un usuario O BUSCADOR.

Por ejemplo: En mi pagina http://www.recetasdecocteles.com/ para ver los detalles de un coctel se puede ir a cualquiera de los siguientes URL’s:

a. http://www.recetasdecocteles.com/coctel.php?id_coctel=6

b. http://www.recetasdecocteles.com/coctel/6/Cosmopolitan

¿Notan la diferencia? ¿Si verdad? El primero de estos URL´s esta hecho a la antigua, es evidente para cualquier programador que el desarrollador hace un $_GET[“id_coctel”] para obtener el id del coctel que se desea mostrar, pero, ¿Qué pasa con el buscador? Ni siquiera sabe que coctel es el que tiene id=6, y el usuario final.. Menos!

Para solucionar eso debemos implementar URL´s como el segundo de estos ejemplos que acabo de dar, de esta manera tanto el buscador como el usuario final sabrán que ese url lleva directo a los detalles del coctel “Cosmopolitan”.

Uno de los principales factores tomados en cuenta por un buscador a la hora de indexar una pagina web, es el contenido de su titulo, si la palabra "Cosmopolitan" esta en el titulo de una de tus paginas, entonces google probablemente te indexe mucho mejor cuando los usuarios coloquen "Cosmopolitan" en google.



Continuar leyendo...

Posicionamiento en buscadores (SEO)


Si eres programador, arquitecto o diseñador web probablemente haz escuchado este término que está muy de moda durante los últimos años. Para una página web que quiere darse a conocer en el mercado esta vía puede ser una de sus mejores armas para publicitarse sin necesidad de un gran presupuesto.

Un buen posicionamiento en la web es una tarea de todos los involucrados en el diseño, desarrollo, e implementación de la pagina web, es necesario tomarlo en cuenta desde el mismo momento en que se empieza.




Para lograr un buen posicionamiento existe una técnica llamada “Optimización en buscadores” o “Search engine optimization (SEO)”, que no es más que la utilización de un mega conjunto de mejores prácticas para lograr que tu sitio web suba posiciones en un buscador (Principalmente google).

Yo no soy gurú en esto, pero en varios emprendimientos que he tenido últimamente me he visto en la necesidad de aprender un poco más sobre esto, y los resultados pueden ser increíbles.

Para no alargarme más en este tema, quisiera dejarles las mejores prácticas que yo he logrado recolectar en mi mente para que las apliquen en sus páginas lo más rápido que puedan, ¡no hay tiempo ni visitas que perder! En este post voy a colocar solo los titulos de cada una de las secciones, y, luego, voy a ampliarlas en diferentes entradas:

  1. URL amistosos (Frendly URL’s).
  2. Maquetación CSS.
  3. Tiempo de carga del sitio.
  4. Utilización correcta de las etiquetas h1, h2, h3, Strong, etc.
  5. Inscripción en directorios de páginas.
  6. Estudio de las palabras claves.
  7. Ubicacion de los codigos javascript.
  8. Contenido del sitio.
  9. Google webmaster toolkit.
  10. Otras herramientas muy utiles.



Continuar leyendo...

miércoles, 9 de septiembre de 2009

Conceptos Básicos de CSS

Una hoja de estilo es un conjunto de especificaciones que declara cómo deben mostrarse los componentes de una página web, es decir, cómo debe interpretar el navegador, a efectos de presentación visual, los distintos elementos presentes en una página web. El formato de cada elemento de una página web se especifica mediante declaraciones de estilo denominadas reglas.

Los estilos de css se definen en forma de clases, se supone que los estilos que definamos deben estar sincronizados con las definiciones html de la pagina web.

2. Definiciones

Una definicion CSS se compone de tres partes:

  1. Selector (Clase o codigo)
  2. Propiedad
  3. Valor


Una definicion simple organiza los tres componentes anteriores de acuerdo a la siguiente estructura:

selector {propiedad: valor;}

Por ejemplo, la siguiente definición dice que todos los coponents h1 de la pagina deben tener un grosor normal (de tener un grosor grande sería equivalente a que estuvieran en negritas los textos):

h1 { font-weight: normal; }

Una definicion puede contener más de una propiedad con sus respectivos valores, separadas entre ellas por punto y coma (se considera una buena práctica añadir también punto y coma al final). Ejemplo:

h1 { font-weight: normal; color: red;}

Una definicion puede dar formato a más de un elemento o componente a la vez, separando estos mediante comas. Ejemplo:

h1, h2, h3, h4 { font-weight: normal; color: red; }

3. Declaración

Las definiciones de las hojas de estilo se pueden declarar en tres sitios distintos:

  1. En la página web
  2. En un archivo externo
  3. En un elemento

En la página web


Este tipo de declaraciones no son recomendadas ni se consideran buenas prácticas dentro de la programación web y por eso no voy a explicarlas.

En un elemento

Este tipo de declaraciones no son recomendadas ni se consideran buenas prácticas dentro de la programación web y por eso no voy a explicarlas.

En un archivo externo

Las declaraciones se escriben en un archivo de texto con extensión .css sin ningún tipo de preámbulo y deben ser referenciados al principio de las páginas web, específicamente entre los tags <head> </head>.


<link rel="stylesheet" href="estilo.css" type="text/css" />

Como se puede ver, el atributo rel (relation) advierte que se trata de una hoja de estilo, href aporta el nombre (y el camino si fuera necesario) del archivo y type indica que se trata de un archivo de texto que contiene una hoja de estilo que sigue la norma CSS.

4. Cajas

Desde el punto de vista de CSS, todo lo que hay en una página web es una caja. Lo que hace un selector es identificar la caja a la que se aplica el formato.

Las cajas tienen:

  • Contenido (content). El contenido de la caja: texto, imagen, etc.
  • Relleno (padding). La distancia entre el contenido y el borde.
  • Borde (border). El borde de la caja.
  • Margen (margin). La distancia entre el borde y el elemento contenedor (p.e. body) u otro elemento adyacente.

El siguiente diagrama muestra modelo oficial de cajas de CSS según el W3C:

Los componentes de la caja se pueden dividir en cuatro partes: top, bottom, right y left. Por tanto, en la ilustración anterior, las siglas LM, RM, etc., significan LeftMargin, Right Margin, etc.

Las hojas de estilo pueden aplicar formato (p.e. color, anchura, tipo de línea, etc.) a cualquiera de los componentes de esta caja, así como permite posicionar estas cajas en el conjunto de la página.

De este modo, si queremos que un elemento muestre el borde en forma de puntos de color azul, podemos generar esta declaración:

p { border-style: dotted; border-color: blue}

A partir de lo anterior, este código en la página:

<p>Ejemplos de hojas de Estilo</p>

Se mostrará así:

Si queremos ampliar el relleno entre el contenido y el borde así como tener un tamaño de punto más pequeño podemos modificar la regla anterior acudiendo a las propiedades de borde (border) y de margen (padding):

p { border-style: dotted; border-width: 2px; border-color: blue; padding: 15px; }

Ahora, el navegador lo mostrará así:

5. Herencia

Las cajas están contenidas dentro de otras cajas y heredan los estilos de la caja contenedora si no hay una regla de nivel específico. Por ejemplo, si declaramos un tipo de letra para el elemento body, todos los elementos que están dentro, como h1, h2, p, etc. heredarán este tipo de letra. En el siguiente ejemplo declaramos un color de letra para body y otro distinto para h2. De este modo, todos los elementos, excepto h2, tendrán el color declarado para body, mientras que h2 tendrá su propio color. Veamos. Primero la declaración de reglas CSS:

body { color: blue }
h2 { color: red }

Ahora el código html de la página:

<h1>Esto es un elemento h1</h1>
<p>Este es un párrafo</p>
<h2>Esto es h2</h2>
<p>Más texto marcado como párrafo</p>
<h3>Esto es h3</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>Apuesto a que todo es azul en esta página menos uno de los elementos</p>

6. Tipos de selectores

Existen dos grandes categorías de selectores:

  • Elementos: son los nombres correspondientes a elementos del lenguaje (X)HTML como body, h1, p, table, etc.
  • Nombres propios: son nombres que puede crear el autor de la hoja de estilo. De esta clase de selectores, existen, a su vez dos tipo: de clase (class) y de identidad (id). Por tanto, en realidad tenemos en total tres tipos de selectores que examinaremos a continuación.

6.1. Selectores de elemento

Se declaran utilizando como selector un elemento (X)HTML, p.e.:

h1 { color: blue }

De este modo, el aspecto de todos y cada uno de los elementos que forman el lenguaje (X)HTML puede ser modificado mediante un regla. Cabe recordar que los navegadores disponen de una hoja de estilo interna que es la que otorga formato a los elementos (X)HTML cuando no hay ninguna hoja de estilo específica. Por ejemplo, aún sin hoja de estilo la mayor parte de los navegadores aplican negrita a los elementos marcados como strong, así como un tipo de letra superior + negrita a los elementosmarcados con h1, etc.

6.2. Selectores de clase

Estos selectores se declaran mediante una palabra propia que asigna el autor de la hoja de estilo. Esta palabra va precedida por un punto. Por ejemplo: supongamos que se necesita una clase de selectores para formatear títulos de películas (pongamos que se trata de una web sobre cinema). El autor de la hoja de estilo puede crear el selector con el nombre tituloFilm para formatear de la misma forma los títulos de los films. Para ello, escribe esta regla:

.tituloFilm { font-size: 1.5em; font-family: Times New Roman; color: blue;}

Se aplica mediante el atributo class seguido por el nombre del selector (sin el punto). Por ejemplo, en el siguiente código fuente solo a uno de los dos elementos de párrafo (p) se le ha añadido esta clase de selector:

<p class="tituloFilm">2001: Una odisea del espacio</p>
<p>La obra de Kubrick marcó un punto de inflexión en el género de la ciencia-ficción</p>

La declaración solamente afectará a uno de ellos y el resultado es que el primer párrafo tendrá un aspecto muy distinto de los demás:

6.3. Selectores de identidad

Los selectores de identidad se nombran mediante una palabra propia precedida por el símbolo # (almohadilla). Por ejemplo:

#navegacion { background-color: LightGrey; }

Los selectores de identidad solo se pueden aplicar a un elemento en cada página. Dicho al revés, y tomando el ejemplo anterior: en cada página solamente puede haber un elemento #navegacion (en cambio, podemos tener múltiples elementos de clase en una misma página).

En este caso, hemos supuesto que queremos dar un estilo propio a la zona de navegación de cada página. Se supone que deseamos destacar la barra de navegación mediante un fondo gris y queremos que la fuente del texto en esa zona sea un poco más pequeña. La declaración sería la siguiente:

#navegacion { background-color: LightGrey; font-size: 0.8em }

El código fuente en la página sería el siguiente:

<div id="navegacion">
<ul>
<li><a href="item1.htm">Item 1</a></li>
<li><a href="item2.htm">Item 2</a></li>
<li><a href="item3.htm">Item 3</a></li>
</ul>
</div>

Se supone que Item 1, Item 2, etc., son opciones de menú. El resultado sería este:

7. Uso de div y span

El lenguaje (X)HTML dispone de dos elementos con gran potencialidad cuando se utilizan junto con las hojas de estilo, y cuya característica principal, a diferencia de elementos como body, p, h1, etc., es que no poseen ningún significado intrínseco. Son los siguientes:

  • div
  • span

Mientras el elemento div es de bloque, el elemento span es de línea. Recordemos que los elementos de bloque tienen un salto de línea integrado. El ejemplo más conocido es p. Un elemento de línea, por el contrario no genera ningún espacio a su alrededor, sino que se mantienen en la misma línea que lo contiene. Un buen ejemplo puede ser strong.

Tanto div como span pueden utilizarse para mejorar la apariencia de una página, pero además contribuyen a añadir valor semántico a la misma.

7.1. div

En concreto, div ayuda a crear la estructurar básica de la página. Por ejemplo, podemos imaginar un sitio web cuyas páginas se estructuran en tres grandes secciones, como muestra la figura siguiente:

Con una estructura como la anterior, el código fuente de cada página puede contener cuatro elementos div, cada uno de ellos identificado con un

atributo id diferente, de este modo:

<body>
<div id="tituloPag">
</div>
<div id="navegacion">
</div>
<div id="contenido">
</div>
<div id="piePag">
</div>
</body>

La estructuración anterior permitirá definir estilos para las cuatro secciones de la página sin perjuicio de aplicar estilos más específicos mediante selectores de elemento, de clase, etc. Esta estructuración facilitará el mantenimiento de los estilos del sitio y, en caso necesario, el posicionamiento de los mismos en la página.

7.2. span

El elemento span suele utilizarse también combinado con id o con class para especificar con tanto nivel de detalle el aspecto de cualquier elemento de la página. Por ejemplo, podemos desear marcar y tratar de forma distinta el apellido de una lista de nombres, para lo cual podemos usar span de este modo. Definimos un selector de clase apellido para el cual declaramos un estilo:

.apellido { font-style: italic; font-weight: bold }

Aplicamos entonces span y class a los componentes (li) de la siguiente lista:

<h1>Realizadores de los años 90</h1>
<ul>
<li>Martin <span class="apellido">Escorsese</span></li>
<li>James <span class="apellido">Cameron</span></li>
<li>Pedro <span class="apellido">Almodóvar</span></li>
</ul>

El resultado en el navegador será el siguiente:

8. Posicionamiento

Las hojas de estilo proporcionan propiedades que permiten posicionar de forma fija, absoluta o relativa (fixed, absolute, relative) las cajas en una página web. Estas propiedades, junto con los selectores de clase y de identidad que permiten identificar y clasificar las cajas respectivamente, proporcionan al diseñador un dominio total de la estructura de la página sin necesidad de recurrir, por ejemplo, al uso de tablas.

A título ilustrativo, mostramos un ejemplo típico de código de estilo con indicaciones de posicionamiento:

#navegacion { position: absolute; top: 0; left: 0; width: 30%; }

#contenido { width: 70%; margin-left: 30%; }

El código anterior generaría dos secciones como las que muestra la figura siguiente:


Lo cierto es que el posicionamiento mediante CSS merece un capítulo aparte y por ello escapa a los objetivos de esta presentación. Pero no hemos querido dejar de señalar su importancia con el fin de animar a todo aquel que, precisamente, quiera avanzar en estos temas.


Buenas prácticas

1. Declarar la hoja de estilo en un archivo separado (mejor que en la hoja de estilo, salvo necesidad específica).

2. Utilizar medidas relativas (tanto por ciento en lugar de píxeles, o unidades em en lugar de puntos, etc.).

3. Usar elementos semánticos (h1, h2, blockquote, etc.) para organizar los contenidos de la página, no para conseguir una determinada apariencia de la misma.

4. Modificar la apariencia de la página exclusivamente mediante estilos (y no con elementos o atributos desaconsejados como font, center, etc. o usando elementos fuera de lugar).

5. Limitar al máximo declarar estilos dentro de elementos individuales (es decir, evitar el uso del atributo style dentro de elementos).


Continuar leyendo...