Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar
Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña: Digital#1302 (la contraseña debe ser con D mayúscula) Directorio Raíz: 12345 URL Web: http://producciondigitalup.com.ar/ Para probarlo en el navegador: URL Web: http://producciondigitalup.com.ar/sitio/12345 www.producciondigitalup.com.ar 2
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> www.producciondigitalup.com.ar 3
Caja de elemento HTML www.producciondigitalup.com.ar 4
Estructura Básica <encabezado> <navegador> <contenidos> <pie> www.producciondigitalup.com.ar 5
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. www.producciondigitalup.com.ar 6
Regla CSS Una regla de formato CSS consta de dos partes: 1. El selector es un término (como P, H1, el nombre de una clase o un ID) que identifica el elemento a darle formato. 2. La declaración que define las propiedades de estilo, a su vez, consta de dos partes: 1. La propiedad 2. El valor Estas instrucciones describen cómo los elementos van a ser mostrados selector declaracion body { color: #000000; } propiedad valor www.producciondigitalup.com.ar
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 www.producciondigitalup.com.ar 8
HTML + CSS HTML CSS <contenidos> Apariencia www.producciondigitalup.com.ar 9
Caja de elemento HTML www.producciondigitalup.com.ar 10
Estructura Básica <encabezado> <navegador> <contenidos> <pie> www.producciondigitalup.com.ar 11
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. www.producciondigitalup.com.ar 12
Cómo Maquetar <encabezado> <navegador> <contenidos> <noticias> <noticias> <noticias> <noticias> </pie> www.producciondigitalup.com.ar
Fluidez de Contenido [Float & Clear] La propiedad Float hace que cualquier elemento de bloque, se comporte como elemento de línea y flote hacia un lado. Izquierda o derecha. <h1> <p> <p> Para romper con esa herencia se debe limpiar ese comportamiento con la propiedad Clear. <h1> <p> <p> www.producciondigitalup.com.ar 14
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. La otra opción, es crear una regla de tipo pseudoselector para la caja que contiene al elemento: #cajacontenedora:after { } clear: both; display: block; content: ; www.producciondigitalup.com.ar 15
www.producciondigitalup.com.ar 16
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 www.producciondigitalup.com.ar 17
Barra de Navegación - Horizontal 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. www.producciondigitalup.com.ar 18
Pseudo - selectores Pseudo-selectores: se utilizan para añadir efectos especiales a algunos selectores: Sintaxis de los Pseudo-selectores: selector:pseudo-class { property:value; } Por ejemplo efecto para los vínculos: a:hover {color:#ff00ff;} /* link mouse over */ Por ejemplo para el primer elemento de una lista: li:first-child {border:none;} www.producciondigitalup.com.ar 19
Estructura Básica <envoltura> <encabezado> <navegador> <contenidos> <pie> www.producciondigitalup.com.ar 20
Control de Cajas <#header> H:80px; W:20%; <#nav> <#content> W:78%; <#footer> www.producciondigitalup.com.ar 21
Contenedor/envoltura <#wrapper> 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> www.producciondigitalup.com.ar 22
Caja de elemento HTML www.producciondigitalup.com.ar
Propiedades CSS3 Ancho máximo de caja: max-width: 1100px; Bordes redondeados: border-radius: 6px; Sombra de Cajas: box-shadow: 2px 2px 2px #333; www.producciondigitalup.com.ar 24
Vista Pantallas <header> <section> <nav> <aside> <article> <article> <article> <footer> www.producciondigitalup.com.ar
Desplazamiento de Artículos www.producciondigitalup.com.ar
Trabajo Práctico N 5 Cajas A partir del sitio en HTML que se viene trabajando se debe mejorar la adaptación a los nevegadores 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 (24/09/15) Se sube vía FTP. 27 www.producciondigitalup.com.ar
Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña: Digital#1302 (la contraseña debe ser con D mayúscula) Directorio Raíz: 12345 URL Web: http://producciondigitalup.com.ar/ Para probarlo en el navegador: URL Web: http://producciondigitalup.com.ar/sitio/12345 www.producciondigitalup.com.ar 28
Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar