Empezar a trabajar con html5

Tabla de contenido

§1. Introducción

§ 2-semántica de marcado

§ 3.-Forms

§ 4-Media

§ 5-CSS3 transformaciones y animaciones

§ 6-Just Enough javascript

§ 7-creativo lienzo

§ 8-Dónde vamos ahora?

1. Introducción

Usted ha oído hablar de él: HTML5. Todo el mundo lo está utilizando. Se trata de ser anunciado como el salvador de la Internet, permitiendo a la gente Crea páginas web que participan sin recurrir a la utilización de Flash y Shockwave.¿Qué es HTML5, y cómo él cambiar la forma hojeo? [Explica MakeUseOf]¿Qué es HTML5, y cómo él cambiar la forma hojeo? [Explica MakeUseOf]En los últimos años, es posible que haya oído el término HTML5 de vez en cuando. Si usted sabe algo sobre el desarrollo web o no, el concepto puede ser algo nebuloso y confuso. Obviamente,...Lee mas

Pero lo que realmente es?

Bueno, eso no es una pregunta fácil de responder. En este tutorial HTML5, vamos a tratar de dar algunas respuestas. HTML5 se utiliza para describir un grupo diverso de cosas realmente. Es una norma de creación de páginas web. Es una colección de APIs. Es una nueva manera de añadir interactividad a las páginas web.

HTML5 es todo eso y más. Entonces, ¿qué es esto libro?

En este tutorial HTML5, voy a asumir que en algún momento ha tocado en HTML y CSS. Tal vez que haya creado su propio tema de WordPress, o editar un diseño de MySpace en su día. Tal vez usted ha leído muy propia guía de XHTML MakeUseOf. El punto es que estoy asumiendo que usted sabe su manera alrededor de una página web y que lo que se discute en esta guía no será demasiado ajeno a ti.

El objetivo de esta guía no es enseñarle la totalidad de HTML5. Eso sería totalmente fuera del alcance de este libro. El objetivo es proporcionar una suave introducción a estos sorprendentes nuevas tecnologías web, y para mostrar algunas formas interesantes de incorporarlas en sus sitios web.

¿Por qué quieres aprender HTML 5?

Es una pregunta justa. En un mundo de teléfonos inteligentes y aplicaciones, que es realmente importante para aprender a programar páginas web?

Bueno, lo creas o no, es muy común escribir aplicaciones para teléfonos inteligentes que usan tecnologías de HTML5. Hasta hace poco, la aplicación de Facebook para Android fue escrito usando HTML5, CSS y javascript.

Blackberry es otra empresa importante que es inmensamente interesado en HTML5. Esto es obvio en la última versión de su sistema operativo móvil, Blackberry OS 10, en el que están alentando activamente a los desarrolladores crear aplicaciones para sus teléfonos usando tecnologías web.

El nuevo smartphones OS Firefox ejecutar por completo en aplicaciones HTML5, también. Un conocimiento práctico de HTML5 es esencial en el clima de teléfonos inteligentes de hoy en día.

Además, el aprendizaje de HTML5 es bueno para su carrera. No me creen? De acuerdo con Indeed.com, el salario medio anual para un desarrollador de HTML5 es un sorprendente $ 89.000. Con más y más empresas que cambian sus sitios web para utilizar las tecnologías de HTML5, los desarrolladores que conocen la pila HTML5 son buscados - ahora más que nunca.

1.1 Requisitos previos

Este tutorial HTML5 asume un par de cosas. En primer lugar, se presupone que sabe cómo funciona la web, y que sabe cómo crear una página web básica. Usted debe ser capaz de improvisar algunos elementos HTML juntos y para poder presentar alguna información en un navegador web. Viendo

las etiquetas no es demasiado desalentador, y usted no tiene miedo de ensuciarse las manos en algún código fuente.

En segundo lugar, esta guía asume que usted sabe lo que es CSS y cómo funciona. No esperamos que seas genios del diseño, ni ¿Se espera que saber toda la especificación CSS de la parte posterior de su mano. Debería, sin embargo, ser capaz de aplicar un estilo a un elemento en una página web, será capaz de enlazar a un archivo CSS y saber la diferencia entre un ID y una clase y la forma de aplicar un estilo a cada una de ellas.

Si estás rascando la cabeza en lo anterior, no se preocupe. Una de las mejores cosas acerca de HTML y CSS es que es muy, muy fácil. De hecho, tiene MakeUseOf una guía de XHTML increíble que le llevará hasta la velocidad muy rápida.

Después de leer que la guía, también puede ser que desee echar un vistazo a los siguientes artículos:

• 8 sitios web con ejemplos de codificación de Calidad
• 6 blogs para seguir diseñadores Gran Web

También vas a necesitar un editor de texto moderno y navegador. Cualquier versión de Internet Explorer que es más antigua que IE 9 y algunas versiones anteriores de Safari, Chrome y Firefox tendrá que luchar con muchas características que son parte de HTML5 y puede que le impiden seguir esta guía.

Como resultado de ello, es recomendable que descargar un navegador moderno. Recomiendo Google Chrome, y me va a utilizar en cada ejemplo.

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

1.2 editores de texto para el desarrollo web

Su editor de texto es lo que vas a utilizar para escribir su código. Usted se estará preguntando qué es un editor de texto.

Bueno, en primer lugar no es un procesador de textos. Los programas como Microsoft Word y páginas de Apple son totalmente inadecuadas para el desarrollo web. Esto se debe a que conceden información adicional a su javascript archivos HTML, CSS y que hace que sea difícil para su navegador web para leer.

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

Su equipo ya viene con uno. Si estás usando un PC con Windows, a continuación, el Bloc de notas es el editor de texto que es probable que has conseguido instalado.

En un Mac, la situación es un poco diferente. OS X pasa a ser de cuatro editores de texto diferentes. Estos se llaman Vim, Emacs, Pico y Nano. Sin embargo, a diferencia de Bloc de notas, todos ellos pasan a trabajar en el terminal.

Esto es un poco intimidante para las personas que son nuevos en el desarrollo web y no debe ser utilizado por personas que son nuevos en el desarrollo de software. Nosotros no vamos a usar en esta guía. Sin embargo, cuando se obtiene un poco más confiado con el software y desarrollo web, es definitivamente vale la pena echar un vistazo a Empuje y Emacs. Ambos son poderosos editores de texto, y cuando se domina puede ahorrar una gran cantidad de tiempo.Los 7 mejores razones para dar la Vim editor de texto una oportunidadLos 7 mejores razones para dar la Vim editor de texto una oportunidadDurante años, he tratado de un editor de texto tras otro. Lo que sea, lo probé. He utilizado todos y cada uno de estos editores durante más de dos meses, como mi principal editor del día a día. De alguna manera, yo ...Lee mas

En Linux, el editor de texto predeterminado varía entre distribuciones. En Ubuntu, es probable gedit, que es un editor de texto bastante agradable que no es demasiado diferente de Bloc de notas.

Sin embargo, en este curso vamos a estar escribiendo nuestro código usando tres herramientas diferentes.

La primera es Sublime Text 2. Sinceramente, no puedo recomendar lo suficiente. Viene con todas las cosas que hace la vida más fácil para un desarrollador de comenzar. En primer lugar, va a hacer que su código sea más fácil de leer por la coloración ciertas partes. En segundo lugar, que le permite cambiar entre los archivos fácilmente y gestionar proyectos completos de archivos. Esto es ideal para cambiar entre archivos, y la edición de múltiples bits de código sobre la marcha.Pruebe Sublime Text 2 para sus necesidades multi-plataforma para edición de códigoPruebe Sublime Text 2 para sus necesidades multi-plataforma para edición de códigoSublime Text 2 es un editor de código multiplataforma que hace poco oí hablar, y tengo que decir que estoy realmente impresionado a pesar de la etiqueta beta. Puede descargar la aplicación completa sin tener que pagar un centavo ...Lee mas

El tercero es el consola de javascript que está integrado en Google Chrome. Esto nos permite escribir javascript y ver que está siendo ejecutado inmediatamente y se utilizará para explicar los conceptos básicos de programación.

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

2. Semántica marcado

En este capítulo, usted aprenderá acerca de marcado semántico, y la forma de organizar el código basado en su contenido.

Hasta hace poco, el código HTML se organiza en general con

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

El marcado semántico es una nueva característica de HTML5. Trae nuevas etiquetas, que funcionan de la misma manera como etiqueta ‘div`, pero que son comunes para etiquetar partes 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 que es probable que vaya siempre adelante, cuando se piensa en ello.

Vamos a echar una mirada hacia un artículo sobre MakeUseOf. Se dará cuenta de que hay una parte de la página que está reservado exclusivamente para la navegación a otros artículos. También se dará cuenta de 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á una cabecera que contiene el logotipo MakeUseOf y algunos otros enlaces.

Cuando se piensa en ello, una gran cantidad de sitios web siguen estas convenciones. La mayoría de los sitios web tienen una parte que está reservado para la navegación. Por lo general tienen un cuerpo de contenido. Ellos más que probable que tienen un encabezado.

etiquetas semánticas son etiquetas que permiten definir partes de una página web que se encuentra comúnmente en la mayoría de los sitios web. No añaden nada a la página, pero que permiten a las etiquetas de grupo en base a su contenido y se aplican estilos de a esos grupos.

Así, recuerda que el código que teníamos antes? Veamos con un poco de marcado semántico añadido.

Como se puede ver, el código es mucho más fácil de leer. Usted sabe qué partes son los que y no hay ninguna ambigüedad. Esto es importante, porque hace que sea más fácil de escribir buen código, limpio. Si alguna vez decide convertirse en un diseñador web profesional, esto se convierte en primordial - nunca se sabe quién va a leer el trabajo que usted produce.

Por lo tanto, vamos a ver algunas etiquetas de marcado más semántico.

2.1 Sección

Sección es una etiqueta muy útil. Se utiliza para agarrar enormes extensiones de la información y contenidos que están marcados con un título o un título. Piense en esto como 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. Una etiqueta de sección se utiliza para contener todo eso.

2.2 artículo

La etiqueta del artículo se utiliza para lo que suena como- contiene contenido como un blog o una noticia. Este contenido debe ser capaz de ser separado del resto del blog y todavía tiene sentido coherente.

2.3 Aparte

Esta etiqueta está reservado para el contenido que se relaciona con, pero no una parte integral de la página web. Esto podría ser un montón de hechos que se relacionan con una noticia, o la biografía de un usuario en un blog.

2.4 Cabecera

Un montón de páginas web tienen una barra en la parte superior de la página que contiene un logotipo, una cierta información referente al sitio y tal vez algunos enlaces. En marcado semántico, que tendría que utilizar una etiqueta de cabecera para contener todo esto.

2.5 Nav

Este elemento está reservado para la parte de navegación de su sitio web. Esto contener enlaces a otros sitios web o a otras páginas del sitio web. En el contexto de MakeUseOf, esta podría ser la parte de la página que está por debajo de la cabecera.

2.6 pie de página

Esta etiqueta está reservado para la parte inferior de la página. Aquí, usted podría poner algunos datos de contacto, información de derechos de autor, un mapa o algunos enlaces a su ‘Acerca de mí`.

2.7 Prueba tus

• ¿Qué es la semántica de marcado, 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í. ¿Cuál debo usar?

3. Formas

Si alguna vez has hecho un poco de diseño web, es probable que sabe cómo crear un sencillo formulario en HTML. Si usted es realmente inteligente, es probable que sabe cómo tomar la información que recibe de su forma y la manera de hacer algo con él, como lo puso en una base de datos.

Los formularios están enormemente importante. Son la base de la mayoría de las cosas que hacemos en Internet. Cada vez que se crea una actualización de estado en su red social favorita, compra algo de Amazon, o envía un correo electrónico, de lo que has utilizado un formulario HTML.

Lo que probablemente no sabía es que la manera en que creamos formas ha cambiado radicalmente en HTML5. Es también significativamente mejor. En este capítulo, vamos a ver algunas de las cosas interesantes que se pueden hacer ahora, solo con el viejo marcado sin formato.

Por lo tanto, lo que es tan bueno de la nueva forma podemos escribir formas en HTML 5? En primer lugar, puede asegurarse de que algunos campos deben ser llenados con el fin de presentar, con sólo cambiar el marcado de la misma forma. 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 sólo pueden presentar ciertos tipos de información a su forma. Por lo tanto, vamos a suponer que usted tiene un sitio web para su lista de correo y sólo desea que la gente sea capaz de enviar direcciones de correo electrónico reales? Usted puede hacer eso, sólo mediante el uso de HTML5. Realmente es increíblemente poderoso.

En tercer lugar, puede hacer que sus formas se ven mejor, dando ciertos campos de un marcador de posición. Esto hará que sean significativamente más intuitiva, ya que sus usuarios se puede mostrar un ejemplo de lo que usted está esperando para una forma.

3.1 Mejora de un formulario

Por lo tanto, vamos a ver un formulario y ver cómo podemos hacerlo mejor.

Esta forma es bastante básico. Se necesita un nombre, un correo electrónico y un color favorito, y luego permite al usuario enviar eso. No contiene ninguna validación de la información que se guarde en ella, y no hay nada que impida que los usuarios enviar este formulario con algunos campos vacíos. Vamos a cambiar todo eso.

Por lo tanto, lo primero que vamos a querer hacer es asegurarse de que el campo de correo electrónico sólo toma un correo electrónico. Esto solía ser una tarea bastante difícil de hecho, como usted tendría que crear todo tipo de expresiones regulares código arcano. Bueno, no más. Sólo tienes que acaba de cambiar el tipo de la entrada de ‘texto` a `e-mail`. Cuando intenta enviar ese formulario con galimatías, que va a quejarse e insistir en que usted envíe un correo electrónico.

3.2 Tipos de entrada y patrones

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

Por otra parte, para las cosas tales como números de teléfono que varían dependiendo de la localidad, se pueden especificar las pautas de entradas. Estos son creados usando algo llamado ‘y expresiones regulares son bastante complicados, pero inmensamente poderoso.

También vamos a querer dar un ejemplo de un correo electrónico en nuestro campo, por lo que el usuario no tiene ambigüedad de lo que él o ella tiene que someterse. Eso es muy fácil de hacer. Basta con crear un nuevo atributo de ‘marcador de posición` con una dirección de ejemplo de correo electrónico.

Vamos a asegurar que se requiere que nuestro campo ‘Color favorito`. En el último soporte en ángulo (gt;) en la etiqueta de entrada de correo electrónico, acaba de escribir ‘necesaria`. Eso es. Ahora, cuando intenta enviar el formulario sin un valor, que va a producir un mensaje de error.

Lo realmente increíble de estos mensajes de error es que el usuario no tiene que escribirlas ni escribir código para crearlos. Usted acaba de cambiar un campo para que sea necesario, y simplemente funciona. Dicho esto, es posible personalizar ellos, en caso de que desee.

Eso fue un increíblemente breve introducción al poder de las formas en HTML5. Si desea leer más, le recomiendo que visite estos enlaces.

Otras lecturas:

• Trucos CSS - Vamos a escribir el marcado semántico
• HTML 5 Doctor - Hablemos de Semántica

3.3 Prueba tus conocimientos

Es tu cumpleaños la próxima semana, y se desea crear un formulario de inscripción para que sepa cuánto torta tiene que crear. Abre tu editor de texto y crear 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 son obligatorios, y que los campos de correo electrónico y número de teléfono se establecen con el `e-mail` y tipos de entrada ‘ `tel. Crear un marcador para el campo de la alergia con el valor ‘polen, huevos, quiche`.

Juega un poco con el formulario. Intente enviar los campos requeridos como vacía, y tratar de insertar caracteres no numéricos en el campo de número de teléfono. En el campo de correo electrónico, inserte algo que no es una dirección de correo electrónico. ¿Lo que pasa?

4. medios

Solía ​​haber un momento en que la única manera en la que se podía insertar algún vídeo o audio en una página web era algo así como mediante el uso de Flash, Shockwave o Silverlight.

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

Además, eran formatos propietarios. Como resultado, los usuarios de Linux y OS X podría conseguir una experiencia de segunda clase bonita o incluso se evita que el consumo de servicios de medios, ya que no estaba disponible para su plataforma.

Por último, tenían una tendencia a ser lento. Si estuvieras en un ordenador de poca potencia o más, usted no tiene una buena experiencia de visualización de vídeo utilizando estos marcos. Flash fue particularmente notorio para esto.

4.1 ¿HTML5 hace que el vídeo y el audio impresionante

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

Como resultado, las grandes empresas como YouTube, Vimeo y Netflix están tomando ventaja de la revolución HTML5. ¿Por qué no unirse a ellos?

4.2 Todo acerca de los codecs

En este capítulo, usted va a aprender a usar el poder de HTML5 para incluir audio y vídeo en sus páginas web.

En primer lugar, voy a tener que empezar con una advertencia. Mientras que usted puede utilizar el vídeo HTML5 en todos los navegadores web modernos, que no funciona de la misma a través de cada navegador web. Los códecs utilizados por cada navegador varían. En Internet Explorer, usted está limitado al uso de vídeo MP4. Chrome es un poco más generoso y permite el uso de WebM, MP4 y vídeo Ogg Theora. Opera es un poco más restrictiva y sólo permite el uso de Theora y WebM vídeo.

Como resultado, usted tiene que ser un poco más inteligente con la forma de insertar vídeo en su página web. Por lo tanto, vamos a ver cómo funciona.

4.3 Puesta en marcha con vídeo

Para empezar, vas a necesitar para crear un poco de apertura y cierre

Así, cuando se está a la espera de su vídeo para cargar, la persona que visita su sitio puede ver una imagen que se relaciona con el video. Para ello, basta con darle a su etiquetas de vídeo un atributo del cartel` con un valor de la imagen que desea establecer el vínculo. Debe tener un aspecto como este.

La siguiente cosa que vamos a querer hacer es crear una reserva. ¿Qué significa esto? Así, supongamos que usted está usando uno de los navegadores más antiguos y menos impresionantes que hay. Las porciones de estos navegadores antiguos no son compatibles con vídeo HTML5 y por lo tanto no se puede reproducir vídeo HTML5. Vas a querer salir de ellos un mensaje informándoles de que ellos van a querer actualizar su navegador y que hasta que no lo hacen, no van a ser capaces de ver el vídeo.

Para hacer eso, que acaba de escribir su mensaje dentro de las etiquetas de vídeo. No se requiere nada más. Una vez que hayas hecho esto, vas a quedar con algo de código que se parece a esto.

Ahora, vamos a añadir un poco de vídeo. Voy a probar esto en Google Chrome, así que voy a enlazar a una película MP4. Para ello, se crea un tag Fuente y darle un atributo src de los cuales tiene un valor del video que desea incluir.

Mi página está ahora lista para ser abierta en el navegador web. Me he vinculado a una película que es muy, muy grande y, como resultado, cuando se abre uno sólo puede ver el cartel.

4.4 Adición de audio

El audio puede ser insertado en su página web de una manera que recuerda mucho a la forma en que insertamos vídeo en nuestra página.

En primer lugar, se crea algunas etiquetas de audio. Estas etiquetas de audio contienen un atributo de ‘controles. Esto le da al usuario que visita la página de la capacidad de pausar, reproducir rebobinado y avance rápido de audio que se está reproduciendo.

A continuación, se incluye una etiqueta de origen en el archivo MP3 que desea establecer el vínculo. En realidad, no tiene que preocuparse de todo lo que mucho cuando se trata de códec de compatibilidad. La mayoría de los navegadores web recientes tienen la capacidad de reproducir audio MP3, aunque es una buena práctica incluir también un ‘.ogg` y un archivo‘.wav` - por si acaso.

Por último, se puede crear una reserva para navegadores antiguos. Esto se hace de la misma manera en la que creó la reserva para el vídeo.

El resultado final parece un poco a esto.

Al abrir esta en su navegador web, que debe ser un poco como esto.

4.5 Prueba tus conocimientos

• ¿Cuál es el propósito de tener un cartel en las etiquetas de vídeo?
• Lo códecs puede no utilizar en Internet Explorer?
• Si quería la posibilidad de pausar un cierto audio, lo atributo podría agregar a su etiqueta de ‘audio`?

Otras lecturas:

• Rocas de vídeo HTML5

5. Las transformaciones CSS3 y animaciones

CSS tradicionalmente se utiliza para manejar la distribución y el diseño de una página web. Esto sigue siendo cierto, pero en su última versión que ha adquirido la capacidad de manejar animaciones y transformaciones de elementos e imágenes.5 pasos de bebé para el aprendizaje CSS & Convertirse en un brujo CSS Kick-Culo5 pasos de bebé para el aprendizaje CSS & Convertirse en un brujo CSS Kick-CuloCSS es las páginas de cambio más importantes individuales han visto en la última década, y se abrió el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ...Lee mas

La gente ha hecho cosas increíbles con CSS3, desde crear un reloj digital para escribir un juego completo de Pong. Alguien incluso lo utilizó para recrear los créditos de iniciación a Mad Men. Es una verdadera tecnología de gran alcance y cuando se domina puede ser usado para añadir un nivel increíble de funcionalidad a su página web.

En este capítulo, voy a darle una breve Introducción a CSS3, y le mostrará cómo añadir algunos efectos sorprendentes a la página.

En primer lugar, vaya a codepen.io y crear una nueva pluma. Vamos a utilizar esto como nuestro espacio de trabajo durante la duración de este capítulo.

Vamos a empezar de forma sencilla y crear una imagen simple que gira a transformar una imagen 3 grados cuando flotaba. En primer lugar, crear una etiqueta div y darle un ID. En el siguiente ejemplo, le he dado un ID de Muo’`.

5.1 Efectos de la libración CSS

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

A continuación, es necesario escribir algunas reglas de estilo. En el siguiente ejemplo, he creado un margen superior e izquierdo para dar la imagen de un poco de espacio. También he incluido una curiosa regla de estilo mirando que comienza con ‘#muo: hover`. ¿Que es eso?

Cuando se adjunta ‘: hover` a una regla de estilo, ya sea a un elemento, un ID o una clase, usted está diciendo efectivamente el navegador para aplicar este estilo, cuando el puntero del ratón gobierna el elemento. Muy bueno, ¿verdad?

Dentro de la ‘#muo: hover` regla, tenemos una línea que dice‘-webkit-transform: rotate (3deg)`. Como estoy seguro de que has adivinado, esto le está diciendo al navegador para hacer girar dicho elemento div por tres grados.

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

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

5.2 El uso de CSS 3 Para cambiar el tamaño de Imágenes

Así que, ¿por qué detenerse allí? ¿Sabía usted que también puede utilizar el método de ‘transformar` para ampliar o reducir una imagen. Vamos a cambiar nuestro archivo CSS para incluir las siguientes líneas.

Como se puede ver, ahora hemos incluido una nueva regla de transformación, pero esta vez estamos diciendo que haga algo que se llama ‘escala`. Esta es una manera muy hermosa para aumentar el tamaño de una imagen. Se necesitan dos parámetros (los números que aparecen en entre esos paréntesis), y representan la cantidad por la que se aumenta la altura y la anchura del elemento.

Como se puede ver en el código, voy a aumentar el tamaño del logotipo de la MakeUseOf div en un 50%. Puede probar esto funciona colocando el cursor sobre ella. Verá que ahora el logo ‘MakeUseOf` está ahora significativamente más estirada.

Esta fue una introducción muy suave para transformaciones CSS3. A pesar de ser muy CSS3 nueva de hecho, ahora se puede ver que se puede hacer un montón de manipulaciones muy interesantes con ella.

5.3 Prueba tus

• ¿Cómo podemos aplicar un estilo a un elemento cuando se pasa?
• ¿Cómo se puede girar una imagen utilizando CSS3?
• ¿Cómo se cambia la escala de una imagen utilizando CSS3?
• ¿Qué ocurre si se pasa el método de la transformada ‘Translate (50 px, 50 px) `?

Otras lecturas:

HTML5 Rocks - Presentación

6. Suficiente javascript

Si desea utilizar la escritura en su navegador web, usted tiene que utilizar javascript. No hay vuelta de hoja, por desgracia. Es un lengua que tiene muchos fans, y muchos detractores también. A medida que van idiomas, tiene muchas verrugas. Hay una razón el libro más notable de la lengua se llama ‘javascript: las partes buenas.¿Qué es javascript y cómo funciona? [Tecnología Explicación]¿Qué es javascript y cómo funciona? [Tecnología Explicación]Lee mas

Vídeo: Curso de BootStrap - 1º Archivos necesarios para empezar a trabajar

Va a ser imposible que le enseñe cómo utilizar javascript en un solo capítulo. Ese no es el objetivo en este caso. El objetivo es enseñar lo suficiente javascript para que pueda entender el capítulo siguiente, que es sobre el uso de una tecnología llamada tela para hacer dibujos y animaciones.

6.1 Acceso a la consola

Para ello, vamos a utilizar la consola de javascript que se construye en cada copia de Google Chrome. Para acceder a este, puede hacer clic derecho en cualquier página web y luego presione ‘Inspeccionar elemento`. A continuación, haga clic en ‘Consola`. Usted debe ver esto.

Es tradicional que el primer programa en ciernes cualquier desarrollador escribe siempre es el programa ‘Hola mundo`. Este es un sencillo programa que imprime la frase ‘Hola mundo`, y no mucho más. En la consola, escriba ‘console.log (‘Hola mundo!’) -.

6.2 Su Primer Programa

Bueno, ¿qué hicimos? En primer lugar, llamamos a algo que se llama ‘console.log`. Este es un fragmento de código que se construye en el ordenador que simplemente imprime lo que lo indique. A continuación, adjuntamos algunos paréntesis, a la misma, y ​​se incluyeron en las comillas dobles ‘Hola Mundo`. Esto se llama ‘que pasan argumentos, y el tipo de argumento que pasamos se llama una cadena. Cada vez que desee hacer algo que implica letras y caracteres especiales, simplemente hay que utilizar comillas simples. Sin embargo, si usted quiere hacer cualquier cosa usando los números, por lo general, no es necesario usar comillas, como se ve a continuación.

6.3 Variables en javascript

También puede pasar variables a ‘console.log` también. Variables sonar complicado, pero todo lo que realmente son es un espacio para poner trozos de información. Estos son a menudo números o letras. Para ello, se declara una variable usando la palabra clave ‘var`, darle un nombre y luego con un signo igual, se le da un valor. Por lo tanto, voy a crear una variable llamada ‘hola` y luego darle un valor de‘Hello World!`. entonces voy a pasar que a CONSOLE.LOG.

Nótese cómo no pasé ‘hola` a console.log el uso de citas. Esto se debe a que quería imprimir a la consola el contenido de ‘hola` y no‘hola` en sí.

6.4 ¿Qué funciones

Puede ser un poco tedioso volver a escribir el mismo trozo de código una y otra vez, por lo que es por esta razón que escribimos funciones. Las funciones son más fáciles de lo que piensa. Todos ellos son trozos de código que podemos reutilizar sin reescribir el mismo código de nuevo. A continuación, hemos creado una función llamada ‘sup` y lo están transmitiendo un argumento usando paréntesis, que luego se registra en la pantalla. Que llamamos ‘sup` mediante el envío a la consola‘sup ( ‘Hola mundo!’) -`.

6.5 Repetición de una acción con un ‘para` Loop

Suponga que desea hacer la misma acción para un número determinado de veces. Es por esa razón por la que iba a usar un ‘para` bucle. Se ven de miedo al principio, pero son tan fáciles de hacer una vez que las entiende. Se empieza por escribir ‘para ()`.

En esos paréntesis, vamos a querer crear una variable de lo que cuenta el número de veces que hemos realizado una acción. Así, obtenemos algo que se parece a esto ‘for (var i = 0-)`.

a continuación, queremos comprobar que no ha cumplido una condición. Por lo tanto, en este caso, queremos ver que es menos de 10. Por lo tanto, después de la coma, escribimos ‘i lt; 10` . Nuestro bucle ahora se ve así: ‘for (var i = i 0- lt; 10-).

Si i es menor que 10, queremos añadir que por uno y luego hacer algo. Así, ponemos ‘i = i + 1` . Nuestro bucle está casi terminado: ‘for (var i = i 0- lt; 10- i = i + 1)`. Nótese cómo la última parte no tiene un punto y coma.

Después de eso, vamos a querer hacer una acción. Así que, después de los últimos paréntesis, escribimos algunas llaves y en el medio de ellos nos vamos a console.log el valor de i. Esto creará un contador que cuenta hasta nueve.

Las dos últimas construcciones de programación que vamos a ver son ‘si` declaraciones y‘while` bucles.

6.6 Si Declaraciones

Una sentencia ‘if` realiza una acción si se cumplen ciertos criterios. Son similares a ‘para` bucles en la construcción, y el trabajo de la siguiente manera. Suponga que tiene una variable llamada ‘hamburguesas y quiere ver si tiene un valor de‘sabrosa`. Si lo hace, que desea iniciar sesión ‘yum, hamburguesas a la pantalla. Para hacer que usted podría escribir algo como esto.

Nótese cómo escribí ‘if (hamburguesas con queso ==‘bueno’). Se utiliza iguales dobles o triples para comprobar la igualdad e individuales iguales para asignar un valor.

6.7 Mientras Loops

Finalmente, un ‘while` bucle se ejecuta una acción mientras que se cumple un criterio. Así, imagine que desea iniciar sesión ‘yum, hamburguesas con queso, mientras que las hamburguesas con queso son iguales sabroso. Para hacer eso, usted escribiría lo siguiente.

Vale la pena señalar que este entraría en un bucle infinito, y se debe evitar hacer una acción en un valor que no es probable que cambie. Esto puede hacer que su navegador para bloquear, o su código no funcione.

Como he mencionado antes, esta fue una muy breve introducción a construcciones de programación en javascript. Se le anima a leer más sobre este fascinante, aunque sujeta enorme.

6.8 Ponte a prueba

• Quiero la cuenta atrás desde 30. Escribir un ‘para` bucle que haría 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 imprime ‘MakeUseOf es impresionante` cuando se le llama. Escribir esa función.

Otras lecturas:

• “javascript: las partes buenas” por Douglas Crockford
• Guía MDN javascript

7. lienzo creativas

Canvas es una tecnología fresco que le permite dibujar imágenes y crear animaciones sin tener que recurrir al uso de Flash o Silverlight. La gente ha utilizado para crear cosas extrañas y maravillosas, incluyendo un simulador de secador de pelo y varios juegos de video. Es una pieza maravillosa y insondablemente grande de la tecnología, en este tutorial, voy a darle una breve introducción a la misma.

Vale la pena señalar que el lienzo sólo funciona en los navegadores web modernos. Si está utilizando una versión antigua de Internet Explorer, Chrome o Firefox, puede que no sea capaz de seguir este capítulo. Si ese es el caso, se debe considerar la descarga de la última versión de Google Chrome, que era el navegador web en la que he creado este tutorial.

7.1 Guía de inicio de la lona

En primer lugar, vas a tener que abrir su navegador de Internet y vaya a codepen.io. Crear una nueva pluma.

Vídeo: Curso de HTML5 Basico - 1º Introduccion

Ahora, vamos a tener que declarar un elemento canvas. Crear dos etiquetas de apertura y cierre de lona. En ellos, deberá pasar tres atributos. Estos son el ancho y la altura del elemento Canvas, junto con el ID que está dando. Al igual que antes cuando se insertó un poco de vídeo, debe incluir un mensaje de reserva.

Ahora, vamos a querer escribir algo de código javascript que dibujar algo en la pantalla. Vamos a empezar básica y crear un simple cuadrado rojo.

Vamos a crear una variable (lo he llamado ‘demo"), y luego seleccione el elemento canvas y asignarlo a esa variable. Para ello, se utiliza document.getElementById () y pase el ID del elemento que desee seleccionar.

La segunda línea en nuestro script crea otra variable llamada ‘contexto` y luego llama‘demo.getContext ( ‘2d `)` en él. Este le dijo al navegador que vamos a estar trabajando en una imagen 2D, luego se pasa las funciones necesarias tendríamos que con el fin de señalar a la pantalla.

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

Eso no es impresionante, sin embargo. Vamos a hacer algo un poco más avanzadas y usar la magia de javascript y el lienzo para crear MakeUseOf un nuevo logotipo de la marca.

7.2 Formas y texto

Vamos a borrar nuestra cuarta línea, y sustituirlo por uno que coloca a nuestro rectángulo en la esquina superior izquierda y se extiende hacia fuera de la longitud de nuestro lienzo.

Los dos primeros argumentos definen dónde deseamos posicionar el eje x e y de la forma. Vamos a poner estos dos a ‘0` por ahora. El tercer argumento se refiere a la anchura de la forma. Vamos a establecer que a ‘200` , y luego dejar el cuarto argumento a `50`. Ahora debería tener algo que se parece un poco como esto.

Este es un gran comienzo, pero no menciona MakeUseOf en absoluto. Por lo tanto, vamos a añadir un poco de texto. Vamos a crear una variable que contiene ‘MakeUseOf`, y que llamaremos esa variable‘MakeUseOf`.

entonces vamos a querer crear otra variable de contexto. Llamar a éste ‘contexto2` , y asegúrese de que es 2d. Esto es lo que vamos a utilizar para escribir nuestro texto en.

Vamos a querer nuestro texto a ser de color azul y la superposición de nuestro cuadrado rojo. Por lo tanto, al igual que antes, vamos a querer darle un fillStyle de ‘azul`. Ahora, vamos a seleccionar las características de nuestro texto. Queremos que sea 20px grande, en negrita y con formato utilizando una fuente Arial. Llamamos a la fuente en contexto2 y asignarle el valor “Arial negrita 20 píxeles”.

Porque queremos que este texto para superponer nuestra caja roja anterior, tenemos que llamar ‘TextBaseline` en contexto2 y darle un valor de la parte superior. Una vez que se ha completado, lo llamamos ‘fillText` en contexto2 y pasamos la variable que contiene nuestro texto y las coordenadas X e Y en la que pretendemos poner nuestro texto. El resultado final de nuestro código es algo como esto.

La imagen que se produce por el código es el siguiente.

7.3 Una palabra en la lona

Si bien esto fue una introducción muy básica a la lona, ​​usted debe entender que también es una tecnología increíblemente grande, y un increíblemente poderoso para arrancar. Esta guía sólo sirve como una introducción a hacer gráficos utilizando esta nueva tecnología.

7.4 Prueba tus

• Agregue el siguiente lema a la imagen que ha creado: “El mejor sitio de tecnología nunca”
• Crear un ‘para` bucle que tiene una duración de diez iteraciones. Ver si se puede mover el dibujo abajo de la tela, un pixel a la vez.
• Envuelva su dibujo en una función. ¿Qué pasa si no lo llamas?

Otras lecturas:

• HTML5 Rocks - La integración de la lona en sus aplicaciones web.
• Casa del árbol - Cómo dibujar con la lona

8. ¿Dónde vamos ahora?

Gracias por leer mi muy breve guía de las nuevas tecnologías que se encuentran dentro de HTML5 ti. Es innegable que HTML5 es la tecnología del futuro. Que está siendo adoptada por la mayoría de la tecnología, ya que es fácil de escribir y poderosos. La gente está haciendo cosas increíbles con ella todo el tiempo, y no tengo ninguna duda de que en el futuro, va a ser una de esas personas. Estoy honrado de haber sido parte de su viaje en el mundo salvaje y maravilloso de HTML5.

Les imploro que seguir aprendiendo. Mantener en la codificación. Continuar para subir de nivel y mejorar, y en ningún momento a todo lo que va a utilizar las tecnologías que se han introducido en esta breve guía para crear productos maravillosos.

Si tienes alguna pregunta, por favor no dude en ponerse en contacto conmigo. Mis direcciones de correo electrónico son [email protected] y [email protected]

HTML5 Tutorial Publicado: July 2013