PDF de programación - HTML5 CSS3

Volver

<<>>

HTML5 CSS3

Publicado el 9 de Septiembre del 2017

2.506 visualizaciones desde el 9 de Septiembre del 2017

632,6 KB

74 paginas

Creado hace 11a (27/08/2013)

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