introducción al desarrollo web frontend
TRANSCRIPT
DESARROLLO WEB FRONTENDINTRODUCCIÓN AL
MAX KRASZEWSKI
VS
FRONTEND
BACKEND
INTROHTML
HTML ELEMENTOS
<etiqueta>contenido</etiqueta>
LOS ELEMENTOS HTML SE ESCRIBEN CON UNA ETIQUETA DE APERTURA Y UNA DE
CIERRE, CON EL CONTENIDO EN EL MEDIO
<div> <p>Esto es un párrafo</p> <p>Esto es otro párrafo</p> </div>
LOS ELEMENTOS PUEDEN CONTENER ELEMENTOS (SE PUEDEN ANIDAR)
EXISTEN ELEMENTOS VACÍOS, QUE NO TIENEN CONTENIDO
<p> Primer línea del párrafo<br/> Segunda línea del párrafo </p>
HTML ES UN LENGUAJE DE MARCADO QUE SE DESCRIBE POR ELEMENTOS HTML
HTML ATRIBUTOS
<etiqueta atributo="valor">
<html lang="es-‐US">
LOS ATRIBUTOS SE AGREGAN A LA ETIQUETA DE APERTURA EN LA FORMA NOMBRE=VALOR
<p class="poetry"> No te des por vencido ni aún vencido </p>
LOS ATRIBUTOS PROVEEN INFORMACIÓN ADICIONAL AL ELEMENTO
<img src="foto.jpg" alt="Mi Foto" width="104" height="142">
UN ELEMENTO PUEDE CONTENER MÁS DE UN ATRIBUTO
HTML ESTRUCTURA BASICA
▸ La declaración DOCTYPE define que el tipo de documento es HTML
▸ El texto entre <html> y </html> describe un documento HTML
▸ El texto entre <head> y </head> provee información acerca del documento
▸ El texto entre <title> y </title> provee un título al documento
▸ El texto entre <body> y </body> describe el contenido visible de la página
▸ El texto entre <h1> y </h1> describe un encabezado
▸ El texto entre <p> y </p> describe un párrafo
ELEMENTOSHTML
HTML HEADINGS
▸ Los encabezados o headings son elementos que van del <h1> al <h6>
▸ Tienen un componente semántico de gran importancia.
▸ Los motores de búsqueda usan los headings para indexar el contenido y estructura de la página.
HTML PÁRRAFOS
▸ El elemento <p> define un párrafo.El browser ignora cualquier espacio o línea extra al mostrar el texto dentro de un párrafo.
▸ El elemento <br /> define un salto de línea. No tiene etiqueta de cierre.
▸ El elemento <pre> define un texto preformateado. Se muestra con una fuente de ancho fijo y se mantienen espacios y líneas extras.
HTML FORMATO
▸ El elemento <strong> define un texto de importancia.
▸ El elemento <em> define un texto enfatizado.
▸ El elemento <del> define un texto borrado.
▸ El elemento <mark> define un texto resaltado.
▸ Algunos otros elementos de formato de texto son: <small>, <sub>, <sup>, <ins>, <b>, <i>
HTML LISTAS
▸ El elemento <ul> define una lista desordenada.
▸ El elemento <ol> define una lista ordenada.
▸ El elemento <li> define un item de lista. (ordenada o desordenada)
HTML IMAGENES
▸ El elemento <img> define una imágen.
▸ El atributo src define la ubicación de la imagen.
▸ Los atributos width y height definen el ancho y el alto de la imagen.
▸ El atributo alt define el texto que describe a la image. Es importante por cuestiones de semántica y de accesibilidad
HTML ENLACES
▸ El elemento <a> define un enlace.
▸ El atributo <href=> define el destino del enlace.
▸ Por defecto, el browser abre el enlace en la misma pestaña. Para abrir en una pestaña nueva debe agregarse el atributo target=“_blank”
▸ Los enlaces no visitados se muestran en color azul y los visitados en violeta.
▸ Los enlaces hacia el mismo sitio se pueden escribir sin la ruta completa.
▸ Se pueden usar imágenes como enlaces.
HTML BLOCKS
▸ Los elementos a nivel de bloque (block level elements) siempre comienzan en una línea nueva y toman todo el ancho disponible.
▸ Algunos elementos de este tipo son <div>, <h1>-‐<h6>, <p>.
▸ Los elementos en-linea (inline elements) no comienzan en una línea nueva y toman solo el ancho que necesitan.
▸ Algunos elementos de este tipo son <span>, <a>, <img>.
▸ El elemento <div> es frecuentemente usado como contenedor de otros elementos.
HTML IDS Y CLASES
▸ El atributo id especifica un elemento único dentro del documento HTML
▸ El atributo class hace posible agrupar referencialmente varios elementos dentro del documento.
▸ Un elemento puede tener varios class pero solo un id
▸ El uso más frecuente de estos atributos es servir de referencia a un estilo CSS o un comando Javascript
▸ Los atributos class y id no proveen ningún valor semántico.
HTML HEAD
▸ El elemento head es un contenedor de metadata. Es la parte no visible de un documento HTML
▸ La metadata es información acerca del documento HTML.
▸ Algunos elementos más comunes son: <title>, <style>, <meta>, <link>
SEMÁNTICAHTML
HTML SEMÁNTICA
SEMÁNTICA ES EL ESTUDIO DEL SIGNIFICADO DE PALABRAS Y FRASES EN UN LENGUAJE
<article> <header> <h1>A un paso de gritar</h1> </header> <p> El equipo conducido por el Flaco ganó en la última fecha y está a punto de lograr el torneo de Primera División. </p> </article>
LOS ELEMENTOS SEMÁNTICOS SE PUEDEN ANIDAR PARA PROPORCIONAR UNA MEJOR DESCRIPCIÓN ACERCA DE SU CONTENIDO
UN ELEMENTO SEMÁNTICO DESCRIBE CLARAMENTE SU SIGNIFICADO AL
DESARROLLADOR Y AL NAVEGADOR
<div id="header">
<header>
HTML SEMANTICA
<div id="header">
<div id="nav">
<div class="article">
<div id="sidebar">
<div id="footer">
<div class="section">
XHTML<header>
<nav>
<article>
<aside>
<footer>
<section>
HTML5
INTROCSS
CSS INTRODUCCIÓN
CSS ES LA SIGLA DE HOJAS DE ESTILO EN CASCADA (CASCADING STYLE SHEETS)
<head> <title>Portada</title><link rel="stylesheet" href="style.css">
</head>
CSS OPTIMIZA EL TRABAJO. UNA HOJA DE ESTILOS PUEDE SER INVOCADA DESDE
MULTIPLES DOCUMENTOS HTML
CSS DESCRIBE CÓMO LOS ELEMENTOS HTML SE VISUALIZAN EN LA PANTALLA, EN EL
PAPEL Y EN OTROS MEDIOS
h1 { color: blue; } aside { background-‐color: green;
margin: 10px; }
<head> <title>Indice</title><link rel="stylesheet" href="style.css">
</head>
SELECTORESCSS
CSS SELECTORES
LOS SELECTORES CSS PERMITEN ENCONTRAR Y MANIPULAR ELEMENTOS HTML BASADOS
EN SUS IDS, CLASES, TIPOS, ATRIBUTOS, ETC.
LOS SELECTORES SE PUEDEN AGRUPAR PARA MINIMIZAR EL CÓDIGO Y EVITAR
REPETICIONES
/* Matches all p elements */ p { }
/* Matches id="copyright" */ #copyright{ }
/* Matches class="boxes" */ .boxes { }
/* Matches all visited links */ a:visited { }
h1 { color: red; text-‐align:center;
}
h2 { color: red; }
h3 { color: red; }
h1, h2, h3 { color: red; }
h1 { text-‐align: center }
CSS COLORES
▸ CSS soporta nombres, valores hexadecimales y RGB para definir colores. Adicionalmente, CSS3 introduce RGBA, HSL, HSLA y opacidad.
▸ Un nombre válido de color en CSS puede ser red, green, blue o rebeccapurple.
▸ Un valor RGB está compuesto de tres números que van del 0 al 255 y corresponden a los niveles de Rojo, Verde y Azul.
▸ Un valor Hexadecimal está compuesto por 6 números, cada uno de los cuales van desde el 0 hasta la F.
/* These are the same colors */ h1 { color: red; }
h2 { color: rgb(255,0,0); }
h3 { color: #FFCC00; } h3 { color: #FC0; }
CSS UNIDADES
▸ CSS usa diferentes unidades para expresar medidas. Sirven para expresar valores como ancho, alto, márgenes, tamaño de fuente, etc.
▸ Para algunas propiedades, es posible expresar unidades negativas.
▸ Hay dos tipos de medidas: relativas y absolutas.
▸ Las unidades relativas se especifican en función de otra propiedad. Son ejemplo de esto em, rem, %
▸ Las unidades absolutas son fijas y muestran la medida exacta. Por ejemplo px, pt, cm, in
CSS BOX MODEL
▸ Todos los elementos HTML pueden considerarse como "cajas" (boxes). En CSS el término "box model" es usado cuando nos referimos a diseño y disposición
▸ Box model es esencialmente una caja que envuelve cada elemento y consiste de: margin, padding, borders y el contenido del elemento.
margin
border
padding
contenido
CSS ALGUNAS PROPIEDADES COMUNES
▸ Texto:text-‐align: center;text-‐transform: uppercase;text-‐decoration: underline;letter-‐spacing: 3px;line-‐height: 1.8em;color: #FFCC00;
▸ Fuentes:font-‐family: "Georgia", serif;font-‐style: italic;font-‐size: 2em;font-‐weight: bold;
▸ Bordes:border-‐style: dotted;border-‐width: 3px;border-‐color: blue;border: 3px dotted blue;
▸ Display & Visibility:display: none;visibility: hidden;
▸ Margins & Paddings:margin: 10px;margin: auto;padding-‐top: 5px;padding: 10px 5px 3px 0;
▸ Alto & Ancho :height: 300px;width: 600px;max-‐width: 80%;
▸ Fondos:background-‐color: green;background-‐image: url('paper.png');background-‐repeat: repeat-‐x;
▸ Float, Clear and Overflow: float: left;clear: both;overflow: both;
SIMPLE LAYOUTCSS
BROWSER SIMPLE LAYOUT
HTML SIMPLE LAYOUT
CSS SIMPLE LAYOUT
GRILLASCSS
CSS GRILLAS
USAR UNA GRILLA ES MUY UTIL, PORQUE PERMITE UBICAR MÁS FÁCILMENTE LOS
ELEMENTOS EN LA PANTALLA.
LAS GRILLAS GENERALMENTE SE DISEÑAN PARA 12 COLUMNAS, PORQUE 12 ES UN
NUMERO PERMITE MUCHAS COMBINACIONES
BROWSER GRILLA
HTML GRILLA
CSS GRILLA
RESPONSIVE DESIGN
CSS
BROWSER RESPONSIVE DESIGN
BROWSER RESPONSIVE DESIGN
CSS RESPONSIVE DESIGN
CSS RESPONSIVE DESIGN
BROWSER RESPONSIVE DESIGN
