MOOC HTML5. HTML/CSS. Estructura CSS


Hola, en este vídeo vamos a trabajar con la estructura de las cajas y la colocación de las cajas dentro de una página web. La primera etiqueta que tenemos que controlar para colocar los objetos dentro de una página es la etiqueta ‘float’ que es hacer que los elementos floten y se puedan pegar uno a otro. Sabéis que la caja por defecto es un elemento que ocupa todo el ancho de la pantalla, con ‘float’ ocupa sólo el ancho de su contenido y permite que un elemento se coloque pegado a él, entonces aquí en este caso vemos las cajas que están con la etiqueta ‘float’ y se coloca una pegada a la otra. Esto es muy cómodo porque permite, si yo hago más grande o más pequeña la ventana del navegador, los objetos se recolocan para salir todos en la ventana de visualización. Aquí estamos viendo una composición en la que estamos utilizando unos ‘float’ en la primera, entonces en este caso el objeto al flotar, este segundo objeto se coloca pegado a él y debajo de él de manera que si yo quitase aquí el color verde vería el color amarillo que está dentro mientras que el contenido se respeta, el contenido se pega pero lógicamente no se pone debajo porque el contenido en HTML tiene prioridad y procura visualizarse siempre y aquí tendríamos el objeto posterior que en este caso está en la parte inferior de estas dos cajas. Aquí tendríamos este mismo ejemplo pero con los dos elementos con ‘float’ de manera que en este caso se pegan y veis que no ocupa la parte inferior de este. Esta sería una colocación típica de una página web y en el que tenemos otra caja, la caja posterior que utilizando el ‘clear’ rompe el flujo, de esta manera tenemos elementos que se van pegando y coloco una caja que rompe todos los elementos y empieza de nuevo la siguiente parte de la página. Es muy normal utilizar unos elementos donde hay unas cajas flotando, coloco un ‘clear’ y a partir de ahí pues continuo la composición. Aquí tenemos para que entendamos un poco los problemas que vamos a tener con el ‘float’, si cuando yo tengo tres cajas como el ejemplo de aquí arriba que flotan, un ejemplo muy típico de una web donde tenemos una zona que puede ser para un menú, una zona de contenido y una zona de destacados, la caja que lo contiene no sabe lo que ocupan de alto, una cosa un poco curiosa, aquí he puesto la caja con un ‘padding’ de color rojo además para que veáis que la caja está ahí pero que no ocupa el alto de los elementos. Para que ocupe el alto de los elementos es necesario insertar una caja con ‘clear’, entonces cuando rompes ya la caja padre dice hasta aquí llego y entonces sabe lo que mide y colorearía. Por eso es tan habitual utilizar estos elementos ‘clear’ para recolocar las cosas y poder controlar el alto de los elementos, tened en cuenta que en las páginas web nosotros habitualmente trabajamos con el ancho pero nunca trabajamos con el alto porque el alto nos puede dar problemas si el contenido es más grande del que nosotros hemos fijado y por tanto siempre trabajamos con alto libre. Aquí tenemos otro ejemplo en el que hay dos cajas con ‘float’ y una con ‘clear’, similar al caso anterior en el que tenemos otra caja con posiciones absolutas. La posición absoluta es también difícil de controlar porque le ponemos una posición, sale del flujo y utiliza un nivel z, un nivel de capas, de manera que está encima de todas las capas anteriores. Podemos tener varios objetos con composición absoluta y un objeto encima de otro, que es muy habitual para utilizar una caja donde queremos que haya informaciones una encima de otra por medio de valores absolutos. ¿Qué problema tiene la posición absoluta? Precisamente ese que cuando nosotros reducimos la pantalla, al ser absoluta puede quedar fuera mientras que los elementos con ‘float’ siempre se van a recolocar para estar dentro de la pantalla. Aquí tenemos otro ejemplo, mantenemos estas dos cajas y este ‘float’ y utilizamos otra que es también posición absoluta pero además fija de esta manera indicamos que su posición es abajo del todo y de ahí no se va a mover. Esto es habitual cuando queremos una posición fija para una barra de copyright que queremos que se vea siempre o una barra en la parte superior con un menú o con un logotipo de una empresa que queremos que se vea siempre. Otra de las etiquetas más importantes en CSS3 son las posibilidades tipográficas que nos posibilitan. Tener en cuenta que nosotros trabajamos habitualmente con la etiqueta ‘font-family’ indicando una fuente que está en el sistema operativo del usuario al cual no conocemos, entonces lo que hacemos es poner varias posibilidades y yo digo vamos a poner una tipografía ‘Times’, si no tiene la ‘Times’ que utilice la ‘Georgia’ y si no tiene la ‘Georgia’ que utilice una con serifa.
vamos a poner una tipografía ‘Times’, si no tiene la ‘Times’ que utilice la ‘Georgia’ y si no tiene la ‘Georgia’ que utilice una con serifa. Esto de utilizar una familia genérica como ‘Serif’, lo que hace es que el sistema operativo siempre tiene asociada como genérico una de sus fuentes ‘sans-serif’, de manera que siempre habitualmente terminamos con nuestras tipografías que queremos y una genérica. Aquí tenemos las familias genéricas en el caso de la ‘serif’, que es la ‘Times’ tanto en Mac como en Windows, la ‘sans serif’, que es ‘Helvética’ en Mac y ‘Arial’ en Windows, la ‘cursive’ que es la ‘Zapf-Chancery’ en Mac y la ‘Comic sans’ en Windows, la ‘fantasy’, la ‘monospace’ que es la ‘Courier’, la ‘monospace’ sabéis que es la letra en el que todos los caracteres miden lo mismo y que se utiliza habitualmente para el código informático o para tablas en las que queremos que los caracteres se vean perfectamente. El tamaño de la letra es un tema también muy complejo con la gran cantidad de resoluciones que tenemos hoy en día, entonces habitualmente antes trabajábamos con tipografías en píxeles y podía funcionar perfectamente. Cuando empezamos a resoluciones muy altas, las pantallas retina, el pixel lógicamente no es un formato que nos pueda servir en este caso utilizamos valores relativos. Fijaos un valor relativo puede ser poner un tamaño ‘small’ indicándole que es más pequeña a un tamaño ‘large’. Aquí vemos que si utilizamos como ‘medium’ el valor 1, que es el valor base del sistema pues la ‘large’ es 6/5 o la ‘small’ 8/9, entonces esto es un poco la disposición pero no vamos a saber ya lo que mide nuestra tipografía. Otra cosa normal es utilizar un valor absoluto pero que no sea píxel como puede ser el valor de la m diciéndole que esta letra es 2 veces el valor base que es 1, que es el tamaño de la m del sistema del navegador. Aquí otra etiqueta muy importante para la composición es el interlineado. El interlineado habitualmente no se toca en las páginas web y es un 120% pero como queremos componer de una manera y facilitar la legibilidad igual nos interesa para algunas familias tipográficas estirar un poco el espacio en blanco o condensarlas, entonces nosotros trabajamos con ‘line-height’ que es la que nos indica el interlineado y aquí os pongo un ejemplo de cómo se mide que es entre la parte superior de cada una de las líneas. Las familias tipográficas ahora nos permiten usar familias que están dentro del servidor o usar familias que están alojadas en servidores que nos ofrecen este servicio como Google Fonts. Las familias cuando las ponemos dentro del servidor tenemos un problema, ¿qué formato pongo? Aquí vemos los formatos típicos de las tipografías en cada sistema operativo o en cada navegador se va a ver un formato u otro de manera que habitualmente como utilizamos una tipografía dentro de nuestro servidor tendremos que poner varios formatos. Aquí tenemos ejemplos, ‘woff’ que es el formato abierto, que en el futuro puede ser el estándar al tipográfico ‘truetype’ que es un formato diseñado por Mac, que habitualmente utilizan los ordenadores de Mac y PC, ‘opentype’, ’embedded-opentype’ y el ‘svg’ que propiamente no es un formato, es un formato vectorial pero que también se utiliza como formato tipográfico y es el que usan los iPhone. Cuando ponemos una tipografía nosotros definimos esa tipografía con la etiqueta ‘font-face’. ‘font-face’ es una etiqueta nueva CSS3 que nos da estas posibilidades, entonces aquí tenemos por ejemplo la tipografía ‘FiraMono’ que es la tipografía del Firefox OS, que podemos descargar, es una tipografía libre y que podemos colocar en nuestro servidor. Aquí si os fijáis yo estoy utilizando 2 fuentes posibles, una es el formato ‘woff’ y otra es el formato ‘opentype’. Como asigno un nombre, en este caso le he puesto ‘FiraMono’ y en ‘font-family’ le digo ‘FiraMono’. No olvidéis nunca poner una tipografía genérica para que se sustituya por ella. Aquí tenemos unos recursos muy interesantes tipográficos, tener en cuenta por ejemplo ‘FONT SQUIREL’, que aparte de que nos ofrece muchas tipografías gratuitas también es un conversor de formatos, de manera que si tenemos una tipografía en ‘truetype’, en ‘FONT SQUIREL’ nos la convierte a todos los formatos para que podemos utilizarla de esta forma.

Be the first to comment

Leave a Reply

Your email address will not be published.


*