Comience con HTML5 / CSS3: sugerencias, escaparates y muestras de codificación

HTML5 está ganando más popularidad y está comenzando a evolucionar toda la interfaz web. Incluso algunos desarrolladores web citaron que los elementos HTM5 y los efectos visuales son comparables a Flash. El nuevo estilo de secuencias de comandos es fácil de entender y las capacidades para mejorar la interfaz web son ilimitadas. Entonces, ¿qué tan interesante es este HTML5??


Este artículo está destinado a dar a los lectores una idea de lo que debe saber sobre HTML5 y, lo más importante, algunos consejos & trucos para crear páginas HTML5 livianas, atractivas e interactivas.

1. Básico en HTML5

HTML5

Antes de comenzar con este tema en HTML5, será bueno verificar primero su navegador actual. Como muchos de los navegadores todavía están en el modo de desarrollo (mejora para acomodar el HTML5), algunas características mencionadas aquí pueden no ser compatibles.

Aquí hay algunos consejos rápidos para verificar su compatibilidad del navegador.

Para comprender mejor la limitación de un navegador determinado, puede consultar aquí.

2. Efectos de texto: agregar sombra y efecto de texto avanzado en HTML5

Efectos de texto en HTML5

Efecto de sombra básico en texto

Este es el código de cadena más simple que transforma su título ordinario en un texto atractivo. Nunca subestimes el efecto de sombra. Para crear este efecto de aspecto similar, el diseñador web debe realizar varios pasos de edición de imágenes en Photoshop. Y ahora todo lo que se necesita es una sola línea de código. La distancia de sombra, el color se puede cambiar al contenido de tu corazón.

Muestra de codificación

#shadow h1 {
sombra de texto: 0px 1px 1px rgba (0,0,0, .2);
}

Texto sobre efecto avanzado de fuego

El siguiente consejo es mostrarle cómo la codificación HTML5 se puede modificar en un texto aún más atractivo. Si experimentas lo suficiente o encuentras otros ejemplos, las posibilidades de personalizar los efectos son infinitas. Nota: este ejemplo no es creado por ningún software de edición de imágenes. Solo códigos simples en HTML5.

Muestra de codificación

#fire h1 {
alinear texto: centro;
margen: 200 px automático;
Familia tipográfica: "League-Gothic", Mensajero;
tamaño de fuente: 200px; transformación de texto: mayúscula;
color: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716p, 10px-973716, 10px 80px # 451b0e;
}

Otro gran ejemplo: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Esquina redondeada en HTML5

Esquina redondeada en HTML5

Diseñar el diseño de la página web en HTML5 nunca ha sido tan fácil desde la introducción de CSS. ¡Y ahora incluso puede tener esquinas redondeadas de sus elementos de diseño! Imagina esto; no más imágenes de fondo de corte, no más fragmentos de imágenes desordenadas. Esto traerá muchos aplausos a los diseñadores web..

Muestra de codificación

div {
borde: 2px sólido # 434343;
acolchado: 10px;
fondo: # e3e3e3;
-radio-borde-moz: 10px;
-webkit-border-radius: 10px;
ancho: 500 px;
}

Nota: Moz significa Mozilla, y el kit web es para Safari y Chrome.

Otro gran ejemplo: http://fjd1.com/roundcorner.html

4. Gráfico vectorial escalable (SVG) en HTML5

Tutoriales, guía y ejemplos de HTML 5

El gráfico vectorial escalable o comúnmente conocido como (SVG) es un gráfico vectorial de 2 dimensiones que se define en archivos de texto XML. En otras palabras, debido a que su ADN se basa en un archivo de texto XML, se pueden crear o editar en la plataforma web. Lo que también significa que puede escalarse fácilmente, y los motores de búsqueda pueden leer y comprender la imagen..

Código de muestra

Otros grandes ejemplos:

5. Incrustar archivo de película en HTML5

Video en HTML5

Aquí hay otra parte interesante para mostrar las capacidades de HTML5. Muchos de los videos en línea generalmente se presentan al usuario web en forma de Flash. Hasta hace poco, la incrustación de video en HTML5 estaba ganando impulso lentamente (YouTube es un buen ejemplo) y Flash está perdiendo lentamente su atractivo. ¿Por qué es así? Usuarios móviles. Si desea que su video se pueda reproducir en teléfonos iPhone y Android, HTML5 es la forma de avanzar.

Para insertar el video, necesitará saber que actualmente hay 3 formatos compatibles con diferentes navegadores; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Código de muestra

Otro gran ejemplo: https://www.html5rocks.com/en/tutorials/video/basics/

6. Presentación de diapositivas en HTML5

Tutoriales, guía y ejemplos de HTML 5

Powerpoint ha sido un sinónimo asociado con la presentación de diapositivas. Pero, ¿por qué limitarse a una presentación fuera de línea donde puede crear diapositivas destinadas a la audiencia web? HTML5 ha venido al rescate en la creación de diapositivas de presentación muy potentes, completas con transición y menú de navegación. La mejor parte es que incluso puedes aplicar transformación 3D a tu presentación.

Código de muestra

pre {
transición: todos 1s facilidad de entrada;
}

pre: hover {
color de fondo: # F2F5FE;
color del borde: negro;
}

div {
transformar: rotar3d (1,1,0, 45 grados);
}

Otros grandes ejemplos:

7. Contenido editable en HTML5

Tutoriales, guía y ejemplos de HTML 5

El texto estático es tan antiguo en la era en que la flexibilidad y la dinámica gobiernan el mundo. En HTML5, puede definir un área de texto que el usuario web pueda editar sin el editor de texto.

Código de muestra

Este contenido es editable.!

Otro gran ejemplo: http://html5demos.com/contenteditable

8. Web Canvas interactivo en HTML5

Tutoriales, guía y ejemplos de HTML 5

Además de SVG en HTML5, el lienzo es lo mejor que le ha pasado a la web. Canvas permite renderizar formas de 2 dimensiones que llevan la interactividad a un nivel completo sin la ayuda de Flash.

Sin embargo, vale la pena mencionar aquí la codificación simple en HTML5 que crea una increíble interacción de animación..

Otro gran ejemplo: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Arrastrar y soltar en HTML5

Tutoriales, guía y ejemplos de HTML 5

Arrastrar y soltar (a veces conocido como DnD) es otra característica interesante que está disponible para HTML5. Un gran ejemplo sería la implementación por parte de Google en su Gmail. Si está utilizando alguno de los navegadores compatibles con HTML5, simplemente puede arrastrar un archivo desde su computadora y soltarlo en la ventana de redacción de mensajes. Se agregará automáticamente como un archivo adjunto. Cuan genial es eso?

Código de muestra (DnD nativo)

document.addEventListener (‘dragstart’, función (evento) {
event.dataTransfer.setData (‘texto’, ‘Texto personalizado’);
event.dataTransfer.effectAllowed = ‘copiar’;
}, falso);

Otro gran ejemplo: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Gráfico de datos de CSS puro en HTML5

Tutoriales, guía y ejemplos de HTML 5

Antes de HTML5, también es imposible crear un gráfico presentable simplemente usando la codificación en HTML. Además, cambiar el valor de los datos y reflejarlo en el gráfico no es una tarea sencilla. De nuevo, HTML5 al rescate. Junto con CSS, puede crear un gráfico absolutamente hermoso que avergüence a Microsoft Excel. Los códigos son simples, y todo lo que necesita hacer es pasar tiempo para personalizar el color y el efecto perfectos para su gráfico.

Otro gran ejemplo: http://cssglobe.com/pure-css-data-chart/

No puedo tener suficiente de HTML 5?

¡Nosotros también! Aquí hay más sobre el tema, ve a verlos.

* * 30 ejemplos muy interesantes de sitios web HTML 5
* * Comenzando con HTML 5
* * Debe leer los tutoriales HTML 5 en 2012
* * Aprender HTML 5: 10 lecciones de lectura obligatoria

Además, echa un vistazo  este curso intensivo de HTML 5 por Robin Nixon. Robin Nixon es el autor de Learning PHP, MySQL y JavaScript; el curso cubre casi todo lo que un novato necesita saber en HTML5, incluida la codificación HTML básica, el lienzo HTML5 para dibujar, la geolocalización, el almacenamiento local, así como audio y video HTML5.

El artículo original se publica por primera vez en Blog de la WHSR; ahora es administrado y actualizado por el personal de BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map