HTML 5 & CSS 3. Expositor: Tec. Henrry Osmar Torres Andonaire

Transcripción

1 HTML 5 & CSS 3 Expositor: Tec. Henrry Osmar Torres Andonaire Laboral: htorres@adylconsulting.com Personal: osmar.1@hotmail.com Sitio Web: Facebook: HeOsToAnd/ Pimentel - Perú Octubre del 2014

2 Qué es una Página Web?

3 Qué es un Web Master?

4 Qué necesito para crear una Página Web? Un editor de Código HTML.

5 Qué necesito para crear una Página Web? Un editor de imágenes

6 Qué necesito para crear una Página Web? Navegadores de Internet

7 Qué necesito para crear una Página Web? Un dominio y hosting

8 Qué necesito para crear una Página Web? Servidor Web Local

9 Qué necesito para crear una Página Web? Gestor de Archivos FTP

10 Los CMS s (Sistemas Gestores de Contenido)

11 Otras Tecnologías Web

12 Otras Tecnologías Web

13 La Web y las Tecnologías Móviles

14

15 Qué es HTML 5? El HTML5 (HyperText Markup Language) es la quinta revisión del lenguaje de marcas de hipertexto de la World Wide Web. Esta nueva versión pretende remplazar al actual (X)HTML. VERSIONES HTML : HTML 2.0 HTML 3.2 HTML 4.0

16 HTML 5 y la compatibilidad con los Navegadores

17 Intenciones del HTML 5 Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. Asi mismo el empleo de tablas en exceso generaba inconvenientes, ya sea para adaptar a un dispositivo móvil. Nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así <div> innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas. Los navegadores podrán darle más importancia a las secciones de la web, facilitándole la tarea del posicionamiento SEO, así como cualquier otra aplicación que interprete sitios web.

18 Primeros pasos en HTML 5 Indicarle al navegador web que el documento que está abriendo es un documento html. Para ello se emplea la línea de código: En esta versión el Doctype es mucho más simplificado y compatible con HTML y XHTML.

19 Primeros pasos en HTML 5 Colocar nuestra etiqueta de cabecera <head></head> de HTML, alli podremos adjuntar nuestras hojas de estilo (CSS3), nuestro códigos de JavaScript (JS), librerías externas como Jquery, entre otros. Asi mismo tendremos que indicar el lenguaje alfabético en la que estará elaborada nuestra pagina web. Finalmente crearemos el cuerpo de nuestra página web. Lo codificamos como <body></body>

20 Primeros pasos en HTML 5 ETIQUETAS CONOCIDAS: <a href=«mi_ruta»></a> <b></b> <br> <button> <center></center> <cite></cite> <dir></dir> <div></div> <font size=«12» family=«arial»></font> <frame></frame> <iframe src=«ruta_pagina» ></iframe>

21 Primeros pasos en HTML 5 ETIQUETAS CONOCIDAS: <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <head></head> <hr> <input type=«tipo_de_caja» > <label> <li></li>

22 Primeros pasos en HTML 5 ETIQUETAS CONOCIDAS: <ul></ul> <meta></meta> <object src=«ruta_de_objeto» ></object> <ol></ol> <p>aca va mi parrafo</p> <script></script> <small></small> <span></span> <strong></strong> <style>aca van mis clases y mis estilos</style> <sub></sub>

23 Primeros pasos en HTML 5 ETIQUETAS CONOCIDAS: <sup></sup> <table></table> <td></td> <tr></tr> <textarea></textarea> <th> <title>titulo de mi Pagina Web<title> <u></u> <i></i> <form method=«metodo_envio_datos» action=«archivo_redireccion» ></form> <link src=«ruta_objeto_web» rel=«tipo_objeto» >

24 Las Nuevas Etiquetas HTML 5 <article> Define un articulo <aside> Define el contenido lateral del contenido de una página <audio> Define contenido con sonido <canvas> Usada para dibujar gráficos, por script, en el aire. (con JavaScript) <details> Especifica en un input una lista pre definida de opciones. <datalist> Especifica en un input una lista pre definida de opciones <embed> Define un contenedor de una aplicación externa (no-html). <figcaption> Define un título para una figura <figure> elemento <figure> Especifica contenido auto-contenido <footer> Define un pie página en un documento o sección

25 Las Nuevas Etiquetas HTML 5 <header> Define un encabezado para un documento o sección. <hgroup> Grupo de encabezado (<h1> a <h6>) elemento. <keygen> Define un campo generador de par de claves (para formularios). <mark> Define texto resaltado o marcado. <nav> Define un link de navegación. <section> Define una sección en un documento. <time> Define una fecha/hora. <video> Define un video o película. <wbr> Define un posible salto de línea. <svg></svg> Scalable Vector Graphics, etiqueta para insertar dibujos y animaciones vectoriales.

26 Etiquetas Básicas en HTML 5

27 Mejoras en los formularios! <input type= search > Para cajas de búsqueda. <input type= number > Para adicionar o restar números mediante botones. <input type= range > Para seleccionar un valor entre dos valores predeterminados. <input type= color > Seleccionar un color. <input type= tel > Números telefónicos. <input type= url > Direcciones web. <input type= > Direcciones de . Lo nuevo es que se auto valida. <input type= date > Para seleccionar un día en un calendario. <input type= month > Para meses. <input type= week > Para semanas. <input type= time > Para fechas. <input type= datetime > Para una fecha exacta, absoluta y tiempo. <input type= datetime-local > Para fechas locales y frecuencia.

28 Mejoras en los formularios! Placeholder: Autofocus Autocomplete Search: <input type= search x-webkit-speech>

29 Mejoras en los formularios! Tel: Url:

30 Mejoras en los formularios! Datetime

31 Mejoras en los formularios! Date: Week: Time: Number => <input type= number name= numero min= 0 max= 12 > Range => <input type= range name= rango min= 0 max= 69 >

32 Mejoras en los formularios! Color:

33 Código Limpio con HTML 5 <div id="news"> <div class="section"> <div class="article"> <div class="header"> <h1> demostración Sopa de Div.</h1> <p> Publicado el 05 de Abril 2012</p> </div> <div class="content"> <p> texto Lorem ipsum, bla, bla, bla. </p> <p> texto Lorem ipsum, bla, bla, bla. </p> <p> texto Lorem ipsum, bla, bla, bla. </p> </div> <div class"footer"> <p>etiqueta: HMTL, código, demo </p> </div> </div> <div class="aside"> <div class="header"> <h1> información tangencial </ h1> </div> <div class="content"> <p> texto Lorem ipsum, bla, bla, bla. </p> <p> texto Lorem ipsum, bla, bla, bla. </p> <p> texto Lorem ipsum, bla, bla, bla. </p> </div> <div class="footer"> <p>etiqueta: HMTL, código, demo </ p> </div> </div> </div> </div> <section> <section> <article> <header> <h1>demostración de Sopa de Div</h1> <p>publicado el 28 de diciembre de 2011</p> </header> <section> <p>lorem ipsum text bla, bla, bla.</p> <p>lorem ipsum text bla, bla, bla.</p> <p>lorem ipsum text bla, bla, bla.</p> </section> <footer> <p>etiqueta: HMTL, code, demo</p> </footer> </article> <aside> <header> <h1>información tangencial</h1> </header> <section> <p>lorem ipsum text bla, bla, bla.</p> <p>lorem ipsum text bla, bla, bla.</p> <p>lorem ipsum text bla, bla, bla.</p> </section> <footer> <p> Etiqueta: HMTL, code, demo </p> </footer> </aside> </section> </section>

34

35 Qué es CSS3? Hoja de estilo en cascada o CSS es el lenguaje usado para definir la presentación de un documento estructurado escrito en HTML, es aquel que nos permitirá definir el diseño de nuestra pagina web en los diferentes navegadores de internet, La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

36 Formas de usar CSS Un estilo en línea (inline). Una hoja de estilo interna. Una hoja de estilo externa.

37 Prefijos para navegadores Si deseas que aparezca en todos los navegadores el prefijo es el que sigue: -webkit- : Chrome y Safari -moz- -o- : Firefox : Opera -ms- : Internet Explorer 9

38 Selectores elemento[atributo^="cadena"], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada. elemento[atributo$=«cadena"], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada. elemento[atributo*="cadena"], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.

39 Selectores Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora se utilizan :: en vez de : delante del nombre de cada pseudoelemento: ::first-line, selecciona la primera línea del texto de un elemento. ::first-letter, selecciona la primera letra del texto de un elemento. ::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado. ::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado. CSS 3 añade además un nuevo pseudo-elemento: ::selection, selecciona el texto que ha seleccionado un usuario con su ratón o teclado.

40 Pseudo-clases elemento:first-child: selecciona el primer elemento hijo. elemento:last-child: selecciona el ultimo elemento hijo. elemento:link: selecciona los enlaces que aun no son navegados. elemento:visited: selecciona los enlaces que ya fueron enlazados. elemento:hover: permite crear un evento al pasar el mouse. elemento:focus: permite activar el elemnto. elemento:active: selecciona el ultimo enlace.

41 Backgrounds.ejemplo_con_fondos{ background-color: #000; background-image: url(a-grad.gif), url(a-bl.gif), url(atr.gif); background-repeat: repeat-x, no-repeat, no-repeat; background-position: 0 0, 100% 0, 100%; }

42 Bordes border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-radius: 5px;

43 Sombras -webkit-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1); -moz-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1); -o-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1); -ms-box-shadow: 1px 2px 3px 2px rgba (102,102,102,1);

44 Descriptor fuente Valor Descripción Font-family Nombre Obligado. Define el nombre de la fuente. scr font-stretch font-style font-weight url Normal Condensed ultra-condensed extra-condensed Semi-condensed Expanded semi-expanded extra-expanded ultra-expanded Normal Italic oblique Normal Bold 100 hasta 900 Obligado. Define la URL donde se encuentra la fuente para ser utilizada. Opcional. Define cómo la fuente debe ser estirada. El valor por defecto es normal. Opcional. Define cómo la fuente debe ser estilizada. El valor por defecto es normal Opcional. Define el peso de la fuente. El valor por defecto es normal

45 Columnas -moz-column-width: 200px; -webkit-column-width: 200px -webkit-column-count: 3; -webkit-column-gap: 15px; -webkit-column-rule: 2px solid red; RGBA rgba(77,65,30,0.7)

46 Animaciones: Transition Con esta regla CSS3 se pueden crear cualquier tipo de animaciones como girar, aumentar el tamaño, color de sombra, cambiar el color de fondo, color de letra, etc. La sintaxis es la siguiente: transition-property:[propiedad CSS]; transition-duration:[duración]; transition-timing-function:[función de Tiempo]; transition-delay:[retardo];

47 Animaciones: Transition Función de tiempo (timing-function) linear : La animación se realiza de manera uniforme. ease : La animación se acelera al principio, se retarda en medio y se acelera nuevamente al final. ease-in : La animación se retarda al inicio y se repone al final. ease-out : La animación se celera al inicio y se retarda al final. ease-in-out: La animación se retarda al inicio, se acelera en medio y se retarda al final.

48 Animaciones: Transform Rotate Para girar el <div> Horizontal la sintaxis es: transform: rotatex(ndeg); Para girar el <div> vertical la sintaxis es: transform: rotatey(ndeg); Skew transform: skew(12deg);

49 Animaciones: Transform Scale Para aplicar propiedad de scale solo horizontal entonces la sintaxis será: transform: scalex(n); De la misma manera para aplicar propiedad de scale solo vertical entonces la sintaxis será: transform: scaley(n);

50 Animaciones: Transform Translate transform: translate(xpx, Ypx); Para desplazar un objeto solo horizontal entonces la sintaxis será: transform: translatex(npx); De la misma manera para desplazar un objeto solo vertical entonces la sintaxis será: transform: translatey(npx);

51 Animaciones: NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } }

52 Animaciones: infinite-spinning { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

53 Animaciones: Keyframe #box { }.box { } -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ animation-name: NAME-YOUR-ANIMATIO; animation-duration: 4s; animation-iteration-count: 10; animation-direction: alternate; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 2s; o

54 Web Responsive Desing MEDIA (atributo query) { /* Reglas CSS que se van a em plear cuando este en la medida indicada*/ } ATRIBUTOS MEDIA QUERIES Min-width: Npx min-height: Npx max-width: Npx min-height: Npx

55 APLICATIVOS ON-LINE