CSS3 nos brinda gran variedad de posibilidades para hacer la maquetación y mejorar el aspecto visual de nuestra web, hoy veremos varias de ellas y de ésta manera nos iremos sumergiendo poco a poco en el fantástico mundo CSS3, me acompañan???
-Bien entonces comencemos:
El maquetado o disposición de las distintas secciones y objetos q conforman nuestra web se realizo de diferentes maneras según la tecnología disponible en el momento, se trabajó con "frames" luego mas tarde se reemplazó esa forma de trabajar por la maquetación con tablas q combinadas con CSS lograban mejores resultados; Pero poco a poco cada vez más se optaba por realizarlo con CSS puro creando varios "div" o "span" y jugando con las propiedades disponibles, los resultados eran agradables pero el trabajo se complicaba si queríamos un aspecto q no fueran simples sectores rectangulares de un color en particular, para esto llamábamos a editores gráficos como photoshop gimp u otro con el q crear imágenes atractivas y asi nosotros poder usarlas como fondo simulando la existencia de bordes redondeados, sombras y demás, y cuando queríamos crear botones con algunos efectos o algún menú desplegable necesitábamos ayuda desde javascript lo q hacía q logar sitios atractivos requiera interacción entre varias herramientas. Si bien con la aparición de CSS3 no quiere decir q se deje de usar estas herramientas para lograr grandes resultados, de hecho se siguen usando, lo q se consiguió es liberarse un poco y q estas ya no sean totalmente necesarias para conseguir sitios agradables a la vista, es así q veremos como crear botones de gran terminación y hasta un menú desplegable solo con CSS3. Espero q les encante este camino tanto como a mi...
El diseño mas común entre los sitios web es una cabecera, mas abajo estará dividido en dos sectores, uno destinado a la barra de navegación el otro al contenido del sitio y por último aparecerá el pie de página, es un diseño sencillo y q no presenta grandes complicaciones por lo q será el primero q veremos, luego vamos a ver algunas variantes como para explicar un poco mas y q noten como trabajamos con las distintas secciones, esto les servirá para q puedan jugar con el diseño como más les guste y así lograr terminaciones personalizadas y divertidas.
Veamos los pasos q seguiremos para conseguir este primer diseño:
-Primero debemos hacer un bosquejo y planificar de ante mano el resultado final de nuestro sitio, esto será de gran ayuda y aunq parezca q estamos perdiendo el tiempo es en realidad una inversión ya q luego trabajaremos con las ideas claras con un objetivo fijo y no estaremos tomando decisiones y realizando cambios a medida q codificamos. Así seria nuestro bosquejo:
-Una vez listo el bosquejo comenzamos a crear las distintas secciones q conforman nuestro sitio, para esto trabajamos con los distintos tag de HTML aprendidos, podemos usar los q queramos yo usaré los de HTML5 y si necesito alguno auxiliar tomaré algun "div" con "id". El código para un diseño como este es algo así:
Observen q se puede apreciar el esqueleto del sitio y aunq por ahora no tenga forma en el navgador gracias a la identación del código podemos ir imaginando el resultado y a lo q queremos llegar, eso es lo q nuestros profesores nos decian y q razón tenian al hablar de la importancia de una buena identación q clarifique y sirva de guía para leer y comprender el código.
-Con todo esto pasamos a programar las distintas propiedades de CSS usando cualquiera de los métodos q conocemos para agregar estilos, yo particularmente usó estilo desde un archivo externo.
Lo primero q haremos es hacer unas limpiezas q son convenientes hacer por cualquier cosa, esto es poner el margen y padding general en 0, esto es algo q yo uso algo q aprendí en la facu y q me hace sentir más seguro en el sentido q los margenes y padding q habrá en el sitio los habré creado yo y por ende los voy a conocer. Para hacer esto usamos el simbolo "*" q significa q el formato definido se aplicará a todo el contenido de nuestro documento, es útil este sector del código para definir un tipo de tipografía especifica para unificar todo el texto de nuestro sitio por ejemplo.
-Luego daremos un tamaño en particular y si quieren color para distinguir a nuestro "body" más tarde podremos cambiar este color sin ningun problema por ahora solo es para graficar el diseño. Es recomendable usar medidas absolutas para configurar esto y no relativas ya q si usamos relativas y cambiamos el tamaño de la ventana de nuestro navegador pueden sufrir cambios y deformaciones las distintas secciones, no digo q no se deben usar medidas relativas solo digo q yo trato de usar absolutas.
-Bien con el cuerpo definido nuestra web va quedando algo asi:
Para nada linda y sin forma ajaj pero no se preocupen recién comenzamos...
-Ubiquemos la cabecera conde corresponde y le demos el formato q nos guste para esto aplicaremos al "header" lo siguiente:
Agregamos un "width" para configurar el ancho, en este caso use una medida relativa.
Eleginos un color de fondo con "background-color".
Definimos un borde de 1px de grosor, q sea un trazo solido y de color blanco.
Ponemos "margin:auto;" para q quede centrado automáticamente, después aclaramos q el margen superior debe ser de 10px y el inferior de 15px.
Queremos una separación entre el texto y el borde de unos 20px, para esto usamos "padding"
Y por último decimos q el texto contenido en la cabecera debe estar centrado.
Veamos como va quedando con estos cambios:
Un poco mejor no??
Pero todavía no me gusta, creo q es hora de aplicar algo de magia CSS3:
Primero volví donde estaba el código de nuestro "body" y le agregue un "margin:auto;" para q quede centrado.
Luego solo incluiremos 2 propiedades propias de CSS3:
"border-radius" esto casi por obra de un ser superior moldeará los bordes de nuestra cabecera deacuerdo a los px q definamos, el orden en el siguiente, el primer valor corresponde a la esquina superior izquierda, la segunda a la superior derecha y así gira en sentido de las agujas de relog. Si solo colocamos un valor este será interpretado para todas las esquinas.
El siguiente "chiche" q usaremos es "box-shadow" q creará sin más una linda sombra para q cobre vida el "header", para esto debemos indicar primero el desplazamiento de izquierda a derecha de la sombra, segundo el desplazamiento hacia abajo, el tercer valor es para la densidad de la sombra y por último el color de ésta. Les recomiendo cambiar los valores y jugar con ellos para notas los cambios y los distintos resultados. Y con solo eso logramos esto:
Me gusta un poco más!!!
Para ser nuestra primer cabecera está mas q aceptable asiq lo dejemos asi por el momento, sigamos con la barra de navegación:
-Nuestra barra de navegación en el bosquejo está ubicada a la izquierda y es vertical, bueno codifiquemos eso entonces:
Para lograr q la barra se posicione sobre la izquierda debemos decirle al navegador q esta se ubicará en una posición relativa y q debe estar flotando a la izquierda, esto lo diremos en lenguaje CSS "position:relative;" y "float:left;"
Le damos un ancho q nos guste y vamos a configurar un alto mínimo, eso lo indicamos con la propiedad "min-height" esto quiere decir q por lo menos debe tener ese alto pero por supuesto este se irá incrementando automáticamente de ser necesario.
Elegimos el color de fondo y definimos un borde, agregamos los efectos "border-radius" y "box-shadow"
Diremos q el texto debe tener una separación con el borde de unos 5px y estar alineado hacia la derecha. El resultado:
Cada vez está adquiriendo mas forma, continuemos:
-El sector del contenido debe estar a la derecha asi q la codificación sera muy similar al código de la barra de navegacion solo posee unos cambios.
Configuramos el ancho, un alto minimo, un color de fondo y un borde y los efectos como ya lo hicimos, se podria mejorar el código colocando las propiedades q son comunes a varios elementos en una sola llamada separando cada uno de estos elementos por comas, pero esto es para q veamos como maquetar por lo q no lo dejaremos asi. Vemos q es muy parecido al anterior solo q no necesitamos flotar el contenido porq queremos q ocupe la mayor parte del área del navegador. Obtenemos esto:
Solo nos quedaría programar el pie de página y concluiríamos con esta etapa en la creación de nuestra web:
-Para el pie hacemos algo similar a la cabecera:
Damos configuraciones ya conocidas, solo definimos un alto fijo con "height:20px;" y un margen superior de 10px para separarlo del sector de contenidos.
El resto de las propiedades las vimos anteriormente, vuelvo a insistir q este es solo un ejemplo q sirve para explicar el uso y aplicación de estas herramientas no debe tomarse como una receta paso a paso de como maquetar ni mucho menos.
El resultado final de nuestra maquetación es este, se parece al bosquejo asi q eso nos indica q logramos lo q buscábamos:
Vamos a mostrar como logar otros diseños para nuestra web, solo son ejemplos, ustedes saben q dependerá de ustedes la organización y disposición de los distintos elementos:
Hasta ahora hicimos un diseño y al agregar algo de contenido y un menú la página quedó así:
Los cambios básicamente fueron agregar el contenido con parrafos "p" darle un margen determinado un ancho y una alineación al texto, también se colocó una imagen con "img" se asignó un ancho y alto y se dio ubicación hacia la derecha... este sería el código:
Ahora hagamos unos cambios a nuestro diseño, por ejemplo. q pasa si quiero q el menú este a la derecha de nuestra web??:
Para lograr esto flotamos el sector "nav" hacia la derecha, corregimos el margen izquierdo del contenido y el margen derecho del sector de link:
y si queremos un menú horizontal y no uno vertical??:
En este caso hicimos varios cambios al código:
El más importante pero no el único se dá en "nav" donde la posición la ponemos en "absolute" para q no dependa de los elementos anteriores para su ubicación si no solo de la posición q nosotros le indiquemos, como vemos colocamos una posición desde la izquierda de "220px" esto ustedes pueden ir viendo y jugando con las medidas hasta centrarlo correctamente. Otro cambio importante está en el "padding" superior del articulo, donde deberemos colocar un valor tal q nuestro contenido no quede detrás del menú. También configuramos el ancho para q pueda contener todos los elementos y el alto para q se adapten a medida. Por último el cambio q hace q se vean los elementos alineados lo logramos con "display" en "inline":
Bueno vimos otras opciones de maquetado, para q puedan ver como jugar con los elementos y combinarlos para conseguir distintos resultados.
Espero q les sirva esto, pero no crean q termina acá, recién estamos comenzando, es así q en próximas entradas veremos el manejo de imágenes, la creación de un menú y más efectos...
Ya saben cualquier duda o consulta serán aclaradas con gusto...
-Bien entonces comencemos:
El maquetado o disposición de las distintas secciones y objetos q conforman nuestra web se realizo de diferentes maneras según la tecnología disponible en el momento, se trabajó con "frames" luego mas tarde se reemplazó esa forma de trabajar por la maquetación con tablas q combinadas con CSS lograban mejores resultados; Pero poco a poco cada vez más se optaba por realizarlo con CSS puro creando varios "div" o "span" y jugando con las propiedades disponibles, los resultados eran agradables pero el trabajo se complicaba si queríamos un aspecto q no fueran simples sectores rectangulares de un color en particular, para esto llamábamos a editores gráficos como photoshop gimp u otro con el q crear imágenes atractivas y asi nosotros poder usarlas como fondo simulando la existencia de bordes redondeados, sombras y demás, y cuando queríamos crear botones con algunos efectos o algún menú desplegable necesitábamos ayuda desde javascript lo q hacía q logar sitios atractivos requiera interacción entre varias herramientas. Si bien con la aparición de CSS3 no quiere decir q se deje de usar estas herramientas para lograr grandes resultados, de hecho se siguen usando, lo q se consiguió es liberarse un poco y q estas ya no sean totalmente necesarias para conseguir sitios agradables a la vista, es así q veremos como crear botones de gran terminación y hasta un menú desplegable solo con CSS3. Espero q les encante este camino tanto como a mi...
El diseño mas común entre los sitios web es una cabecera, mas abajo estará dividido en dos sectores, uno destinado a la barra de navegación el otro al contenido del sitio y por último aparecerá el pie de página, es un diseño sencillo y q no presenta grandes complicaciones por lo q será el primero q veremos, luego vamos a ver algunas variantes como para explicar un poco mas y q noten como trabajamos con las distintas secciones, esto les servirá para q puedan jugar con el diseño como más les guste y así lograr terminaciones personalizadas y divertidas.
Veamos los pasos q seguiremos para conseguir este primer diseño:
-Primero debemos hacer un bosquejo y planificar de ante mano el resultado final de nuestro sitio, esto será de gran ayuda y aunq parezca q estamos perdiendo el tiempo es en realidad una inversión ya q luego trabajaremos con las ideas claras con un objetivo fijo y no estaremos tomando decisiones y realizando cambios a medida q codificamos. Así seria nuestro bosquejo:
-Una vez listo el bosquejo comenzamos a crear las distintas secciones q conforman nuestro sitio, para esto trabajamos con los distintos tag de HTML aprendidos, podemos usar los q queramos yo usaré los de HTML5 y si necesito alguno auxiliar tomaré algun "div" con "id". El código para un diseño como este es algo así:
Observen q se puede apreciar el esqueleto del sitio y aunq por ahora no tenga forma en el navgador gracias a la identación del código podemos ir imaginando el resultado y a lo q queremos llegar, eso es lo q nuestros profesores nos decian y q razón tenian al hablar de la importancia de una buena identación q clarifique y sirva de guía para leer y comprender el código.
-Con todo esto pasamos a programar las distintas propiedades de CSS usando cualquiera de los métodos q conocemos para agregar estilos, yo particularmente usó estilo desde un archivo externo.
Lo primero q haremos es hacer unas limpiezas q son convenientes hacer por cualquier cosa, esto es poner el margen y padding general en 0, esto es algo q yo uso algo q aprendí en la facu y q me hace sentir más seguro en el sentido q los margenes y padding q habrá en el sitio los habré creado yo y por ende los voy a conocer. Para hacer esto usamos el simbolo "*" q significa q el formato definido se aplicará a todo el contenido de nuestro documento, es útil este sector del código para definir un tipo de tipografía especifica para unificar todo el texto de nuestro sitio por ejemplo.
-Luego daremos un tamaño en particular y si quieren color para distinguir a nuestro "body" más tarde podremos cambiar este color sin ningun problema por ahora solo es para graficar el diseño. Es recomendable usar medidas absolutas para configurar esto y no relativas ya q si usamos relativas y cambiamos el tamaño de la ventana de nuestro navegador pueden sufrir cambios y deformaciones las distintas secciones, no digo q no se deben usar medidas relativas solo digo q yo trato de usar absolutas.
-Bien con el cuerpo definido nuestra web va quedando algo asi:
Para nada linda y sin forma ajaj pero no se preocupen recién comenzamos...
-Ubiquemos la cabecera conde corresponde y le demos el formato q nos guste para esto aplicaremos al "header" lo siguiente:
Agregamos un "width" para configurar el ancho, en este caso use una medida relativa.
Eleginos un color de fondo con "background-color".
Definimos un borde de 1px de grosor, q sea un trazo solido y de color blanco.
Ponemos "margin:auto;" para q quede centrado automáticamente, después aclaramos q el margen superior debe ser de 10px y el inferior de 15px.
Queremos una separación entre el texto y el borde de unos 20px, para esto usamos "padding"
Y por último decimos q el texto contenido en la cabecera debe estar centrado.
Veamos como va quedando con estos cambios:
Un poco mejor no??
Pero todavía no me gusta, creo q es hora de aplicar algo de magia CSS3:
Primero volví donde estaba el código de nuestro "body" y le agregue un "margin:auto;" para q quede centrado.
Luego solo incluiremos 2 propiedades propias de CSS3:
"border-radius" esto casi por obra de un ser superior moldeará los bordes de nuestra cabecera deacuerdo a los px q definamos, el orden en el siguiente, el primer valor corresponde a la esquina superior izquierda, la segunda a la superior derecha y así gira en sentido de las agujas de relog. Si solo colocamos un valor este será interpretado para todas las esquinas.
El siguiente "chiche" q usaremos es "box-shadow" q creará sin más una linda sombra para q cobre vida el "header", para esto debemos indicar primero el desplazamiento de izquierda a derecha de la sombra, segundo el desplazamiento hacia abajo, el tercer valor es para la densidad de la sombra y por último el color de ésta. Les recomiendo cambiar los valores y jugar con ellos para notas los cambios y los distintos resultados. Y con solo eso logramos esto:
Me gusta un poco más!!!
Para ser nuestra primer cabecera está mas q aceptable asiq lo dejemos asi por el momento, sigamos con la barra de navegación:
-Nuestra barra de navegación en el bosquejo está ubicada a la izquierda y es vertical, bueno codifiquemos eso entonces:
Para lograr q la barra se posicione sobre la izquierda debemos decirle al navegador q esta se ubicará en una posición relativa y q debe estar flotando a la izquierda, esto lo diremos en lenguaje CSS "position:relative;" y "float:left;"
Le damos un ancho q nos guste y vamos a configurar un alto mínimo, eso lo indicamos con la propiedad "min-height" esto quiere decir q por lo menos debe tener ese alto pero por supuesto este se irá incrementando automáticamente de ser necesario.
Elegimos el color de fondo y definimos un borde, agregamos los efectos "border-radius" y "box-shadow"
Diremos q el texto debe tener una separación con el borde de unos 5px y estar alineado hacia la derecha. El resultado:
Cada vez está adquiriendo mas forma, continuemos:
-El sector del contenido debe estar a la derecha asi q la codificación sera muy similar al código de la barra de navegacion solo posee unos cambios.
Configuramos el ancho, un alto minimo, un color de fondo y un borde y los efectos como ya lo hicimos, se podria mejorar el código colocando las propiedades q son comunes a varios elementos en una sola llamada separando cada uno de estos elementos por comas, pero esto es para q veamos como maquetar por lo q no lo dejaremos asi. Vemos q es muy parecido al anterior solo q no necesitamos flotar el contenido porq queremos q ocupe la mayor parte del área del navegador. Obtenemos esto:
Solo nos quedaría programar el pie de página y concluiríamos con esta etapa en la creación de nuestra web:
-Para el pie hacemos algo similar a la cabecera:
Damos configuraciones ya conocidas, solo definimos un alto fijo con "height:20px;" y un margen superior de 10px para separarlo del sector de contenidos.
El resto de las propiedades las vimos anteriormente, vuelvo a insistir q este es solo un ejemplo q sirve para explicar el uso y aplicación de estas herramientas no debe tomarse como una receta paso a paso de como maquetar ni mucho menos.
El resultado final de nuestra maquetación es este, se parece al bosquejo asi q eso nos indica q logramos lo q buscábamos:
Otros modelos
Vamos a mostrar como logar otros diseños para nuestra web, solo son ejemplos, ustedes saben q dependerá de ustedes la organización y disposición de los distintos elementos:
Hasta ahora hicimos un diseño y al agregar algo de contenido y un menú la página quedó así:
Los cambios básicamente fueron agregar el contenido con parrafos "p" darle un margen determinado un ancho y una alineación al texto, también se colocó una imagen con "img" se asignó un ancho y alto y se dio ubicación hacia la derecha... este sería el código:
Ahora hagamos unos cambios a nuestro diseño, por ejemplo. q pasa si quiero q el menú este a la derecha de nuestra web??:
Para lograr esto flotamos el sector "nav" hacia la derecha, corregimos el margen izquierdo del contenido y el margen derecho del sector de link:
y si queremos un menú horizontal y no uno vertical??:
En este caso hicimos varios cambios al código:
El más importante pero no el único se dá en "nav" donde la posición la ponemos en "absolute" para q no dependa de los elementos anteriores para su ubicación si no solo de la posición q nosotros le indiquemos, como vemos colocamos una posición desde la izquierda de "220px" esto ustedes pueden ir viendo y jugando con las medidas hasta centrarlo correctamente. Otro cambio importante está en el "padding" superior del articulo, donde deberemos colocar un valor tal q nuestro contenido no quede detrás del menú. También configuramos el ancho para q pueda contener todos los elementos y el alto para q se adapten a medida. Por último el cambio q hace q se vean los elementos alineados lo logramos con "display" en "inline":
Bueno vimos otras opciones de maquetado, para q puedan ver como jugar con los elementos y combinarlos para conseguir distintos resultados.
Espero q les sirva esto, pero no crean q termina acá, recién estamos comenzando, es así q en próximas entradas veremos el manejo de imágenes, la creación de un menú y más efectos...
Ya saben cualquier duda o consulta serán aclaradas con gusto...
Alguien me preguntó si puedo usar CSS3 programando como lo hacía hasta ahora con el código HTML anterior, si es la respuesta, son dos cosas totalmente independiente, podemos trabajar como estabamos acostumbrados con "div id=" y aplicarles CSS3 sin ningún problema
ResponderEliminar