Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft

Resumen del Módulo
• Creación de una página en HTML5
• Estilizado de una página en HTML5

Parte 1: Creación de una pagina en HTML5
• Que hay de nuevo en HTML5?
• Estructura de un documento en HTML5
• Texto e imágenes en HTML5
• Demostración: Usuando funcionalidades de
HTML5 en una simple forma de contacto

Qué es HTML5?
l  Estándar abierto y accesible
l  Elementos nuevos
l  Web Semántica
l  API’s de desarrollo
l  Retrocompatible
l  Nueva filosofía de trabajo
l  Impulsado por los grandes y pequeños

Que hay de nuevo en HTML5?
HTML5 proporciona muchas extensiones sobre
versiones previas, incluyendo:
• Reglas para marcar de navegadores
• Nuevos elementos que reflejan diseño
moderno de aplicaciones web
• Soporte para el API de JavaScript
que soporta capacidades de escritorio
y móviles

Trabaja sobre…
l  Firefox 3.5+
l  Chrome 3.0+
l  Safari 3.1+
l  Opera 10.5+
l  IE 9.0+ dicen…
l  iPhone
l  iPod Touch
l  iPad
l  Android OS
Pero siempre es importante
hacer pruebas de validación
http://
html5test.com/

Tipo de Documento
l  Tipo de Documento
<!DOCTYPE html>
l  Lenguaje del Documento
<html lang="ES">
l  Codificación del Documento
<meta charset="UTF-8">
l  Enlaces a CSS, Favicon y RSS
<link rel="stylesheet" href="estilos.css">
<script src=jquery.js></script>

Estructura Mínima de un Documento
<!DOCTYPE html>
<html lang="ES">
<head>
<title>Este es un ejemplo de HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
Este es el cuerpo de la página, donde irá todo
el contenido.
</body>
</html>

Elementos Semánticos
<header> El elemento header debe utilizarse para marcar la cabecera
de una página (contiene el logotipo del sitio, una imagen, un cuadro de
búsqueda etc).
El elemento header puede estar anidado en otras secciones de la página
(es decir que no solo se utiliza para la cabecera de la página).
<nav> El elemento nav representa una parte de una página que enlaza a
otras páginas o partes dentro de la página. Es una sección con enlaces de
navegación.
No todos los grupos de enlaces en una página deben ser agrupados en un
elemento nav. únicamente las secciones que consisten en bloques de
navegación más importantes son adecuados para el elemento de
navegación.

<section> El elemento section representa un documento genérico o de
la sección de aplicación. Una sección, en este contexto, es una
agrupación temática de los contenidos. Puede ser un capítulo, una sección
de un capítulo o básicamente cualquier cosa que incluya su propio
encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para
una introducción, noticias, información de contacto etc.
<footer> El elemento footer se utiliza para indicar el pié de la página o
de una sección. Un pie de página contiene información general acerca de
su sección el autor, enlaces a documentos relacionados, datos de
derechos de autor etc.

<aside> El elemento aside representa una nota, un consejo, una
explicación. Esta área son representados a menudo como barras laterales
en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las
comillas tipográficas o barras laterales, para la publicidad, por grupos de
elementos de navegación, y por otro contenido que se considera por
separado del contenido principal de la página.
<article> El elemento article representa una entrada independiente en
un blog, revista, periódico etc.
Cuando se anidan los elementos article, los artículos internos están
relacionados con el contenido del artículo exterior. Por ejemplo, una
entrada de blog en un sitio que acepta comentarios, el elemento article
principal agrupa el artículo propiamente dicho y otro bloque article anidado
con los comentarios de los usuario.

Distribución Semántica
HEADER
HEADER
NAV
NAV ARTICLE ARTICLE VIDEO
SECTION
SECTIONASIDE
FOOTER
FIGURE FIGURE

Nuevos Controles de Formularios - Input
l  Telephone
l  Url
l  Email
l  Password
l  Datetime
l  Date
l  Month
l  Week
l  Number
l  Range
l  Color

Nuevos Controles de Formularios
Puedes ver una relación oficial del borrador del
estándar en:
http://dev.w3.org/html5/spec/
www.whatwg.org/specs/web-apps/current-work/
multipage/

Estructura de un documento en HTML5
HTML5 proporciona nuevos elementos para definir
la estructura de una
página web:
•  <section> para dividir el
contenido principal
•  <header> y <footer>
para el encabezado y pie de
la página
•  <nav> para los enlaces de
navegación
•  <article> para el contenido
•  <aside> para anotaciones
y barras laterales

Textos e imágenes en HTML5
HTML5 define nuevos textos e imágenes, incluyendo:
• <hgroup>
• <time>
• <mark>
• <small>
• <figure> y <figcaption>
<time datetime="2012-08-08">hoy</time>
<p>Estes texto debe ser marcado <mark>como
notable para el futuro</mark>.</p>
<p>Como tus frijoles por 5 minutos. <small>O
hasta que estén calientes para ti .</small></p>
<figure>
<img src=”platodefrijoles.jpg" alt=”un plato de frijoes" />
<figcaption>Un plato de frijoles en 5 minutos exactos</figcaption>
</figure>
<hgroup>
<h1>Mis Recetas</h1>
<h2>Grandioso de comer, fácil de hacer</h2>
</hgroup>

Demostración: Usando Características de HTML5 en
un Formulario Simple de HTML
En este demostración usted vera como:
• Dividir el contenido para una página en artículos y
secciones
• Agregar el encabezado y el pie a la página
• Ver las estructura de la página
• Ver cambios temporales usando las herramientas
de desarrollo

Lesson 2: Estilizando una Página HTML5
• Entendiendo estilos de texto en CSS
• El modelo de caja de CSS
• Estilizado de Fondos en CSS
• Demostración: Agregando Estilos CSS a una
página HTML
• Demostración: Creación y Estilizado CSS3 de
paginas HTML5

Unidades de medida
Relativas
•  em se refiere al tamaño de las mayúsculas (letra M) del tipo de
letra aue se toma como referencia)
•  ex se refiere al tamaño de las minúsculas (letra x) del tipo de
letra que se toma como referencia
•  px se refiere a los puntos de la pantalla (píxeles) con la
resolución que está en activo
•  % se refiere al porcentaje del valor dependiente del contexto
NOTA { font-size:10; line-height:1.5em }
TITULO { font-size:18; letter-spacing:1ex }
SUBTITULO { font-size:14; word-spacing:200% }
PARRAFO { font-size:12; margin-left:25px }
Absolutas:
•  in pulgadas. 1 pulgada=2,54 cm
•  cm centímetros
•  mm milímetros
•  pt puntos tipográficos. 1 pulgada=72pt. 1pt=1/72in
•  pc picas. 1pc=12pt

Entendiendo Estilos de Texto CSS
• Suporte de Estilizado de Textos CSS:
•  Fuentes
•  Colores
•  Typography
font-family : Arial, Candara, Verdana, sans-serif;
font-size : 16px;
font-style : italic;
font-weight : bold;
color : rgb(128, 128, 0);
opacity: 0.6;
letter-spacing : 2em;
line-height : 16px;
text-align : left;
text-decoration : underline;
text-transform : lowercase;
http://librosweb.es/css/capitulo_6.html

Contenido
Padding (Relleno)
Border (Borde)
Margin (Margen)
Modelo de la Caja

Relleno - Padding
Contenido
Borde
Margen Margen

Todos los elementos en su página generan cajas invisibles. Usted debe
decidir como encajan todas estas cajas. Es como un rompezabezas.
Imagen
con enlace
Imagen
Texto Regular
Pequeno
texto con
viñetas
Conjunto de
lnks (Menu)
Las Cajas son automáticas

Jerarquía del modelo de la caja

#lateral { width: 200px; }
<div id="lateral">
...
</div>

#cabecera { height: 60px; }
<div id="cabecera">
...
</div>

Código CSS original:
div img {
margin-top: .5em;
margin-bottom: .5em;
margin-left: 1em;
margin-right: .5em;
}
Alternativa directa:
div img {
margin: .5em .5em .5em 1em;
}
Otra alternativa:
div img {
margin: .5em;
margin-left: 1em;
}

body {padding: 2em} /* Todos los rellenos valen 2em */
body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo
y derecho = 2em */
body {padding: 1em 2em 3em} /* Superior = 1em, derecho =
2em, inferior = 3em, izquierdo = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho
= 2em, inferior = 3em, izquierdo = 4em */

div {
border-top-width: 10px;
border-right-width: 1em;
border-bottom-width: thick;
border-left-width: thin;
}

div {
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
}

div {
border-top-style: dashed;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: solid;
}

div {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}
30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel

Tipos de elementos
http://librosweb.es/css/capitulo_5/tipos_de_elementos.html

Posicionamiento
• Normal
• Relativo
• Absoluto
• Fijo
• Flotante

img.desplazada {
position: relative;
top: 8em;
}
<img class="desplazada" src="imagenes/imagen.png" alt="Imagen
genérica" />
<img src="imagenes/imagen.png" alt="Imagen genérica" />

div {
border: 2px solid #CCC;
padding: 1em;
margin: 1em 0 1em 4em;
width: 300px;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus
ullamcorper velit eu ipsum. Ut pellentesque, est in volutpat cursus,
risus
mi viverra augue, at pulvinar turpis leo sed orci. Donec ipsum.
Curabitur
felis dui, ultrices ut, sollicitudin vel, rutrum at, tellus.</p>
</div>

div img {
position: absolute;
top: 50px;
left: 50px;
}

Posicionamiento fijo
El estándar CSS considera que el
posicionamiento fijo es un caso particular del
posicionamiento absoluto, ya que sólo se
diferencian en el comportamiento de las cajas
posicionadas.
Cuando una caja se posiciona de forma fija, la
forma de obtener el origen de coordenadas para
interpretar su desplazamiento es idéntica al
posicionamiento absoluto. De hecho, si el
usuario no mueve la página HTML en la ventana
del navegador, no existe ninguna diferencia
entre estos dos modelos de posicionamiento.

<div>DIV normal</div>
<div style="display:inline">DIV con display:inline</div>
<a href="#">Enlace normal</a>
<a href="#" style="display:block">Enlace con display:block</a>

div { position: absolute; }
#caja1 { z-index: 5; top: 1em; left: 8em;}
<div id="caja1">Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 -
Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 -
Caja 1 - Caja 1 - Caja 1 - Caja 1</div>

Regla CSS
body {
background-image:url(imagenes/fondo.gif);
}

#hdr {
background: url("/images/ds.gif") repeat-x;
width: 100%;
text-align: center;
}

#caja1 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: bottom left;
}
#caja2 {
background-position: right top;
}
#caja3 {
background-position: 50% 50%;
}
<div id="caja1"><h1>bottom left</h1></div>
<div id="caja2"><h1>right top</h1></div>
<div id="caja3"><h1>50% 50%</h1></div>

/* Color e imagen de fondo de la página mediante una propiedad
shorthand */
body { background: #222d2d url(./graphics/colorstrip.gif) repeat-
x 0 0; }
/* La propiedad shorthand anterior es equivalente a las siguientes
propiedades */
body {
background-color: #222d2d;
background-image: url("./graphics/colorstrip.gif");
background-repeat: repeat-x;
background-position: 0 0;
}

Ejercicio
• http://librosweb.es/css/capitulo_15/
ejercicio_3.html

Estilizado de Fondos en CSS
Establece el fondo de un elemento usando la
propiedad CSS:
• background-image
• background-size
• background-color
• background-position
• background-origin
• background-repeat
• background-attachment
article {
background-color : transparent;
background-repeat: repeat-x;
background-image : url('fluffycat.jpg');
}
http://librosweb.es/css/capitulo_4/fondos.html

Demostración: Adding CSS Styles to an HTML Page
In this demonstration, you will see how to:
• Create New Styles by Using Visual Studio
• Use the F12 Developer Tools to Inspect Styles

Demonstration: Creating and Styling an HTML5 Page
In this demonstration, you will learn about the tasks
that you will perform in the lab for this module.

/* Modificar */
body{font-family: "Segoe UI", Helvetica, Arial, sans-serif; }
Remover
h1 { font-family: 'Copperplate Gothic'; color: red; }
Agregar
header { padding-bottom: 10px; border-bottom: 2px dotted blue; margin-bottom:
10px; }
header h1 {
margin-left: 20px; display: inline-block; }
Agregar
section { padding-bottom: 5px; border-bottom-style: dotted; border-bottom-width:
1px; border-bottom-color: grey; }
fieldset {background-color: pink; margin-bottom: 10px; } legend { font-size: 1.2em;
font-style: italic; } fieldset li { list-style: none; margin-bottom: 10px; }
input[type="submit"] { background-color: pink; opacity: 0.6; width: 200px; }

Lab: Creating and Styling HTML5 Pages
• Exercise 1: Creating HTML5 Pages
• Exercise 2: Styling HTML pages
Logon Information
•  Virtual Machines: 20480B-SEA-DEV11, MSL-TMG1
•  User Name: Student
•  Password: Pa$$w0rd
Estimated Time: 45 minutes

Lab Scenario
•  You are a web developer working for an organization that builds
websites to support conferences. You have been asked to create a
website for ContosoConf, a conference that showcases the latest
tools and techniques for building HTML5 web applications.
•  You decide to start by building a prototype website consisting of a
Home page that acts as a landing page for conference attendees,
and an About page that describes the purpose of the conference. In
later labs you will enhance these pages and add further pages that
enable attendees to register for the conference, and that provide
information about the sessions scheduled to run as part of the
conference.

Module Review and Takeaways
• Review Question(s)

Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft

Similar to Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft (20)

More from Nicolas Navarro Rincón

More from Nicolas Navarro Rincón (7)

Recently uploaded

Recently uploaded (7)

Creación y estilizado de una página en HTML5 - 70-480 certificacion microsoft