Wenceslao Zavala

Transcripción

1 Producción Digital I Wenceslao Zavala alumnos@producciondigitalup.com.ar

2 Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla del usuario promedio) El Color: Colores seguros para la Web (colores hexadecimales) Colores de pantalla (RGB) Las imágenes: Resolución (DPI) Paleta de colores (RBG - Escala de grises - hexadecimales) Formatos de compresión (JPG - GIF - PNG) Las Fuentes Tipográficas: Verdana (creada para la computadora) Arial, Courrier, Times, Georgia, Geneva 2

3 3 Elementos de la Experiencia de Usuario

4 4 Wireframes

5 pantallas tabletas mobiles Header Header Header Contenido S i d e b a r S i d e b a r Contenido S i d e b a r Contenido Sidebar 2 Sidebar 1 5 Sidebar 2

6 HTML + CSS HTML CSS <contenidos> apariencia {} 6

7 Elementos HTML abro la etiqueta cierro la etiqueta (comienza con /) <nombreelemento> contenido aquí </nombreelemento> contenido <parrafo> Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial. </parrafo> 7

8 8 Caja de elemento HTML

9 <encabezado> <navegador> <contenidos> <pie> 9

10 CSS - Cascading Style Sheet El concepto de cascada hacer referencia precedencia y dominio de los estilos Reglas generales: Ubicación de almacenamiento: cuanto más cerca del estilo que se define el objeto, este es el más dominante. Tipo de selector: los selectores ID son los más dominantes, luego los selectores de clase, y por último los selectores de elemento. Los estilos definidos son dominantes sobre los estilos heredados. 10

11 Selectores de CSS Tipos de Reglas (selectores) CSS: Las reglas de etiquetas HTML [TAG] Modifica todas las instancias de la etiqueta, como p, h1 o FORM. el nombre es la etiqueta misma no se necesita atributo para aplicarlo Las reglas de Clase [CLASS] puede ser aplicado en múltiples elementos dentro del HTML. todos los nombres de las reglas de clase empiezan por un punto (.) usa el atributo class para aplicarlo Las reglas ID [ID o DIV] aplicables a un solo elemento dentro del HTML. el nombre de la regla comienza con # usa el atributo id para aplicarlo 11

12 La declaración de una regla La declaración, consta de dos partes: La propiedad y el valor Estas instrucciones describen cómo los elementos van a ser mostrados selector body { color: #000000; } propiedad declaración valor selector: A qué etiqueta(s) HTML se aplica la propiedad propiedad: La propiedad, por ejemplo, podría ser el color de fondo valor: el valor de la propiedad del color de fondo 12

13 13 Caja de elemento HTML

14 Cómo Maquetar <encabezado> <navegador> <contenidos> <pie> 14

15 15

16 Elemento de Línea o Bloque El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque. Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos. 16

17 Float & Clear La propiedad Float hace que cualquier elemento de bloque, se comporte como elemento de línea. <h1> <p> <p> Para romper con esa herencia se debe limpiar ese comportamiento con la propiedad Clear. <h1> <p> <p> 17

18 Limpiar Herencia Float desde CSS La propiedad Float lo convierte a elemento de línea haciendo que su altura sea igual a 0. Para romper con esa herencia se debe limpiar con la propiedad Clear. Esto sólo soluciona a los elementos a continuación. La mejor opción, es crear una regla de tipo pseudoselector para la caja que contiene al elemento: #cajacontenedora:after { clear: both; display: block; content: ; } 18

19 Pseudo - clases Selectores pseudo-clase: es una regla de CSS que se utiliza para añadir propiedades a un estado de un elemento. Sintaxis de las pseudo-classes: selector:pseudo-clase { propiedad:valor; } El más utilizado es para el Roll-Over. a:hover {color:#ff00ff;} /* link mouse over */ 19

20 Identificar la altura de elementos Si un elemento es más alto que el elemento que lo contiene, y se convierte a flotante (float) se desborda fuera de su contenedor. #cajacontenedora:after { clear: both; display: block; content: } 20

21 21 Caja de elemento HTML

22 22

23 Cómo Maquetar con DIVs <#header> <#nav> <#content> <#footer> 23

24 Contenedor/envoltura <#envoltura> W:100%; <#header> H:80px; W:20%; <#nav> <#content> W:78%; En general, se utiliza una caja contenedora o envolvente para controlar mejor el comportamiento de los contenidos. <#footer> 24

25 25

26 Barra de Navegación Barra de Navegación = Lista de Enlaces: Una barra de navegación necesita HTML estándar como base. Una barra de navegación es básicamente una lista de enlaces, por lo que el uso de la <ul> y elementos <li> tiene mucho sentido: <ul> <li><a href= index.html">home</a></li> <li><a href="noticias. html">noticias</a></li> <li><a href="contacto. html">contacto</a></li> </ul> <ul> Unorder List <li> List 26

27 Barra de Navegación Existen 2 formas para crear una barra horizontal de navegación: Usando el método inline li { display:inline;} li a { display: inline-block;} Usando el método floating li { float:left ;} li a { display: block;} Ambos métodos sirven, pero: Para links de un mismo tamaño se debe usar el método floating. Este elemento no reconoce altura de la caja, ya que está flotante. Para un menú centrado se debe usar el método Inline. Pero no se le puede determinar un ancho a la caja. 27

28 Propiedades CSS3 Ancho máximo de caja: max-width: 1100px; Bordes redondeados: border-radius: 6px; Sombra de Cajas: box-shadow: 2px 2px2px #333; 28

29 29 Desplazamiento de Artículos

30 Trabajo Práctico N 3 Proyecto HTML Realizar el sitio con la navegabilidad de todas las secciones principales, pudiendo identificar con las etiquetas que correspondan los contenidos de cada pantalla. Es decir, se deben realizar los archivos de la página de inicio (index.html) y de las secciones principales del sitio. El mismo debe navegar desde la página de inicio a las secciones presentadas y viceversa. El sitio tendrá sólo una hoja de estilo (ej. estilos.css). Y los vínculos deben tener el comportamiento de Roll-Over Fecha de entrega: Clase N 4 (08/09/16). Modo de Entrega: Se sube vía FTP. Se explica en clase 4.

31 Producción Digital I Wenceslao Zavala alumnos@producciondigitalup.com.ar