Curso de desarrollo HTML5

1. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Curso de Desarrollo web desde cero.

2. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Sobre el instructor
➢ Alexandro Colorado es
programador web desde el
2001
➢ Es versado en tecnologías
estándares de la w3c
➢ Es programador web
profesional desde el 2003

3. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Sobre el curso
➢ HTML, XHTML y HTML5 similitudes y
diferencias
➢ Cuando HTML5 no es HTML
➢ CSS y su evolución
➢ Frameworks y micro lenguajes

4. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Introducción a la web
La web se basa en
servidores distribuidos por
todo el mundo
WEB

5. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Uno puede conectar estos puntos
por direcciones IP
DNS funciona como un directorio
de nombres global

6. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Al acceder un sitio, puedes ir por
varios lugares hasta llegar a la
dirección final

7. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
IP
DNS
HTTP
Términos de la web

8. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
En la web existen sitios
estáticos y dinámicos

9. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Sitio Estático
WEB
Hola Mundo:

10. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Base de
Datos
WEB
Formulario:
Enviar
Sitio dinámico

11. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Que es HTML?
➢ Significa Hypertext Memory Language
➢ Es lenguaje de marcado únicamente.
– solo clasifica el contenido
➢ No existe procesos lógicos en HTML como en un
lenguaje de programación
➢ HTML define encabezados, titulos, parrafos y estilos,
etc.

12. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Logo
Remitente
Despedida
Oficio tradicional
<img src=”mi_logo.jpg”>
<p>Parrafo.... </p>

13. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Práctica 1: Crea tu primera página

14. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
La evolución de HTML en el tiempo.
➢ La W3C gobierna el lenguaje y los estándares a
usarse por los navegadores
➢ HTML ha subido de versión hasta 4.0.x (1999)
➢ XHTML fue la evolución de HTML con la intención de
hacerlo mas estructurado (2000)
➢ HTML5 fue a su vez la evolución al hacerlo mas
dinámico (2007)

15. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Lo nuevo dentro de HTML5
➢ Trae consigo una serie de soportes de API en el
navegador
– Geolocalización
– Almacenamiento local
– App Cache
– Multimedia
➢ Nuevas etiquetas y estructuras de acuerdo a la web
típica
– <area>, <article>, <nav>, <audio>, <video>
– Etc.

16. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
(x)HTML vs HTML5
➢ <div id=”menu”></div>
➢ <div id=”header”></div>
➢ <div id=”footer”></div>
➢ <div id=”banners”></div>
➢ <nav></nav>
➢ <header></header>
➢ <footer></footer>
➢ <aside></aside>

17. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Header
Articulo:
Titulo del articulo
Footer
NAV

18. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Formularios en HTML5
➢ Tipos de entradas
<input type>:
– search
– email
– url
– tel
– number
– range
– date
– week
– time
– color
– month

19. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
@grupocecacl
alex@grupocecacl.com
Validación

20. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Practica 2: Estructura tu página
personal

21. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Filosofía del estilo y contenido
➢ HTML contiene atributos y etiquetas que
pueden dar estilos
– Ejemplo: <p color=”red”>
➢ El problema al haber muchas paginas el
sitio se vuelve poco manejable

22. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
My Diario My Diario
Pag 2
CSS

23. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
CSS hace que el estilo este
centralizado en un solo
archivo.

24. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
CSS es otro lenguaje estructurado
H1 {
color: blue;
weight: bolder;
}
.boton {
background-color: rgba(255, 230,150, .05);
}

25. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
CSS y los estilos
CSS tiene 3 formas de ser declarado:
– Dentro del contenido, como atributo
– Dentro del sitio
– En su propio archivo
3 tipos de declaraciones:
– Etiquetas, del html
– Clases, las cuales pueden ser múltiples
– Identificadores, las cuales son únicas

26. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Práctica 3: Estiliza tu sitio

27. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Lo nuevo de CSS3
➢ CSS3 incluye nuevas propiedades que incluyen:
➢ Nuevos selectores
➢ Mejoras en el soporte de fuentes
➢ Nuevos espectros de color como:
– CMYK
– HLS (Hue, Luminosity, Saturation)
– Opacidad
➢ Soporte para múltiples fondos
➢ Mejora en degradados, bordes, y sombras

28. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Tipografías
Font-face es un selector para importar nuevas
fuentes:
@font-face {
font-family: Mi_nueva_fuente;
src: funete.otf;
}

29. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Columnas
Column-count
– especifica el numero de columnas a dividir el
contenido
Column-width
– el ancho de estas
Column-gap
– el espacio entre estas
Column-rule
– una division entre estas

30. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Bordes y sombras
#marco_imagen {
border-image: url(“mi_imagen.png”) 12
repeat round;
}
.sombra {
box-shadow: 10px 10px 5px #999;
}

31. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Uso de Medios (Media)
➢ Nos permite especificar el estilo de
acuerdo a nuevas características de
la pantalla
➢ Nos permite asignar estilos de
acuerdo a esta condición. Ej:

32. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
<link rel=”stylesheet” media=”all and (orientation:
portrait)” href=”vertical.css” />

33. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
@media screen and (min-
width: 400px) {
color: black;
}

34. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Mi sitio web
Mi sitio web
Tamaño
color
http://www.mypagina.com.mx

35. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
CSS3 e Imagenes
Uso de filtros avanzados como en un editor
de imagenes:
– Multiply, screen, darker, lighten, color-
dodge, color-burn, hard-light, etc.
Posicionamiento en pantalla:
– Background-size, background-clip,
background-origin, background-attachment

36. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Transformación, Transición,
Animación
Transformación estatica
– cambia valor de una propiedad
Transición dinámica
– cambia entre dos estados
Animación, “serie” de transiciones

37. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Práctica 4: Mejora la forma de
estilizar tu sitio aplicando CSS3

38. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
CSS y mas allá
➢ Frameworks de CSS ayuda a estandarizar los estilos
➢ Ingresan sus propios tipos de selectores, clases e
identificadores
➢ Implementan condicionales para web responsiva

39. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Práctica 5: PureCSS y Bootstrap

40. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Javascript, programación en el
navegador
➢ Es un lenguaje integrado al navegador
➢ puede insertar, manipular o eliminar contenido de un
sitio de forma dinámica
➢ puede manipular el navegador y sus componentes
como ventana, menú, paneles, etc.

41. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Variables, condicionales y bucles.
➢ Las variables son contenedores, pueden asignar a
un contenido o valor.
➢ Los arreglos son variables con múltiples valores.
➢ Booleanos son condicionales, sean opciones de
verdadero o falso o pueden ser arbitrarias.
➢ Bucles son ciclos que se repiten seriada o
infinitamente.

42. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Practica 6: Creando un widget en
Javascript

43. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Uso de funciones y objetos
➢ Las funciones nos permite agrupar código y
procesos.
➢ Objetos son componentes más completos que
pueden incluir múltiples funciones.
– Los objetos pueden incluir propiedades, métodos
y otros objetos.

44. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
JQuery el framework de Javascript
➢ Es un framework de Javascript que toma los
selectores de CSS para manipular el HTML.
➢ JQuery incluye una serie de funciones que
hacen más facil su uso.
➢ Reimplementa tecnología como AJAX más fácil
de procesar.
➢ JQuery trabaja en los navegadores más
populares.

45. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Como implementar JQuery
<head>
<script src="jquery.min.js"></script>
</head>

46. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Syntaxis en JQuery
➢ La syntaxis básica es:
$(selector).acción()
➢ $ es un simbolo que define el acceso a
Jquery
➢ Un (selector) que busca un elemento del
HTML
➢ Una acción() de Jquery hecha en un
elemento.

47. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Función típica de JQuery
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

48. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Práctica 7: Instala y configura JQuery

49. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Práctica 8: Instala y configura
Bootstrap

50. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Javascript y el backend
➢ AJAX varias tecnologías que incluyen
Javascript para hacer sitios dinámicos
– XML, Apache (servidor web) son las otras
tecnologías.
– Ejemplo: Crea formularios y envialos a una base
de datos sin refrescar el sitio.
➢ Node.js es un servidor de backend de
Javascript

51. D e s a r r o l l o w e b p a r a p r i n c i p i a n t e s
Pyros y Nodejs