Desbloqueo del potencial de HTML5 y CSS3

El lanzamiento de HTML5 y CSS3 fue nada menos que un salto evolutivo, sin embargo, pocos diseñadores hacen un gran uso de las nuevas características proporcionadas por la tecnología. En parte, esto se debe a que se ha pasado por alto todo el potencial de HTML5 y CSS3, por lo que las personas continúan desarrollando más o menos los mismos sitios, solo con pequeñas diferencias en la codificación.

No hay nada especialmente malo en eso, pero hay muchas cosas que HTML5 y CSS3 ponen a tu disposición que podrías aprovechar para crear creaciones más sorprendentes que nunca.

No ignores el lienzo.

Hacer frente al objeto de lienzo es una de las tareas más difíciles que debe realizar un nuevo codificador HTML5, especialmente cuando ese codificador ha sido codificado previamente en otras versiones de HTML y no tiene un fondo en la programación de gráficos de computadora.

Aprender a usar el objeto de lienzo, incluso si rara vez intenta hacer un dibujo, es una habilidad valiosa que todo codificador serio debería tomarse el tiempo de aprender. Se puede usar para todo tipo de cosas, incluida la creación de infografías animadas, presentaciones de diapositivas, gráficos (incluidos gráficos interactivos) y mucho más.

ilustración cortesía de

Usar el lienzo es simplemente una cuestión de crear el objeto en HTML5 y luego poblarlo con JavaScript. Las técnicas involucradas son un tema para otro día, pero ya puede encontrar algunos tutoriales aquí en este sitio que lo ayudarán a comenzar.

Ya no necesitas Flash

La mayor parte de lo que usamos anteriormente para Flash no requiere Flash. Ahora puede hacerlo todo con transiciones CSS3, dibujo HTML5, animación HTML5, video HTML5 y audio HTML5.

Lo único que no estamos haciendo en HTML5 que Flash te permitió hacer es espiar a tus usuarios y violar su privacidad, pero eso no es algo que quieras hacer de todos modos, ¿verdad?

La mayoría de los usuarios consideraron que Flash era muy molesto, aunque la mayoría lo instaló a regañadientes como una necesidad inevitable. Eso fue hasta que los serios riesgos de seguridad y los problemas de privacidad asociados con Flash hicieron que ahora la mayoría de los usuarios no se instalen o se activen caso por caso cuando sea estrictamente necesario para una tarea que quieran realizar. .

CSS3 te da nuevas pseudo clases

Algunas pseudo clases existían en CSS2, pero con CSS3 puedes usar importantes pseudo clases posicionales para ganar más control. Principalmente se usan con texto, como indican los nombres de las pseudoclases: antes, después, primera letra, primera línea ...

También tiene acceso a las transiciones, que se pueden usar para modificar cualquier cosa, incluido el texto. Estas transiciones animan o transforman lo que el usuario ve en la pantalla.

Sus páginas web pueden comunicarse directamente con la GPU.

Debe hacer esto con cierta precaución, ya que cualquier tipo de aceleración de hardware agotará la vida útil de la batería de los dispositivos móviles, pero aún así es muy bueno que pueda hacerlo.

La aceleración de GPU funciona cuando se utilizan transiciones, transformaciones 3D, lienzo en modo 3D y 3D de WebGL. Este último es mi favorito, pero necesitarás leer mucho para familiarizarte con todo lo relacionado con WebGL. Sin embargo, te dará mucho margen para crear animaciones y juegos.

La aceleración de GPU no funciona con los navegadores más antiguos, incluso si admiten HTML5 y CSS3.

gif cortesía de

Usa los motores de juego para eliminar el trabajo duro de los gráficos 3D.

Los programadores de juegos han estado utilizando los motores de juegos desde siempre para simplificar la tarea de la programación de juegos, pero solo en el último año o dos han surgido los motores de juegos HTML5 verdaderamente capaces que podrían hacer frente a la tarea de crear juegos 3D de alta calidad Un entorno basado en navegador.

Uno de los más simples para comenzar es PlayCanvas, y aunque es gratis para experimentar y es realmente barato para una licencia personal, no es liviano. Aquí está Redada, un juego creado en PlayCanvas:

Y esto es RoboStorm:

¿Podrías crear juegos como este? Absolutamente, y ahora es mucho más fácil que nunca.

Para una experiencia de construcción de juegos retro, intente Construct2 or Construct3. Tiene todo lo que necesitas para comenzar a crear juegos sobre la base de arrastrar y soltar (aunque algunos lo encontrarán demasiado limitado). Usted crea sus juegos en línea y la gente los juega en línea. Es un motor para aquellos que no conocen ninguna programación y no quieren molestarse en aprender.

aquí está Historia del kiwi, un antiguo juego de plataformas 2D creado en Construct3:

No estás limitado solo a jugar con estos motores. Para hacer películas completas y presentaciones, sería mejor usar Licuadora or Mayay, para los juegos dedicados a una plataforma específica, generalmente será mejor usar un entorno de programación nativo dedicado a esa plataforma. Para los juegos interactivos multiplataforma, narración de historias, software educativo o presentaciones, los motores HTML5 son una excelente opción.

HTML5 y CSS3 le dan más poder

Con HTML5 y CSS3, ahora tiene un control completo sobre cada elemento que aparece en su página, incluida la capacidad de manipular cada objeto prácticamente de la forma que desee.

Si bien la unidad básica de construcción sigue siendo el rectángulo, sus sitios web ya no tienen que seguir una linealidad rectangular. Puede colocar las cosas en el ángulo que desee, rotarlos, sesgarlos, torcerlos y doblarlos, y su navegador web no se quejará en absoluto.

Ahora también puede controlar la opacidad y la escala mucho más fácilmente que antes, y las técnicas funcionarán en todos los navegadores principales.

Desde el momento en que escribí a principios de 2018, todavía hay algunos problemas con la escala entre diferentes navegadores, con algunos navegadores capaces de escalar con precisión mientras que otros dan resultados extremadamente diferentes para la misma página.

Eso significa que, al menos por el momento, seguimos teniendo que programar diferentes versiones de un sitio si queremos usar la escala para propósitos de respuesta.

Afortunadamente, rara vez lo necesitarás, pero a veces colocarte algo en la pantalla sin importar cuán pequeña sea esa pantalla será tu principal objetivo. En esos casos, la falta de escalas estandarizadas en diferentes navegadores seguirá siendo un problema.

Aún así, estos problemas no son problemas de HTML5 o CSS3, son problemas de los desarrolladores del navegador que no soportan adecuadamente las funciones proporcionadas por HTML5 y CSS3.

A medida que pase el tiempo, deberíamos ver mejoras en los navegadores, y todo funcionará como se espera. Para entonces puede ser el momento de comenzar a aprender HTML6 y CSS4, pero al menos es un paso en la dirección correcta.

imagen del encabezado cortesía de

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.