![\"\"](\"http:\/\/blog.espol.edu.ec\/seadtoha\/files\/2013\/07\/fig_02.jpg\")
<\/a><\/p>\n<\/a>Pantalla Principal<\/p><\/div>\n
Esta pantalla es una de las m\u00e1s importantes al momento de iniciar el proyecto, primero tenemos 2 caracter\u00edsticas en cada pantalla, la primera es el numero de Columnas que se ver\u00e1n en cada uno de las 3 pantallas, y lo segundo m\u00e1s importante es que porcentaje de la pantalla deseamos usar, una vez que tenemos esto seleccionado Creamos el archivo, todos estos dise\u00f1os fluidos hacen uso de HTML5 por defecto.<\/p>\n
Una vez que creamos el archivo, nos damos cuenta de muchas cosas entre ellas:<\/p>\n 3 dimensiones de nuestro website<\/p><\/div>\n Todo nuestro sitio web se trabajara a base de <DIV>, dentro de nuestro contenedor tenemos la libertad de crear los DIV que necesitemos, pero cada DIV creado te pide las opciones de \"crear nueva fila\" con esto se refiere a que si esta fila ocupara el m\u00e1ximo de la pantalla, en caso de no seleccionar esta opci\u00f3n, la fila creada se acomodara al espacio que tenga disponible.<\/p>\n Por default, cosas como \"header\" , \"navigationbar\", \"footer\" tendr\u00e1n su propia fila y act\u00faan como separadores de secciones, ya depende del programador crear filas y llenarlas con informaci\u00f3n.<\/p>\n mas divs para contenidos<\/p><\/div>\n Gr\u00e1ficamente cada fila nueva tendr\u00e1 un borde rojo, mientras que cada fila que no queremos ocupe una fila completa la veremos con bordes amarillos, son estos DIV amarillos quienes se acomodaran al tama\u00f1o de la pantalla.<\/p>\n Tambi\u00e9n algo que me di cuenta mientras trabaje con los DIVS es que todo <div> tag tiene flechas al lado derecho e izquierdo, pero cada flecha tiene una funci\u00f3n \u00fanica la funci\u00f3n de la flecha derecha es reducir el ancho del bloque <div> mientras que la flecha derecha tiene la funci\u00f3n de incremental el marco izquierdo entre la pantalla y el contenido, por lo general usaremos la flecha derecha para reducir el ancho de los bloques <div> y si nos damos cuenta si reducimos los bloques <div> lo suficiente estos se ubicaran uno al lado del otro, ocupando as\u00ed una fila en vez de dos. Aprend\u00ed de la pr\u00e1ctica de que para agregar al momento de crear el sitio web fluido este me crea una hoja de estilos dentro de una carpeta en el directorio ra\u00edz, este archivo CSS no tiene estilos, pero contiene reglas muy importantes y media Query las cuales se aplican luego de determinar el tama\u00f1o de la pantalla del dispositivo que la carga. As\u00ed que si deseas agregar una hojas de estilos a tu website, es completamente recomendado, cargar OTRA hoja de estilos dentro de la carpeta CSS la cual contenga el estilo visual del website, nunca se edita el CSS inicial ya que contiene las reglas del dise\u00f1o fluido y al manipularlas pueden afectar las funciones de nuestro sitio web! lo cual es algo que deseamos.<\/p>\n Generalmente no importa porque dise\u00f1o del website empiece, ya que una vez que terminemos de colocar el contenido del sitio web y lo ajustemos a una pantalla, debemos dar click en el sig dispositivo ya sea tableta o Smartphone y nuestro contenido original sigue ah\u00ed, solo queda editarlo un poco para que se ajuste como queramos. Ahora bien en este punto es donde se vuelven \u00fatiles las columnas de definimos a un principio, ya que las tomamos como referencia para saber con cuanto tama\u00f1o contamos para ubicar los <div>. Una vez que tuve los 3 tama\u00f1os configurados a mi gusto, es atravez de un preview que cargamos la pagina en nuestro navegador y al ir reduciendo el tama\u00f1o del navegador nuestros elementos se van acomodando de otra manera.<\/p>\n en el navegador luego de aplicar estilos css<\/p><\/div>\n Hay que tener cuidado con las im\u00e1genes que coloquemos dentro del website, ya que depender\u00e1 de lo que decidamos los tama\u00f1os pueden ser fijos o basados en porcentajes de ancho de la pantalla. no se recomienda para nada usar im\u00e1genes grandes ya que estas pueden da\u00f1ar el dise\u00f1o en pantallas de menor resoluci\u00f3n.<\/p>\n tama\u00f1o escritorio<\/p><\/div>\n Hay que tomar muchas cosas en consideraci\u00f3n cuando se empieza a dise\u00f1ar en Fluid Grid Layaout, los layouts del ejemplo son f\u00e1ciles y simples, pero no siempre ser\u00e1 as\u00ed, entre m\u00e1s elementos tenga un sitio web los layouts se volver\u00e1n mas y mas complicados, ya que una vez que terminemos con la pantalla uno, tendremos que seguir con la pantalla 2 y la pantalla 3, pero la realidad es que recude tiempos de programaci\u00f3n y tambi\u00e9n los tiempos de carga, ya que no carga un sitio diferente, sino el mismo sitio pero atravez de un CSS que acomodara los elementos acorde al tama\u00f1o de la pantalla y es una excelente forma de conocer los \"fluid layouts\" y \"media querys\", Adobe realmente se est\u00e1 tomando muy enserio la parte de crear sitios din\u00e1micos y seguramente esta opci\u00f3n se ir\u00e1 puliendo con las versiones siguientes.<\/p>\n Todo sitio web debe estar en la capacidad de adaptar su contenido al tama\u00f1o del dispositivo que esta acensado a los contenidos, facilitando la lectura y la navegaci\u00f3n, todo dise\u00f1ador web debe apuntar a este formato, y desde luego aprender a trabajar con las herramientas actuales para crear proyectos y dar soluciones, crear el sitio web es solo el primer paso ya que luego debe valerse de otras herramientas para hacerlo din\u00e1mico y interactivo, es realmente mucho los conceptos que se manejan y solo la practica da una visi\u00f3n solida de lo que estamos creando y de lo que a\u00fan falta por dise\u00f1ar e implementar.<\/p>\n","protected":false},"excerpt":{"rendered":" Como dise\u00f1ador web uno de los mayores desaf\u00edos es que todo website que realice debe adaptarse a diferentes dispositivos y tama\u00f1os de pantalla para mostrar el contenido. \u00a0Pero dise\u00f1ar un mismo sitio m\u00e1s de 3 veces para que se adapte … Sigue leyendo <\/a><\/p>\n\n
<\/a><\/a><\/p>\n<\/a>
\n<\/strong><\/p>\nCSS<\/h2>\n
OTRAS PANTALLAS<\/h2>\n
<\/a><\/a>Experiencia<\/h2>\n
Conclusiones<\/h2>\n