OBJETIVO Aplica media queries para adaptar sitios web a diferentes dispositivos mediante la simulaciรณn de una pรกgina web responsiva en DCC.
ÍNDICE DE CONTENIDOS
DREAMWEAVER
TEMAS A PRESENTAR
Documentos adaptables Dreamweaver permite trabajar con media queries, es decir adapatar el contenido de un sitio web a los diferentes dispositivos. Desde el mismo programa se puede crear medios y adaptarlos, tomando en cuenta que uno ya viene por defecto conocido como GLOBAL, es el que contiene a todos los demás selectores. Ya que es muy importante recalcar que para dispositivo móvil es diferente al de una tablet y de una pantalla grande, es decir la orientación que posee cada uno de estos dispositivos son completamente diferentes e independientes. Al configurar los medios a cada uno de los dispositivos conseguimos que se pueda aplicar el tamaño y la disposición y conseguir que todo se adapte de manera correcta.
BIBLIOGRAFĂ?A
https://www.video2brain.com/mx/tutorial/document os-adaptables
Utilizando media queries Una media queries limita las hojas de estilos, nos permiten cargar diferentes estilos en función del tamaño de la pantalla. En general hay dos aproximaciones: 1.- Cargar diferentes hojas de estilos en función del tamaño de la pantalla. Esto obviamente implica además de modificar las hojas de estilo que creas, modificar el html desde el que las cargas. Así es como yo he resuelto este ejercicio en el videotutorial. 2.- Dentro de una hoja de estilos, cargar unos estilos u otros en función del tamaño de la pantalla. Profesionalmente, esta es la forma en que habitualmente trabajo. Como muy a menudo tengo que modificar un WordPress, para cargar diferentes hojas de estilos dentro de WordPress tengo que invertir más tiempo que para modificar los estilos, y por eso siempre utilizo esta segunda opción. La creciente utilización de pantallas de PC de gran tamaño y la extensión del uso de internet en los móviles obliga a los webmasters a ser capaces de crear páginas webs que se muestren correctamente y sean funcionales en cualquiera de los dispositivos que sean visualizadas. Hasta hace unos pocos años, esto sólo era posible en la práctica con el uso de estructuras “fluidas” (usando porcentajes para definir el ancho de la web respecto a la pantalla), pero con la creciente aceptación por los navegadores de CSS3, ya es viable en la práctica el uso de una novedosa técnica: las “media queries”.
BIBLIOGRAFÍA
https://www.atrioweb.com/blog/css3/uso-de-media -queries-css3-en-la-creacion-de-paginas-web
Creando contenidos con cuadrícula fluida. El diseño de un sitio Web debe responder y adaptarse a las dimensiones del dispositivo en el que se muestra. Los diseños de cuadrícula fluida proporcionan un medio visual para crear diferentes diseños correspondientes a dispositivos en los que se muestra el sitio Web. Por ejemplo, el sitio Web se va a mostrar en equipos de sobremesa, tabletas y teléfonos móviles. Puede utilizar diseños de cuadrícula fluida para especificar diseños para cada uno de estos dispositivos. Dependiendo de si el sitio se muestra en un equipo de sobremesa, una tableta o un teléfono móvil, se emplea el diseño correspondiente para mostrar el sitio Web.
CREAR UN FLUIDA
DISEÑO
DE
CUADRÍCULA
1. Seleccione Archivo > Nuevo diseño de cuadrícula fluida. 2. El valor predeterminado para el número de columnas de la cuadrícula se muestra en el centro del tipo de medio. Para personalizar el número de columnas para un dispositivo, edite el valor según sea necesario. 3. Para establecer la anchura de una página en comparación con el tamaño de la pantalla, establezca el valor en porcentaje. 4. También puede cambiar la anchura del medianil. El medianil es el espacio entre dos columnas. 5. Especifique las opciones de CSS de la página.
INSERTAR FLUIDA
ELEMENTOS
DE
CUADRÍCULA
1. En el panel Insertar, seleccione el elemento que desee insertar. 2. En el cuadro de diálogo que aparece, seleccione una clase o introduzca un valor para el ID. El menú Clase muestra las clases del archivo CSS que especificó al crear la página. 3. Seleccione la casilla de verificación Insertar como elemento fluido. 4. Cuando se selecciona un elemento insertado, se muestran las opciones para ocultar, duplicar, bloquear o eliminar la etiqueta Div. En el caso de etiquetas Div situadas unas encima de otras, se muestra la opción para cambiar de Div.
NOTA: Los elementos fluidos de una página pueden atravesarse cíclicamente utilizando las teclas de flecha izquierda y derecha. Seleccione el límite del elemento y, a continuación, pulse la tecla de flecha.
BIBLIOGRAFÍA
https://helpx.adobe.com/es/dreamweaver/using/flui d-grid-layout-dreamweaver.html
Modificand la retĂc
Cambia el elemento seleccionado actualmente por el elemento situado encima o debajo. Oculta el elemento. Para mostrar un elemento oculto, siga uno de estos procedimientos:
Para ocultar selectores de ID, cambie la propiedad display del archivo CSS a block (display:block). Para mostrar selectores de clase ocultos, quite la clase aplicada (hide_<MediaType>) del cĂłdigo fuente.
o contenidos de cula fluida.
Mueve el elemento hacia arriba una fila. Duplica el elemento seleccionado actualmente. También se duplica el CSS vinculado al elemento. Para los selectores de ID, elimina tanto el código HTML como el código CSS. Para eliminar solo el código HTML, pulse Supr. Para los selectores de clase, solo se elimina el código HTML. Convierte el elemento en un elemento con posición absoluta. Para los selectores de clase, la opción Alinear actúa como botón de margen cero. Para los selectores de ID, el botón alinear alinea el elemento a la cuadrícula.
BIBLIOGRAFÍA
https://www.atrioweb.com/blog/css3/uso-de-media -queries-css3-en-la-creacion-de-paginas-web
conclusiones
Al analizar cada uno de los temas podemos saber la importancia del diseño web responsiVe, ya que permite ver el contenido en cada uno de los dispositivos al crear una página web.
Así mismo es importante saber la importancia de la media queries, ya que permite crear medios que serán utilizados en los diferentes dispositivos.
Con la cuadrícula fluida permite que los elementos de una página web se organicen de manera correcta, siempre y cuando se le da un buen uso.
BIBLIOGRAFÍA
https://www.video2brain.com/mx/tutorial/document os-adaptables https://www.atrioweb.com/blog/css3/uso-de-media -queries-css3-en-la-creacion-de-paginas-web https://helpx.adobe.com/es/dreamweaver/using/flui d-grid-layout-dreamweaver.html https://www.atrioweb.com/blog/css3/uso-de-media -queries-css3-en-la-creacion-de-paginas-web
DISEÑADORA GRÁFICA
MIRIAM K. RAMÓN