Comience con HTML5

Esta guía está disponible para descargar como PDF gratuito. Descargue Comenzar con HTML5 ahora. Siéntase libre de copiar y compartir esto con sus amigos y familiares.

instagram viewer

y

las etiquetas no son demasiado desalentadoras, y no tienes miedo de ensuciarte las manos con algún código fuente.

En segundo lugar, esta guía asume que sabes qué es CSS y cómo funciona. No esperamos que sea un genio del diseño, ni se espera que conozca toda la especificación CSS de la mano. Sin embargo, debe poder aplicar el estilo a un elemento en una página web, poder vincular a un archivo CSS y conocer la diferencia entre un ID y una clase y cómo aplicar el estilo a cada uno de ellos.

Si te rascas la cabeza con lo anterior, no te preocupes. Una de las mejores cosas sobre HTML y CSS es que es muy, muy fácil. De hecho, MakeUseOf tiene una increíble guía XHTML Aprenda a hablar "Internet": su guía para xHTMLBienvenido al mundo de XHTML: Lenguaje de marcado de hipertexto extensible, un lenguaje de marcado que permite a cualquier persona construir páginas web con muchas funciones diferentes. Es el idioma principal de Internet. Lee mas eso te llevará a la velocidad realmente rápido.

Después de leer esa guía, también puede consultar los siguientes artículos:

• 8 sitios web con ejemplos de codificación de calidad 8 mejores sitios web para ejemplos de codificación HTML de calidadHay algunos sitios web increíbles que ofrecen ejemplos y tutoriales de codificación HTML bien diseñados y útiles. Aquí hay ocho de nuestros favoritos. Lee mas
• 6 blogs para seguir a los grandes diseñadores web 6 mejores blogs de diseño web a seguir Lee mas

También necesitará un editor de texto y un navegador modernos. Cualquier versión de Internet Explorer que sea anterior a IE 9 y algunas versiones anteriores de Safari, Chrome y Firefox tendrá dificultades con muchas características que son parte de HTML5 y puede evitar que sigas esto guía.

Como resultado, le recomendamos que descargue un navegador moderno. Recomiendo Google Chrome, y lo usaré en cada ejemplo.

Más allá de eso, todo lo que necesitará es la voluntad de aprender. Ah, y un editor de texto.

1.2 Editores de texto para desarrollo web

Su editor de texto es lo que va a usar para escribir su código. Quizás se pregunte qué es un editor de texto.

Bueno, en primer lugar no es un procesador de textos. Programas como Microsoft Word y las páginas de Apple son totalmente inadecuados para el desarrollo web. Esto se debe a que adjuntan información adicional a sus archivos HTML, CSS y Javascript, lo que dificulta la lectura de su navegador web.

Un editor de texto dispara caracteres en un archivo de texto, y no mucho más. Esto le permite crear archivos que no tienen formato adicional, y se pueden guardar con cualquier extensión que elija.

Su computadora ya viene con una. Si está utilizando una PC con Windows, entonces el Bloc de notas es el editor de texto que probablemente haya instalado.

En una Mac, la situación es ligeramente diferente. OS X viene con cuatro editores de texto diferentes. Estos se llaman Vim, Emacs, Pico y Nano. Sin embargo, a diferencia del Bloc de notas, todos funcionan en el terminal.

Esto es un poco intimidante para las personas que son nuevas en el desarrollo web y no deben ser utilizadas por personas que son nuevas en el desarrollo de software. No los usaremos en esta guía. Sin embargo, cuando tenga un poco más de confianza con el software y el desarrollo web, definitivamente vale la pena echar un vistazo a Empuje Las 7 razones principales para darle una oportunidad al editor de texto VimDurante años, probé un editor de texto tras otro. Lo que sea, lo probé. Utilicé a todos y cada uno de estos editores durante más de dos meses como mi principal editor diario. De alguna manera, yo ... Lee mas y Emacs Ambos son editores de texto potentes y, cuando se dominan, pueden ahorrarle mucho tiempo.

En Linux, el editor de texto predeterminado varía entre distribuciones. En Ubuntu, es probable Gedit gedit: uno de los editores de texto sin formato con más funciones [Linux y Windows]Cuando piensa en editores de texto plano, lo primero que puede aparecer en su cabeza es la aplicación Bloc de notas de Windows. Hace exactamente lo que dice su descripción de trabajo: características simples para un texto plano ... Lee mas , que es un editor de texto bastante agradable que no es muy diferente del Bloc de notas.

Sin embargo, en este curso escribiremos nuestro código usando tres herramientas diferentes.

El primero es Sublime Text 2 Pruebe Sublime Text 2 para sus necesidades de edición de código multiplataformaSublime Text 2 es un editor de código multiplataforma del que recientemente escuché hablar, y debo decir que estoy realmente impresionado a pesar de la etiqueta beta. Puede descargar la aplicación completa sin pagar un centavo ... Lee mas . Sinceramente, no puedo recomendar esto lo suficiente. Viene con todas las cosas que hacen la vida más fácil para un desarrollador principiante. En primer lugar, hará que su código sea más fácil de leer coloreando ciertas partes. En segundo lugar, le permite cambiar fácilmente entre archivos y administrar proyectos completos de archivos. Esto es ideal para cambiar entre archivos y editar varios bits de código sobre la marcha.

El tercero es el Consola Javascript Resolver problemas del sitio web con las herramientas de desarrollador de Chrome o FirebugSi ha seguido mis tutoriales de jQuery hasta ahora, es posible que ya se haya encontrado con algunos problemas de código y no sepa cómo solucionarlos. Cuando se enfrenta a un bit de código no funcional, es muy ... Lee mas eso está integrado en Google Chrome. Esto nos permite escribir Javascript y ver que se ejecuta de inmediato y se utilizará para explicar los conceptos básicos de programación.

El segundo es un sitio web llamado Codepen.io. Este notable sitio web le permitirá codificar HTML, CSS y Javascript en el navegador y es de uso gratuito. También le permitirá ver sus cambios al instante.

2. Marcado Semántico

En este capítulo, aprenderá sobre el marcado semántico y cómo organizar su código en función de su contenido.

Hasta hace poco, el código HTML generalmente se organizaba con

Esto funcionó, pero había margen de mejora. El problema con

El marcado semántico es una nueva característica en HTML5. Trae nuevas etiquetas, que funcionan de la misma manera que una etiqueta "div", pero son para etiquetar partes comunes de una página.

¿Asique, como trabajan? Considere el siguiente código.

En este fragmento de código, tenemos una barra de navegación, un título y una lista. Esto no es muy diferente a la mayoría de los sitios web en los que es probable que vaya, cuando lo piensa.

Echemos un vistazo a un artículo sobre MakeUseOf. Notarás que hay una parte de la página que está completamente reservada para navegar a otros artículos. También notará que hay otra parte de la página que contiene las palabras que constituyen un artículo. En la parte superior de la página, verá un encabezado que contiene el logotipo de MakeUseOf y algunos otros enlaces.

Cuando lo piensas, muchos sitios web siguen estas convenciones. La mayoría de los sitios web tienen una parte reservada para la navegación. Suelen tener un cuerpo de contenido. Es muy probable que tengan un encabezado.

Las etiquetas semánticas son etiquetas que le permiten definir partes de un sitio web que se encuentran comúnmente en la mayoría de los sitios web. No agregan nada a la página, pero le permiten agrupar etiquetas en función de su contenido y aplicar estilos a esos grupos.

Entonces, ¿recuerdas ese código que teníamos antes? Veámoslo con un marcado semántico agregado.

Como puede ver, el código es mucho más fácil de leer. Sabes qué partes son cuáles y no hay ambigüedad. Esto es importante, porque facilita la escritura de un código bueno y limpio. Si alguna vez decide convertirse en un diseñador web profesional, esto se convierte en primordial: nunca se sabe quién leerá el trabajo que produce.

Entonces, veamos algunas etiquetas de marcado semántico más.

2.1 Sección

La sección es una etiqueta realmente útil. Se utiliza para obtener grandes cantidades de información y contenido que están marcados con un título o título. Piense en esto como un capítulo en un libro. Un capítulo tiene un título, y también puede contener imágenes, diagramas, gráficos y palabras. Se usaría una etiqueta de sección para contener todo eso.

2.2 Artículo

La etiqueta del artículo se usa para lo que parece; Conteniendo contenido como una publicación de blog o una noticia. Este contenido debería poder separarse del resto del blog y seguir teniendo un sentido coherente.

2.3 Aparte

Esta etiqueta está reservada para contenido relacionado con, pero no es una parte integral de la página web. Esto podría ser un montón de hechos relacionados con una noticia, o la biografía de un usuario en un blog.

2.4 Encabezado

Muchas páginas web tienen una barra en la parte superior de la página que contiene un logotipo, cierta información relacionada con el sitio y quizás algunos enlaces. En el marcado semántico, usaría una etiqueta de encabezado para contener todo esto.

2.5 Nav

Este elemento está reservado para la parte de navegación de su sitio web. Esto contendría enlaces a otros sitios web u otras páginas del sitio web. Dentro del contexto de MakeUseOf, esta podría ser la parte de la página que está debajo del encabezado.

2.6 Pie de página

Esta etiqueta está reservada para la parte inferior de la página. Aquí, puede poner algunos detalles de contacto, información de copyright, un mapa o algunos enlaces a su página "acerca de mí".

2.7 Ponte a prueba

• ¿Qué es el marcado semántico y para qué se utiliza?
• Estoy creando una página web y quiero usar una etiqueta semántica para contener una biografía sobre mí. ¿Cuál uso?

3. Formas

Si alguna vez ha realizado un poco de diseño web, probablemente sepa cómo crear un formulario simple en HTML. Si es realmente inteligente, probablemente sepa cómo tomar la información que obtiene de su formulario y cómo hacer algo con ella, por ejemplo, ponerla en una base de datos.

Las formas son masivamente importantes. Son la base de la mayoría de las cosas que hacemos en Internet. Cada vez que crea una actualización de estado en su red social favorita, compra algo de Amazon o envía un correo electrónico, probablemente haya utilizado un formulario HTML.

Lo que probablemente no sabía es que la forma en que creamos formularios ha cambiado radicalmente en HTML5. También es significativamente mejor. En este capítulo, veremos algunas de las cosas geniales que puede hacer ahora, solo con un marcado antiguo.

Entonces, ¿qué tiene de bueno la nueva forma en que podemos escribir formularios en HTML5? En primer lugar, puede asegurarse de que algunos campos se deben completar para enviar, simplemente cambiando el marcado del formulario en sí. Además, ya no tiene que escribir montañas de JavaScript o PHP para hacer esto. Es trivialmente fácil.

En segundo lugar, puede asegurarse de que sus usuarios solo puedan enviar ciertos tipos de información a su formulario. Entonces, ¿supongamos que tiene un sitio web para su lista de correo y solo desea que las personas puedan enviar direcciones de correo electrónico reales? Puedes hacer eso, simplemente usando HTML5. Realmente es increíblemente poderoso.

En tercer lugar, puede hacer que sus formularios se vean mejor si le asigna un marcador de posición a ciertos campos. Esto los hará significativamente más intuitivos, ya que puede mostrar a sus usuarios un ejemplo de lo que espera de un formulario.

3.1 Mejorando un formulario

Entonces, veamos un formulario y veamos cómo podemos mejorarlo.

Este formulario es bastante básico. Toma un nombre, un correo electrónico y un color favorito, y luego le permite al usuario enviarlo. No contiene ninguna validación de la información que se coloca en él, y no hay nada que impida a los usuarios enviar este formulario con algunos campos vacíos. Cambiemos todo eso.

Entonces, lo primero que vamos a querer hacer es asegurarnos de que el campo de correo electrónico solo reciba un correo electrónico. Esto solía ser una tarea bastante difícil, ya que tendrías que crear todo tipo de código argeno Regex. Bueno, ya no más. Solo tiene que cambiar el tipo de entrada de "texto" a "correo electrónico". Cuando intente enviar ese formulario con galimatías, se quejará e insistirá en que envíe un correo electrónico.

3.2 Tipos de entrada y patrones

Hay otros tipos de entrada, que puede requerir. ¡Estos incluyen números de teléfono, direcciones web, formularios de búsqueda e incluso selectores de color! Como HTML5 está en constante evolución, es lógico pensar que pronto podremos especificar más tipos de entrada en un futuro próximo.

Además, para cosas como números de teléfono que varían según la localidad, puede especificar patrones para las entradas. Estos se crean usando algo llamado "Expresiones regulares" y son bastante complicados, pero inmensamente poderosos.

También vamos a querer proporcionar un ejemplo de un correo electrónico en nuestro campo, para que el usuario no tenga ambigüedad de lo que tiene que enviar. Eso es realmente fácil de hacer. Simplemente cree un nuevo atributo de "marcador de posición" con una dirección de correo electrónico de ejemplo.

Vamos a asegurarnos de que nuestro campo "Color favorito" sea obligatorio. En el último paréntesis angular (>) en la etiqueta de entrada de correo electrónico, simplemente escriba "requerido". Eso es. Ahora, cuando intente enviar su formulario sin un valor, generará un mensaje de error.

Lo realmente increíble de estos mensajes de error es que el usuario no tiene que escribirlos ni escribir ningún código para crearlos. Simplemente cambia un campo para que sea obligatorio, y simplemente funciona. Dicho esto, es posible personalizarlos, si así lo desea.

Esa fue una introducción increíblemente breve al poder de los formularios en HTML5. Si desea leer más, le recomiendo que visite estos enlaces.

Otras lecturas:

• Trucos de CSS: vamos a escribir un marcado semántico
• HTML5 Doctor - Hablemos de semántica

3.3 Ponte a prueba

Es su cumpleaños la próxima semana, y desea crear un formulario de registro para saber cuánto pastel necesita crear. Abra su editor de texto y cree un formulario con los siguientes campos.

• Nombre
• Dirección de correo electrónico
• Número de teléfono
• Alergias

Asegúrese de que los campos de nombre, correo electrónico y número de teléfono sean obligatorios, y que los campos de Correo electrónico y Número de teléfono estén configurados con los tipos de entrada "correo electrónico" y "tel". Cree un marcador de posición para el campo de alergia con el valor "polen, huevos, quiche".

Juega con el formulario. Intente enviar los campos obligatorios como vacíos e intente insertar caracteres no numéricos en el campo del número de teléfono. En el campo de correo electrónico, inserte algo que no sea una dirección de correo electrónico. ¿Lo que pasa?

4. Medios de comunicación

Solía ​​haber un momento en que la única forma en que podía insertar algún video o audio en una página web era usando algo como Flash, Shockwave o SilverLight.

Esto no fue ideal. En primer lugar, ninguno de estos marcos funcionó tan bien en dispositivos móviles. Simplemente no estaban equipados para el mundo moderno de los teléfonos inteligentes y las tabletas.

Además, eran formatos propietarios. Como resultado, los usuarios de Linux y OS X podrían obtener una experiencia de segundo nivel o incluso se les podría impedir consumir servicios de medios, ya que no estaba disponible para su plataforma.

Finalmente, tenían una propensión a ser lentos. Si estuviera en una computadora con poca potencia o más antigua, no tendría una buena experiencia viendo videos usando estos marcos. Flash fue particularmente notorio por esto.

4.1 Cómo HTML5 hace que el video y el audio sean impresionantes

HTML5 cambió esto al permitir a los desarrolladores web incluir video y audio en sus páginas web con solo unas pocas líneas de código. Funciona de maravilla en dispositivos móviles y funciona en todos los navegadores web modernos.

Como resultado, grandes empresas como YouTube, Vimeo y Netflix están aprovechando la revolución HTML5. ¿Por qué no te unes a ellos?

4.2 Todo sobre los códecs

En este capítulo, aprenderá cómo usar el poder de HTML5 para incluir audio y video en sus páginas web.

En primer lugar, voy a tener que comenzar con una advertencia. Si bien puede usar video HTML5 en cada navegador web moderno, no funciona de la misma manera en cada navegador web. Los códecs utilizados por cada navegador varían. En Internet Explorer, estás limitado a usar video MP4. Chrome es un poco más generoso y te permite usar videos de WebM, MP4 y Ogg Theora. Opera es un poco más restrictivo y solo te permite usar videos de Theora y WebM.

Como resultado, debe ser un poco inteligente con la forma en que inserta el video en su página web. Entonces, veamos cómo funciona.

4.3 Comenzando con video

Para empezar, tendrá que crear algunas aperturas y cierres

Bueno, cuando está esperando que se cargue su video, la persona que visita su sitio puede ver una imagen relacionada con el video. Para hacerlo, solo asigne a sus etiquetas de video un atributo de "póster" con un valor de la imagen a la que desea vincular. Debe tener un aspecto como este.

Lo siguiente que vamos a querer hacer es crear una reserva. ¿Qué significa esto? Entonces, supongamos que está utilizando uno de los navegadores más antiguos y menos increíbles que existen. Muchos de estos navegadores antiguos no admiten video HTML5 y, por lo tanto, no pueden reproducir video HTML5. Querrá dejarles un mensaje informándoles que van a querer actualizar su navegador y que hasta que lo hagan, no podrán ver su video.

Para hacer eso, simplemente escriba su mensaje dentro de sus etiquetas de video. No se requiere nada más. Una vez que hayas hecho eso, te quedará un código que se ve así.

Ahora, agreguemos un video. Voy a probar esto en Google Chrome, así que voy a vincular a una película MP4. Para hacer eso, creo una etiqueta de Fuente y le doy un atributo de src que tiene un valor del video que quiero incluir.

Mi página ahora está lista para abrirse en mi navegador web. Me he vinculado a una película que es muy, muy grande y, como resultado, cuando se abre, solo se puede ver el póster.

4.4 Agregar audio

El audio se puede insertar en su página web de una manera que recuerda mucho cómo insertamos el video en nuestra página.

En primer lugar, uno crea algunas etiquetas de audio. Estas etiquetas de audio contienen un atributo de "controles". Esto le da al usuario que visita la página la capacidad de pausar, reproducir, rebobinar y adelantar rápidamente el audio que se está reproduciendo.

Luego, incluye una etiqueta de origen en el archivo MP3 al que deseas vincular. Realmente no tiene que preocuparse tanto cuando se trata de compatibilidad de códecs. Los navegadores web más recientes tienen la capacidad de reproducir audio MP3, aunque es una buena práctica incluir también un archivo ".ogg" y un archivo ".wav", por si acaso.

Finalmente, puede crear una reserva para navegadores antiguos. Esto se hace de la misma manera en que creó el respaldo para su video.

El resultado final se parece un poco a esto.

Cuando abres esto en tu navegador web, debería verse un poco así.

4.5 Ponte a prueba

• ¿Cuál es el propósito de tener un póster en sus etiquetas de video?
• ¿Qué códecs no puedes usar en Internet Explorer?
• Si quisiera pausar algo de audio, ¿qué atributo agregaría a su etiqueta de "audio"?

Otras lecturas:

• Video de HTML5 Rocks

5. Transformaciones y animaciones CSS3

CSS se utilizó tradicionalmente para manejar el maquetación y diseño de una página web 5 pasos de bebé para aprender CSS y convertirse en un hechicero CSS increíbleCSS es el cambio más importante que las páginas web han visto en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Lee mas . Esto sigue siendo cierto, pero en su última iteración ha ganado la capacidad de manejar animaciones y transformaciones de elementos e imágenes.

La gente ha hecho cosas asombrosas con CSS3, desde crear un reloj digital hasta escribir un juego completo de Pong. Alguien incluso lo usó para recrear los créditos introductorios a Mad Men. Es una tecnología realmente poderosa y cuando se domina puede usarse para agregar un nivel sorprendente de funcionalidad a su página web.

En este capítulo, te voy a dar un breve resumen. introducción a CSS3 Los 5 mejores sitios para aprender CSS en línea Lee mas y mostrarle cómo agregar algunos efectos sorprendentes a su página.

Primero, navegue a codepen.io y cree una nueva pluma. Vamos a usar esto como nuestro espacio de trabajo durante este capítulo.

Comenzaremos de manera simple y crearemos una transformación de imagen simple que gira una imagen 3 grados cuando está suspendida. En primer lugar, cree una etiqueta div y dele una identificación. En el siguiente ejemplo, le he dado una identificación de "muo".

5.1 Efectos de desplazamiento de CSS

En ese div, incluya una imagen de su elección. He incluido una copia del logotipo de MakeUseOf.

Luego deberá escribir algunas reglas de hoja de estilo. En el siguiente ejemplo, he creado un margen superior e izquierdo para dar espacio a la imagen. También he incluido una regla de hoja de estilo de aspecto curioso que comienza con "#muo: hover". ¿Que es eso?

Cuando adjunta ": desplazarse" a una regla de hoja de estilo, ya sea a un elemento, un ID o una clase, le está diciendo al navegador que aplique este estilo cuando el mouse gobierna el elemento. Muy bien, ¿verdad?

Dentro de la regla "#muo: hover", tenemos una línea que dice "-webkit-transform: rotate (3deg)". Como estoy seguro de que has adivinado, esto le dice al navegador que gire ese elemento div en tres grados.

Sin embargo, vale la pena señalar que esta etiqueta solo funciona en Chrome y Safari. Si desea que su código funcione en Firefox o Internet Explorer 9 y superior, querrá cambiar su archivo CSS para incluir las siguientes líneas.

Ahora, cuando pasa el cursor sobre la imagen, se ve así:

5.2 Uso de CSS3 para cambiar el tamaño de las imágenes

Entonces, ¿por qué parar allí? ¿Sabía que también puede utilizar el método de "transformación" para ampliar o reducir una imagen? Cambiemos nuestro archivo CSS para incluir las siguientes líneas.

Como puede ver, ahora hemos incluido una nueva regla de transformación, pero esta vez le estamos diciendo que haga algo llamado "escala". Esta es una forma realmente hermosa de aumentar el tamaño de una imagen. Toma dos parámetros (esos números que ves entre esos paréntesis), y representan la cantidad en la que aumentas la altura y el ancho del elemento.

Como puede ver en el código, voy a aumentar el tamaño del logotipo de MakeUseOf div en un 50%. Puede probar que esto funciona pasando el cursor sobre él. Verá que ahora el logotipo "MakeUseOf" ahora está significativamente más extendido.

Esta fue una introducción muy suave a las transformaciones CSS3. A pesar de que CSS3 es muy nuevo, ahora puedes ver que puedes hacer muchas manipulaciones muy interesantes con él.

5.3 Ponte a prueba

• ¿Cómo aplicamos un estilo a un elemento al pasar el mouse por encima?
• ¿Cómo rotar una imagen usando CSS3?
• ¿Cómo escalas una imagen usando CSS3?
• ¿Qué sucede si pasa su método de transformación "traducir (50 px, 50 px)"?

Otras lecturas:

Rocas HTML5 - Presentación

6. Javascript suficiente

Si desea usar un script en su navegador web, debe usar Javascript ¿Qué es JavaScript y cómo funciona? [Tecnología explicada] Lee mas . No hay dos formas de hacerlo, lamentablemente. Es un lenguaje que tiene muchos fanáticos 5 amplias opciones de biblioteca de códigos JavaScript para desarrolladores Lee mas , y muchos detractores también. Según los idiomas, tiene muchas verrugas. Hay una razón por la cual el libro más notable sobre el lenguaje se llama "Javascript: las partes buenas".

Será imposible enseñarle cómo usar Javascript en un solo capítulo. Ese no es el objetivo aquí. El objetivo es enseñarle suficiente Javascript para que pueda comprender el próximo capítulo, que trata sobre el uso de una tecnología llamada Canvas para hacer dibujos y animaciones.

6.1 Acceso a la consola

Para hacer esto, vamos a utilizar la consola Javascript que está integrada en cada copia de Google Chrome. Para acceder a esto, puede hacer clic derecho en cualquier página web y luego presionar "Inspeccionar elemento". Luego haga clic en "Consola". Deberías ver esto.

Es tradicional que el primer programa que escriba cualquier desarrollador en ciernes sea el programa "Hello World". Este es un programa simple que imprime la frase "Hola Mundo", y no mucho más. En su consola, escriba ‘console.log (" ¡Hola, mundo! ") ;.

6.2 Su primer programa

Entonces, ¿qué hicimos exactamente? En primer lugar, llamamos a algo llamado "console.log". Este es un fragmento de código integrado en la computadora que simplemente imprime lo que le diga. Luego le adjuntamos algunos paréntesis e incluimos entre comillas dobles "Hello World". Esto se llama "pasar argumentos" y el tipo de argumento que pasamos se llama cadena. Siempre que desee hacer algo relacionado con letras y caracteres especiales, simplemente debe usar comillas simples. Sin embargo, si desea hacer algo usando números, generalmente no necesita usar comillas, como se ve a continuación.

6.3 Variables en JavaScript

También puede pasar variables a "console.log" también. Las variables suenan complicadas, pero todo lo que realmente son es un espacio para poner fragmentos de información. Estos a menudo son números o letras. Para hacer eso, declaras una variable usando la palabra clave "var", le das un nombre y luego con un signo igual, le das un valor. Entonces, voy a crear una variable llamada "hola" y luego le daré un valor de "¡Hola Mundo!". Luego voy a pasar eso a console.log.

Tenga en cuenta que no pasé "hola" a console.log usando comillas. Eso es porque quería imprimir en la consola el contenido de "hola" y no "hola" en sí.

6.4 Qué funciones hacen

Puede ser un poco tedioso reescribir el mismo fragmento de código una y otra vez, por lo que es por eso que escribimos funciones. Las funciones son más fáciles de lo que piensas. Todo lo que son son fragmentos de código que podemos reutilizar sin volver a escribir el mismo código nuevamente. A continuación, hemos creado una función llamada "sup" y le estamos pasando un argumento usando paréntesis que luego se registra en la pantalla. Llamamos "sup" enviando a la consola "sup" ("¡Hola, mundo!"); ’.

6.5 Repetir una acción con un bucle "For"

Supongamos que desea realizar la misma acción durante un número determinado de veces. Es por esa razón por la que usaríamos un bucle "para". Al principio parecen atemorizantes, pero son tan fáciles de hacer una vez que los comprende. Empiezas escribiendo "para ()".

En esos paréntesis, vamos a querer crear una variable que cuente cuántas veces hemos realizado una acción. Entonces, obtenemos algo que se ve así 'para (var i = 0;)'.

Luego queremos comprobar que no he cumplido una condición. Entonces, en este caso, queremos ver que son menos de 10. Entonces, después del punto y coma, escribimos "i <10". Nuestro bucle ahora se ve así: ‘for (var i = 0; i <10;).

Si tengo menos de 10, queremos agregarlo por uno y luego hacer algo. Entonces, ponemos "i = i + 1". Nuestro ciclo está casi terminado: ‘for (var i = 0; i <10; i = i + 1) ". Tenga en cuenta que la última parte no tiene punto y coma.

Después de eso, vamos a querer hacer una acción. Entonces, después de los últimos paréntesis, escribimos algunas llaves y entre ellas vamos a consolar.loguear el valor de i. Esto creará un contador que cuenta hasta nueve.

Las dos últimas construcciones de programación que vamos a ver son las declaraciones "if" y los bucles "while".

6.6 Si declaraciones

Una declaración "si" realiza una acción si se cumple un determinado criterio. Son similares a los bucles "for" en la construcción, y funcionan de la siguiente manera. Supongamos que tiene una variable llamada "hamburguesas con queso" y desea ver si tiene un valor de "sabroso". Si es así, desea registrar "ñam, hamburguesas con queso" en la pantalla. Para hacer eso, escribirías algo como esto.

Tenga en cuenta cómo escribí "if (hamburguesas con queso ==" sabroso ")". Utiliza dobles o triples iguales para verificar la igualdad y simples iguales para asignar un valor.

6.7 Bucles While

Finalmente, un bucle "while" ejecuta una acción mientras se cumple un criterio. Entonces, imagina que quieres registrar "ñam, hamburguesas con queso" mientras que las hamburguesas con queso son igual de sabrosas. Para hacer eso, escribirías lo siguiente.

Vale la pena señalar que esto entraría en un bucle infinito, y debe evitar realizar una acción sobre un valor que probablemente no cambie. Esto puede hacer que su navegador se bloquee o que su código no funcione.

Como mencioné antes, esta fue una breve introducción a las construcciones de programación en Javascript. Le animamos a leer más sobre este tema fascinante, aunque enorme.

6.8 Ponte a prueba

• Quiero contar desde 30. Escriba un bucle "para" que haga eso.
• Quiero crear una variable llamada "makeuseof" y darle un valor de "increíble". ¿Cómo se hace eso?
• Quiero crear una función que imprima "MakeUseOf Is Awesome" cuando se llama. Escribe esa función.

Otras lecturas:

• "Javascript: las partes buenas" por Douglas Crockford
• MDN Javascript Guide

7. Lienzo creativo

Canvas es una tecnología genial que te permite dibujar imágenes y crear animaciones sin tener que recurrir al uso de Flash o Silverlight. La gente lo ha usado para crear cosas extrañas y maravillosas, incluido un simulador de secador de pelo y varios videojuegos. Es una tecnología maravillosa e insondablemente grande, en este tutorial, te voy a dar una breve introducción.

Vale la pena señalar que Canvas solo funciona en navegadores web modernos. Si está utilizando una versión anterior de IE, Chrome o Firefox, es posible que no pueda seguir este capítulo. Si ese es el caso, debería considerar descargar la última versión de Google Chrome, que fue el navegador web en el que creé este tutorial.

7.1 Comenzando con Canvas

En primer lugar, deberá abrir su navegador web y navegar a codepen.io. Crea una nueva pluma.

Ahora, vamos a tener que declarar un elemento de lienzo. Cree dos etiquetas de lienzo de apertura y cierre. En ellos, debes pasarle tres atributos. Estos son el ancho y la altura del elemento Canvas, junto con la ID que le está dando. Al igual que antes cuando insertó algún video, debe incluir un mensaje alternativo.

Ahora, vamos a querer escribir un código Javascript que dibuje algo en la pantalla. Vamos a comenzar básico y crear un cuadrado rojo simple.

Vamos a crear una variable (la llamé "demo"), y luego seleccionaremos el elemento del lienzo y lo asignaremos a esa variable. Para hacer eso, use document.getElementByID () y pase la ID del elemento que desea seleccionar.

La segunda línea en nuestro script crea otra variable llamada "contexto" y luego llama "demo.getContext (" 2d ")". Esto le dijo al navegador que estaremos trabajando en una imagen 2D, luego pasó las funciones necesarias que necesitaríamos para dibujar en la pantalla.

Las líneas tercera y cuarta son las que realmente hacen el dibujo en la pantalla. La tercera línea llena un rectángulo con el color rojo, mientras que la cuarta línea llama a fillRect, que lo posiciona y define su longitud y ancho.

Sin embargo, eso no es impresionante. Hagamos algo un poco más avanzado y usemos la magia de Javascript y Canvas para crear MakeUseOf un nuevo logotipo.

7.2 Formas y texto

Borremos nuestra cuarta línea y reemplácela con una que coloque nuestro rectángulo en la esquina superior izquierda y lo extienda a lo largo de nuestro lienzo.

Los primeros dos argumentos definen dónde deseamos colocar los ejes xey de la forma. Vamos a configurar estos dos a "0" por ahora. El tercer argumento se refiere al ancho de la forma. Establezcamos eso en "200" y luego dejemos el cuarto argumento en "50". Ahora debería tener algo que se parezca un poco a esto.

Este es un gran comienzo, pero no menciona MakeUseOf en absoluto. Entonces, vamos a agregar algo de texto. Creemos una variable que contenga "makeuseof" y llamaremos a esa variable "MakeUseOf".

Luego vamos a querer crear otra variable de contexto. Llame a este "contexto2" y asegúrese de que sea 2d. Es esto lo que usaremos para escribir nuestro texto.

Vamos a querer que nuestro texto sea de color azul y que se superponga a nuestro cuadrado rojo. Entonces, al igual que antes, vamos a querer darle un estilo de relleno de "azul". Ahora, vamos a seleccionar las características de nuestro texto. Queremos que sea 20px grande, en formato negrita y con una fuente Arial. Llamamos a font en context2 y le asignamos el valor "bold 20px arial".

Debido a que queremos que este texto se superponga a nuestro cuadro rojo anterior, debemos llamar "textBaseLine" en context2 y darle un valor de top. Una vez que se haya completado, llamamos "fillText" en context2 y le pasamos la variable que contiene nuestro texto y las coordenadas xey en las que pretendemos colocar nuestro texto. El resultado final de nuestro código es algo como esto.

La imagen que produce el código tiene este aspecto.

7.3 Una palabra en lienzo

Si bien esta fue una introducción increíblemente básica a Canvas, debes entender que también es una tecnología increíblemente grande y una increíblemente poderosa para arrancar. Esta guía simplemente sirvió como una introducción a la creación de gráficos con esta nueva tecnología.

7.4 Ponte a prueba

• Agregue el siguiente eslogan a la imagen que creó: "¡El mejor sitio de tecnología!"
• Cree un bucle "for" que se ejecute durante diez iteraciones. Vea si puede mover su dibujo hacia abajo en el lienzo, un píxel a la vez.
• Envuelva su dibujo en una función. ¿Qué pasa si no lo llamas?

Otras lecturas:

• HTML5 Rocks: integración del lienzo en sus aplicaciones web.
• Treehouse - Cómo dibujar con lienzo

8. ¿A dónde sigue?

Gracias por leer mi increíblemente breve guía de las nuevas tecnologías que se encuentran en HTML5. Es innegable que HTML5 es la tecnología del futuro. La mayoría de la tecnología lo está adoptando, ya que es fácil de escribir y potente sin medida. La gente hace cosas increíbles con eso todo el tiempo, y no tengo dudas de que en el futuro, serás una de esas personas. Me siento honrado de haber sido parte de su viaje al mundo salvaje y maravilloso de HTML5.

Te imploro que sigas aprendiendo. Sigue codificando. Continúe subiendo de nivel y mejorando, y en muy poco tiempo utilizará las tecnologías que se han presentado en esta breve guía para crear productos maravillosos.