introducción al diseño
DESCRIPTION
En este resumen puedes encontrar los elementos básicos para poder realizar un diseño web.TRANSCRIPT
![Page 1: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/1.jpg)
Iniciación al Diseño Web
Iniciación al Diseño Web
![Page 2: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/2.jpg)
Workflow Iniciación al Diseño Web
![Page 3: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/3.jpg)
Estructura de la Información
Mapa web
Iniciación al Diseño Web
![Page 4: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/4.jpg)
Wireframe Iniciación al Diseño Web
![Page 5: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/5.jpg)
Wireframe Iniciación al Diseño Web
![Page 6: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/6.jpg)
OPTIMIZACIÓN Iniciación al Diseño Web
![Page 7: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/7.jpg)
OPTIMIZACIÓN Iniciación al Diseño Web
![Page 8: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/8.jpg)
OPTIMIZACIÓN Iniciación al Diseño Web
![Page 9: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/9.jpg)
OPTIMIZACIÓN Iniciación al Diseño Web
![Page 10: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/10.jpg)
Estructura de la Información Iniciación al Diseño Web
![Page 11: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/11.jpg)
Consejos de Diseño
![Page 12: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/12.jpg)
Consejos de Diseño
BACKGROUND: color background-color: #c5e0fe;
Consejos de diseño
![Page 13: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/13.jpg)
Consejos de Diseño
BACKGROUND: imagen fija background-image: url(‘../img/imagen.jpg’);
background-repeat: no-repeat;
Consejos de diseño
![Page 14: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/14.jpg)
Consejos de Diseño
BACKGROUND: imagen repeMda background-image: url(‘../img/imagen.jpg’);
background-repeat: repeat;
Consejos de diseño
![Page 15: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/15.jpg)
Consejos de Diseño
BACKGROUND: imagen y color
background-image: url(‘img/imagen.jpg’);
background-repeat: no-repeat;
background-color: #222;
Consejos de diseño
![Page 16: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/16.jpg)
Consejos de Diseño
IMAGENES: formatos
Lo que buscamos es un punto medio entre calidad y tamaño de archivo:
JPEG nos sirve para manipular y comparMr archivos de imagen de Mpo fotográfico. GIF serán muy úMles para manipular imágenes con bloques de colores planos. PNG24 nos servirá para imágenes con efectos como brillos y sombras, que también requieran transparencia.
Sobre el uso de formatos existe un interesante debate entre diseñadores y desarrolladores web.
Algunos prefieren uMlizar el formato PNG el cual no Mene restricciones de patentes, está recomendado por el W3C y permite transparencia. Sin embargo, hay quienes aún prefieren el JPG por su popularidad y caracterísMcas
Consejos de diseño
![Page 17: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/17.jpg)
Consejos de Diseño
IMAGENES: sombreado
Consejos de diseño
![Page 18: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/18.jpg)
Consejos de Diseño
IMAGENES: bordes redondeados <DIV>
<div class=“top”>
<div class=“bottom”>
<div class=“middle”>
.bottom {background-image: url(‘bottom.png’)}
.top{background-image: url(‘top.png’)}
.middle{background-color: #35bc40}
Consejos de diseño
![Page 19: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/19.jpg)
Consejos de Diseño
IMAGENES: bordes redondeados CSS3
BORDER RADIUS
-webkit-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 0px 5px 0px 5px; -moz-border-radius: 0px 5px 0px 5px;
-webkit-border-radius -moz-border-radius -o-border-radius -ms-border-radius
Consejos de diseño
![Page 20: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/20.jpg)
Consejos de Diseño
TEXTO: NO JusMficar textos
align="justify"
Consejos de diseño
![Page 21: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/21.jpg)
Consejos de Diseño
TEXTO: Mpograbas web
hcp://www.webdesigndev.com/web-‐development/16-‐gorgeous-‐web-‐safe-‐fonts-‐to-‐use-‐with-‐css
Consejos de diseño
![Page 22: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/22.jpg)
Consejos de Diseño
TEXTO: Mpograbas gráficas
Consejos de diseño
![Page 23: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/23.jpg)
Consejos de Diseño
BOTONES: menu
misma altura!!!
ul.menu_principal li a.nosotros { background-image: url("../images/menu_nosotros.png"); background-repeat: no-repeat; height: 21px; width: 56px; }
ul.menu_principal li a.nosotros:hover { background-image: url("../images/menu_nosotros.png"); background-repeat: no-repeat; height: 21px; width: 56px; background-position: 0 -25px; }
Consejos de diseño
![Page 24: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/24.jpg)
Consejos de Diseño
BOTONES: buscadores / formularios
.input_contacto { background: url("../../img/input01.png") no-repeat scroll 0 0 transparent; border: medium none; color: #444444; height: 59px; width: 414px; }
<input type="image" src="images/btn_enviar.jpg" name="enviar">
Consejos de diseño
![Page 25: Introducción al Diseño](https://reader035.vdocuments.co/reader035/viewer/2022062405/557ad74bd8b42a8f648b46cd/html5/thumbnails/25.jpg)
Consejos de Diseño
FAVICON
http://tools.dynamicdrive.com/favicon
<link rel="Shortcut Icon" href="http://arcademotion.site88.net/wp-content/themes/twentyten/images/favicon.ico" type="image/x-icon" />
Consejos de diseño