Conoce el ecosistema, capacidades y semántica básica en HTML5

Clase 2 de 43 • Curso de HTML5 y CSS3 Febrero 2015

Resumen

15:00 El ecosistema de HTML5
32:39 Estructura semántica básica de un doc HTML
34:00 Modernizer
37:53 Etiqueta <video>, códecs
42:15 Preguntas y respuestas

Cristiano Boufleur

student•

<video><audio>. youtube funciona con html5.
<canvas><svg> = crear gráficos en la web.
localStorage = html5 puede guardar en disco. Vino para eliminar las cookies.
web sql. base de datos. La recomendación es no utilizar web sql.
Geocalización (con solo wifi se puede geocalizar). Acceder al GPS.
Rendimiento y optimización. Es capaz de hacer multitarea (web workers).
Nuevos motores de navegadores: V8, Nitro, JagerMonkey, PhoneGap, Adobe AIR.
Conectivity (web sockets - node.js). Socket.io

Juan Jose Rojas Rojas

student•

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <!--meta keyword -> ¡NO SIRVE!-->  
    <!--meta tag -> ¡NO SIRVE!-->  
    <!--meta description -> ¡SIRVE! para SEO -->  
    <meta charset="UTF-8">  
    <title>Mi primera webz</title>  
    <style>  
    body {  
        background: black;  
    }  
    </style>  
    <!--modernizr -> Asegura que todas las etiquetas de HTML5 sean compatibles con navegadores viejos.-->  
    <script src="js/libs/modernizr-2.0.6.min.js"></script>  
</head>  
<body>  
    <!--Abandonar el diseño con tablas-->  
    <!--Y no usar float-left_right, y en su lugar usar in-line block-->  
    <header>  
        <!--Usar solo un H1, recomendado (Google) por SEO-->  
        <h1>Mejorando.la web en vivo</h1>  
    </header>  
    <section>          
        <article>              
            <video id="mejorandola" width="640" height="320" controls>  
                <!--Esto hace que el render (renderizae) del video sea por hardware y no por software-->  
                <source src="video.mp4" type="video/mp4; codecs='avc1,mp4a'">  
                <source src="video.mp4" type="video/webm; codecs='vp8,vorbis'">  
                <!-- Contenedor: webm Codec: vp8, vorbis  
                Contenedor: mp4 Codec: h.264 (Apple y Microsoft) -->  
            </video>  
        </article>  
        <aside>(botones sociales)</aside>  
        <article>(CHAT)</article>  
    </section>  
    <footer>  
        Con @freddier y @cvander  
    </footer>  
</body>  
</html>  
<!--  
HTML5  
_____  
- HTML semantics: La estructura de todas las etiquetas HTML.  
- Multimedia: <video></video> -> diseñada para video  
            <audio></audio> -> diseñada para audio  
¡Youtube ya funciona con HTML5!  
Flash hace DRM (difrar el video para no "robarlo"). Y esto no se puede hacer con HTML5  
- 3D Graphics & Effects: <canvas></canvas> -> dibujar vectores y manipular bitmaps, efectos bit x bit, efectos en fotos tipo Photoshop.  
                       <svg></svg> -> gráficos vectoriales  
- Offline Storage: localStorage -> el reeemplazo de las cookies  
                 web SQL ->   
Las cookies son una porquería porque van pegadas a todas las peticiones HTTP.  
6 imagenes -> 100 kB  
1 html -> 100 kB  
1 css -> 100kB  
8 request HTTP  
¡Entonces se SUBEN 800kB! ¡Evitar su uso!  
Lo máximo que deberíamos usarlo es para guardar un ID de sesión.  
- Device Acces: geolocalización -> html5.com/geo  
              eventos touch -> detectar touch en smarpthones  
              acelerometros ->  
- Performance & Integration:    web workers -> multithread.  
                            v8, nitro, jagermonkey -> motores de navegador avanzados  
                            phonegap, adobe air -> crear apps móviles con HTML5  
HTML5 es capaz de hacer multitarea (multithread).  
Javascript es secuencial, y por ende se traba. Con web workers hacemos multithread.  
- Connectivity:    web sockets -> chat, notificaciones real-time  
                node.js -> javascript de lado del servidor  
                socket.io -> ¡y compatible hasta con IE 5.5!  
                json ->   
- CSS3 Style:    css3 -> diseño en general  
-->

Cristiano Boufleur

student•

# Estructura semantica de un archivo html.

<!DOCTYPE html> <html lang="es"> <head> <meta charset="uft-8"/> <title> Titulo de la pagina web </title> </head> <body> <header> <h1> CBS INFORMATICA </h1> </header> <section> <article> {Article} </article> <aside> {Aside} </aside> <article> {Article} </article> </section> <footer> Cristiano Boufleur - @boufleur88 </footer> </body> </html>

Argenis Medina

student•

No van un poco rápido para alguien que nunca ha trabajo con Desarrollo Web ?

Laura Barranco

student•

Te digo la verdad. Yo estudie diseño web durante dos años y ahora estoy tratando de perfeccionarme en algunas cosas con este curso. Tenes toda la razon! para una persona que no ha visto nada de esto, van muy rapido. Dan por sentado ciertos conocimientos que no deberian ya que es un curso desde cero. Yo lo logro entender gracias a mis conociemientos previos. Fijate por algun lugar si hay algo mas basico que esto. Pero si vas entendiendo no te hagas drama. Cualquier cosa puedo darte una mano.

Laura Barranco

student•

El curso de Diseño Web Online, aca en Platzi, es un poco mas basico, fijate, tal vez te sirva. Saludos! =)

Javi Rooster

student•

He dado ruta a un video y he probado el html con chrome y el video no se me ve... sin embargo si le quito las etiquetas <source> el video arranca.

¿A que se debe?

<!DOCTYPE html>  
<html lang="es">  
    <head>  
        <meta charset="utf-8" />  
        <title>Mi web</title>  
        <script src="js/libs/modernizr-2.0.6.min.js"></script>  
    </head>  
     <body>  
         <header>  
            <h1>Mi web</h1>  
        </header>  
         <section>  
            <article>  
                <video id="mejorandola" width="640" height="320" controls>  
                    <source src="video.mp4" type="video/mp4; codecs='avc1,mp4a'" />  
                    <source src="video.webm" type="video/webm; codecs='vp8,vorbis'" />  
                </video>  
            </article>  
            <aside>(botones sociales)</aside>  
            <article>(CHAT)</article>  
         </section>  
         <footer>  
            Con @Rooster  
         </footer>  
    </body>  
</html>

Alexis Antonio Sánchez Solís

student•

Me interesa una respuesta a la pregunta de @javirooster.

J. Alejandro Facio Moreno

student•

Dejo la configuración que me a funcionado a mi, solo Ojo... tienes que generar mas de eso dos formatos de video.

<video class="video" controls poster="img/player.png"> <source src="video/boda.ogv" type="video/ogg" /> <source src="video/boda.webm" type="video/webm; codecs='vp8, vorbis'" /> <source src="video/boda.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" /> <object type="application/x-shockwave-flash" class="video" data="player.swf?file="video/boda.mp4"> <param name="movie" value="player.swf?file={{asset('video/boda.mp4')}}" /> </object> </video> ``` ```

David Antonio Ordóñez Cornejo

student•

Un video insertado en html5 debe tener varias fuentes de video, formatos, codecs, etc. pues los navegadores funcionan de manera diferente en la manera de trabajar con el video.

David Antonio Ordóñez Cornejo

student•

No se recomienda la utilización de hgroup, pues en términos de SEO es ignorada.

David Antonio Ordóñez Cornejo

student•

HTML5 - Nuevas etiquetas
CSS3 - Nuevas capacidades de diseño
JS - Nuevas capacidades de Javascript
SEMANTICA
LOCAL STORAGE
DEVICE ACCESS
CONECTIVITY
MULTIMEDIA

David Antonio Ordóñez Cornejo

student•

Las ventajas de flash sobre html:
SVG
CANVAS

Nicolas Luque

student•

Hola! No entiendo lo de modernizr. Cual hay que descargar?

Camilo Torres Mosquera

student•

Buenas tardes, Excelente vídeo.Tengo Dos consultas

html 5 me permite generar una base de código desde el cual implementar mis proyectos o siempre debo iniciar todo desde cero?
desde este mismo momento puedo ir integrando el preprocesador de css stylus?

Edgardo T

student•

Usar HTML5 es bastante potente para usar dispositivos como gps y demás como menciona Freddie, pero al intentar integrarlo con safari para ios, le pega un tiro en la cabeza y matas los procesos de vibración y otros.

Nacho Sobrevilla Mediavilla

student•

Hola amigos, acabo de adquirir mi membresia con platzi durante un mes y mi gran duda sobre todo este nuevo mundo para mi sigue estando presente.
De todos los cursos disponibles que he visto en la plataforma estaría interesado en varios, cual es el problema, que en cada uno de ellos los conocimientos requeridos para realizar el mismo son variados pero no claros. Creo que necesitaríamos un curso desde cero para todo aquel que quiere introducirse en este mundo desde cero, es decir, crear una página web, lo de mysql, php, etc. Cuales de estas materias son necesarias, cual es la que primero debemos conocer, etc.
Creo que para personas que no tienen ningún conocimiento esto es demasiado lioso, estaría bien que comenzasen un curso en el cual todos los miembros que empezásemos desde cero supiéramos por donde empezar y continuar.
Con esto no digo que los cursos de esta plataforma no sean eficientes y válidos sino que para los que no sabemos nada no acaban de ayudarnos a saber como empezar y por donde continuar.
Espero nuestros amigos de platzi resuelvan este inconveniente, es más se que lo harán, saben porque?
PORQUE PLATZI LOS AMA Y QUIEREN LO MEJOR PARA USTED
Un saludo compañeros.

Antonio de Jesús Santos Medina Say No

student•

La información es buena, pero la clase luce improvisada con los "sí es, no es, es que yo creo, es que no creo, es que sí pero no" de @freddier y @cvander.

Y ok, es valido que el video tenga "detalles" ya que es una clase en vivo, pero ¿por qué no preparar la clase con antelación y acordar el nivel y momento de participación de cada uno?

Y sobre todo, ¡¡¡Respondan las preguntas!!!! Más de uno podemos tener las mismas dudas y nos dejan "solos" (por así decirlo).

Lucas Josè Navarro P

student•

hemos observado las diferentes funcionalidades de HTML 5, son realmente maravillosas y prácticas, como por ejemplo la herramienta canvas que nos permite crear gráficos en la web y que además tiene compatibilidad funcional con photoshop y illustrator, es por ello que surge la necesidad imperante de saber manejar estas herramientas de diseño, ya que HTML 5 nos permite hacerlo.

J. Alejandro Facio Moreno

student•

En ocasiones para el vídeo se debe generar mas de un formato:

<video class="video" controls poster="img/player.png">  
       <source src="video/boda.ogv" type="video/ogg" />  
       <source src="video/boda.webm" type="video/webm; codecs='vp8, vorbis'" />  
       <source src="video/boda.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />      
       <object type="application/x-shockwave-flash" class="video" data="player.swf?file="video/boda.mp4">  
              <param name="movie" value="player.swf?file={{asset('video/boda.mp4')}}" />  
       </object>  
</video>

Este lo tengo en un proyecto, solo lo tardado es la conversión de vídeo en un programa que por ahi te descargas en Internet.

María Laura Marichal

student•

muy buen el video!

Juan Pablo Chica

student•

Porque dices que no sirven para nada los meta-keywords, meta-tags? esto no es bueno pues para el SEO?

Juan Pablo Chica

student•

Los articles no pueden tener etiquetas semanticas dentro de ellos solo etiquetas normales

Fabiel Sánchez

student•

Considero que van muy rápido para las personas que no sabemos al respecto de HTML, qué curso entonces debo tomar antes para poder seguirles al paso que van??

Ándres Vergel

student•

El Curso de programación Basica

Conoce el ecosistema, capacidades y semántica básica en HTML5

Bienvenidos

Fundamentos

Aprender a programar es fácil

Conoce el ecosistema, capacidades y semántica básica en HTML5

¿Qué es un frontend?

Diferencias entre Backend y Frontend

Soporte HTML5 en navegadores viejos y nuevas capacidades de Javascript

HTML, CSS básico y uso de selectores

Estructura y etiquetas en HTML

Introducción a CSS

Selectores en CSS

Atributos del Selector

Selectores de Atributo

Sesión de preguntas y respuestas

Metodología BEM en HTML5 y CSS3

Float vs Display

Unidades de medida

Metodología BEM

Pseudo selectores

Sesión de preguntas y respuestas

CSS y workflow profesional

Progressive Enhancement

Fuentes y tipografías web

Responsive Media Queries

Imagenes Responsive y Retina

Preprocesadores CSS y SASS

Herramientas

Básicos del Diseño Web

Bienvenido al diseño web moderno

¿Qué es HTML, CSS y Javascript?

La importancia de agrupar tus archivos en carpetas

Primeros pasos en la semántica de HTML5

Empezando con CSS3 y selectores

Diseña para todos los navegadores con Normalize

Modula tu código CSS con Suit

CSS orientado a objetos

Repositorio del Proyecto: Portafolio.la

Sesión de Preguntas y Respuestas

Modelos de caja, Pseudoclases y Tipografía

Modelos de caja: Display

Modelos de caja: Position

Tipografía

Maquetación de Portafolio.la en una hora

Pseudoclases y pseudoelementos

Shortcuts de Sublime Text 2

Cinco tips con mobile first

Responsive Design

Icomoon: usar íconos como fuentes

Resumen: Git, position, iconfonts y responsive design

Sesión de Preguntas y Respuestas

Tomar examen