You are currently browsing the tag archive for the ‘web’ tag.

Seguro que todos los que habeis tocado CSS en un momento u otro os habeis encontrado con el típico problema de que el CSS no se ve igual en todos los navegadores ni versiones de estos: lo que se ve estupendamente en Firefox no se ve bien en IE6 aunque si se ve en IE7.

En mi caso, estaba bastante cansado de este tipo de problema, siempre teniendo que “apañar” el código CSS para que funcionara bien en cualqueir navegador. Quería una solución a este problema…

Y un buen día, mi amigo y colge Miguel Monreal me habló de Yahoo! YUI Grids CSS, y yo me dije ¿y esto qué es y para qué sirve?

YUI (Yahoo! User Interface Library) es un conjunto de utilidades y aplicaciones en JavaScript, así como recursos CSS que Yahoo! ofrece desde su web de desarrollo de forma totalmente gratuita. Son utilidades concebidas para hacer entornos web amables, bien pensados, muy fáciles de configurar y robustos… y este conjunto incluye una solución muy muy buena, de verdad, para los problemas de CSS como los que he comentado antes: Grids CSS, un sistema de CSS que permite crear webs maquetadas de prácticamente cualquier manera que os podais imaginar, y con una ventaja extra: es un sistema que ya lleva los típicos problemas de CSS resueltos desde el principio y 100% compatible entre navegadores. Lo único que teneis que hacer es descargaros los archivos que están a vuestra disposición en la web de Yahoo! User Interface Library y utilizarlos en vuestros proyectos web. Para que os hagais una idea, con Grids CSS de YUI vienen varios archivos y hay unas 100 plantillas de layouts web en un archivo que no llega a los 2 Kb. Lee el resto de esta entrada »

Anuncios

El pasado 13 de noviembre Google publicó su Search Engine Optimization Starter Guide en su blog oficial y que puede descargarse desde allí en formato PDF.

Por lo que cuentan en el post, la razón de crear esta guía SEO para principiantes ha sido responder a las muchísimas preguntas que sobre los temas de posicionamiento recibe Google a través de sus foros de webmasters y grupos, de forma que han decidido ofrecer una guía SEO básica para que todo el que esté interesado en saber como hay que hacer las cosas según Google para conseguir un buen posicionamiento en el buscador sepa donde consultar este tipo de dudas.

La guía en PDF tiene 22 páginas, que son suficientes para explicar los conceptos básicos (y no tan básicos) del SEO o posicionamiento web. La guía SEO de Google, en un formato bastante sencillo y amable de leer, habla de las técnicas principales para conseguir contenidos bien situados en el buscador según los keywords o palabras claves que definamos. Los contenidos principales de la guía son:

– Títulos de página. Consejos sobre como hacerlos, etc…

– Etiqueta “Description”

– Estructura de URLS. Como hacer urls amigables para buscadores

– Como crear estructuras fáciles de navegar

– Ofrecer contenidos y servicios de calidad

– Escribir mejores “anchor text” o textos de enlaces

– Utilización de las estiquetas <h>

– Optimizar el uso de las imágenes

– Correcto uso del archivo robots.txt

– Utilización del “nofollow”

– Promocionar adecuadamente una web

– Utilizar las herramientas de webmaster de Google y otras herramientas de Google como Analytics u Optimizer

A mi la verdad es que me parece un muy buen docuemnto, no solo de inciación, sino también para tenerlo siempre presente y revisar punto por punto si cumplimos este tipo de prácticas en nuestros sitios web si lo que queremos es aparecer en Google lo mejor posicionados posible. Se omiten algunos temas, como estructuras de texto optimizadas, antiguedad del dominio, enlaces entrantes, densidad de términos, etc… pero en general se dan las pautas suficientes para que cualquiera pueda generar un sitio web bien construido para posicionarse por determinados términos.

En resumen, una guía completa y sencilla a la vez que ayudará a muchos a entender el SEO y a los que los utilizamos nos sirve como punto de referencia.

En los últimos dos o tres años la capacidad de internet como medio para ofrecer servicios que puedan cubrir las más diversas necesidades de los usuarios ha crecido de forma exponencial. A día de hoy puedes encontrar aplicaciones web que te permiten gestionar calendarios de tabajo, enviar mensajes, organizar líneas de tiempo, crear redes sociales, compartir coche en un viaje, etc… y hace de lo que voy a hablar aquí: organizar y preparar tu boda en internet

La última aplicación web que me ha llamado la atención ha sido WedTool, una web que ofrece dos tipos de servicios orientados a un perfil muy claro: parejas que están preparando su boda. Lo que WedTool ofrece a estas parejas son dos servicios muy bien definidos:

1 – Les ofrece una herramienta online para que puedan gestionar todo lo relacionado con la organización de la boda: listas de invitados, presupuestos, organizar a los invitados en mesas, calendario de tareas, etc…

2 – Las parejas que se registren pueden crear de forma sencilla y eligiendo entre varias plantillas la web de su boda, pudiendo incluir vídeos, galerías fotográficas, blog, mapas de situación para indicar como llegar a los lugares que indique la pareja, etc…

WedTool.com - Organiza y prepara tu boda en la web.

WedTool.com - Organiza y prepara tu boda en la web.

Lee el resto de esta entrada »

Ayer fui a la última jornada del SeedRocket a ver la presentación de los proyectos y asistir a la confirmación de cuales iban a ser los proyectos elegidos para ser financiados.

Para el que no lo sepa, el SeedRocket es una iniciativa de Jesús Monleón y Vicente Arias para que emprendedores de internet presenten sus proyectos de negocio y obtengan financiación para convertir lo que muchas veces es una idea en un negocio viable y fructífero. Aparte de ellos dos, hay una gran cantidad de emprendedores de éxito en internet y mentores vinculados a esta iniciativa: Nacho Sala y Marek Fodor de Atrápalo, Carlos Blanco de ITNet, Albert Feliu, Daniel Torres y un larguísimo etcetera de personas de gran relevancia en el desarrollo de los negocios en internet en España. Se agradecen este tipo de iniciativas, muy necesarias, pero que también exige un gran compromiso por parte de fundadores y mentores.

SeedRocket 2008

A eso de las 13:30 llegábamos a Barcelona desde Zaragoza, deseosos sobre todo de ver a Angel y Miguel, que llevaban más de una semana en la Universidad Europea de Barcelona (lugar donde se ha celebrado este SeedRocket 2008) trabajando con sus mentores y compañeros en WedTool, un proyecto en el que he participado, y que ellos han defendido en SeedRocket con toda la fe del mundo y el máximo compromiso… bueno, sigo, que caigo en el autobombo. Bajaron a buscarnos y pudimos ver los consejos que les daba Vicente Arias de cara a la presentación de 7 minutos que tenían que hacer al igual que los otros proyectos del SeedRocket. En ese tiempo cada uno de los proyectos tenía que explicar qué iba a hacer, cómo lo iba a hacer y esbozar su plan de negocio y lo que iba a hacer con la inversión que consiguiera. Después de los consejos nos fuimos a comer…

En la comida hablamos todos de como lo veiamos, del futuro, Angel y Miguel nos contaron como veían al resto de proyectos y participantes, etc… Fue una comida rápida, porque WedTool presentaba a las 16:00 más o menos y había que pulir cosas.

Me llamó la atención el buen rollo general. Estuve de risas con la gente de escapadarural.com, hablando con Ruth de Zoomki, que es amiga de Nuño Valenzuela, que nos atendió muy bien en el SMX de Madrid. Me presentaron a Nacho Sala, a Vicente Arias, a Jesús Monleón, etc… En fin que fue todo un poco locura a saco.

A eso de las 16:00 empezaron las presentaciones, no recuerdo quien empezó, pero sí que WedTool fuimos los segundos. Solo nos dejaron asistir a la presentación de WedTool, que Angel defendió a capa y espada, siendo capaz de decir solo treinta y pico veces la palabra “vale” en 7 minutos (Vicente Arias las contó, y aunque os parezcan muchas veces, son pocas para Angel).

Después de ver la presentación tuvimos que esperar algo más de una hora, que los organizadores y mentores nos pidieron para deliberar que tres proyectos de todos los del campus iban a resultar elegidos para recibir financiación, optar a un crédito y disponer de un plan de trabajo con mentores de 4 meses.

A eso de las 19:30 llegó el momento y entre Vicente Arias y Jesús Monleón dijeron los tres nombres que todos queriamos oir:

WedTool

Escapada Rural

…y Linkua

Estos tres proyectos han sido los elegidos en este SeedRocket, y creó que alguno más podría haber triunfado. A mi en particular me gustaba la idea de MyCreativeTours, a pesar de algunos aspectos complicados del planteamiento… suerte para la próxima vez y enhorabuena a todos!!!

SeedRocket 2008

Puede que el título de este post resulte chocante y pelín agresivo, pero la verdad es que es la pura y dura realidad, y lo tengo cada vez más claro por como es usada esta comunidad de opiniones para que las compañías y usuarios se lancen auténticos ataques a la yugular.

Por si hay alguien que desconoce lo que es ciao.es, se presentan a ellos mismos de la siguiente manera “Ciao es una comunidad online fuerte y multicultural, con opiniones cruciales, precios de productos y servicios, todo ello pensado en beneficio de los consumidores”. En cristiano, es una web de opiniones sobre todo tipo de productos y servicios, en la que te registras, y tras hacerlo puedes opinar sobre prácticamente cualquier producto o servicio que se te ocurra, desde yogures de supermercados hasta televisores de plasma, pasando por programas de televisión o discos… se puede opinar casi de todo, con la intención de crear una base de conocimiento de experiencias de consumidores para que si tú te interesas por un producto leas las opiniones que hay sobre él y decidas en consecuencia si te interesa o no. Así, como idea, está muy bien, pero la gran pregunta es ¿son fiables las opiniones de ciao.es sobre productos y servicios?, si os interesa el tema seguid leyendo.

Es cierto que hay opiniones fiables en ciao.es pero si algo puedo aconsejaros es que aquellas opiniones valoradas con 1 o con 5 estrellas (la valoración es desde 1 estrella – lo peor – hasta 5 – lo mejor del mundo -) son no fiables en un 80%. Hay que ser realista a la hora de leer opiniones ajenas y no fiarse de aquellas exageradas por bueno o por malo. Y sobre todo, es mejor considerar las opiniones de los usuarios que escriban regularmente en ciao.es y no aquellas opiniones puestas por un usuario que se ha registrado y ha colocado una única opinión, sea buena o mala.

Probad a buscar en google.es por ejemplo “opel kadett”, “yougures danone”, “kh7” o “canon a80”. En cualquiera de los tres casos, la url de ciao.es correspondiente a la opinión o comparativa de ese producto o servicio aparecerá entre los 10 primeros resultados (por lo menos así es a día de hoy). El posicionamiento tan fuerte de ciao.es viene, entre otras cosas, del enorme tráfico que mueve (es la web de España 51 según el ranking de Alexa, moviendo más trafico que por ejemplo las webs de la cadena SER o de ABC). Lee el resto de esta entrada »

Aunque es viernes, escribo ahora sobre el segundo día del SMX Madrid, porque el trabajo me ha llevado de culo, la verdad, y no he tenido tiempo, pero si que pienso postear con detalle sobre el evento porque me ha dejado en general un buen poso de conocimiento.

Este segundo día comenzó con Berbard Girard, que hablo sobre el modelo de negocio de Google y lo que le diferencia de los demás y porque es “especial” y terminó con El último acto del SMX Madrid de 2008un taller con chavales de entre 14 y 19 años (en la foto, los chavales, con Tommy Lorsch) que explicaron a la práctica totalidad de la audiencia que estabamos allí como navegaban por internet, que les interesaba, que buscadores usaban, etc… y se sometieron a más de 20 o 30 preguntas que les hicimos todos los asistentes allí. Este acto fur muy divertido e interesante a la vez y me pareció un muy buen cierre de SMX Madrid. Yo personalmente les pregunté “¿Alguna vez habeis pulsado voluntariamente un banner o publicidad en internet?”, y para mi sorpresa, todos contestaron que no sin dudar.

El segundo día terminó con barra libre de cerveza, que aprovechamos para charlar con gente de divesos sectores que había por allí.

El balance del segundo día del SMX lo resumo como he hecho con el primero.

Lo mejor del segundo día del SMX Madrid: Para mi gusto hubo más nivel que el primer día y prácticamente todo y toda la gente con la que hablé me resultaron de interés. De nuevo destaco a Rand Fishkin, a Massimo Burgio (que me dió un par de consejos muy útiles y me atendió con mucha amabilidad), Miguel Sanchez de iProspect, muy claro y preciso al hablar de la compra de enlaces, y David Castro, cuyo sistema de valoración de la reputación en internet me pareció muy interesante.

Lo peor del segundo día del SMX Madrid: La verdad es que aunque reconozco que lo importante de estos eventos es la calidad de los ponentes y la agenda en sí, no me gustó el tener que pagar el guardarropa aparte (6 euros cada día), porque me parece un detalle feo, aunque supongo que se debería a la estructura del recinto y no a los organizadores. Y lo que a nivel profesional menos me gustó es la respuesta que oí dos veces a preguntas “no puedo hablar sobre eso por confidencialidad”. Lo siento, pero se puede decir el epcado sin decir el pecador, y si un ponente va a dar una conferencia y no está dispuesto a compartir sus conocimiento, personalmente prefiero que no la de. Tampoco me gustó el hecho de que solo algunos ponentes colgarán sus presentaciones y material para libre disposición de todos los asistentes, y aplaudo a los que lo hicieron.

Este es mi balance del segundo día y en general, pero ya os digo que me propongo escribir con detalle sobre las ponencias y conferencias que me resultaron de más interes.

Felicito a los ponentes y me alegro de que un evento así se celebre en España, hubo muy buen rollo en general, y espero que disfrutemos de más eventos de este nivel en casa.

Rock & Ride Forever!!!

A veces vemos unos sitios web chulísimos con unos fondos de página supercurrados que hacen que nos muramos de envidia y nos preguntemos el típico “¿eso como se hace?”. Voy a intentar dar respuesta rápida en un único artículo a dos cuestiones bien diferentes, la primera es ¿cómo hacer un fondo de página?, y la segunda es ¿como utilizar fondos de página con CSS?. Antes de que os lo pregunteis, si, fondo de página y background es lo mismo. A partir de ya, lo llamaremos background, porque en css tenemos por ejemplo background-color (que es el color de fondo de una página) y background-image (que es la imagen de fondo de una página), aparte de más propiedades aplicables a los backgrounds.

El principio, ¿cómo hago un background o fondo para mi web?. Pues lo primero es que depende de lo que quieras hacer… si quieres hacer un background que se va a repetir indefinidamente en la página, lo mejor es recurrir a creadores de backgrounds o fondos como los que pueden hacerse con bgMaker. Esta web te ofrece de forma sencilla y gratuita una herramienta para crear diseños de fondos sencillos, como por ejemplo lineas sobre fondos de color, etc… Simplemente eliges un color y pulsas “Fill”, con lo que el cuadrado (cuyo tamaño puedes cambiar) se rellena de ese color, y luego seleccionas otros colores y haces tu diseño sobre el área rellenada, dibujando lo que te apetezca. Es fundamental que al dibujar el diseño lo hagamos de forma que el fondo quede continuo, que al repetirse no haya cortes… Una vez hecho un diseño, lo guardamos con “Save” en la misma web y lo utilizaremos como fondo, pero daros cuenta de que los diseños hechos de este tipo solo sirven para repetirse indefinidamente a lo largo de la página. Lo más importante es hacer un diseño de fondo pequeño, para que no pese, y que esté bien hecho para que la continuidad de las formas quede bien si se repite de forma infinita. Voy a hacer unos ejemplos…

Fondos hechos con BgMaker y ampliados el 600% para apreciar detalle.

Que quede claro que esto son solo unos ejemplos, ya que podemos diseñar los fondos como queramos o bien diseñar fondos mucho más grandes en tamaño y elementos. Yo simplemente os habló de esta opción por ser muy agradecida visualmente ya demás tener muy poco peso, lo que hace que la navegabilidad no se vea afectada y el rendimiento de la web sea bueno.

Ahora viene la segunda cuestión, ¿como utilizar backgrouns o fondos de página con CSS en mis diseños web?. Para explicarlo voy a utilizar los tres archivos png que he creado y que podeis ver más arriba. Para mostraros el resultado voy a emplear el mismo ejemplo de web que utilicé en el post Hacer un diseño web centrado con CSS, ¿cómo se hace? e iremos viendo como varía su diseño según el fondo que le pongamos.

En primer lugar, tenmos nuestra hoja de estilos: layout01.css, en la que tenemos la etiqueta body, que se aplica a todas las páginas del sitio web salvo que le indiquemos otra cosa. En este caso, actualmente tenemos esta etiqueta body en nuestra hoja css:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #003366;
}

Con esta etiqueta lo que tenemos es nuestras páginas con un color de fondo azul oscuro y punto, nada más. Si quisieramos, podriamos cambiar ese color de fondo simplemente cambiando el color hexadecimal, y así por ejemplo si queremos un fondo blanco pues pondriamos esto:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffffff;
}

Pero a lo que vamos, para insertar un fondo de imagen, yo os aconsejo conservar también el fondo de color solido, más que nada porque si hay un fallo en la ruta de la imagen o algún problema, os cargue un colora decuado con el diseño. Para que se inserte el fondo layout01.png pondremos en la etiqueta body:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;

background-image: url(images/layout01.png);
background-color: #ffffff;
}

Ejemplo de una página con el fondo número 1 en su CSS.MUY IMPORTANTE: Aseguraros de que la ruta de la imagen que insertais tras “url” es la correcta, ya que si no no cargará. Si lo habeis hecho bien, el resultado debería ser el de la imagen de la derecha (click para verla más grande), en el que la página tiene como fondo la imagen de layout01.png que hemos visto antes repetida por toda la página, y gracias a su diseño queda como una imagen continua.

Al insertar el fondo vía CSS este aparecerá en todas las páginas que utilicen la hoja CSS que contiene esa orden. Lo más importante de hacerlo con este sistema es que si tenemos varios fondos en el mismo directorio, tan solo tenemos que cambiar el archivo de imagen que queremos que nos sirva de fondo en cada página y automáticamente ese cambio aparecerá reflejado en todas las páginas. Por ejemplo, si queremos que el background que se vea sea el layout02.png, haremos el siguiente cambio en la etiqueta body de nuestra hoja css:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;

background-image: url(images/layout02.png);
background-color: #ffffff;
}

Y el resultado sería este (pulsa sobre la imagen para verla más grande):

Ejemplo con el fondo numero 2 insertado en la hoja CSS

Y si hicieramos la misma operación pero colocando el fondo número 3 con un código tal que este:

body {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;

background-image: url(images/layout03.png);
background-color: #ffffff;
}

El resultado sería este (pulsa sobre la imagen para verla más grande):

El layout 3 con css

Espero que todo esto os haya servido de utilidad y os introduzca en el tema de los fondos o backgrounds de página, que da mucho más juego. A ver si posteo más adelante otra vez sobre este tema, que se pueden hacer cosas muy muy chulas probando cositas.

Rock & Ride!!!

Los pasados días 12 y 13 de marzo de 2008 (miércoles y jueves) asistí al OME 2008, el Online Marketing España, definido como el “punto de encuentro del marketing digital”. En resumen, y para el que no sepa en que consiste, es un congreso con un programa bastante extenso de ponencias, conferencias y mesas redondas, que se completa con una relación de expositores y todo ello tiene un tema común: marketing en internet, desde la publicidad hasta los sistemas de mailing, como medir los datos de una web, como publicitarse en móviles, etc…

Pues para allá que me fui desde las Zaragozas con mi buen amigo y colega profesional Angel Blesa, a ver que descubriamos que fuera aplicable a nuestro trabajo diario y a obtener buena información y contactos sobre el mundo digital, etc…

Lo primero que me sorprendió fue la asistencia de público, y para muestra una foto de una conferencia del miércoles. Esta fue la tónica habitual en prácticamente todas las conferencias, seminarios y mesas redondas, y de hecho en más de una fue francamente dificil conseguir sitio o directamente fue imposible y hubo que estar de pie.

Mucha gente en todos los actos del OME 2008

El programa en sí era bastante apretado, llegando a coincidir en el tiempo hasta 4 o 5 eventos simultaneos, lo que obligaba a seleccionar a que acudías, pero esta es la tónica de este tipo de ferias. En nuestro caso, al ir dos personas, decidimos dividirnos e intentar cubrir el máximo de materias de nuestro interés: principalmente, mailing, posicionamiento, publicidad de pago en buscadores (también llamado SEM), comportamiento de blogs y redes sociales, cómo se enfrentaban los medios tradicionales al mundo digital, etc…

Lee el resto de esta entrada »

Cuando empecé a entender y a manejar esto del CSS pensaba que estaba muy bien y que molaba mucho para cambiar los colorines de los enlaces y que se subrayaran y cosas así, pero no le veía mucha más aplicación. No digamos ya cuando se trataba de centrar un diseño en la página, por favor… eso se hace con tablas!!!. Pues no amigos, con CSS se puede, y además es más lógico, tiene más sentido y el diseño es más limpio.

Ejemplo de diseño centrado: www.elbuscadordecursos.comPara empezar, ¿que entendemos por un diseño centrado?, pues aquel diseño web que permanece centrado verticalmente en el navegador que utilicemos (en cualquier navegador: Firefox, IE, Opera… como el ejemplo de la imagen de la izquierda) sea cual sea la resolución de nuestra pantalla. Así de sencillo y de dificil a la vez. Si nosotros no indicamos al diseño web via CSS que esté centrado, por defecto, el diseño se centrara a la izquierda y en la esquina superior, en el mismo orden en el que escribimos, por ejemplo. Así que una vez que esto es claro y meridiano, que diría alguno, pasemos a explicar como se hace.

En primer lugar creamos el documento HTML de nuestro proyecto, la página principal, y la llamamos como queramos, por ejemplo, layout01.html. Lo siguiente que debemos hacer es vincular ese archivo html a una hoja de estilos css que llamaremos, por ejemplo, layout01.css.

Antes de continuar insisto siempre en que es fundamental que visualicemos el resultado que pretendemos conseguir antes de ponernos a hacerlo. Un recurso muy antiguo y muy util es dibujar como queremos que sea nuestra web, ya que en el mismo dibujo podemos hacer anotaciones. Creedme amigos, es muy pero que muy util aunque sea más viejo esto de dibujar que hacer pis en el campo.

Con la idea clara, hagamos la estructura. En este caso yo voy a hacer un diseño con una cabecera y un cuerpo central, así de sencillo. Luego ya cada uno puede ir agregando cosas. En primer lugar voy a crear un estilo tipo ID (los que llevan #, no como los class, que llevan un .) de DIV que englobe todo el ancho de la página. Es bueno tener metodología en esto y utilizar siempre el mismo tipo de estructuras. Yo lo voy a llamar “wrapper” y es así:

#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}

Este ID de CSS dice que el ancho es del 100% de la página, que el texto esta centrado y que el margen superior es de 10px. Al margen podria ponerle otros valores o no ponerle ninguno. Ahora, en mi documento html inserto este DIV de la siguiente manera:

<div id=”wrapper”>
</div>

Lógicamente si publico la página en un navegador no veré nada todavía, porque lo que hemos creado, este “wrapper” es el envoltorio que va a contener al resto de la estructura para que aparezca centrada. Lo siguiente es crear el ID del DIV que va a tener todo el contenido dentro. Este DIV estará dentro del “wrapper” y por eso estará siempre centrado. Llamo a este DIV “container”, y es así:

#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}

Simplemente le he indicado el ancho total que va a tener el sitio web (750 px en este caso) y también le he indicado que los márgenes izquierdo y derecho tengan una medida “auto”. Esto hace que el DIV container se mantenga siempre centrado dentro del “wrapper”, tal y como indica el estilo del “wrapper” al utilizar un text-align: center. Ahora inserto este DIV dentro del “wrapper” tal que así:

<div id=”wrapper”>
<div id=”container”>
</div>
</div>

Sigo sin ver nada si lo publico en un navegador, y es normal, porque no hay ningún contenido sino simplemente una estructura para albergar el contenido, que es justo lo que hemos hecho. A partir de ahora, lo que nos aseguramos es que el DIV “container” esté centrado de forma absoluta. Voy a hacer dos estilos ID más, uno que llamare “header” y que definira la cabecera y otro que llamare “content” que definira el contenido principal, y quedaran así:

#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}

Que quede claro que lo mismo que yo les doy estos valores de tamaño y de background, luego cada uno tiene que jugar en función de lo que quiera obtener. Una vez definidos estos IDs los incluyo en mi documento html dentro del DIV “container”:

<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>

Layout01 - Asi queda el resultado final.Y tachán, ya está (pulsa la miniatura de la derecha para ver como queda el resultado en Internet Explorer). Para que se vea el contraste ya que no voy a poner nada de contenido, en la CSS pongo en el estilo body que haya un background-color: #000000; para que se vea el fondo negro y los DIVs que he insertado en blanco. Resumiendo, lo que he hecho ha sido indicar via CSS a una serie de DIVs que deben tener el contenido centrado de forma absoluta. La hoja CSS layout01.css ha quedado así hecha:

body {
background-color: #003366;
}
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}
#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}

Y el archivo HTML para conseguir este increible y fascinante resultado que os cambiará la vida es así:

<head>
<title>ricardotayar.wordpress.com</title>
<link href=”layout01.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>
</body>
</html>

Ala mozos, ahora a practicar cada uno en su casa estas cosicas, que poco a poco se pueden conseguir resultados muy interesantes. Ahora, ya sabeis como centrar un diseño web utilizando CSS, así que lo siguiente es experimentar y ampliar esta minilección por cuenta propia e ir dándole contenido al contenedor web principal… suerte!!!

Cuando empecé en esto de diseñar webs, el diseño gráfico y todo este mundillo en general, las cosas eran muchiiiiiisimo más simples que ahora, que prácticamente tienes que estar todos los días leyendo 1 o 2 horitas para enterarte de por donde van los tiros en la web, y aún así no te enteraras de todo jamás en tu vida.

Hace como no se cuantos años llegó a mi vida el CSS y como todo hijo de vecino me hice las tres preguntas de rigor, que son: ¿que es el css?, ¿para que sirve el css? y ¿podré hacer las webs más chulas y más rápido?. Creo que para todo el mundo cuando empieza con CSS estas son las tres grandes preguntas, y el problema hoy en día es que encuentras con mucha facilidad miles de guías de CSS super completas y muchísimas páginas de recursos, pero nadie te explica de forma sencilla y rápida que es esto del CSS, y eso, amigos mios , es lo que voy a intentar yo… con un par!!!

¿Que es el CSS? – CSS son las siglas de Cascading Style Sheets, que en cristiano de toda la vida viene a ser algo así como Hojas de Estilo en cascada, porque son precisamente eso, aunque esto se entiende mejor con el paso del tiempo. El CSS, para que nos entendamos es un lenguaje que permite que un documento separado de tus páginas web definas todo el estilo de tu web, entendiendo como esto tipos de letra, comportamientos de los enlaces, etc… Si si si, lo se, es probable que tú, pequeño amigo que has llegado aquí de chiripa, todavía no sepas de que co%&·”#es te hablo, porque no queda claro. Tú, para que nos entendamos, haces tu web a tu marcha, con su contenido, pero la forma de ese contenido la defines en un documento externo, en una hoja CSS. Aquí pongo dos imágenes para que se entienda mejor: en la imagen de la web rision.net blanca, la web está sin CSS, mientras que en la imagen negra, la web está vinculada a su hoja CSS.

La web de la Rision - www.rision.net - sin CSS. ¿A que es fea?La web de la Rision - www.rision.net - con CSS. ¿A que as� es mucho más chula?

La diferencia es brutal, mismo contenido pero presentación totalmente diferente. Eso es el CSS, la posibilidad de separar el estilo de una web de su contenido, así de sencillo y de complicado a la vez. Tu haces un html por un lado y una hoja de estilos, un css, por otro, los juntas (vinculando el html a la css) y el resultado es algo así como esto.

Una vez aclarado, más o menos, que es el CSS, pasamos al segundo apartado, no menos apasionante.

¿Para qué sirve el CSS? – Aunque parezca obvio, mucha gente sabe lo que es el CSS pero no lo usa o lo usa de mala manera y de forma corrupta y con malos modos y tal. Lo más sencillo de entender es que el CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web… ¿poderes mágicos? NOOOOOO!!!, ese es precisamente el poder de CSS. En cristiano, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen. Como ejemplo, usando otra vez la web rision.net algo sencillo.

La web de la Rision - www.rision.net - con CSS. ¿A que as� es mucho más chula?Rision.net con la CSS cambiadaEn la imagen de fondo negro veis la web como es. Esto es así por ejemplo porque la CSS de esa web determina que de fondo de página (background-image) se va a poner una imagen que es un rayadico negro y se ve ese fondo. Si yo cambió eso solo en el CSS y le digo que el background en vez de una imagen sea el color #00afc8, pues el fondo desaparecera en todas las páginas y se sustituira por el color que he metido. y si además pongo que el tamaño de la fuente en vez de los 11px que pone sea de 18px pues ese cambio también se aplicara a toda la web, en concreto a todas las zonas de la web donde se apliquen esos estilos que he modificado. La página cambiada es la de fondo verde, y solo tocando dos líneas en el CSS.

Y ahora la cuestión más importante…

¿Me ayudara el CSS a ligar más, haré webs más chulas? – Contestandoprimero lo más importante, diré que el CSS es muy potente pero complejo a la vez, y que hace que puedas cambiar el aspecto completo de una web empleando unas pocas horas en modificar la CSS a fondo, ese es el espiritu de webs como CSS Zen Garden ( en inglés) o del Proyecto Camaleón (en español), que explica con bastante claridad y más en detalle como usar CSS y su utilidad.

Sobre lo de ligar más, hombre… si la chavala en cuestión es informática o le va el mundillo de internet en plan profesional pues es probable que atraigas su atención, pero si eres un caya malayo lo vas a tener igual de crudo, y si te pones a hablar de CSS con una moza que ni sepa de que le hablas, lo más probable es que te abandone y te cambie por el primer sujeto que mueva el culo al ritmo de Bisbal, Shakira o cosas así… es lo que hay amigos, el CSS es muy util, sí, pero dificilmente os servirá para mejorar vuestra vida social…

Intentaré ampliar la información sobre CSS en plan amiguete, para que todo el mundo lo entienda… próximamente aquí.