HTML5
¿Qué es HTML?
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite
describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con
enlaces (hyperlinks) que conducen a otros documentos o fuentes de información
relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa
en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto
normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se
quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita,
o un gráfico determinado) y dejar que luego la presentación final de dicho
hipertexto se realice por programas especializados conocidos como Browsers o
navegadores web (Firefox,Opera,Chrome,etc.)
Estructura Básica de un documento HTML
Un documento escrito en HTML contendría básicamente las siguientes etiquetas:
<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.
¿Qué es HTML5?
Es la quinta revisión importante del estándar que mueve internet, HTML y que
ha sido impulsado por el aumento de las necesidades de mejorar la funcionalidad y la
interactividad de usuarios y aplicaciones. HTML 5 presenta una amplia gama de
mejoras en controles para formularios, APIs, multimedia y también en la estructura y
la semántica. El trabajo en HTML 5 comenzó en el 2004 y es un esfuerzo conjunto entre
el W3C HTML WC y el WHATWG. Muchos aportan su participación, como Apple,
Mozilla, Opera, Microsoft y un sinnúmero de personas y empresas.
La aparición de estas revisiones implicará cambios importantes en el desarrollo de
páginas web y algunos se aventuran incluso a prever la desaparición de algunas
tecnologías de gran calado en la red, como puede ser Adobe Flash. Cierto o no, la
realidad es que estamos presenciando una evolución radical de los lenguajes principales
de la web que aportará grandes mejoras, pero que al mismo tiempo implicará un
periodo de adaptación y aprendizaje por parte de programadores y diseñadores
Novedades de la
estructura:
Para crear una página web, normalmente se incluyen estructuras comunes como
headers, footers y columnas y es común usar divs para darles un id descriptiva o clase ya
que las actuales versiones de HTML4 carecen de la semántica necesaria para describir
estas partes de manera específica.
Por
ejemplo:
El HTML5 soluciona esto incluyendo nuevos elementos que representan cada una de las
diferentes secciones de una página web.
Nuevos elementos:
Los tiempos modernos requieren nuevos elementos para proporcionar una web más
semántica, completa y homogenea. Para ello se han añadido una buena serie de
elementos que nos permitirán encapsular más nuestro contenido.
<article /> elemento que nos permite declarar un trozo del contenido como
artículo. Ideal para blogs o periódicos.
<aside /> representa un trozo de contenido que se relaciona muy levemente con
el resto del contenido.
<dialog /> elemento que permite representar conversaciones:
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who's playing first?
<dt> Abbott
<dd> That's right.
<dt> Costello
<dd> When you pay off the first baseman every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
<figure /> podrás usarlo para asociar con un caption un contenido incrustado,
como por ejemplo gráficos o vídeo:
<figure>
<video src=ogg>…</video>
<legend>Example</legend>
</figure>
<footer />Sección de la página para contener información sobre el autor, copyright,
etc,…
<header /> representa a la sección de cabecera.
<nav /> representa la sección de la página orientada a la navegación.
<section /> elemento que indica que se trata de una sección genérica.
<audio /> y <video /> para el contenido multimedia.
<embed /> es un elemento dedicado para contenido de plugins.
<m /> representa el texto marcado.
<meter /> usado para representar medidas, por ejemplo el tamaño del disco
usado…
<time /> usado para mostrar fechas y/o tiempo.
<canvas /> usado para mostrar gráficos renderizados en tiempo real, por ejemplo
gráficos,
juegos, etc,…
<commnad /> relacionado con los comandos que el usuario puede invocar.
<datagrid /> ideal para mostrar un arbol de datos o una tabla tabulada.
<details /> muestra información adicional si el usuario lo demanda.
<datalist /> junto con el nuevo atributo list para los <input /> puede ser usado para
crear
comboboxes:
input list=browsers>
<datalist id=browsers>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
<event-sources /> puede ser usado para capturar eventos enviados desde servidor.
<output /> nos indica que tipo de salida vamos producir con nuestra página.
<progress /> representa una barra de proceso de una tarea, por ejemplo
descargar,…
Los elementos de entrada <input /> dispondrán de una serie de tipos (type) nuevos para
indicar los diferentes tipos de elementos de entrada posibles.
datetime
datetime-local
date
month
week
time
number
range
email
url
La idea es que estos tipos sean poporcionados por el agente de usuario (navegador) en
su interface que submitarán el formato definido al servidor.
Nuevos
atributos:
media: Para conseguir una mayor consistencia con el link en los elementos <a />
ping: Especificacremos una lista separada por espacios donde produciremos un
ping cuando se siga el enlace, para los elementos <area /> y <a />
target: Disponible para mejorar la consistencia con el elemento <a />.
autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />,
<textarea
/> o <button /> que ha de coger el foco al cargar la página.
form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y
<fieldset />
que permite que se sococien con un simple formulario.
replace: atributo para <input /> <button /> y <form /> que le afectará
cuando el contenido del elemento sofra algún cambio.
data: Para <form />, <select /> y <datalist />.
required: Para elementos <input /> (Excepto hidden e image) y <textarea />,
indica que el campo es obligatorio.
inputmode: Atributo para <input /> y <textarea />.
disabled: Para <fieldset />, permite desactivar el fieldset completo.
autocomplete, min, max, pattern, step: Para elementos <input /> permite
delimitar las posibilidades de nuestros elementos de entrada.
list: Para elementos <datalist /> y <select />.
template: Para <input /> y <button /> podrá usarse para repetir templates.
scoped: Para elemento <style />, permitirá usar hojas de estilo “scoped” ??
async: Para el elemento <script /> el ajax hecho atributo.
Elementos Cambiados
Estos elementos de HTML5 son imcompatibles con HTML4.
El elemento <a /> sin href ahora creará un enlace al sitio.
El elemento <address /> es ahora un nuevo concepto de sección.
El elemento <b /> ahora representa un trozo de texto a ser estilizado sin
ninguna importancia.
Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al
control a
menos que el comportamiento sea estandar para el interfaz utilizado en la
plataforma.
<menu /> ha sido redefinido para ser usado con los actuales menús.
El elemento <small /> ahora representa una impresión pequeña.
El elemento <strong /> definitivamente representa el enfasis puesto en trozo de
nuestro
texto.
Elementos
eliminados
En la nueva versión, algunos de los elementos anteriormente desaprobados pasan a ser
eliminados definivamente.
acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
noscript (solo en XHTML5)
s
strike
tt
u
Atributos
eliminados
Al igual que los elementos los atributos tambien pasarán a mejor vida.
rev y charset en <link /> y <a />
target en <link />
nohref en <area />
profile en <head />
version en <html />
name en <map />
scheme en <meta />
archive, classid, codetype, declare y standby en <object />
valuetype en <param />
charset en <script />
summary en <table />
header, axis y abbr en <td /> y <th />
CCS
Cascading Style Sheets (hojas de estilo en cascada). CSS es un lenguaje usado
para definir la presentación de un documento estructurado escrito en HTML o
XML (y por extensión en XHTML).
El W3C permite efectuar nuevas acciones sobre los elementos de HTML,
mediante nuevas propiedades, veamos qué cosas nuevas se pueden hacer con
estas propiedades:
Nota: Aquí utilizo el prefijo -moz- para Mozilla Firefox. Existen otros prefijos para Chrome (-
webkit),
Safari
(-webkit) y Opera (-o), basta con sustituir el prefijo para que funcione con el navegador
respectivo
Borde con colores diferentes
La propiedad -moz-border-colors: permite crear varios bordes de colores diferentes. Esta
propiedad puede ser utilizada también como:
-moz-borders-top-color: (adición de bordes, top, bottom, left, right)
Ej:
#midiv {
border: 8px solid #000000;
-moz-border-colors : #CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000
#550000;
padding: 5px ;
}
Imágenes como bordes
CSS3 permite el uso de imágenes como bordes de los elementos de la página. Las dos
propiedades
(y sus derivadas) son:
border-image:
border-top-image border-
right-image border-
bottom-image border-left-
image
border-corner-image:
border-top-left-image border- top-
right-image border-bottom- left-
image border-bottom-right- image
Ej:
#mi-div {
border-image: url(border.png) 27 27 27 27 round round;
}
Bordes redondeados en las esquinas
La propiedad border-radius de CSS3 permite a los desarrolladores web definir bordes
redondeados en las esquinas, sin necesidad de imágenes de esquinas ni recurrir al uso de
etiquetas div multiples.
#contenedor {
-moz-border-radius: 15px; /* Prefijo Moz para Mozilla (no valido para la
W3C)*/
border-radius: 15px; /* Ningún prefijo para los navegadores que incorporan la propiedad
sin prefijo (valido para la W3C) */
}
¿Qué es Bootstrap?
•Bootstrap es un framework de front-end gratuito para un desarrollo web más rápido y fácil
•Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografías,
formularios, botones, tablas, navegación, modales, carruseles de imágenes y muchos
otros, así como complementos de JavaScript opcionales
•Bootstrap también le brinda la capacidad de crear fácilmente diseños
Dónde obtener Bootstrap 4?
Hay dos formas de comenzar a utilizar Bootstrap 4 en su propio sitio web.
Usted puede:
•Incluye Bootstrap 4 desde un CDN
•Descargue Bootstrap 4 desde getbootstrap.com
Descargando Bootstrap 4
Si desea descargar y alojar Bootstrap 4 usted mismo, vaya a https://getbootstrap.com/ , y siga las
instrucciones allí.
Cree la primera página web con Bootstrap 4
1. Agregue el doctype HTML5
Bootstrap 4 usa elementos HTML y propiedades CSS que requieren el doctype HTML5.
Siempre incluya el tipo de documento HTML5 al comienzo de la página, junto con el atributo lang y
el conjunto de caracteres correcto:
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 4 es móvil primero
Bootstrap 4 está diseñado para responder a los dispositivos móviles. Los estilos de primeros
dispositivos móviles son parte del marco central.
Para garantizar una reproducción adecuada y un zoom táctil, agregue la siguiente
etiqueta <meta> dentro del elemento <head> :
< meta name="viewport" content="width=device-width, initial-scale=1">
El width=device-width parte del ancho del width=device-width establece el ancho de la página
para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La initial-scale=1 parte establece el nivel de zoom inicial cuando el navegador carga la página por
primera vez.
3. Contenedores
Bootstrap 4 también requiere un elemento contenedor para envolver el contenido del sitio.
Hay dos clases de contenedor para elegir:
1.La clase .container proporciona un contenedor responsivo de ancho fijo
2.La clase .container-fluid proporciona un contenedor de ancho completo , que
abarca todo el ancho de la ventana gráfica
Dos páginas básicas de Bootstrap 4
El siguiente ejemplo muestra el código de una página básica de Bootstrap 4 (con un contenedor
responsivo de ancho fijo):
Ejemplo de contenedor
< !DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4
.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.m in.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd
/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstra p.min.js"></script>
< /head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
El siguiente ejemplo muestra el código de una página básica de Bootstrap 4 (con un contenedor de
ancho completo):
Ejemplo de fluido contenedor
< !DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4
.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.m in.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd /popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstra
p.min.js">< /script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Métodos y funciones para efectos en JQuery
En la siguiente tabla se listan todos los métodos de JQuery, disponibles para crear efectos
y animaciones.
Método Función que realiza
animate() Ejecuta una animación personalizada en los elementos seleccionados
clearQueue() Elimina todas las funciones restantes en cola de los elementos
seleccionados
delay() Establece un retardo para todas las funciones en cola en los elementos
seleccionados
dequeue() Elimina la siguiente función de la cola y luego ejecuta la función
fadeIn() Se desvanece en los elementos seleccionados
fadeOut() Desvanece los elementos seleccionados
fadeTo() Desvanece los elementos seleccionados a una opacidad dada
fadeToggle() Alterna entre los métodos fadeIn () y fadeOut ()
finish() Detiene, elimina y completa todas las animaciones en cola para los elementos
seleccionados
hide() Oculta los elementos seleccionados
queue() Muestra las funciones en cola en los elementos seleccionados
show() Muestra los elementos seleccionados
slideDown() Desliza (muestra) los elementos seleccionados
slideToggle() Alterna entre los métodos slideUp () y slideDown ()
slideUp() Desliza (oculta) los elementos seleccionados
stop() Detiene la animación en ejecución para los elementos seleccionados
toggle() Alterna entre los métodos hide () y show ()
Introducción a AJAX
El término AJAX se presentó por primera vez en el artículo "Ajax: A New Approach
to Web Applications" publicado por Jesse James Garrett el 18 de Febrero de 2005.
Hasta ese momento, no existía un término normalizado que hiciera referencia a un
nuevo tipo de aplicación web que estaba apareciendo.
En realidad, el término AJAX es un acrónimo de Asynchronous JavaScript + XML,
que se puede traducir como "JavaScript asíncrono + XML".
El artículo define AJAX de la siguiente forma:
Ajax no es una tecnología en sí mismo. En realidad, se trata de varias
tecnologías independientes que se unen de formas nuevas y
sorprendentes.
Las tecnologías que forman AJAX son:
XHTML y CSS, para crear una presentación basada en estándares.
DOM, para la interacción y manipulación dinámica de la presentación.
XML, XSLT y JSON, para el intercambio y la manipulación de información.
XMLHttpRequest, para el intercambio asíncrono de información.
JavaScript, para unir todas las demás tecnologías.
Figura 1.2 Comparación gráfica del modelo tradicional de aplicación web y del
nuevo modelo propuesto por AJAX. (Imagen original creada por Adaptive Path y
utilizada con su permiso)
Esta técnica tradicional para crear aplicaciones web funciona correctamente, pero
no crea una buena sensación al usuario. Al realizar peticiones continuas al
servidor, el usuario debe esperar a que se recargue la página con los cambios
solicitados. Si la aplicación debe realizar peticiones continuas, su uso se convierte
en algo molesto
AJAX permite mejorar completamente la interacción del usuario con la aplicación,
evitando las recargas constantes de la página, ya que el intercambio de
información con el servidor se produce en un segundo plano.
Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas
mediante la creación de un elemento intermedio entre el usuario y el servidor. La
nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el
usuario nunca se encuentra con una ventana del navegador vacía esperando la
respuesta del servidor.
El siguiente esquema muestra la diferencia más importante entre una aplicación
web tradicional y una aplicación web creada con AJAX. La imagen superior
muestra la interación síncrona propia de las aplicaciones web tradicionales. La
imagen inferior muestra la comunicación asíncrona de las aplicaciones creadas
con AJAX.
Figura 1.2 Comparación gráfica del modelo tradicional de aplicación web y del
nuevo modelo propuesto por AJAX. (Imagen original creada por Adaptive Path y
utilizada con su permiso)
Esta técnica tradicional para crear aplicaciones web funciona correctamente, pero
no crea una buena sensación al usuario. Al realizar peticiones continuas al
servidor, el usuario debe esperar a que se recargue la página con los cambios
solicitados. Si la aplicación debe realizar peticiones continuas, su uso se convierte
en algo molesto
AJAX permite mejorar completamente la interacción del usuario con la aplicación,
evitando las recargas constantes de la página, ya que el intercambio de
información con el servidor se produce en un segundo plano.
Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas
mediante la creación de un elemento intermedio entre el usuario y el servidor. La
nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el
usuario nunca se encuentra con una ventana del navegador vacía esperando la
respuesta del servidor.
El siguiente esquema muestra la diferencia más importante entre una aplicación
web tradicional y una aplicación web creada con AJAX. La imagen superior
muestra la interación síncrona propia de las aplicaciones web tradicionales. La
imagen inferior muestra la comunicación asíncrona de las aplicaciones creadas
con AJAX.
Figura 1.3 Comparación entre las comunicaciones síncronas de las aplicaciones web
tradicionales y las comunicaciones asíncronas de las aplicaciones AJAX (Imagen original
creada por Adaptive Path y utilizada con su permiso)
Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se realizan al
elemento encargado de AJAX. Las peticiones más simples no requieren intervención del
servidor, por lo que la respuesta es inmediata. Si la interacción requiere una respuesta del
servidor, la petición se realiza de forma asíncrona mediante AJAX. En este caso, la
interacción del usuario tampoco se ve interrumpida por recargas de página o largas
esperas por la respuesta del servidor.
Desde su aparición, se han creado cientos de aplicaciones web basadas en AJAX. En la
mayoría de casos, AJAX puede sustituir completamente a otras técnicas como Flash.
Además, en el caso de las aplicaciones web más avanzadas, pueden llegar a sustituir a
las aplicaciones de escritorio.
A continuación se muestra una lista de algunas de las aplicaciones más conocidas
basadas en AJAX:
Gestores de correo electrónico: Gmail, Yahoo Mail, Windows Live Mail.
Cartografía: Google Maps, Yahoo Maps, Windows Live Local.
Aplicaciones web y productividad: Google Docs, Zimbra, Zoho.
Otras: Netvibes [metapágina], Digg [noticias], Meebo [mensajería], 30 Boxes
[calendario], Flickr [fotografía].
Republica bolivariana de Venezuela
Ministerio del Poder Popular para la Educación Superior
Instituto Universitario de Tegnologia “Mario Briceño Iragorry”
Municipio Valera – Estado Trujillo
Manual de HTML5, CSS3, BOOSTRAP,
JQUERY y AJAX
Integrantes:
Danny Paredes C.I: 29.633.747
