HTML5
CSS3
Andrés Pastorini
TRIA – Tecnólogo Informático
HTML5 y CSS3
Repaso JQuery
HTML5 y CSS3
Repaso JQuery
HTML5 y CSS3
HTML5
Para usar HTML5 se utiliza el doctype.
<!DOCTYPE HTML>
Es compatible con versiones antiguas de navegadores.
HTML5 y CSS3
HTML5
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Hello world!</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="code.js"></script>
</head>
<body>
<hgroup>
<h1>Hola HTML5!</h1>
<h2>Esta es mi primera web</h2>
</hgroup>
</body>
</html>
HTML5 y CSS3
HTML5
En HTML4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
En HTML5
<metacharset="utf-8">
En HTML4
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
En HTML5
<link rel="stylesheet" href="style.css"/>
En HTML4
<script src="code.js" type="text/javascript"></script>
En HTML5
<script src="code.js"> </script>
HTML5 y CSS3
HTML5
En HTML4 sólo existía un elemento contenedor sin significado
semántico <div>.
En HTML5 existen Div, Section y Article que además de cumplir con una
comportamiento similar a div aportan semántica.
<div>
Es el contenedor genérico, es un elemento a nivel de bloque sin sentido adicional
semántico.
<section>
Es un "documento genérico o sección de aplicación"
Normalmente, tiene un header y suele tener un footer .
<article>
Es una parte independiente del documento. También suele llevar un título y un
footer.
HTML5 y CSS3
HTML5
<aside>
Se usa para definir la sidebar.
<footer>
La parte más baja, donde tenemos toda la información
<header>
La cabecera de la web.
<nav>
Se usa para definir el menú o la navegación de la página.
HTML5 y CSS3
HTML5 y CSS3
HTML5
HTML5 y CSS3
HTML5 y CSS3
HTML5
Nuevas Características
• Audio & Video
• Canvas
• Almacenamiento local
• WebSockets
• Semántica
• Compatibilidad hacia atrás
• Eficacia en el renderizado
HTML5 y CSS3
HTML5
Audio
La etiqueta <audio> define sonido o cualquier tipo de
streaming de audio.
Atributos:
• autoplay
• controls
• loop
• preload
• src
HTML5 y CSS3
HTML5
La etiqueta <command> define un botón de comando o un radiobutton o un
checkbox.
Atributos:
• checked
• disabled
• icon
• label
• radiogroup
• type
<command onclick="alert('Hello World')">Haz click aquí</command>
HTML5 y CSS3
HTML5
La etiqueta <mark> se usa para destacar una palabra o una parte del texto.
La etiqueta <hgroup> se usa para agrupar titulares (h1,h2)
<hgroup>
<h1>Bienvenidos a mi web</h1>
<h2>La web de HTML5</h2>
</hgroup>
La etiqueta <progress> se usa para visualizar el progreso de una tarea
que se esté realizando
<progress>
<span id="objprogress">25</span>%
</progress>
HTML5 y CSS3
HTML5
La etiqueta <source> se usa para definir la fuente de un archivo de audio o
video.
<audio controls="controls">
<source src="cancion.ogg" type="audio/ogg" />
<source src="cancion.mp3" type="audio/mpeg" />
</audio>
La etiqueta <summary> contiene el encabezado para el elemento
details, que se usa para dar detalles sobre un documento o parte de un
documento.
<details>
<summary>Copyright por mi persona.</summary>
<p>Lorem ipsum dolor sit amet....</p>
</details>
HTML5 y CSS3
Formularios
Web
HTML5 y CSS3
HTML5
Placeholder
Un placeholder es un texto que se muestra para ayudar al
usuario y darle información.
En cuanto se hace click en el input, desaparece:
HTML5 y CSS3
HTML5
Autofocus
<input name="q" autofocus>
El autofocus no funciona en todos los navegadores, así que si quiere usar y
tener máxima compatibilidad, se puede usar JavaScript.
<input id="i" autofocus>
<script>
function auto(){
}
window.onload = auto;
</script>
if (!("autofocus" in document.createElement("input"))) {
}
document.getElementById("i").focus();
HTML5 y CSS3
HTML5
Tipos de Texto
Información que se puede utilizar para desplegar y/o validar el tipo de texto
ingresado.
<input type="email">
<input type=“url">
<input type=“tel">
<input name="xx" type="range" min="0“ max="10“ step="6“ value="4">
HTML5 y CSS3
HTML5
Tipos de input para elegir fechas
type=...
• "date"
• "month"
• "week"
• "time"
• "datetime"
• "datetime-local"
• "datetime" picker
HTML5 y CSS3
Canvas
HTML5 y CSS3
HTML5
Un lienzo permite dibujar en el documento HTML y actualizar dinámicamente estos
dibujos, por medio de JavaScript.
También puede disparar acciones a partir de los eventos generados por el usuario.
Permite un funcionamiento similar al plugin de Flash, en lo que respecta a renderización
de contenidos dinámicos.
<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>
HTML5 y CSS3
HTML5
Para utilizar el canvas se debe referenciar primero el elemento canvas y adquirir
su contexto.
var canvas = document.getElementById('entorno_canvas');
var context = canvas.getContext('2d');
Una vez adquirido, se puede empezar a dibujar en la superficie
del canvas usando la API.
HTML5 y CSS3
HTML5
var canvas = document.getElementById('micanvas');
//Accedo al contexto de '2d' de este canvas, necesario para
dibujar
var contexto = canvas.getContext('2d');
//Dibujo en el contexto del canvas
contexto.fillRect(50, 0, 10, 150);
HTML5 y CSS3
HTML5
beginPath
Le dice al contexto del canvas que se va a empezar a dibujarse un camino, no tiene
ningún parámetro.
Una vez invocada la función se puede empezar a dibujar el camino añadiendo segmentos
para completarlo con las diferentes funciones.
moveTo
Sirve para definir el punto donde se comienza a dibujar el segmento.
No dibuja nada, recibe como parámetro los puntos x e y donde ha de moverse el puntero
para dibujo.
HTML5 y CSS3
HTML5
lineTo
Dibuja una línea recta desde la posición actual hasta el punto (x,y) que se
indique como parámetro. La posición actual del camino se establece indicado
previamente con un moveTo(), o donde se haya terminado el trazo
anteriormente dibujado.
fill
Este método del contexto del canvas sirve para rellenar de color el área
circunscrita por un camino.
Para rellenar de color un path, el path tiene que estar cerrado, por lo que, si
no lo está, automáticamente se cerrará con una línea recta hasta el primer
punto del camino, es decir, donde se comenzó a dibujar.
HTML5 y CSS3
HTML5
closePath
Sirve para cerrar un path, volviendo a su punto inicial de dibujo,
no recibe ningún parámetro.
fillText
Permite dibujar texto en el canvas:
contexto.font = "bold 12px sans-serif";
contexto.fillText("Hola", 5, 5);
stroke
Es similar al método fill pero traza solo la silueta y no la rellena.
HTML5 y CSS3
HTML5
Ejemplo
ctx.beginPath();
ctx.moveTo(50,5);
ctx.lineTo(75,65);
ctx.lineTo(50,125);
ctx.lineTo(25,65);
ctx.closePath();
ctx.fill();
HTML5 y CSS3
HTML5
Imágenes
Para dibujar una imagen, se usa la función drawImage(), con distintos parámetros
según lo que se quiera hacer:
• drawImage(img, x, y): dibuja la imagen img en (x, y)
• drawImage(img, x, y, sw, sh): dibuja la imagen img en (x, y) después de
establecer las dimensiones sw x sh.
HTML5 y CSS3
HTML5
Imágenes
Se pueden cargar de dos maneras:
• Usando una imagen cargada previamente con una etiqueta <img> en el
documento:
<img id=“imagen" src="img/img.png" alt="" width="177" height="113">
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = document.getElementById("imagen");
context.drawImage(img, 0, 0);
};
</script>
• Cargando la imagen completamente desde javascript:
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "img/imagen.png"; //Necesita especificarse donde está la imagen
context.drawImage(img, 0, 0);
HTML5 y CSS3
HTML5
Gradientes
Son transiciones suaves entre dos colores:
• createLinearGradient(x0, y0, x1, y1): pinta a lo largo de una
dirección indiada por la línea que va desde el punto (x0, y0) hasta
(x1, y1).
• createRadialGradient(x0, y0, r0, x1, y1, r1): pinta a lo largo de un
cono, con círculo inicial está en (x0, y0) con radio r0, y con círculo
final en (x1, y1) con radio r1.
Se debe crear un objeto Gradient:
var my_gradient = contexto.createLinearGradient(0, 0, 300, 0);
HTML5 y CSS3
HTML5
Gradientes
Se deben añadir colores de parada en las posiciones del gradiente. Las
posiciones van de 0 a 1.
my_gradient.addColorStop(0, "black");
my_gradient.addColorStrop(1, "white");
Para dibujar algo con gradiente, se asigna el objeto gradient a la propiedad
fillStyle, y se dibuja algo con las técnicas vistas
Contexto.fillStyle = my_gradient;
contexto.fillRect(0, 0, 50, 50);
HTML5 y CSS3
Audio
y
Video
HTML5 y CSS3
Audio
TDIVJ2D – Tecnólogo Informático
HTML5 y CSS3
document.getElementById("buttonactive").play();
Audio
<audio id="buttonactive">
<source src="media/button_active.mp3" />
<source src="media/button_active.ogg" />
</audio>
<script>
</script>
The play function plays the audio from the elapsed time, which is stored in the
currentTimeproperty. The default value of currentTime is zero. The following
code plays the audio from 3.5 seconds:
<script>
</script>
<script>
</script>
<script>
</script>
document.getElementById("buttonactive").currentTime = 3.5;
document.getElementById("buttonactive").play();
document.getElementById("buttonactive").pause();
document.getEle
Crear cuenta
Comentarios de: HTML5 CSS3 (0)
No hay comentarios