Ir al contenido principal

CSS3: Maquetación y diseño (actualizado)

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:





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...

Comentarios

  1. 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

Publicar un comentario

Entradas populares de este blog

C: Conversiones de tipo (casting) en C...

El casting o simplemente cast  nos permite hacer una conversión explícita de un tipo de dato a otro, a criterio del programador siempre y cuando estos tipos sean compatibles. Este cast se realiza a través de un operador de conversión de tipos (type casting operator) y es un recurso a tener en cuenta ya que hay situaciones en que nos puede resultar de gran utilidad. Hacer uso de un cast es tan sencillo como poner (tipo de dato)  delante de la expresión o variable a convertir. Veamos un ejemplo: Declaramos una variable de tipo int con un identificador tan creativo como "a" y le realizamos diferentes cast a a para mostrarlo como si fuera un float, un double y un char en un printf. Lo que obtendríamos en pantalla sería lo siguiente: Donde tenemos el valor de nuestro a, a convertido en float y double (mostrándolo con 3 cifras decimales) y a convertido en char. Si vemos este último caso, al hacer la conversión de "a" a char toma a como el código ascii de

C: Ejemplos: Congruencia de Zeller (nivel básico) ...

La Congruencia de Zeller es un algoritmo que se atribuye al matemático alemán Julius Christian Johannes Zeller que vivió en el siglo XIX. Este algoritmo nos permite determinar el día de la semana que le corresponde a una fecha determinada del calendario Gregoriano. La fórmula que nosotros usaremos (con algunas modificaciones respecto de la original para poder usarla en  informática) es la siguiente: Donde h es el día de la semana (entre 0 y 6), J es año/100 (la centuria) y K es año mod 100 (el año de la centuria). Y hay que tener en cuenta que los meses de enero y febrero cuentan como el mes 13 y 14 del año anterior. Ahora que tenemos la fórmula, programemos el algoritmo en C mediante el uso de una función: Analicemos el código paso a paso: Tenemos en cuenta el caso de enero y febrero: Dijimos que estos meses corresponden a los meses 13 y 14 del año anterior por lo que los asignamos como corresponde (mes + 12 , que dará 13 para enero y 14 para febrero) y le rest

Algoritmos: Resolución de problemas y refinamientos en pseudocódigo...

En otras entradas, vimos las partes que debe tener nuestro algoritmo en pseudocódigo y las estructuras que utilizaremos para resolverlo. Ahora llega el turno de implementar todo en conjunto para dar origen a nuestra creación. Pero ¿cómo resolvemos un problema así? Para hacerlo, utilizaremos lo que llamamos refinamientos sucesivos. Este concepto consiste en dividir el problema en subproblemas más pequeños y a estos, a su vez, en otros más pequeños; y así sucesivamente hasta que la solución de los últimos sea trivial, sencillo de resolver. Luego usaremos todas las soluciones obtenidas para armar la solución de nuestro problema mayor. Este principio, tiene base en parte de la técnica divide and conquer (dependiendo de la traducción: "divide y vencerás") que es una de las muchas técnicas de resolución de algoritmos existentes. Como vemos, al dividir el problema en otros más pequeños y más fáciles de resolver, podemos pasar de un problema complicado a uno cuya solución es much