Home-theater-designers
Tabla de contenido
§5 – Transformaciones y animaciones CSS3
1. Introducción
Ya ha oído hablar de él: HTML5. Todo el mundo lo está usando. Está siendo anunciado como el salvador de Internet, permitiendo a las personas crear páginas web ricas y atractivas sin tener que recurrir al uso de Flash y Shockwave.
Pero, ¿qué es realmente?
Bueno, esa no es una pregunta fácil de responder. En este tutorial de HTML5, intentaremos proporcionar algunas respuestas. HTML5 se utiliza para describir un grupo de cosas realmente diverso. Es un estándar para escribir páginas web. Es una colección de API. Es una nueva forma de agregar interactividad a las páginas web.
HTML5 es todo eso y más. Entonces, ¿de qué se trata este libro?
En este tutorial de HTML5, voy a asumir que en algún momento ha tocado HTML y CSS. Quizás haya creado su propio tema de Wordpress o haya editado un diseño de MySpace en el pasado. Quizás hayas leído la propia guía XHTML de MakeUseOf. La cuestión es que supongo que conoce una página web y que lo que discutimos en esta guía no le resultará demasiado extraño.
El objetivo de esta guía no es enseñarle la totalidad de HTML5. Eso estaría completamente fuera del alcance de este libro. El objetivo es proporcionar una introducción suave a estas nuevas tecnologías web asombrosas y mostrarle algunas formas interesantes de incorporarlas en sus sitios web.
¿Por qué querrías aprender HTML5?
Es una pregunta justa. En un mundo de teléfonos inteligentes y aplicaciones, ¿es realmente importante aprender a programar páginas web?
Bueno, lo crea o no, es muy común escribir aplicaciones para teléfonos inteligentes utilizando tecnologías HTML5. Hasta hace poco, la aplicación de Facebook para Android se escribía utilizando HTML5, CSS y Javascript.
Blackberry es otra empresa importante que está inmensamente interesada en HTML5. Esto es obvio en la última versión de su sistema operativo móvil, Blackberry OS 10, donde están animando activamente a los desarrolladores a desarrollar aplicaciones para sus teléfonos utilizando tecnologías web.
Los nuevos teléfonos inteligentes Firefox OS también se ejecutan completamente en aplicaciones HTML5. Un conocimiento práctico de HTML5 es esencial en el clima actual de los teléfonos inteligentes.
Además, aprender HTML5 es bueno para tu carrera. ¿No me crees? Según Indeed.com , el salario anual promedio de un desarrollador de HTML5 es de $ 89,000. Con cada vez más empresas que cambian sus sitios web para utilizar tecnologías HTML5, los desarrolladores que conocen la pila HTML5 son buscados, ahora más que nunca.
1.1 Requisitos previos
Este tutorial de HTML5 asume un par de cosas. En primer lugar, presupone que sabes cómo funciona la web y que sabes cómo crear una página web básica. Debería poder improvisar algunos elementos HTML y poder presentar cierta información en un navegador web. Ver y
Las etiquetas no son demasiado abrumadoras y no tienes miedo de ensuciarte las manos con algún código fuente.
En segundo lugar, esta guía asume que sabe qué es CSS y cómo funciona. No esperamos que sean genios del diseño, ni se espera que conozcan toda la especificación CSS de la mano. Sin embargo, debería poder aplicar estilo a un elemento en una página web, poder vincular a un archivo CSS y conocer las diferencias entre una ID y una clase y cómo aplicar el estilo a cada uno de ellos.
Si te estás rascando la cabeza con lo anterior, no te preocupes. Una de las mejores cosas de HTML y CSS es que es muy, muy fácil. De hecho, MakeUseOf tiene una guía XHTML increíble que te pondrá al día muy rápido.
Después de leer esa guía, es posible que también desee echar un vistazo a los siguientes artículos:
- 8 sitios web con ejemplos de codificación de calidad
- 6 blogs para seguir a grandes diseñadores web
También necesitará un editor de texto y un navegador modernos. Cualquier versión de Internet Explorer anterior a IE 9 y algunas versiones anteriores de Safari, Chrome y Firefox tendrán problemas con muchas funciones que forman parte de HTML5 y pueden impedirle seguir esta 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
Tu editor de texto es lo que vas a usar para escribir tu código. Quizás se esté preguntando qué es un editor de texto.
Bueno, en primer lugar, no es un procesador de textos. Los 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 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.
Tu computadora ya viene con uno. Si está utilizando una PC con Windows, entonces el Bloc de notas es el editor de texto que probablemente tenga 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 ellos funcionan en la terminal.
Esto es un poco intimidante para las personas que son nuevas en el desarrollo web y no debe ser utilizado 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 echarle un vistazo a Vim y Emacs. Ambos son potentes editores de texto y, cuando se dominan, pueden ahorrar una gran cantidad de tiempo.
En Linux, el editor de texto predeterminado varía entre distribuciones. En Ubuntu, es probable que sea Gedit, 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 utilizando tres herramientas diferentes.
El primero es Sublime Text 2. Sinceramente, no puedo recomendar esto lo suficiente. Viene con todas las cosas que facilitan la vida de 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 la consola Javascript que está integrada en Google Chrome. Esto nos permite escribir Javascript y ver cómo se ejecuta de inmediato y se utilizará para explicar conceptos básicos de programación.
El segundo es un sitio web llamado Codepen.io. Este extraordinario 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 se organizaba generalmente con etiquetas. Estos le permitieron crear un grupo de elementos y luego aplicar estilo a esos elementos.
Esto funcionó, pero había margen de mejora. El problema con las etiquetas era que no eran semánticas. Div no significa nada en realidad.
El marcado semántico es una característica nueva de 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 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 acceda, cuando lo piensa.
¿Por qué mi controlador ps4 no funciona?
Echemos un vistazo a un artículo sobre MakeUseOf. Notará que hay una parte de la página que está reservada por completo 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. Hacia 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. Lo más probable es 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 según su contenido y aplicar estilos a esos grupos.
Entonces, ¿recuerdas ese código que teníamos antes? Veámoslo con algunas marcas semánticas agregadas.
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 código bueno y limpio. Si alguna vez decides convertirte en un diseñador web profesional, esto se vuelve primordial: nunca se sabe quién leerá el trabajo que produzcas.
Entonces, veamos algunas etiquetas de marcado más semántico.
2.1 Sección
La sección es una etiqueta realmente útil. Se utiliza para capturar grandes cantidades de información y contenido que están marcados con un encabezado o un título. Piense en esto como en un capítulo de 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 utiliza por lo que parece; Con 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 la página web, pero no como parte integral de ella. Esto podría ser un conjunto 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, 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 o a 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 datos de contacto, información de derechos de autor, 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 haciendo una página web y quiero usar una etiqueta semántica para contener una biografía sobre mí. Cual utilizo?
3. Formularios
Si alguna vez ha realizado un poco de diseño web, probablemente sepa cómo crear un formulario simple en HTML. Si eres realmente inteligente, probablemente sepas cómo tomar la información que obtienes de tu formulario y cómo hacer algo con ella, como ponerla en una base de datos.
Las formas son enormemente 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 en Amazon o envía un correo electrónico, probablemente haya utilizado un formulario HTML.
Lo que probablemente no sabías 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 interesantes que puede hacer ahora, solo con el marcado antiguo.
Entonces, ¿qué tiene de bueno la nueva forma en que podemos escribir formularios en HTML5? En primer lugar, puede asegurarse de que se deben completar algunos campos 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. Puede hacerlo, simplemente usando HTML5. Realmente es increíblemente poderoso.
En tercer lugar, puede mejorar el aspecto de sus formularios asignando un marcador de posición a determinados 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 Mejora de una forma
Entonces, veamos un formulario y veamos cómo podemos mejorarlo.
Esta forma es bastante básica. 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 que los usuarios envíen este formulario con algunos campos vacíos. Cambiemos todo eso.
Entonces, lo primero que queremos hacer es asegurarnos de que el campo de correo electrónico solo tome un correo electrónico. Esto solía ser una tarea bastante difícil, ya que tendrías que crear todo tipo de código arcano Regex. Bueno, ya no. Solo tiene que cambiar el tipo de entrada de 'texto' a 'correo electrónico'. Cuando intente enviar ese formulario con un 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. Dado que HTML5 evoluciona constantemente, 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 inconmensurablemente 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 sobre lo que tiene que enviar. Eso es muy fácil de hacer. Simplemente cree un nuevo atributo de 'marcador de posición' con una dirección de correo electrónico de ejemplo.
Nos aseguraremos de que nuestro campo 'Color favorito' sea obligatorio. En el último corchete angular (>) en la etiqueta de entrada de correo electrónico, simplemente escriba 'obligatorio'. Eso es todo. Ahora, cuando intente enviar su formulario sin un valor, producirá 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 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 CSS: escribamos 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ánta torta 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 la forma. 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 sucede?
4. Media
Solía haber un tiempo en el 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 era ideal. En primer lugar, ninguno de estos marcos funcionó tan bien en dispositivos móviles. Simplemente no estaban equipados para el mundo moderno de teléfonos inteligentes y tabletas.
cómo abrir archivos jar con java
Además, eran formatos propietarios. Como resultado, los usuarios de Linux y OS X podrían obtener una experiencia de segunda categoría o incluso se les impidió consumir servicios multimedia, 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 conocido por esto.
4.1 Cómo HTML5 hace que el video y el audio sean increíbles
HTML5 cambió esto al permitir que los desarrolladores web incluyan 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 se están aprovechando de la revolución HTML5. ¿Por qué no te unes a ellos?
4.2 Todo sobre los códecs
En este capítulo, aprenderá a utilizar el poder de HTML5 para incluir audio y video en sus páginas web.
En primer lugar, tendré que empezar con una advertencia. Si bien puede usar video HTML5 en todos los navegadores web modernos, no funciona igual en todos los navegadores web. Los códecs utilizados por cada navegador varían. En Internet Explorer, está limitado a usar video MP4. Chrome es un poco más generoso y te permite usar videos 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 videos en su página web. Entonces, veamos cómo funciona.
4.3 Comenzar con video
Para empezar, necesitará crear algunas etiquetas de apertura y cierre. Es aquí donde se vinculará a sus archivos de video. Pero primero, querrás colocar un póster. ¿Qué significa eso?
Bueno, cuando esperas que se cargue tu video, la persona que visita tu sitio puede ver una imagen relacionada con el video. Para hacer eso, simplemente 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 queremos hacer es crear un respaldo. ¿Qué significa esto? Entonces, suponga que está utilizando uno de los navegadores más antiguos y menos impresionantes 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 vincularlo a una película MP4. Para hacer eso, creo una etiqueta 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 realmente 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 a cómo insertamos el video en nuestra página.
En primer lugar, se crean 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 avanzar rápidamente el audio que se está reproduciendo.
Luego, incluye una etiqueta de origen en el archivo MP3 que desea vincular. Realmente no tiene que preocuparse mucho cuando se trata de la 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 un respaldo para navegadores más 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 abra esto en su 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 las etiquetas de tus videos?
- ¿Qué códecs no puede utilizar en Internet Explorer?
- Si quisiera tener la capacidad de pausar algún audio, ¿qué atributo agregaría a su etiqueta 'audio'?
Otras lecturas:
5. Transformaciones y animaciones CSS3
CSS se utilizó tradicionalmente para manejar el diseño y el diseño de una página web. Esto sigue siendo cierto, pero en su última versión ha ganado la capacidad de manejar animaciones y transformaciones de elementos e imágenes.
La gente ha hecho cosas increíbles con CSS3, desde crear un reloj digital hasta escribir un juego de Pong completo. Alguien incluso lo usó para recrear los créditos introductorios de Mad Men. Es una tecnología realmente poderosa y, cuando se domina, se puede utilizar para agregar un nivel asombroso de funcionalidad a su página web.
En este capítulo, le daré una breve introducción a CSS3 y le mostraré cómo agregar algunos efectos sorprendentes a su página.
Primero, navegue hasta codepen.io y cree un nuevo bolígrafo. Vamos a utilizar esto como nuestro espacio de trabajo durante la duración de este capítulo.
Vamos a comenzar de forma simple y crear una transformación de imagen simple que gira una imagen 3 grados cuando se desplaza. En primer lugar, cree una etiqueta div y asígnele una identificación. En el siguiente ejemplo, le he dado un ID de 'muo'.
5.1 Efectos de desplazamiento CSS
En ese div, incluya una imagen de su elección. He incluido una copia del logo de MakeUseOf.
Luego, deberá escribir algunas reglas de la hoja de estilo. En el siguiente ejemplo, he creado un margen superior e izquierdo para darle algo de 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 ': hover' a una regla de hoja de estilo, ya sea a un elemento, un ID o una clase, le está diciendo efectivamente al navegador que aplique este estilo cuando su mouse gobierne el elemento. Bastante bien, ¿verdad?
Dentro de la regla '#muo: hover', tenemos una línea que dice '-webkit-transform: rotate (3deg)'. Como estoy seguro de que habrá adivinado, esto le está diciendo 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é detenerse ahí? ¿Sabías que también puedes usar el método de 'transformación' para agrandar o encoger 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. Se necesitan dos parámetros (los números que ve entre esos paréntesis) y representan la cantidad en la que aumenta la altura y el ancho del elemento.
Como puede ver en el código, voy a aumentar el tamaño del logotipo Div MakeUseOf en un 50%. Puede probar que esto funciona colocando el cursor sobre él. Verá que ahora el logotipo 'MakeUseOf' ahora está significativamente más estirado.
Esta fue una introducción muy suave a las transformaciones CSS3. A pesar de que CSS3 es realmente muy nuevo, ahora puede ver que puede hacer muchas manipulaciones muy interesantes con él.
5.3 Ponte a prueba
- ¿Cómo aplicamos un estilo a un elemento al pasar el mouse?
- ¿Cómo rotas una imagen usando CSS3?
- ¿Cómo escalas una imagen usando CSS3?
- ¿Qué sucede si pasa su método de transformación 'translate (50px, 50px)'?
Otras lecturas:
6. Javascript suficiente
Si desea utilizar un script en su navegador web, debe utilizar Javascript. No hay dos formas de hacerlo, lamentablemente. Es un lenguaje que tiene muchos seguidores y también muchos detractores. A medida que avanzan los idiomas, tiene muchas verrugas. Hay una razón por la que el libro más notable sobre el lenguaje se llama 'Javascript: las partes buenas'.
Será imposible enseñarte a usar Javascript en un solo capítulo. Ese no es el objetivo aquí. El objetivo es enseñarte suficiente Javascript para que puedas entender el siguiente 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, usaremos 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 que está integrado en la computadora y que simplemente imprime lo que le diga. Luego le adjuntamos algunos paréntesis e incluimos entre comillas dobles 'Hola mundo'. Esto se llama 'pasar argumentos' y el tipo de argumento que pasamos se llama cadena. Siempre que desee hacer algo que involucre 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'. Las variables suenan complicadas, pero todo lo que realmente son es un espacio para poner trozos de información. Suelen ser 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 lo pasaré 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é hacen las funciones
Puede ser un poco tedioso reescribir el mismo fragmento de código una y otra vez, por eso 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. 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 Repetición de una acción con un bucle 'For'
Suponga 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 'for'. Parecen aterradoras al principio, pero son muy fáciles de hacer una vez que las entiendes. Empiece escribiendo 'para ()'.
Entre 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 verificar que no haya cumplido una condición. Entonces, en este caso, queremos ver que sea menor que 10. Entonces, después del punto y coma, escribimos 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).
Si i es menor que 10, queremos sumarlo en uno y luego hacer algo. Entonces, ponemos 'i = i + 1'. Nuestro ciclo está casi terminado: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.
Después de eso, vamos a querer hacer una acción. Entonces, después del último paréntesis, escribimos algunas llaves y entre ellas vamos a console.log el valor de i. Esto creará un contador que contará hasta nueve.
Las dos últimas construcciones de programación que veremos son declaraciones 'if' y bucles 'while'.
6.6 Declaraciones If
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. Suponga que tiene una variable llamada 'hamburguesas con queso' y quiere ver si tiene un valor de 'sabroso'. Si es así, desea registrar 'mmm, hamburguesas con queso' en la pantalla. Para hacer eso, escribirías algo como esto.
Observe 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 ciclo 'while' ejecuta una acción mientras se cumple un criterio. Entonces, imagina que quieres registrar 'mmm, 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 en 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 introducción muy breve a las construcciones de programación en Javascript. Se le anima a leer más sobre este tema fascinante, aunque enorme.
6.8 Ponte a prueba
- Quiero hacer una cuenta regresiva desde 30. Escriba un bucle 'for' que lo haga.
- Quiero crear una variable llamada 'makeuseof' y darle un valor de 'awesome'. ¿Cómo se hace eso?
- Quiero crear una función que imprima 'MakeUseOf Is Awesome' cuando se llame. Escribe esa función.
Otras lecturas:
- Javascript: las partes buenas por Douglas Crockford
- Guía de MDN Javascript
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 utilizado para crear cosas extrañas y maravillosas, incluido un simulador de secador de pelo y varios videojuegos. Es una pieza de tecnología maravillosa e insondablemente grande, en este tutorial, les voy a dar una breve introducción a ella.
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 Introducción a Canvas
En primer lugar, deberá abrir su navegador web y navegar a codepen.io. Crea un bolígrafo nuevo.
Ahora, tendremos que declarar un elemento de lienzo. Cree dos etiquetas Canvas de apertura y cierre. En ellos, debes pasarle tres atributos. Estos son el ancho y el alto del elemento Canvas, junto con el ID que le está dando. Como antes, cuando insertó algún video, debe incluir un mensaje de respaldo.
Ahora, vamos a querer escribir un código Javascript que dibuje algo en la pantalla. Empezaremos de forma básica y crearemos 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, usa document.getElementByID () y pasa el ID del elemento que desea seleccionar.
La segunda línea de nuestro script crea otra variable llamada 'contexto' y luego llama a 'demo.getContext (' 2d ')' en ella. 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.
La tercera y cuarta líneas 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 largo 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
Eliminemos nuestra cuarta línea y reemplácela con una que coloque nuestro rectángulo en la esquina superior izquierda y lo estire a lo largo de nuestro lienzo.
Los dos primeros argumentos definen dónde deseamos colocar los ejes xey de la forma. Establezcamos estos dos en '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 la llamaremos 'MakeUseOf'.
Entonces 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 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 tenga un tamaño de 20 px, esté en negrita y use una fuente Arial. Llamamos 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, necesitamos llamar a 'textBaseLine' en context2 y darle un valor de top. Una vez que se ha 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 producida por el código se ve así.
7.3 Una palabra sobre lienzo
Si bien esta fue una introducción increíblemente básica a Canvas, debe comprender que también es una tecnología increíblemente grande y, además, increíblemente poderosa. Esta guía simplemente sirvió como una introducción a la creación de gráficos utilizando esta nueva tecnología.
cómo ver netflix uk en nosotros
7.4 Ponte a prueba
- Agregue el siguiente eslogan a la imagen que creó: '¡El mejor sitio de tecnología de todos los tiempos!'
- Cree un bucle 'for' que se ejecute durante diez iteraciones. Vea si puede mover su dibujo por el lienzo, un píxel a la vez.
- Envuelve tu dibujo en una función. ¿Qué pasa si no lo llamas?
Otras lecturas:
8. ¿Dónde sigue?
Gracias por leer mi guía increíblemente breve sobre las nuevas tecnologías que se encuentran en HTML5. Es innegable que HTML5 es la tecnología del futuro. Está siendo adoptado por la mayoría de la tecnología, ya que es fácil de escribir y poderoso sin medida. La gente está haciendo cosas increíbles con él todo el tiempo, y no tengo ninguna duda de que en el futuro serás una de esas personas. Me siento honrado de haber sido parte de su viaje al maravilloso y salvaje mundo de HTML5.
Te imploro que sigas aprendiendo. Sigue codificando. Continúe subiendo de nivel y mejorando, y en poco tiempo estará utilizando las tecnologías que se han introducido en esta breve guía para crear productos maravillosos.
Cuota Cuota Pío Correo electrónico ¿Vale la pena actualizar a Windows 11?Windows ha sido rediseñado. Pero, ¿es eso suficiente para convencerte de cambiar de Windows 10 a Windows 11?
Leer siguiente Temas relacionados- Wordpress y desarrollo web
- HTML5
- Forma larga
- Guía de formato largo
Matthew Hughes es un desarrollador y escritor de software de Liverpool, Inglaterra. Rara vez se lo encuentra sin una taza de café negro fuerte en la mano y adora absolutamente su Macbook Pro y su cámara. Puede leer su blog en http://www.matthewhughes.co.uk y seguirlo en Twitter en @matthewhughes.
Más de Matthew HughesSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse