Diseño en HTML5 y CSS3

Diseño en HTML5 y CSS3

Anteriormente planteé el tema de la escasez de herramientas decentes de edición y diseño de HTML5. Aplicaciones como el código de soporte de DreamWeaver insinúan y muestran capacidades de vista previa para gran parte de la sintaxis HTML5 y CSS3, pero todavía no hay ayuda disponible si desea utilizar las capacidades adicionales.

Todavía estamos atrapados en el ciclo tradicional de código de escritura/guardado/vista previa en el navegador, lo que significa que el desarrollo es lento. La web de expresión de Microsoft tiene un mejor soporte para algunas de las mejoras de CSS3 y, útil, le advierte que estas características no son compatibles con todos los navegadores.

Todavía estamos atrapados en el ciclo tradicional de código de escritura/guardado/vista previa en el navegador, lo que significa que el desarrollo es lento

Decidí convertir a HTML5 en uno de nuestros propios sitios que ha sido un cambio de imagen desde hace mucho tiempo.

Establecí con mi copia confiable de Expression Web en la mano, con el fin de rediseñar este sitio para que se vea genial en los navegadores modernos, pero también es aceptable en los más antiguos.

El proceso fue sorprendentemente fácil: aparecieron cajas con bordes curvos, expandiendo menús con pestañas hechos sin el uso de gráficos, y se convirtió en un experimento de diseño muy satisfactorio.

Pruebas de cuadro de texto

A continuación, realicé algunas pruebas con la amplia gama de cuadros de texto de entrada que ofrece HTML5.

Creo que esta capacidad resultará útil para los desarrolladores web y ahorrará más horas de hombre de las que se hablan muy bien pero limitada nueva etiqueta de "video".

Dependiendo del valor en el parámetro "Tipo" en su HTML, ahora puede definir un cuadro de texto simple para comportarse como todo, desde un cuadro de búsqueda hasta un recipiente con calendarios emergentes, sin requerir ningún otro código (aunque actualmente solo Opera Opera admite esta última opción).

Estos nuevos tipos para la etiqueta de entrada HTML5 son:

• Autococus: el cuadro de texto se enfoca independientemente de su ubicación en la página
• Color: muestra un selector de color
• Fecha: muestra el control del calendario emergente para una selección de fechas
• DateTime: Similar a la opción Fecha
• Correo electrónico: proporciona una verificación básica para una sintaxis de dirección de correo electrónico válida
• Mes: similar a la opción de fecha
• Número: muestra una caja de giro para una selección de números
• marcador de posición: muestra una línea de texto grisada para solicitar al usuario sobre la entrada requerida
• Rango: muestra un control deslizante para una selección de números
• Buscar: muestra un cuadro de texto con un botón para borrar el cuadro
• Hora: similar a la opción de fecha
• URL: proporciona una verificación básica para una sintaxis de URL válida
• Semana: similar a la opción de fecha

Para ver los efectos de estos componentes en varios navegadores, eche un vistazo a la captura de pantalla a continuación que muestra el cuadro de entrada abierto en varios navegadores.

Notará que la página se ve significativamente diferente en cada una, pero no es tan rota como para ser inutilizable, y la página en su conjunto todavía funciona, que es la consideración principal.

Con estas pruebas completadas, me sentía lo suficientemente seguro como para comenzar a convertir el sitio antiguo en HTML5, mientras esperaba una herramienta de diseño adecuada que podría ayudarme con algunos de los efectos más complicados que podría implementar, en particular, de una manera. Producir animaciones sin flash.