Llegamos a ustedes gracias a:



Reportajes y análisis

Seis herramientas CSS para construir un mejor sitio web

[12/04/2013] Cascading Style Sheets es un elemento esencial de las páginas web, ya que controlan el diseño de página, fuentes, posicionamiento y mucho más. Mientras CSS ofrece un gran control de página, algunos aspectos pueden ser engorrosos. Esto en parte es la razón por la que CSS está pasando por una nueva revisión, actualmente en la versión CSS3.
CSS3 da a los diseñadores más control sobre el diseño de página y el comportamiento de los distintos elementos de la misma. Con sus nuevas opciones de codificación, CSS3 ahora tiene la capacidad de crear efectos de imagen con el código, dando más control sobre el aspecto y el tacto de los diseños. Estos efectos -que incluyen gradientes, sombras de texto y cajas y bordes de radio, para las esquinas redondeadas de las cajas- permiten crear efectos de imagen sobre la marcha, sin necesidad de construir cada efecto mediante imágenes programas. También vale la pena mencionar que CSS3 es compatible con versiones anteriores y funciona con páginas diseñadas con CSS2.
Aquí hay seis programas que le harán la vida más fácil en el diseño de páginas con CSS. Algunos le ayudarán a lograr una sola tarea de programación CSS, mientras que otros son más robustos y le ayudarán a recorrer un largo camino hacia la construcción de un sitio web completamente funcional para la pequeña empresa.
Adobe Dreamweaver CS6
Al trabajar con CSS -y, de hecho, al hacer todo tipo de diseño web- el programa de elección para muchos es Adobe Dreamweaver CS6.
Una característica particularmente útil es Fluid Grid Layouts (se muestra abajo), que es indispensable para crear varios diseños para las versiones de escritorio, tablets y móviles de un sitio al mismo tiempo. Tenga en cuenta que el tipo de documento por defecto es HTML5. Como resultado, Dreamweaver CS6 le permite crear rápidamente un sitio móvil, luego lance el diseño utilizándole marco de desarrollo móvil PhoneGap.
También hay soporte mejorado para el sistema de interfase de usuario basado en HTML5, jQuery.
Las características adicionales de Dreamweaver CS6 incluyen un panel de vista previa multipantalla, que le permite ver cómo avanza el contenido HTML5, así como la integración con la plataforma de alojamiento Web Adobe Business Catalyst, y una gama más amplia de fuentes web que puede incorporar a sus proyectos.
Adobe ofrece varios modelos de fijación de precios en función de su paquete Creative Cloud, que ofrece componentes de software para las empresas con precios desde 19,95 dólares por mes.
TopStyle 5
El editor HTML5 y CSS3, TopStyle 5, incluye varias características útiles:
* Mientras que CSS3 ofrece una amplia gama de posibilidades, no se muestran correctamente en todos los navegadores. Además, puesto que no ha alcanzado la etapa de liberación final, es necesario utilizar prefijos CSS de los proveedores, para asegurarse de que no haya conflictos entre los navegadores. Hay muchos, sin embargo, y es difícil recordarlos. Por suerte, TopStyle 5 garantiza la compatibilidad entre navegadores a través de su Prefixr, que agrega esos prefijos de los proveedores a su código.
* El marco iWebKit 5 permite crear un sitio web o aplicación compatible con el iPod Touch, iPhone e iPad.
* Image Maps permite crear "puntos calientes" en los que, al hacer clic, llevan al usuario a otra página web.
* Por último, el CSS Gradient Generator (abajo) permite crear gradientes verticales, horizontales y diagonales con CSS3, sin tener que crear imágenes. El botón Reverse invertirá el degradado de arriba a abajo, por ejemplo, a de abajo para arriba. Tenga en cuenta que puede ver el código en un cuadro de vista previa situado en la parte inferior del cuadro de diálogo.
TopStyle 5 está disponible como una descarga de un solo usuario por 79,95 dólares. Los actuales usuarios de TopStyle 4 pueden actualizarse por 29,95 dólares.
Rapid CSS Editor
El Rapid CSS Editor permite escribir código del sitio web de forma manual o utilizar un asistente. Cuando se trata de crear diseños CSS o HTML, utilizar el asistente es muy fácil, e incluye tutoriales para principiantes en CSS. Elija un tipo de letra, tamaño de fuente y color de los enlaces, a continuación, haga clic en "OK" y el código CSS se mostrará en la parte derecha.
La nueva opción Form Template, por su parte, permite elegir entre varios diseños predefinidos o crear y guardar los suyos propios. Al crear una nueva plantilla, como se verá más adelante, es fácil obtener una vista previa de los resultados.
Rapid CSS Editor está disponible por 39,95 dólares para uso general y 29,95 dólares para uso personal.
Firebug para Firefox
El complemento de edición Firebug de código abierto para Firefox permite inspeccionar el código en una página web sin realizar ningún cambio en el código. Puede experimentar haciendo girar los elementos o aportando código, por ejemplo, y luego copiar la configuración para su uso en otros proyectos. Entre otras cosas, Firebug ofrece una excelente manera de aprender el código HTML y el uso de la edición no destructiva para cambiar el estilo y el diseño de una página.
He aquí un ejemplo de captura de pantalla de Firebug en acción:
Digamos que ha construido una maqueta, pero no está satisfecho con la forma en que se ve en el navegador. Para ver lo que está pasando, haga clic en "Inspeccionar", luego mueva el mouse sobre los diferentes elementos de la página. Al hacer esto, esa sección se abrirá en Firebug y verá lo que está pasando con su código.
Las características adicionales de Firebug incluyen la capacidad de usar un depurador JavaScript y un robusto conjunto de extensiones que añaden más poder al programa.
CSS Menu 3.3
Una de las tareas que se puede comer una gran cantidad de tiempo en la construcción de un nuevo sitio es la creación de los menús. Para abordar esto, CSS Menu 3,3 permite crear navegaciones tanto horizontales como verticales.
Como las vería desde la interfase predeterminada para CSS3 Menu 3.3, todo lo que necesita está en la primera pantalla. Esto hace que el programa sea simple de usar.
En la parte superior izquierda están los controles para abrir, guardar, publicar, sumar y restar elementos del menú. Justo debajo se encuentra el menú donde se puede elegir entre crear un menú horizontal o vertical, ambos con menús laterales y múltiples niveles. Debajo de la sección del menú, encontrará las propiedades de los elementos que le permiten establecer el texto, enlace, destino y texto alternativo, así como añadir un ícono a sus elementos de menú… si lo desea.
Arriba a la derecha, por su parte, está la sección de plantillas e íconos. Las plantillas de dan opciones horizontal y verticales de los menús de construcción, mientras que la pestaña íconos ofrece varias imágenes para mostrar junto a los elementos del menú.
Por último, en la parte inferior derecha, están el tipo de letra, color, vuelo estacionario y controles de cuadro. Éstos les dan una gran flexibilidad para el estilo del menú y del texto. Por ejemplo, puede elegir hasta 15 fuentes diferentes, incluyendo diferentes tipos de letra para el menú principal y el sub menú.
CSS Menu 3.3 tiene dos modelos. Una licencia única tanto para usuarios de Windows y Mac cuesta 59 dólares, mientras que una licencia de sitio y sin límite cuesta 79 dólares.
CSS3 Button Generator
Otra tarea que consume tiempo en la construcción de un sitio web es la creación de botones. Button Generador de CSS3, basado en la web ofrece una solución, ya que permite crear botones personalizados para sus diseños. (Tenga en cuenta, sin embargo, que estos botones solo funcionan con los navegadores que soportan CSS3, de lo contrario, los botones no se pueden procesar correctamente).
El CSS3 Button Generator consta de varias secciones: Fuente/texto, caja, borde, fondo, y el código CSS. Al visitar este sitio, verá un botón en su sitio en la parte superior de la pantalla; mientras tanto, ya están habilitados varios escenarios.
Al configurar el tipo de letra, se encontrará con algunas limitaciones, ya que sus únicas opciones son Arial, Courier New y Georgia. Además, no hay ningún tipo de control como subrayado, izquierda, derecha, centro, cursiva o negrita, aunque se puede controlar la posición del texto mediante el ajuste de las propiedades del cuadro.
He aquí un ejemplo de botón con efectos ciertamente exagerados -para darle una idea de lo que este software puede hacer:
Cuando esté satisfecho con la apariencia de su botón, copie el código CSS y la configuración web del kit y utilícelos en sus diseños.
CSS3 Button Generator es gratuito, aunque puede hacerles una donación a sus creadores, el portal de CSS. La donación mínima es de 20 dólares.
Nathan Segal, CIO (EE.UU.)