Wenceslao Zavala

Transcripción

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

2 2 Desplazamiento de Artículos

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

4 4 Caja de elemento HTML

5 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 5

6 En web, sólo tres opciones GIF (Graphic Interchange Format) La más apropiada para imágenes con colores planos y bordes sólidos o transparencias. JPEGs (Joint Photographic Expert Group) Trabaja mejor con fotos o imágenes con mucha gama de colores PNG (Portable Network Graphic) Contiene imágenes de cualquier tipo y es un buen sustituto del formato GIF por el uso de transparencias

7 7

8 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 8

9 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. 9

10 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> 10

11 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: ; } 11

12 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: } 12

13 Imágenes & Elementos HTML Imágenes. única etiqueta vacía que no cierra Formatos: GIF - JPEGs - PNG DPI: 72 Modo de Color: RGB - Escala de Grises Tipos de Elementos HTML Línea - para convertirlo a bloque (Display:block;) Bloque - para convertirlo a a línea (Float:left;)

14 Propiedades de Float Al ser un elemento de línea, la altura es igual a 0. Para que la caja considere a estos elementos en su interior se debe usar el pseudo-selector ":after. #cajacontenedora:after { clear: both; display: block; content: ; }

15 Reglas Específicas Son reglas que le dan una ruta de pertenencia al elemento de HTML para defnir propiedades específicas. #nav ul li a {color:#ff00ff;} Sólo para los links que se encuentren en la barra de navegación que estén dentro de una lista. Esto no aplica a los demás vinculos del HTML 15

16 <encabezado> <navegador> <contenidos> <pie> 16

17 17

18 Posicionamiento Las propiedades de posicionamiento permiten colocar un elemento sin importar el flujo del HTML. Static. Predeterminado Está siempre posicionado de acuerdo con el flujo normal de la página. Fixed Se coloca en relación con la ventana del navegador. Relative Situado con relación a su posición normal Absolute Posicionado en relación con el primer elemento padre que tiene una posición que no sea estática. Si no se encuentra dicho elemento, el bloque de contención es <html> 1 8

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

20 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> 20

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

22 Mi Sitio home mapa del sitio contacto Mi Título Principal Subtítulo Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc aliquet ultrices ante Mauris nunc dolor, egestas vel, auctor sed, dignissim vitae, enim. Phasellus tincidunt. Phasellus vel wisi id neque cursus rhoncus. Morbi cursus tristique est. Sección 1 Sección 2 Sección 3 Sección 4 Sección 5 + info Título noticia 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec augue lacus, aliquam in, luctus in, gravida vel, mi. Título noticia 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + info + info Datos del pie de página 2016

23

24 Trabajo Práctico N 5 Cajas A partir del sitio en HTML que se viene trabajando se debe mejorar la adaptación a los navegadores mediante los estilos CSS. El ancho de la caja del sitio no debe superar los 1100 px, y si la resolución es más pequeña, debe adaptarse al navegador. Teniendo la barra de navegación principal como lista los botones deben tener el comportamiento de ROLL-OVER. A ningún archivo le debe faltar la etiqueta TITLE, ni la etiqueta H1 haciendo referencia al lugar donde se encuentre el usuario. En todas las páginas debo tener la posibilidad de ir a cualquiera de las otras páginas. Cada pantalla de sección deberá tener el nombre del sitio, el cual siempre irá a la index.html, y algo que le muestre al usuario dónde se encuentra. Importante: Recordar que los nombres de archivo o carpetas NO deben tener acentos, Ñ, espacios o signos. Sólo pueden ser letras número y _ o -. Entrega: Clase N 6 (22/09/16) Se sube vía FTP. 24

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