CSS: maquetación de una página – diseño con rejjilla/retícula (8)

CSS: maquetación de una página – diseño con rejjilla/retícula (8)


Hola, soy Sergio Luján Mora, profesor de
informática de la Universidad de Alicante, y en este vídeo que forma parte del curso
“Introducción al desarrollo web”, te voy a explicar cómo se realiza el diseño
de una página web con rejilla o retícula. En los vídeos anteriores hemos visto diferentes
estilos de diseño de páginas web: diseño fijo, diseño elástico, diseño líquido
o fluido y diseño adaptable. El diseño con rejilla, también llamado diseño
con retícula, es un concepto esencial en diseño gráfico. Su función es dividir la página en campos
e intervalos, dentro del espacio definido por los márgenes. Su objetivo es mantener una colocación correcta
de los elemento dentro de la página, dando una sensación de estructura ordenada y proporcionando
claridad y continuidad en el diseño. El diseño con rejilla se puede aplicar a
cualquiera de los diseños que se han explicado en los vídeos anteriores. Por ejemplo, un diseño fijo realizado con
tablas, está empleando la tabla como una rejilla o retícula para distribuir los elementos
sobre la página. En el diseño con retícula se emplean algunos
conceptos. Las columnas son alineaciones verticales que
crean divisiones horizontales entre los márgenes. Los módulos son unidades individuales de
espacio que están separados por intervalos regulares y que crean columnas y filas. Las líneas de flujo son alineaciones que
guían al ojo. Las zonas espaciales son grupos de módulos. Y los marcadores se emplean para indicar la
posición de texto repetido, como por ejemplo los títulos de sección o los números de
página. ¿Cómo se hace un diseño con rejilla en
una página web? Como de costumbre, lo puedes hacer tú mismo,
no es difícil, pero como de costumbre, mejor no pierdas el tiempo reinventando la rueda,
ya hay muchas ruedas, a no ser que tengas interés en aprender a hacer ruedas. Te recomiendo que busques un framework de
CSS. Existen cientos de frameworks de CSS, yo te
voy a enseñar uno muy sencillo. 960 grid system es un framework que lo único
que ofrece es una rejilla. Como indica su nombre, se basa en una rejilla de 960 píxeles
de ancho. En el propio sitio web de este framework se
pueden encontrar ejemplos de páginas web diseñadas con rejilla. Pulsando sobre este botón se puede visualizar
la rejilla que se ha empleado en el diseño. Esta página se ha diseñado con una rejilla
de 16 columnas. Y al pulsar en este otro botón vemos la rejilla
de esta otra página que es a 12 columnas. Si no te gusta la rejilla de 12 o 16 columnas,
puedes encontrar herramientas online, como esta que te muestro, que permiten configurar
el tamaño de la rejilla. Se puede definir el ancho de la columna, el
número de columnas y el gutter, que es el espacio que se quiere dejar entre dos columnas. Esta herramienta permite una previsualización
de la rejilla, tanto para una rejilla de anchura fija como una rejilla fluida. Por ejemplo, aquí tenemos una rejilla fija
de 12 columnas para un ancho de 960 píxeles. Y aquí tenemos una rejilla fluida de 12 columnas
visualizada a 1920×1080, a 1280×800, y a 1024×768. ¿Cómo se realiza un diseño con rejilla? Una vez seleccionados los parámetros de la
rejilla que queremos utilizar, esta herramienta permite descargar el fichero CSS correspondiente. El CSS lleva un conjunto de clases con la
definición de la rejilla que debemos utilizar en nuestras páginas web. Aquí tenemos un ejemplo de uso de este CSS. El primer CSS es la rejilla que me ha generado
la herramienta online, mientras que el segundo CSS solo tiene las definiciones de estilo
para los encabezados de nivel 1 y 2. He definido un color de fondo para que se pueda apreciar
el espacio que ocupa cada encabezado en la rejilla. El encabezado de nivel 1 ocupa 12 módulos
de la rejilla. El encabezado de nivel 2 ocupa 6 módulos
y además se ha desplazado 6 módulos hacia la derecha. Por último, tenemos tres columnas: la primera
columna ocupa 6 módulos, la segunda 3 módulos y la tercera también 3 módulos. Así es cómo se ve la página web sin rejilla,
los elementos de la página se ven uno a continuación del otro. Y así cuando se aplica la rejilla. Fíjate como el encabezado de nivel 2 ocupa
6 módulos y se ha situado a la derecha, ocupa el 50% de la página hacia la derecha. Así se ve la página a 1280×800. Como es
una rejilla fluida, se adapta correctamente a este ancho de visualización. Y aquí tenemos la misma página web visualizada
con resoluciones inferiores, a 1024 y a 640 píxeles de ancho.
Interesante y útil, ¿verdad? Ya para terminar, me gustaría recordarte
algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre
mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected]
y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso
“Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención.

Curso de Desarrollo Web (PHP, MySQL, HTML, CSS, JQuery) – 1. Introducción

Curso de Desarrollo Web (PHP, MySQL, HTML, CSS, JQuery) – 1. Introducción


Hola y bienvenidos al curso de desarrollo web – creación de un proyecto base Mi nombre es Jefrey Mauricio Carvajalino Peñaranda Soy Ingeniero de Sistemas, Especialista en Informática Educativa En este curso, vamos a crear nuestro propio framework tanto back-end como front-end y los aplicaremos en la creación de un proyecto el cual en adelante, nos va a servir como base para desarrollar todos n uestros proyectos web de manera profesional y el tram de arizona es lo que hará que nuestros desarrollos sean legibles y de fácil adaptación para cualquier los lenguajes que manejaremos serán php html si llevabas críticos da cuenta y el motor de base de datos será noalla sequel trabajaremos con psp orientado fetos y utilizaremos el pa tren mbc modelos vista controlador también trabajaremos con fletes bots css para facilitar la maquetación de nuestro proyecto finalmente antes de comenzar veremos cómo diseñar nuestra interfaz utilizando a beber más este es un curso muy completo y es todo lo que necesitas para aprender de una vez por todas a desarrollar proyectos de manera por presiona en este curso crearemos un proyecto va el cual no servirá como punto de partida para desarrollar de manera fácil y rápida cualquier proyecto web tanto aplicaciones como sí que es bueno reduciendo así los costos y tiempo de desarrollo sin tener que estar todo el tiempo copiando y pegando código para comenzar desde cero para poder tomar este curso es indispensable conocimientos prácticos en cada uno de los lenguajes en los que trabajaremos php mysql html css y ahora es crítico tacuary por qué crear nuestros propios ahínco en día existen gran variedad de frank gore tanto mark como frente siendo largamente industra respectivamente unos de los más populares pero en fin que es un framework y para qué sirve el general odría 2 decir que la finalidad de un framework el día detrás para alistar la forma como se programa y a su vez agilizar el desarrollo de código fuente agria en tierra poder implementar cualquier frenk oro como es apenas lógico demo que conectarnos y dependiendo del frente de la conadep rendirse al ajillo el tiempo invertido en dicho proceso maría final aunque ya manejemos la simpática al frente seguramente es cómo seremos mucho del código que realmente lo hace funcionar y de hecho no tenemos que conocernos ya que y entidades anunció el rejili xavi proceso de desarrollo y es aquí donde surgió la polémica personalmente no me gusta trabajo de chile código que no haya hecho yo mismo residiendo ume concretamente a nivel de francos ya que mi humilde escritos es común hacerlo que en una empresa deberemos adaptarnos a lo que allí se trabajó a no ser que tengamos que elegir algo que es poco probable la verdad en todo caso desde mi punto de vista el tiempo que voy a invertir el aprendizaje de un frente a él está menos lo puede invertir en el desarrollo de mi propio rencor y no vengo que estarme preocupando porque esas buena nueva versión vende casi siempre no sólo permite a las en tharsis sino también la estructura personalmente pienso que hartos del traer un reel y here usar un framework desarrollado por terceros debemos crear uno propio pero en ellos de manera más objetiva decidir cuál es la mejor opción así en caso de que optes por la primera opción se te hará más fácil entender cómo funciona bien veamos a verán que es un proyecto que hace es aquel que nos sirve como punto de partida para comenzar cualquier presa pero sin tener que estar haciendo una y otra vez las mismas cosas tomen tiempo lo que hace que trate los mucho menos a la hora de desarrollar proyectos veamos ahora cuáles son los movidos clave en un proyecto ‘las como ya deberíamos haber un desarrollo web al igual que cualquier otro desarrollo de programación se compone básicamente de módulos y en la mayoría de proyectos que desarrollamos casi siempre utilizamos varios módulos que funcionan de manera similar es por eso que en este curso vamos a regresar un proyecto dar con móviles más representativos que tiene todo desarrollo esos móviles en el mobile bay lolhé el mobile de usuarios el módulo de perfiles o relés el modelo de permisos y el módulo de menú principal estos móviles serán gestionados a través de móviles principal que llamaremos cpanel al que sólo tendrán acceso los usuarios con perfil de administrador una vez terminar el curso verás como el contar con un proyecto vaya si reducirá considerablemente el tiempo de desarrollo de cualquier proyecto de que decidas emprender el pin clica que podrá desarrollar proyectos más rápidamente lo que hará que tu productividad y tu bolsillo aumenten significativamente la fórmula simple tiempo de desarrollo más trayectos realizados y más dinero para mi bolsillo bien amigos aquí termina de ambos con esta primer video tutorial de introducción el curso nos vemos en el próximo video

CSS: maquetación de una página – diseño adaptable (7)

CSS: maquetación de una página – diseño adaptable (7)


Hola, soy Sergio Luján Mora, profesor de
informática de la Universidad de Alicante, y en este vídeo que forma parte del curso
“Introducción al desarrollo web”, te voy a mostrar los estilos de diseño que se
suelen emplear cuando se maqueta una página web. En este vídeo te voy a hablar del diseño
adaptable. En la parte anterior de este vídeo, vimos
el estilo de diseño líquido o fluido, que permite que la visualización de una página
web se adapte a los diferentes tamaños de pantalla de diferentes dispositivos. Sin embargo, en la actualidad existen tantos
dispositivos que permiten acceder a la Web, con tantos tamaños de pantalla tan diferentes,
que las ventajas que ofrece el diseño líquido son un poco limitadas para la situación actual
y es difícil lograr que una misma página web se muestre correctamente en un dispositivo
con una pantalla pequeña o en un dispositivo con una pantalla grande. Por ejemplo, si nos centramos sólo en los
dispositivos móviles, es decir, en los teléfonos y tabletas, en un estudio publicado en el
tercer cuatrimestre de 2014, se observa que existe una gran diversidad de tamaños de
pantalla y además existen diferencias significativas entre los diferentes continentes. En el siguiente gráfico de StatCounter encontramos
información similar: podemos ver la evolución de las resoluciones de pantalla desde marzo
de 2009 hasta octubre de 2014. El cambio producido en menos de 6 años ha sido impresionante. En la actualidad coexisten muchas resoluciones
de pantalla. ¿Y si hacemos un diseño para cada resolución
de pantalla? Bueno, eso sería una locura, sería mucho trabajo, pero lo que sí que
podemos hacer es organizar las diferentes resoluciones de pantalla en grupos y crear
diferentes diseños para cada grupo. Por ejemplo, imaginemos la siguiente maqueta
de una página web que tiene una cabecera, un menú principal a la izquierda, una zona
de contenido principal a la derecha con tres bloques y un pie de página. Comenzando por el diseño extra grande, se
pueden plantear diferentes transformaciones en la maqueta para adaptar la página web
a resoluciones de pantalla inferiores. Eso lo podemos lograr con un diseño adaptable,
pero ¿Cómo se diferencia un diseño adaptable
de un diseño líquido? En un diseño adaptable, el diseño de una
página puede sufrir transformaciones importantes. Por ejemplo, se puede pasar de un diseño
de varias columnas a un diseño de una sola columna. Para ello se suelen crear varias hojas de
estilo que mediante media queries permiten que el dispositivo
utilice la más adecuada. A veces, las transformaciones son tan importantes,
por ejemplo convertir una barra de menú en una lista desplegable, que es necesario la
utilización de JavaScript. En el sitio web Media Queries existe una galería
enorme de sitios web desarrollados con diseños adaptables. Aquí tenemos un ejemplo, el sitio web de
Stanford University. Este ejemplo me gusta mucho porque son pocas las universidades que
tienen una página principal con un diseño adaptable. Esta página web se visualiza correctamente
a 1920×1080 píxeles, a 1024×768 y a 640×480. Un detalle importante de esta página web
está en la transformación de la barra de menú principal, que se convierte en una lista
desplegable. ¿Cómo se realiza un diseño adaptable? Este es el esquema de la página de prueba
que estoy utilizando como ejemplo en estos vídeos. El código HTML es el mismo que he empleado
en ejemplos anteriores, pero hay una diferencia importante, esta instrucción meta es esencial
para que la página web se muestre con la escala apropiada en un dispositivo con una
pantalla pequeña o mediana. Los cambios más importantes de este diseño
los encontramos en el CSS. Este CSS no es un único CSS, en realidad
se puede entender como dos CSS en uno solo. Esto se logra con el empleo de las media queries,
unas condiciones que indican cuándo se debe utilizar un CSS. En esta página se han definido tres diseños:
cuando la resolución de pantalla sea igual o mayor que 1200 píxeles de ancho, cuando
la resolución de pantalla sea igual o mayor que 800 y menor que 1200, y cuando la resolución
sea menor que 800 píxeles, que no se ha definido nada. Así se ve la página con una resolución
de 1920 píxeles, es un diseño a tres columnas. Así se ve la página con una resolución
de 1024 píxeles, es un diseño a dos columnas. Así se ve la página con una resolución
de 640 píxeles, sin diseño. También podemos probar a visualizar la página
con resoluciones inferiores. Por ejemplo, esta es una captura de pantalla de Opera Mobile
Emulator simulando un Samsung Galaxy S II. Ya para terminar, ahora te aconsejo que veas
otros vídeos que tengo sobre el diseño adaptable. En particular, te recomiendo que veas un vídeo
dividido en tres partes en el que desarrollo paso por paso un diseño adaptable. Ahora te invito a que veas la siguiente parte
de este vídeo en el que explico el diseño basado en rejilla. Ya para terminar, me gustaría recordarte
algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre
mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected]
y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso
“Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención.

CSS: Maquetación web con CSS: uso de float

CSS: Maquetación web con CSS: uso de float


hola bienvenido al vídeo maquetación web con css del curso introducción al desarrollo web mi nombre es elena torró y soy estudiante del grado en ingeniería multimedia de la universidad de alicante me puedes encontrar y contactar conmigo a través de mi blog www.torrid.com o de mi cuenta de twitter l narcolepsia en este vídeo voy a hablar sobre cómo estructurar una página web en diferentes columnas como ya he dicho antes utilizando css las hojas de estilo en cascada una página web está formada por bloques cada elemento es un bloque distinto y esos bloques pueden estar uno sobre otro dispuestos de manera ordenada o desordenada en la misma línea o en líneas distintas la correcta estructuración del contenido de la información está presente en muchos medios de comunicación como por ejemplo en un periódico y lo mismo ocurre con las páginas web para diseñar una página web además de un correcto uso de colores y de diseño es muy importante la distribución de los elementos una distribución correcta permitirá al usuario navegar por la web de manera intuitiva haciendo que la experiencia del usuario sea más satisfactoria para empezar explicaremos una propiedad que originalmente no estaba pensada para la maquetación web pero que se utiliza mucho para realizar los layouts la propiedad flow de cloud es una propiedad de css que permite que los elementos se coloquen en una determinada posición con respecto a los otros elementos de la web esta propiedad puede ser cloud no la posición por defecto del elemento en la página flow rights la posición flotante hace lugar más a la derecha posible cloud left la posición flotante hace lugar más a la izquierda posible y flow tiger beat que hace referencia al flow de su elemento padre pero su uso no es muy común así que no nos centraremos en él aquí podéis ver algunos ejemplos de la propiedad flow en este caso al posicionarse en su posición más a la derecha primero lo hace la caja 1 y así sucesivamente hasta la caja 4 por eso varía el orden y en este ejemplo primero la caja uno se coloca a la izquierda seguida de la caja 2 luego la caja 3 se coloca a la derecha seguida de la caja 4 empecemos con un ejemplo de lay out de dos columnas partiremos de un documento sencillo en html donde definiremos los siguientes elementos cabecera columna izquierda columna derecha y pie de página así lo veríamos en el navegador ahora vamos a colocarlo de manera que la columna izquierda y la columna derecha queden alineadas horizontalmente una al lado de la otra lo primero que debemos hacer en nuestro css es colocar la propiedad load left en los dif derecha e izquierda que son los que queremos alinear lo hacemos así porque queremos que se coloquen hacia la izquierda de la página web aparece la propiedad clear boat esta propiedad permite modificar el comportamiento por defecto del posicionamiento flotante es decir fuerza un elemento en este caso al pie de página a mostrarse debajo de cualquier caja flotante el siguiente paso es establecer el width de las columnas izquierda y derecha con porcentajes en este caso hemos definido el width de la columna izquierda con un tamaño del 23 por ciento y el de la derecha con un 72% en total el tamaño de las columnas junto con los márgenes debe sumar un 100% que es el máximo tamaño del ancho de la página este es el resultado la columna izquierda que podría ser el menú queda más pequeña que la columna derecha que podría ser el contenido y ambas están alineadas y porque hemos usado porcentajes porque así conseguimos un diseño adaptativo es decir que se adapte a las dimensiones de la pantalla como ves al hacer la pantalla más pequeña los elementos van adaptándose al tamaño es muy importante tener en cuenta un diseño adaptable ya que hoy en día existen muchos tipos de dispositivos con una gran variedad de tamaños de pantalla ahora añadiremos una nueva columna para poner un ejemplo del layout de tres columnas se trata del mismo ejemplo anterior al que le hemos añadido el dif centro lo utilizaremos como el dip que contendrá el contenido principal de nuestra web añadimos en el css el nuevo divx en este caso ya que habrá tres columnas tendremos que modificar el tamaño de las columnas izquierda y derecha para que queden alineadas como podemos comprobar ahora hemos estructurado la web de manera distinta es decir hemos creado un layout distinto hay muchas otras maneras de maquetar una página web pero una que no se debió usar es la maquetación con tablas la diferencia con las etiquetas de tabla en html es que estructurar una web con este tipo de tablas no cumple los estándares de accesibilidad estás acostumbrado a maquetar con tablas te voy a explicar cómo hacerlo de forma parecida pero con css si estás interesado en este tema puedes obtener más información en la siguiente página web existe otra propiedad de css conocida como display que también se usa en la maquetación web en este vídeo me centraré en las propiedades display table donde colocaremos los elementos como si se tratara de una tabla aquí vemos los distintos elementos que puede tener una tabla el título o una columna una fila o una celda vamos a maquetar la web como en el ejemplo anterior con tres columnas pero esta vez utilizando las propiedades de la tabla la cabecera será una h but caption y las columnas izquierda centro y derecha un h bou self de nuevo usaremos porcentajes para establecer las distintas dimensiones en este caso es más sencillo puesto que si emitimos el porcentaje de por ejemplo la celda derecha ésta se dibujará con el tamaño que le queda a la ventana por defecto lo que hace el diseño mucho más adaptable este es el resultado como veis es muy parecido a la anterior pero más adaptable y con un layout más limpio y así es como se vería en tamaños más pequeños de pantalla ves cómo se adapta de una resolución más pequeña hay una gran variedad de lay outs que puedes realizar con la propiedad display con los que podrás conseguir un buen diseño estructurado y adaptable recuerda que este vídeo forma parte del curso introducción al desarrollo web que está disponible en la dirección y de su web punto es muchas gracias por tu atención

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 2)

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 2)


hola soy sergio luján moral profesor de informática de la universidad de alicante y en este vídeo que forma parte del curso introducción al desarrollo web te voy a mostrar cómo crear un diseño adaptable sencillo antes de empezar me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico sergio luján ua punto es y a través de mi cuenta en twitter sergio luján mora en otro vídeo te explicado que es un diseño adaptable adaptativo o flexible y te mostrado algunos patrones de diseño adaptable en este vídeo vamos a ver cómo crear un diseño adaptable desde cero voy a utilizar dos herramientas para mostrar el funcionamiento del diseño adaptable por un lado tenemos la extensión window risa y share para google chrome que permite cambiar el tamaño de la ventana del navegador por otro lado tenemos la aplicación opera mobile emulator que permite emular la visualización de una página web con diferentes dispositivos móviles como teléfonos o tabletas al realizar un diseño adaptable hay gente que defiende realizar primero el diseño para el ordenador es decir para el dispositivo de mayor resolución y luego adaptarlo para el móvil el dispositivo de menor resolución sin embargo también hay gente que defiende lo contrario lo que se llama mobile first yo voy a aplicar el primer método voy a realizar un diseño para el ordenador y luego lo voy a adaptar al móvil vamos a utilizar como ejemplo para explicar cómo hacer un diseño de tablet esta página web que estamos viendo ahora mismo sin css estos elementos son el subtítulo de la página y en realidad no van a aparecer los tres a la vez sino que cada vez aparecerá uno solo yo voy a definir tres diseños en el diseño adaptable un diseño que llamado grande otro mediano y otro mini aparecerá escrito grande cuando el tamaño del área de visualización de la ventana del navegador sea mayor o igual que 981 píxeles medianos cuando el tamaño del área de visualización de la ventana del navegador esté comprendido entre 480 y 1 píxeles y 981 y mini cuando sea menor o igual que 480 píxeles para el menú hemos definido dos estilos de presentación mediante una lista huele y mediante una lista desplegable de tipo select además en el pie aparece repetido el menú mediante una lista desplegable de tipo select a cada módulo o bloque principal de la página web le hemos puesto un color de fondo para identificarlo correctamente esta es la presentación de la página web en la pantalla de un ordenador con la resolución máxima en concreto mil 900 píxeles de ancho se ha optado por un diseño basado en dos columnas con el menú principal situado a la izquierda y la zona de contenido a la derecha esta es la presentación con una resolución de 640 píxeles de ancho en este caso como se ha reducido el ancho se emplea un diseño basado en una sola columna primero aparece el menú principal y después la zona de contenido finalmente está la presentación en un dispositivo móvil como un teléfono móvil con una resolución de 320 píxeles de ancho en este caso se ha optado por convertir el menú en una lista desplegable para ganar algo de espacio podemos ver que se pueden apreciar diferencias entre las diferentes presentaciones además de lo comentado respecto a la maquetación el cambio de dos a una columna también hay cambios en el tipo de letra y en la alineación del texto que pasa de centrado a alineado a la izquierda lo importante no es que se vea exactamente igual en todos los casos eso es imposible lo importante es que se pueda ver correctamente vamos a ver el código html y css que he escrito para lograr este efecto en primer lugar vamos a comprobar como al cambiar el tamaño de la ventana del navegador se activan los diferentes diseños adaptables que he definido cambio el tamaño de la ventana del navegador y podemos ver cómo llegará un momento en el que se activa el diseño mediano he puesto aquí estos títulos cambio el título de la página para que se vea el cambio fijaros como aquí tenemos el diseño grande y a continuación pasamos al diseño mediano en el cambio del diseño grande al diseño mediano podemos ver que hay un cambio en la maquetación en el número de columnas y también hay un cambio en el tipo de letra empleado en la fuente esto es este cambio del tipo de letra simplemente lo hago para indicar que podemos cambiar muchos aspectos en el diseño de nuestras páginas si sigo haciendo más pequeña la ventana del navegador llegará un momento en el que se activará el diseño pequeño el diseño que llamado min y aquí lo tenemos vuelvo a hacer la ventana más grande se activa el diseño mediano y aquí tenemos el diseño mini en el diseño minis sigue la maquetación a una sola columna pero hay un cambio importante está lista este menú se convierte en una lista desplegable como podemos ver aquí que contiene exactamente el mismo contenido y también aparece en el pie de la página la misma lista desplegable repetida para tener un acceso rápido al menú también hay un cambio en el tipo de letra que se emplea podemos apreciar cómo cambia el tipo de letra de un tipo sheriff el que tenemos ahora a un tipo sanserif y también apreciamos otro cambio importante en la zona de contenido en los diseños grandes y medianos en la zona de contenido aparecen unos enlaces a distintas entradas con una pequeña descripción sin embargo cuando pasamos al diseño pequeño esa descripción es el resumen de la entrada desaparece vamos a ver cómo hacemos todo esto con html y css este es el código html de la página de ejemplo primero vamos a revisar rápidamente el html para ver que no hay nada especial he empleado html5 y estoy usando alguna de las nuevas etiquetas semánticas de html 5 por ejemplo aquí tengo el header la cabecera de la página aquí tengo este elemento en la ftc el elemento principal de navegación mi menú y luego tengo un apartado section que está compuesto de diferentes artículos tenemos aquí un artículo otro artículo y otro artículo y por último tenemos el pie como vemos por ejemplo aquí en el pie tenemos la lista desplegable que hemos visto que aparece aquí en el pie de página pero unas veces aparece y otras veces como vemos aquí desaparece aquí en el diseño mini aparece como logro eso pues en mi css me declara unas clases ahora después lo veremos para activar los elementos que quiero ver o que no quiero ver según el tamaño de pantalla aquí por ejemplo tengo esta clase display mini para que este elemento se visualice solamente cuando estamos en el diseño adaptable mini aquí por ejemplo el resumen de las entradas en el diseño mini no aparece pero sí que aparece en el diseño mediano y en el diseño grande lo podemos ver aquí pero en el diseño mini desaparece pues le pongo a cada resumen le pongo estas dos clases display great para decir que quiero que aparezca en el diseño grande y display medium para indicar que quiero que también aparezca en el diseño medio como el puesto display mini cuando se active el diseño pequeño el diseño mini estos elementos no se visualizarán fijaros que voy a tener el mismo html sea cual sea el dispositivo con el que se consulte esta página web eso sí tengo que en algunos casos puedes poner algún contenido extra que aparecerá y desaparecerá según el dispositivo vamos a ver el css que he definido para mi página en realidad como vemos aquí no hay un solo css sino en red hay varios ficheros css ya lo explicaré por qué pero antes de ir a ver cada uno de estos ficheros vamos a ver esta instrucción meta que es muy importante y la clave para que todo esto funcione en los dispositivos móviles si se me olvida poner esta etiqueta meta realmente no funcionará vamos a comprobarlo para ello tengo aquí el emulador de dispositivo móvil el opera mobile emulator y he elegido el dispositivo samsung galaxy s2 que tengo aquí ya abierto y tengo cargada mi página de ejemplo fijaros que como aquí en la presentación vertical en este dispositivo móvil como el ancho de pantalla son 480 píxeles se activa el diseño mini sin embargo si giro el dispositivo se activa el diseño mediano porque ahora el ancho de pantalla son 800 píxeles y podemos ver como en este en esta presentación sí que me aparece el resumen aparece el menú normal y cuando vuelvo a girar cambia la presentación cambia el diseño y aparece la lista desplegable y el resumen de las entradas no aparece fijaros como sí que funciona el diseño adaptable y como se ve bien la página web sin embargo ahora voy a quitar la etiqueta meta la quito simplemente la comento y veamos qué pasa grabó la página y vuelve al emulador y le doy a recargar el problema que aparece es que ahora no se está aplicando el diseño adaptable ahora lo que el navegador de este dispositivo móvil intenta hacer es mostrar la página como se mostraría en un ordenador y por tanto no se ve correctamente y yo tengo que realizar zoom para poder moverme por la página pero como vemos la navegación con el zoom no es correcta tengo que estar desplazando me y tengo dificultades para leer todo el contenido de la página vamos a volver a activar la etiqueta meta y veremos otra vez cómo se activa el diseño adaptable u adaptativo que voy a recargar y me aparece otra vez el diseño esperado bien vamos a ver los css que he definido para lograr este efecto en primer lugar tengo un css que llamado colors punto css que simplemente me define los colores de mi página en este ejemplo solamente definido unos colores de fondo para los distintos bloques que componen mi página y también he definido el color para los enlaces y el color principal del texto que le he puesto negro fijaros que he dividido el css en varios ficheros lo podría haber escrito todo en uno solo pero al dividirlo en varios ficheros me permite de una forma más cómoda saber a qué fichero debo de ir para cambiar algo cuando yo quiera cambiar solamente los colores me iré a este fichero cuando quiera cambiar otra cosa me iré al fichero correspondiente el siguiente fichero que he definido es el base punto css en el fichero base css aplicó aquí las propiedades que quiero que siempre se aplique y además he definido estas tres clases que son el truco para esconder o mostrar cierto contenido según el diseño que se esté aplicando entonces por defecto en base voy a ocultar todo aquello que lleve estas propiedades display grade estas clases perdón display grade display medium o display min y luego tengo tres ficheros medium y mini que se activará según el tamaño de la pantalla ahora lo veremos se activa con la instrucción media con las media queries y en cada uno de estos ficheros en great en medio y en mini voy activando para que se muestre la clase correspondiente por ejemplo en grade activo el display great para que es aquello que lleve esta clase es realmente se muestre en medio un activo aquello que lleve la clase display medium y finalmente en mini activo aquello que lleve la clase display mini si vuelvo a mi página html vamos a ver los media query que es realmente el truco para que funcione todo esto más que un truco no no es un truco es una técnica y consiste en indicar para qué medio quiero que se aplique este css aquí estoy indicando que esté css quiero que se active para pantalla y cuando la anchura mínima de la pantalla sean 981 píxeles cuando se cumpla esta condición se cargará y se aplicará este css si no se cumple esta condición no se aplica este css el segundo css medium lo he definido también para pantalla y para un ancho mínimo de 481 píxeles y un ancho máximo de 980 píxeles fijaros que es justo un píxel menor que el tamaño anterior y el ultimo css el mini el que se aplica en dispositivos con una pantalla pequeña es también para pantalla para screen y cuando la máxima anchura sean 480 píxeles por tanto cuando yo estoy viendo la página web así de grande no se están cargando todos los css es que css se aplican se aplica colors se aplica beige y de estos tres se aplicará sólo great en beige estoy escondiendo en principio todo lo que le he puesto la clase de display mini display medium y display gray todo eso por defecto aparecerá escondido pero como estoy diciendo que se está cargando este css el great el great me activará me mostrará todo aquello que lleve la clase display grade por tanto consigo que sólo se vea lo que lleve esta clase y los que lleven esta clase quedarán ocultos y la misma filosofía se aplica con medium y con mini como podemos ver puedo también en cada uno de los css a aplicar ciertas propiedades que solamente se aplicarán cuando se cargue este css por ejemplo cuando se cargue el css great es decir cuando la anchura mínima sea 981 píxeles pues se alinea el texto de los encabezados h1 h2 se realiza la maquetación en dos columnas d perdón la maquetación en dos columnas del menú de navegación y de la sección principal y se centra todo el contenido de la página ya que el contenido de la página va encerrado por un lado tenemos el header y por el otro lado tenemos el rapper que encierra menú y la zona de contenido principal todo eso lo que hacemos en el css great para tamaños de pantalla grande fijaros que aquí está la maquetación a dos columnas una maquetación típica realizada con flow en medium realizamos realmente poco dejamos que todo se presente en su forma normal y únicamente cambiamos el tipo de letra a georgia vamos a verlo aquí tenemos la presentación grande y a la 0 pequeña la ventana del navegador se presenta con la presentación mediana que únicamente ha cambiado el tipo de letra y por último en la presentación mini volvemos a cambiar el tipo de letra ponemos arial vamos a verlo cómo cambia el tipo de letra y se muestra arial y también cambio el tipo de letra de las listas desplegables para que ocupen todo el ancho de pantalla y salgan con un tipo de letra ligeramente mayor que el tipo de letra normal de esta forma logró que el menú sea más ancho sea más grande y sea más fácil de activar cuando estamos trabajando con un dispositivo de pantalla táctil como un teléfono móvil ya para terminar algo que se me olvidó antes explicar el componente windows risai ser que tengo instalado aquí en chrome una vez instalado se activa este icono que me permite cambiar el tamaño de la ventana del navegador a alguno de estos tamaños prefijados por ejemplo puedo fácilmente cambiar el tamaño a 320 por 480 como si fuese un teléfono móvil o puedo ponerle 640 x 480 como por ejemplo 1024 x 768 es una herramienta muy cómoda para cambiar el tamaño de la ventana del navegador e intentar simular distintos dispositivos para finalizar te invito a ver la tercera parte de este vídeo en el que te indico varias referencias y fuentes de información que te pueden ayudar a continuar aprendiendo el diseño adaptativo recuerda que este vídeo forma parte del curso introducción al desarrollo web que está disponible en la dirección y des web punto es muchas gracias por tu atención