Introducción al desarrollo web frontend

DESARROLLO WEB FRONTEND
INTRODUCCIÓN AL
MAX KRASZEWSKI

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 deﬁne 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

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> deﬁne un enlace.
▸ El atributo <href=> deﬁne 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 especiﬁca 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>

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

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>

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 deﬁnir
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 especiﬁcan en
función de otra propiedad. Son ejemplo
de esto em, rem, %

▸ Las unidades absolutas son ﬁjas 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 Overﬂow: 
float:
left; 
clear:
both; 
overflow:
both;

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

MUCHAS GRACIAS!
¿PREGUNTAS?
MAX KRASZEWSKI @minimalart max.kraszewski@gmail.com

Introducción al desarrollo web frontend

Más contenido relacionado

La actualidad más candente

Similar a Introducción al desarrollo web frontend

Más de Max Kraszewski

Último

Introducción al desarrollo web frontend