mejorando.la

maestros del webcristalab
Curso de Introducción a HTML5

Curso de Introducción a HTML5

diciembre.14
Archivo de videos

Clase online sobre lo que más nos apasiona: HTML5. Una introducción en la que hablamos de etiquetas semánticas, la etiqueta video y las capacidades de HTML5, CSS3 y Javascript.

Si te la perdiste o querés revivirla mira este episodio de la Clase de Introducción a HTML5. ¡Que la disfrutes!

Enlaces Importantes para complementar este vídeo


Lo que dijeron los alumnos




60 Comentarios

Avatar for bettysilvag@hotmail.com
Beatriz Silva
/ febrero.25

Los felicito chicos, estos videos están super bien, aunque no terminaron el ejercicio por mucho platicar sin embargo aprendí en una hora muchísimo. Gracias por dedicar su tiempo a Mejorando.la y por compartir de manera gratuita sus conocimientos.

Avatar for jsgjavi@gmail.com
jsgjavi
/ enero.31

¡¡ increible!! os hago la ola, joder vaya megatutorial de html5,admiro los videos de 2 horas infinitos haciendo esto por la cara gratuitamente, mil gracias.

Avatar for charly.trabajos@hotmail.com
charly
/ enero.24

Como realizar botones con html5 pero contorneando un objeto (boton) por ejemplo que sea un mapa o region como boton pero que se expanda y se encoja con un evento ... gracias ... lo que pasa es que yo lo he hecho en flash pero como ustedes saben en celulares android no se ven cuando estan en flash bueno en fin espero me apoyen para realizar cualquier boton el cual solo se seleccione el contorno del mapa pero no un cuadrado como lo normalmente es un boton (lo quiero el boton poligonalmente)

Avatar for lebni_perez@hotmail.com
Lebni
/ enero.15

Como se escrive el nombre del del editor que usa fredy

Avatar for rickymuvel@gmail.com
Ricky
/ enero.11

Wow!
Ven eso les pasa por hablar bien un programa que el amigo de abajo no sabe usar.. jeje.

Un saludo.

Avatar for amayamanu27@hotmail.com
Manakias
/ enero.05

Buenas! gracias por el tutorial, he estado aprendiendo mucho! tengo una dudilla:
la cosa es que en esta pagina me funciona bien el video en html5 http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_all, sin embargo hago el ejemplo localmente con las indicaciones del tutorial y no funciona, tienen alguna pista de que pueda ser? Saludos!

Avatar for bumiga@gmail.com
Bumiga
/ enero.03

Excelente video, gracias.

Que opinan de LungoJS?

Avatar for teovillagar@gmail.com
teodoro
/ enero.01

gracias por compartir sus conocimientos, me gusto el tutorial de html5 aclarandolas dudas q tenia.

Avatar for jairo@codigoflow.net
jairo
/ diciembre.31 codigoflow.net

el proximo video menos palabras y a masacrar mas codigo ok.

Avatar for jeffer.ore@gmail.com
jefferson
/ diciembre.29

Una consulta , como hago para simular el html5 en exploradores de internet antiguos?

Avatar for carlumga@gmail.com
Carlos Miguel
/ diciembre.22

Quiero aprender css 3 y html 5...., donde puedo estudiarlos ...

Avatar for anon@yahoo.com.mx
anonimo
/ diciembre.18

Que buen video. Por cierto, ¿este blog ya tiene implementado html5?, jajajaja

Avatar for pupus_5@hotmail.com
Fozzie
/ diciembre.17

Muy bueno lo que hacen...

Por otro lado, si lo que deseamos es aprender a programar o diseñar web, no importa como nos venga la información, si esta en español o esta en Ingles, tenemos que estudiarla, leerla y tal vez traducirla, y claro que me gustaría tener todo en español, pero la cosa no es fácil y a parte debemos aprender ingles, sino esto no funciona, lo gratis no se critica...

Ah y me caen muy los gabachos, aclaro.

Saludos y buena info.

Avatar for jorgevargas0001@gmail.com
Jorge Vargas
/ diciembre.17 www.virtualtec.tk

Buena introducción al HTML5. Mientras más aportes mucho mejor. Felicidades a @freddier y @cvander.
He descargado hoy Sublime txt 2 y es muy bueno. Si desean personalizarlo para HTML5 basta que abran esta herramienta y luego en "File, Open File"... En la carpeta "Packages, HTML" seleccinan el archivo "HTML.sublime-completions". Es un archivo en JSON con un listado de sugerencias. solo deben incorporar las nuevas etiquetas HTML5 en le lugar correspondiente para que quede ordenado y luego lo guardan. Entonces cuando creen un nuevo archivo podrán escribir por ejemplo 'article' (sin las comillas obvio) y luego presionan la tecla "Tab" y automáticamente les crea los tag de apertura y cierre de "article".
Ahora si desean personalizar toda la estructura básica de HTML5 solo deben abrir (en la misma carpeta HTML) el archivo "html.sublime.snippet" y pueden agregar dejarlo de la siguiente manera:
"
<![CDATA[

$1

$0

]]>
html
"

sin las comillas antes y despues de snippet. Lo guardan y listo.

Esto hará que en el nuevo documento HTML5 solo escriban "html" luego presionan la tecla tabulador (Tab) y automáticamente queda la estructura báscia.

Espero que salga completo.
Ahora para los que LLORAN y e INSULTAN porque no está en español podrían buscar en Internet y se hubieran encontrado con SOPORTE EN ESPAÑOL en este lugar: "http://sublimetext.info/docs/es/"

Felicitaciones nuevamente a @cvander y @freddier

Avatar for jorgevargas0001@gmail.com
Jorge Vargas
/ diciembre.17 www.virtualtec.tk

HUY ! no salió completa la estructura del archivo "html.sublime.snippet". Debe ser por las etiquetas.

Avatar for info@maestrosdelweb.com
cvander
/ diciembre.16 www.maestrosdelweb.com/

Estimado Fredy Montoya, Harold, Pedro Lira, Pablo Neruda, Horst Paulmann, Roberto, Eugenia, Macarena, Pedro Rocha, Cecilia, Sergio Lagos, Virgen de Guadalupe, Teresa de Calcuta, Guarello, Jorge Sampaoli, Manuela Palma, David, Cristiano, Karina H., Mariana, Cristian y el resto de nombres que inventaste desde el mismo IP (XX.XX.72.68 - Telefónica Chile) para enviar 25 comentarios que hablan entre si, nos encantaría charlar con vos pero sobra con usar una sola identidad y mejor si te identificas, nos encanta conocer a la persona que nos critica en forma para conversar.

Entre la manada de imbéciles que somos con Freddy sabemos algo de identificar cuando alguien quiere aprovechar el anonimato para molestar and it doesn't matter if we say it in spanish or english. Hubiera preferido que fueras español, hacía más sentido, pero igual kudos por la sorpresa.

Un saludo ;)

Avatar for tresyolie@gmail.com
Tresyolie
/ diciembre.16 www.tresyolie.com

Os agradezco las clases que nos ofrecéis son de gran ayuda. UN AGRADECIMIENTO GRANDDEEEEE!!!

Avatar for ivan@lasdemas.com
Ivan
/ diciembre.16 www.lasdemas.com

uhh yeah! buena @cvander! pasanos el ip completo para quemar su caverna en donde esta escondido ^^

Avatar for daniel@mail.com
Daniel
/ diciembre.16

lo de la universidad es mas bien una excusa...

Avatar for eliott410@live.com
Ottoniel Pérez
/ diciembre.15

Excelente clase... Saludos desde Guatemala.

Avatar for gloton@gmail.com
Gloton
/ diciembre.15

jajaja no podi decir eso que "la e azul con un tumor amarillo", no me pude concentrar en el resto del video. Felicitaciones muy buen video pero el "chiste" GENIAL!!!

Avatar for rafaelalbino100@gmail.com
Rafael Albino
/ diciembre.15

Fantástico, estoy en inicios de aprender html5 y este es el lugar perfecto, Gracias chicos...

Avatar for dentureweb@gmail.com
Raul Castro
/ diciembre.15 www.dentureweb.com.ar

Disculpen, necestaria me envien el nombre del editor que recomiendan en la Charla, para reemplazar el DreamView. Y si pueden enviar todos los links que recomiendan que visitemos - tanto mejor, estamos interesados en incorsuionar en HTML5 y en JAVA particularmente. Saludos - Raul

Avatar for dissaor15@hotmail.com
Eros
/ diciembre.15

Sois unos genios, una pena que me esté perdiendo estas últimas conferencias por estar a finales de cuatrimestre pero cuando acabe, pienso tragarmelos todos del tirón ;)

Muchas gracias por el esfuerzo!

Avatar for cevasit@gmail.com
Cesar
/ diciembre.15

Muy bueno, felicitaciones asi seguiremos cultivando mas oportunidades en nuestras vidas profesionales
Saludos

Avatar for andres.mrad@gmail.com
Andres Mrad
/ diciembre.15

ASP ya va en la version 4 ... y ya esta listo ... just saying.

Avatar for andres.mrad@gmail.com
Andres Mrad
/ diciembre.15

WOW, ¿enviar un comment hace que se refresque la pagina entera? ... ¿jquery?¿javascript?¿ajax?.

Avatar for andres.mrad@gmail.com
Andres Mrad
/ diciembre.15

silverlight no ha muerto, el windows phone trabaja sobre silverlight y todas las aplicaciones son desarrolladas en silverlight, aveces me da la impresion que los que dicen mentiras son otros :/, me gusta el software libre, trabajo en linux, y uso MONO para el desarrollo para tecnologias microsoft, y aunque no me guste windows no ando diciendo cosas que no son.

Avatar for dreamrepublik@gmail.com
dynames
/ diciembre.15

freddie diciendo "LOL" pero corrigiendo a los mexicanos en codeigniter, pffffffffff

Avatar for alasstor@hotmail.com
Alfonso
/ diciembre.15

Excelente introducción, muchas gracias

Avatar for jimnoname@gmail.com
jairo mejia
/ diciembre.15

me encanto el subline editor descarge la version beta 2 y se convirtio en mi nuevo editor inmediatamente
gracias por la recomendacion

Avatar for harold_diazgranados@hotmail.com
Harold
/ diciembre.15 www.abrilsoftonline.com

Hola, Los felicito por su valioso aporte, he aprendido mucho con sus concejos y espero poder llegar a ser tan bueno como ustedes. Gracias totales

Avatar for ricardo.burgosg@gmail.com
R. Burgos
/ diciembre.15

Para Horst Paulmann:
Tienes razón que deberían desarrollar más herramientas en español, pero mientras esperas sentado (porque demorará mucho q nos hagan caso) mejor anda aprendiendo Inglés y así no te atrasas con la tecnología que avanza a toda velocidad sin importarle los idiomas :(
Por favor no me digan conformista, sólo soy UN inteligente emocional REALISTA.
Y si lo desean pregunten las opiniones de los expertos: @freddier y @cvander

Saludos

Avatar for freddier@gmail.com
freddier
/ diciembre.15 freddyvega.com/

Oh wow...

Yo no le dije "una manada de imbéciles" a los que usan Dreamweaver, sino a la gente que dice que HTML5 no va a estar listo y lo usarán sólo cuando esté listo. ¿Vieron el video o sólo se guiaron por los comentarios?

No está mal que se indignen, pero sí por las razones equivocadas. Está en el video todo grabado. Si me indican en qué segundo exacto dicen que digo lo que digo, seguro lo corrijo.

Avatar for c.noblecilla@gmail.com
NeoCesar
/ diciembre.15

Creo de deberían calmarse un poco y prestar más atención al vídeo, freddier tilda de imbéciles únicamente a aquellas personas que se entercan en no progresar y en estancarse en cosas que mañana más tarde caerán en obsoletas, y estoy seguro que tal termino lo usa únicamente para espabilaros y q de una vez se den cuenta q deben seguir aprendiendo, experimentando con nuevas tecnologías para poder seguir mejorando.la web.

Avatar for Futurama@futurama.com
Futurama
/ diciembre.15

Pues cada cual puede usar la herramienta que mejor le venga, pero los que dicen que sólo van a usar html5 cuando esté listo les tocará esperar hasta el 2022 que es cuando se espera que esté listo, así que yo si les diría "Manada de Imbéciles"

Avatar for victor@victorhtorres.com
Victor
/ diciembre.15

Vi el video completo y me cae de lujo porque quiero aprender hacer bien la web. Sobre el insulto de @freddier fue para las personas que buscan una excusa para NO ESTUDIAR MAS sobre lo que dicen que; "HTML5 no esta terminado". No fue por la gente que usa Dream... A ver si ponen mas atención a las cosas, patos! :(

Avatar for angelbotto@gmail.com
Angel Celis Botto
/ diciembre.15 angelbotto.net

Quizas @freddier se dio a entender mal nunca lo eh escuchado diciendo idiotas o cosas similares mientras trasmite mejorando.la O.o, pero si bien es cierto la curva de aprendizaje con dreamweaver es casi o igual a nada xD

Tienen que verlo más como una critica constructiva y no como un insulto.. Si quieren aprender de lo lindo basta con un ide que tenga abrir y guardar ... xD el resto lo hacen ustedes xDD

::NOTA
Ahora falta que los que usan flash o joomla se vengan a quejar xD

Avatar for ivan@lasdemas.com
Ivan
/ diciembre.15 www.lasdemas.com

Apoyo a @freddier el sublime text esta de maravillas ^^ Gente de mierda! evolucionen y acepten lo bueno que comparte Freddie! sino en el youtube hay muchos cursos de Dreamweaver tablas básico 1 al 100

Avatar for rafapoveda89@gmail.com
Rafael
/ diciembre.15

Me parece que están armando una tormenta en un vaso de agua. Paso lo mismo con la gente PHP cuando hablan maravillas de Python y La verdad no creo que sea para tanto. Lo que mas me gusta de mejorandolaweb es la forma tan despreocupada con la que hablan de los temas. Ademas tienen derecho a decir lo que opinan de cada programa y si a alguien no le parece la opinión de ellos pues no pasa nada. Ademas en el video solo ataca a las personas que no ven en html5 el presente de la web y tampoco me parece para tanto.
Por otro lado no estoy de acuerdo con los comentarios pro-español. Si todos pensaran así, no existirían programadores que hablen español porque la sintaxis de todos los lenguajes es en ingles.
Debemos tener la mente un poco mas abierta y no molestarnos tanto por todo. Y si ven mejorandolaweb es porque algo les gusta de lo que ellos hacen. ¿o no es asi?

Avatar for davidrodriguez24@gmail.com
david ermigoo
/ diciembre.15

jajajajaja conchale @freddier yo te apoyo mi pana mire hermano excelente programa esa introduccion de html5 pero bueno te recomiendo unas cositas como veo hay mucha gente quejandose de sublimetext bueno que instalen "GVIM para windows para mac y linux" tiene muchisimos plugins es software libre totalmente y creo que tiene muchas cosas mas q sublime sino "GEANY es otro editor tipo IDE" es software libre es facilito no es para nada pesado y para los diseñadores que creen que "DREAMWEAVER" es lo mejor pues no hay uno tambien software libre que se llama amaya y es de la W3C....

Avatar for daniel.b2896@gmail.com
Dengue
/ diciembre.15 -

Horst Paulmann se presenta a la candidatura para ser el "Mr. Pelotudo 2011", ojalá ganes.

Avatar for ivan@lasdemas.com
Ivan
/ diciembre.15 www.lasdemas.com

jaja los joomleros van a salir de sus cuevas a arañarse!

Avatar for estilopwg@gmail.com
Jorge
/ diciembre.15

eingg¿ hay gente que apoya dreamweaver :O :O :O :S ¡matadmee por Diosss! pero a verr ¿que enfermo usa dreamweaver? claramente dreamweaver es penoso comparado con otros editores de texto, creo que el sublime text es el mejor que he visto hasta el momento y eso que yo usé notepad++ y komodo edit que tmb es algo mas parecido a dreamweaver pero mejor.

Avatar for angelbotto@gmail.com
Angel Celis Botto
/ diciembre.15 angelbotto.net

Ivan creo que tu comentario sobra, el ide es lo de menos evoluciona tu entonces y usa vi...hay que respetar un poco todos pasamos por algo como dreamweaver en mi caso fue front-page (da pena de pana pero lo use xD )

y reitero el ide es lo de menos.. no hay ni ides malos ni buenos ni lenguajes malos ni buenos.. hay buenos o malos desarrolladores ..

Avatar for maxi_stahl83@hotmail.com
Max
/ diciembre.15

che loco, a todos los resentidos por el idioma les digo esto. html5 es un lenguaje hecho por unos tipos que hablan ingles (incluida su semantica y sintaxis), el W3C (el ente que regula los estandares de codigo que se manejan en la web), youtube, facebook, twitter y ciento de miles de sitios mas... estan hecho en ingles!!!!!... al que no le guste el ingles, que cambie de profesión.

Dicho esto, yo les cuento que cuando empece con html hacia todo el codigo en DW. Luego unos colegas me recomendaron Notepad ++ para Windows y Coda para Mac. Al poco tiempo me di cuenta, que conociendo bien el lenguaje con el que trabajas, podes hacer con el block de notas de windows, o el TextEdit de Mac... cada uno use el que quiera.

No le peguen a gente que simplemente intenta ayudarlos a aprender y estan recomendando desde su experiencia formas de trabajo o herramientas que simplemente les van a ayudar a mejorar como profesionales.

Avatar for icnovaro@gmail.com
Ivan Casanova
/ diciembre.15

Eso es cierto, no hay momento en el que @freddier diga eso, por otro lado yo sigo usando eclipse, pues tengo soporte desde Phyton (Django), PHP hasta CSS3 Y HTML5.

Avatar for pableudo@gmail.com
Cass
/ diciembre.15

Muchos dijeron: "Sublime text 2 no tiene soporte en español y esto es lo peor"
jaja
no traten de buscar argumentos donde no los hay.. esta repleto de bugs? no lo pongo en duda, es un editor muy reciente.

Si hubieran visto el video detenidamente se darian cuenta de que en ningun momento freddie dice lo que reprochais en los comentarios.
El recomendo un editor que esta bastante bueno (ohh esta en ingles.. esto es lo peor :( jajajaja perdon.. me izo gracia :P)
Si lo quieren usar adelante, si quieren seguir con sus editores adelante!

les sento mal (porq no vieron detenidamente) vale de acuerdo.. pero no se ponga a soltar falacias.

en mi opinion donde este un editor como Sublime o textmate.. que se quite lo demas..
es una opinion.. al igual que la que dan ustedes.

Venga un saludo!

Avatar for caa@hotmail.com
Carlos
/ diciembre.15

Muy buenas sus criticas @freddier, pero seria EXCELENTE donde se dedicara a enseñar cosas interesantes y llevarlas a fondo, no explicar solamente lo básico, y hablar mal de las demás tecnologías con las que no esta trabajando, sino solamente mencionar sus diferencias y desventajas, se que lo que esta comercializando es un producto, que son sus talleres, pero seria genial que brindaran un conocimiento completo, que hicieran código online, no simples ejercicios.

Avatar for Fabicastr89@gmail.com
Dexterfcp
/ diciembre.15

Sobre el vídeo muy bien y gracias por la ayuda con la etiqueta video que me presentó problemas ya se porque. En cuanto a los insultos no escuche por ningún lado que @freddier insultara a alguien que no fuera a los que sólo quieren usar html5 cuando este listo. Raro lo que pasa por un mal entendido ... Nos vemos en la tarde para js

Avatar for josemanuel-mb@hotmail.com
José
/ diciembre.15

No se porque se enojan tanto con el tema de los editores de texto y el idioma en que están, el Inglés es fundamental en la Tecnología , ya sea en el área de Desarrollo Web, Hardware, Software, Redes, etc.Y los que ustedes escriben cuando hacen desarrollo web lo que escriben está en inglés también por si no se dieron cuenta, o los Tags están en español? Y no es que no les importemos a los demás países y por eso no lo hacen en español, es mas Silicon Valley está apostando mucho a proyectos latinoamericanos , un gran ejemplo de ello OpenEnglish.com, pero si quieren triunfar con una empresa o producto tienen que hacerlo Global y para eso tiene que estar en inglés! Y con respecto a DreamWeaver, no tengo mucho, yo lo usaba antes, y no me gusto porque ponía mucho código basura y consume muchos recursos de la máquina.

Avatar for alejandrosanabria7@gmail.com
Alejandro
/ diciembre.15

No puedo creer todo lo que leí...En este momento no esta mal decirle a la gente que escribió diciendo que freddier los ofendió MANADA DE IMBÉCILES si ponen atención el se refiere y lo acaba de explicar que es a la gente que dice que html5 no esta listo entonces que no se puede utilizar a eso se refería. Y por el dreamwaver peleen los que lo tengan original el cual creo que es el 1%

Avatar for gloton@gmail.com
gloton
/ diciembre.15

yo he visto varios video de ustedes y me entretengo con freddier, pero es verdad que aunque en el video no lo dices directamente, pero igualmente caes en ningunear a la gente, tambien a proyectos grandes y por ende a la gente que esta detras de ellos, me refiero a dreamweaver, php, joomla, tu lo digiste, es popular criticar a lo popular, asi que no vendas tanta pomada jajaj. No te vallas por el lado oscuro, nadie puede absorver todo el conociemiento de internet, tu tampoco, no te creas que tienes todas las respuestas. Bueno.., hasta en las familias hay peleas o discuciones, mmm ahora ya van a ser las 18 me pondre listo para ver su programa marketeando.la jajaj no es broma.

Avatar for luisto01@gmail.com
Luis Dueñas
/ diciembre.15 www.luisdueñas.com

No estoy a favor ni en contra de nadie, pero por favor por que defender a Dreamweaver.. habiendo tantos y tantos IDE's, no uso Dreamwever porque no pagaría por un software habiendo mejores y gratuitos (Aptana, Netbeans, Eclipse, Vi, Nano, Note++), porque no esta en español? hombre que comentario por Dios, aprende ingles hombre por lo menos a leerlo.

Lo que entendí acerca del comentario de @fredier es que NO debes de estar amarrado a una marca "Adobe" si existen mejores opciones, en fin es cuestión de cada quien, si quieres quedarte con lo mismo, hazlo y si quieres experimentar y seguir aprendiendo cosas nuevas, como svn, git manejándolo desde un IDE pues también bienvenido.

saludos,

Avatar for porquerazontevoyadarmimail@gmail.com
Pedro Luis
/ diciembre.15

He visto el video completo. Creo que es bastante mediocre y superficial.

Por favor, cada cuál las herramientas que quiere.

Si alguien se gana la vida usando Frontpage, y es productivo usando esa herramienta, no tienes por qué ofenderlo.

Van de maestros, pero le falta modestia. No son maestros de nada.

No he visto a ninguno de los gurús de HTML5, ni a Douglas Crackford, ni Steve Souders, ni a John Resig con esa arrogancia. Ustedes a su lado no son más que unos aprendíces para venir a creerse los maestros de internet. Por favor, modestia.

Tomen ejemplo de ellos, que al final lo que ustedes hacen es copiar de otros, no es nada que hayan creado ustedes originalmente. Cuando estén copiando de estos grandes, también copien su modestia y humildad.

Gracias.

Avatar for xogost@gmail.com
Juan Camilo Martinez
/ diciembre.15 bogotaonrails.wordpress.com

Sublime Text 2, es mi editor favorito desde que lo probé por recomendación de @yaraher en la primera mejorando la conferencia.

Excelente programa.

Avatar for nelsongiraldo88@gmail.com
Nelson88
/ diciembre.15

Hola, primera vez que los veo, los felicito y sigan adelante con el programa.

Saludos desde Medellín-Colombia.

Avatar for Dani.Shorel@gmail.com
Dani Shorel
/ diciembre.15

Realmente para defender nuestro idioma no es necesario atacar a otros idiomas.

Eso es una falta de inmadurez, y cuando es colectiva, genera también vergüenza colectiva.

Lo que si es necesario es crear estándares y tener un lenguaje técnico común.

No funciona que unos digan un término y otros digan términos totalmente diferentes para referirse a un mismo concepto.

Aún me parece terrible que se diga mouse en lugar de ratón. O cookies en lugar de huellas. Back-end puede traducirse (para la mayoría de acepciones) como 'tecnología usada en la implementación del servicio'.

Y no sean hipócritas. Si dijeron mouse alguna vez no se rasguen hoy las vestiduras porque alguien dice HTML5 en el idioma en el que fue inventada esta expresión.

No solo el español merece respeto. Todos los idiomas deben hablarse correctamente, y el inglés no es la excepción.