Html 5
¿Que es y como funciona?
Html 5 es la quinta revisión del lenguaje base de la world wide web en donde se han ingresado nuevas etiquetas y a parte de ello integración con varias tecnologias entre ellas:
ETIQUETAS HTML5
Entre las etiquetas más importantes que encontramos de html5 están las siguientes:
y existen muchas mas pero estas han hecho grandes cambios en la web. HTML5
<header>
Esta es una de las etiquetas que por estetica debe de declararse una sola vez, ya que esta nos indica la cabecera del contenido de nuestra pagina. (Ejemplo: donde va el nombre de nuestro sitio).
Sintaxis:
<body>
<header> titulo </header>
...........
</body>
<nav>
Esta etiqueta esta diseñada para colocarla abajo de la cabecera (No necesariamente) en donde nosotros podemos colocar el menú de navegación.
Sintaxis:
<body>
.........
<nav> menu </nav>
.........
</body>
<article>
Es una de las partes de un documento web más importante ya que acá escribimos el segmento que uno debe de dar mayor énfasis. Y va adentro de la etiqueta <section>
Sintaxis:
<body>
<section>
..........
<article> información central </article>
</section>
</body>
<aside>
Esta sección es muy a menudo para colocar toda la información secundaria como publicidad, redes sociales, lista de artículos (blog), etc... y en el diseño se coloca a un lado de la pagina.
<body>
.........
<aside> publcidad o redes sociales </aside>
.........
</body>
<section>
representan en si un conjunto de elementos similares, muy utilizados para los articles , para unir todo de un tipo pero no es un contenedor, porque para eso existen la etiqueta <div>
<body>
.........
<section> aside o article </section>
.........
</body>
<footer>
Aca en si va la parte final de la pagina en donde se escribe los enlaces a redes sociales ò quien la diseño etc...
<canvas>
bueno creo esta es una de las etiquetas que vino a revolucionar como miramos ya que con ayuda de javascript y un poco css podemos hacer magia desde dibujar un simple circo pasando por el diseño de animaciones hasta llegar a los videojuegos.
Estare dando un pequeño ejemplo de canvas en la parte de JavaScript ya que ayi es donde sucede la magia, porque sin el es otra etiqueta más.
<audio>
es una de las etiquetas que han cambiado la forma de ver html ya que gracias a ella podemos agregar audio sin necesidad de utilizar flash, y llegar a puntos donde el html nunca a llegado. SIntaxis:
<audio src="mimp3.mp3" preload autoplay controls loop>
TU explorador no soporta html5 actualizalo
</audio>
<keygen>
esta etiqueta en lugar de hacer <input type="keygen">
se realiza la etiqueta <keygen>, eso si en los formularios entonces ya solo le agragamos el name y lo enviamos al servidor y todo solucionado. Sintaxis:
<form>
<keygen name="security"></keygen>
</form>
JAVASCRIPT
es un lenguaje de programación interpretado para el lado del cliente de un navegador web, en el cual mejora la interfaz gráfica y también para realizar paginas web dinámicas (Como esta). El cual lo diseño netscape en 1995. Ejemplo (Hola Mundo):
<script>
alert("Hola Mundo");
</script>
Pero también tiene algunas librerías que hacen que su funcionamiento sea mucho mas rápido ó darle mejoras tales como:
NODE.JS
Es una libreria basada en javascript la cual fue escrita para servidores y desarrollada por Ryan Dah
en el año 2009 (video presentación) el cual es orientado a eventos y basada en el motorV8 de google. Ejemplo(Hola Mundo):
var http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World\n');
}).listen(8000);
console.log('Server running at http://127.0.0.1:8000/');
También incluye algunos modulos tales como socket.io ó express.js
jquery
es una biblioteca de JavaScript creada por John Resig, en donde podemos hacer un millon de cosas tales como: manipular html, css, ajax, xml y DOM, en si para llamarla es usando su funcion $(); en donde entre parentesis se puede seleccionar etiquetas html por medio de su nombre, id o clase y devuelve todas las caracteristas de ella, ejemplo:
$(document).on("ready",function(){
console.log("hola mundo");
});
En si el anterior codigo es hola mundo en jquery.
geolocalización
ahora ya puedes saber en que lugar en el mundo esta tu cliente (con sus permisos de él por su puesto ) con ayuda de Javascript lo podemos hacer y es con el siguiente codigo:
<script>
function localizame(){
navigator.geolocation.getCurrentPosition(coordenadas);
function coordenadas(){
var latitud = position.coords.latitude;
var longitud= position.coords.longitude;
}
</script>
canvas
bueno ya vimos la etiqueta canvas en html ahora vemos la parte en javascript en donde vamos a dibujar un simple rectangulo
<script>
var canvas=document.getElementById("mycanvas");
var contexto =canvas.getContext("2d");
contexto.fillstyle= "#000";
contexto.fillRect(0,0,150,75);
</script>
aca llamos a canvas por getElementBy ID luego llamamos a su contexto y por medio de eso le seleccionamos su color y dibujamos un rectangulo.
css3
Es tambien una de las herramientas que contiene este paquete de nuevas tecnologias que vienen conectadas con html5, bueno aqui les hablare de algunas de las propiedades que contiene el nuevo css entre ellas estan:
box-shadow
es algo asi como sombra paralela n photoshop ahora ya no debes de crear un tu png con sombra y luego pasarlo a tu pagina ahora con simplemente colocar box-shadow y unas propiedades y ya lo tienes. Sintaxis:
{
box-shadow: Desplazamiento HOr, Desp Vert, difuminado, color
entonces asi quedaria:
box-shadow: 5px 5px 10px #000;
}
Y solo cambiando de box-shadow a text-shadow se le daria sombra al texto
border radius
Esta etiqueta es algo que vino facilitar a millones de diseñadores que debian de colocar varias imagenes para que les diera el efecto de que fuera como bordes redondeados pero ahora con una simple propiedad de css lo pueden realizar. Sintaxis:
border-radius: radio_del_borde;
entonces quedaria así:
border-radius: 1em;
border-color
Esta propiedad es nada mas que colocarle un color al borde de un div o un parrafo o lo que desee. sintaxis:
{
border-color: color_en_rgb;
quedaria asi:
border-color: #fffff;
}
transition
bueno esta es la etiqueta que ha ayudado a dejar de utilizar flash ya que con esta podemos realizar animaciones. Sintaxis:
para hacerla mas eficiente se divide en 4 propiedades y estas son:
transition-property: aca se identifican todas las propiedades que se modifican a la hora de la transicion.
transition-property: width, font-size;
transition-duration: es el tiempo en que tarda la transicion puede ser desde milisegundos hasta horas si se quiere (muy raro no usar milisegundos). Sintaxis:
transition-duration:300ms;
transition-timing-function: esta propiedad indica si la transicion va seguida, hace escalas o de tiempo, se acelera o va frenando.
transition-timing-function:lineal
transition-delay: es la propiedad que indica a cuanto tiempo debe de
arrancar la animación despues de haberla invocado.
Transform
es una de las propiedades para hacerle una modificaciones en css3 como rotar , o skewX. Sintaxis:
Para hacer rotar se utiliza la siguiente sintaxis:
transform:rotate(deg); deg=grados
Entonces quedaria así:
transform:rotate(7deg);
Para deformar a una cantidad seria la siguiente sintaxis:
transform:skewX(deg);
quedaria asi:
transform:skewX(10deg);
anexos
hay muchas cosas mas que hablar de html pero algunas que no supe en donde colocarlas aca se las dejo:
utf-8
bueno la mayoria de nosotros nos sabemos las codificaciones para colocar la ñ o tilde a las vocales pero que tal si nos ahorramos el trabajo entonces aqui entra a trabajar la etiqueta <meta charset="utf-8"> y con ello nos ahorramos la memorizacion de varios codigos.
!doctype html
antes para declarar el tipo de html se escribia una linea gigantesca pero en html 5 solo se realiza lo siguiente
<!doctype html> y con esto el navegador ya sabe que html es.
-moz-
bueno no todo es color de rosas en html 5 yambien tiene sus contras y eso es culpa de los motores de randerizado de cada uno de los navegadores entonces debemos de indicar a cada uno de ellos lo que queremos hacer y para el motor de randerizado de mozilla (Gecko) le indicamos antes de la propiedad esto -moz- y quedaria algo así:
-moz-border-radius: 1 em;
y con ello ya hablamos a gecko.
-webkit-
es muy similar a -moz- pero con este le hablamos al motor de randerizado de chrome que es webkit y es la misma sintaxis:
-webkit-border-radius: 2 em;
cas
By josuechaqui
cas
- 663
