HTML5 y CSS3 en Dreamweaver CS5.5

Los desarrolladores web podemos ver una luz al final del túnel con estas nuevas herramientas,(HTML5 y CSS3). Aunque para mucho esto es aun un mito, en lo personal creo que HTML5 a sido lanzado para durar. Sólo esperemos que llegue a ser una versión estable y sin cambios considerables durante muchos años y que llegue el día en que se pueda unificar los estándares web para todos los navegadores (lo veo difícil) y dejarnos de romper la cabeza diseñando para varios navegadores y estándares.

Espero que estos tips le sirvan de ayuda a los que usan Dreamweaver y a los que no, que al menos le despierte un poco el interés.

Algunas novedades de Dreamweaver CS5.5 en HTML5 y CSS

HTMl5 y CSS3 siguen ganando puesto entre los desarrolladores web. Ha llegado una nueva actualización de Adobe, entre lo más novedoso en el programa Dreamweaver CS5.5 cabe destacar la implementación de soporte para HTML5 y CSS3 de forma nativa, sin necesidad de ningún plugins o complemento

Anteriormente se podía utilizar pero agregando algún pack o plugins adicional, en esta nueva versión ya contamos con Nuevas sugerencias de código para HTML5, CSS3 y JQuery.

Soporte para HTML5

Podemos apreciar los cambios en Dreamweaver cs5.5 respecto al HTML5 desde que abrimos el programa, entre la gama de plantillas que viene por defecto en Dreamweaver Cs5.5 ya encontraremos plantillas Implementando HTML5.

Sugerencias de código html5

Además de las plantillas ya prediseñadas en HTML5, esta nueva versión de Dreamweaver Cs5.5 nos da soporte con las sugerencias del código a las etiquetas de HTMl5, al empezar a escribir cualquier etiqueta nos muestra la sugerencia de dicha etiqueta, lo cual nos ayudara a familiarizarnos un poco más con la versión 5 del lenguaje rey del desarrollo web (opinión personal ).

Panel de estilos CSS

Una de las principales novedades en esta versión con relación al trabajo con CSS3 la podemos encontrar en las mejoras agregadas al panel de estilos Css, se han mejorado funcionalidades ya existentes y se han agregado otras las cuales iremos mencionando más abajo.).

Soporte del modo de color RGB y RGBA

En versiones anteriores del programa podíamos usar RGB pero Dreamweaver en la vista de diseño no lo reconocía, ahora si lo soporta solo que la transparencia sigue siendo ignorada en la vista diseño por Dreamweaver CS5.5.

Podemos utilizar el sistema de color RGB en nuestro código varias formas en Dreamweaver.

1- Escribiendo directamente el código en nuestra hoja de estilos y aprovechando la sugerencia de de Dreamweaver. Sabiendo que debe utilizar RGBA si necesita transparencia, el valor de la transparencia es el último número, en este ejemplo el 1:

Ejemplo:

Código :

 p.CSS3 a{ color: rgba(255,102,0,1);}

2-Desde el panel de propiedades Css, teniendo seleccionada la regla Css ala que queremos agregar el color y con el panel de propiedades en cualquiera de los 3 modos de vista (se puede conmutar el modo de vista desde los botones en la parte inferior izquierda del panel de propiedades), seleccionamos la propiedad color y lo configuramos a color RGB o RGBA como en la siguiente imagen.


En realidad esto lo puede hacer de cualquiera de las forma en la que agregues el color,

Estos solo son 2 forma de hacerlo pero la verdad es que hay bastantes formas, solo hay que tener presente el panel de configuración de color cuando Dreamweaver te presente las sugerencias de color para elegir el que quieras utilizar, solo debes pulsar la flecha de la derecha para configurar el modo de color a rgb u otro modo que te interese.

Si quieren saber más sobre los modo de color pueden visitar el curso de CSS3 de Cristalab.

Mejora de la propiedad -webkit-box-shadow y –webkit-border-radius

Estas son algunas de las propiedades de CSS3 que más utilizo, para la sombra y los bordes redondeados y en esta nueva versión de Dreamweaver CS5.5 tenemos una muy buena novedad en cuanto a su implementación.

Si nos vamos al panel de propiedades a la sección –webkit y luego a –webkit-box-shadow o –webkit-border-radius, al pulsar el nuevo icono de su derecha podemos apreciar un nuevo panel en el cual podemos introducir los valores de estas dos propiedades de CSS3, este panel hace muy intuitivo el uso de estas dos propiedades.

En versiones anteriores de Dreamweaver no teníamos las sugerencias para estas propiedades puesto que no cumplían las normas de la W3G, Ahora con este recuadro podemos introducir los valores siguiendo las normas de la W3G.

Ya agregadas estas propiedades a Dreamweaver Cs5.5 está de más decir que ya podrá visualizar las sombras y los bordes redondeados en la vista diseño de Dreamweaver Cs5.5.


Además del soporte de etiquetas HTML5 y sugerencias para este lenguaje, se han incluido nuevas propiedades CSS3 y sugerencias de código, se han agregado nuevas propiedades y categorías soportada por versiones anteriores del programa y propiedades específicas de distintos navegadores.



Como podemos ver en la imagen anterior, al empezar a escribir con el guion medio (-) en una hoja de estilos lo primero que nos pide es seleccionar el navegador dependiendo la etiqueta o el navegador que queramos usar, en este caso:

• Moz: Mozilla
  
• Ms: Microsoft
  
• O: Opera
  
• WebKit: Safari

Al Seleccionar cualquiera de estas etiquetas específicas de cada navegador, a continuación Dreamweaver nos despliega un listado de todas las propiedades CSS3 que podemos agregar.


Y así seleccionamos las propiedades CSS para los principales navegadores antes mencionados.

Esto es todo amigos, hay muchas mas novedades pero en cuanto al HTML5 y el CSS, estas son las mas novedosas.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.