comparte el articulo 

Herramientas para un desarrollo web más sencillo (Parte II)

Actualizado el 10/10/2013 < > 0 Comentarios

En la anterior entrega de esta serie de artículos, hablábamos de la variedad de herramientas que existen actualmente en Internet enfocadas específicamente al manejo del navegador web como elemento para aprender y mejorar la programación web, es decir educarse mientras navegamos. Mencionamos y explicamos instrumentos básicos como firebug y la web developer toolbar que al incluirse como auxiliares en un navegador nos permitirán ir conociendo mejor la estructura de páginas web completas.

En esta segunda parte de la serie trataré de desglosar y explicar de la mejor manera un conjunto de herramientas pertenecientes al diseño y comúnmente utilizadas en el ambiente de las hojas de estilo, conocidas por las siglas CSS, siglas también relacionadas con el lenguaje utilizado para crearlas y editarlas.

Lejos de adentrarnos en los frameworks para CSS como Blueprint y 960 Grid System, de los cuáles ya hablamos en otro artículo, esta vez nos enfocaremos en sacar a la luz y promover el uso de auxiliares sencillos, que sin mucha necesidad de aprendizaje extra nos permitirán agilizar nuestro desarrollo enfocado al diseño web con hojas de estilo. Esto permitirá tener páginas más limpias y ligeras, lo que en última instancia nos permitirá ahorrar en hosting, entre otras cosas.

Vale aclarar que lo expuesto en este artículo es un complemento para el desarrollo, no es el desarrollo mismo. Las recomendaciones y enseñanzas que realizo en este artículo son para que el lector pueda hacer uso de estos auxiliares en su beneficio, no se trata de crear desarrolladores Express o de carácter flojo, es claro que nadie nace sabiendo y ninguna herramienta ni instrumento auxiliar superará el hecho de estudiar, conocer y manejar un lenguaje en toda su extensión.

Herramientas CSS para el desarrollo web

En el caso de CSS las posibilidades de acciones y diseños a realizar con él son muchísimas, más en la actualidad que estamos a punto de emigrar completamente al uso del esperado CSS3, es claro que ninguna herramienta para agilizar va a sustituir el conocimiento, ingenio y alternativas que un programador especializado en el tema pueda llegar a tener.

Lo que se busca con estas herramientas es ofrecer una clase de automatismo para aquellas tareas  que resulten ser algo tediosas en CSS y que nos pueden causar más de un dolor de cabeza. Si logramos simplificar o eliminar dichas tareas de nuestro itinerario de desarrollo, podremos enfocarnos más en otras actividades que requieran más atención o especialización.

Entre las actividades más comunes a realizar, las que usualmente nos llevan a consumir un tiempo considerable en su desarrollo e implementación, tenemos la maquetación del sitio, estructuración de grids o rejillas, los menús dinámicos y su comportamiento en el DOM (tema ya abordado en otro artículo), diseño de botones, tablas y formularios.

Todo esto es necesario para lograr tener un cascarón adecuado en nuestro sitio, su presentación y buena estructuración puede influir tanto para crear un gusto en los clientes como para facilitar la programación  front-backend, y todo esto se puede realizar rápidamente con esta clase de herramientas.

En primer lugar tenemos las llamadas páginas de construcción,  ¿En qué consisten? Básicamente son un conjunto de sitios donde nosotros podemos crear un layout CSS basado en divs, tomando la forma de estructuras básicas que se han venido utilizando como estándar en muchos sitios para crear esqueletos; como el clásico layout compuesto por un header, un div content de dos o tres columnas y un footer, esto nos ayudará a tener un punto donde arrancar para poder ir formando nuestro sitio. Para ver un ejemplo de esta clase de páginas podemos acceder a http://layouts.ironmyers.com/ donde se expone una galería con layouts donde podemos escoger el que mejor se adapte a lo que queremos exponer en nuestra página.

El usar layouts con estructuras comunes en CSS, no necesariamente implica que vamos a descargar y usar un template, eso es un tema totalmente distinto. En el caso del layout es simplemente la obra negra, nosotros decoraremos y le daremos estilo a todo lo demás. Hay personas que les parece adecuado el uso de templates, en mi caso creo que limitan mucho en el aspecto artístico y de originalidad, aunque si ya estamos cortos en este tema pues un template resulta ser una buena opción.

Hasta el momento, en las anteriores herramientas, hemos estado hablando de campos divs como parte fundamental de los layouts, pero también podemos recurrir a las anticuadas tablas en el caso de que la exposición de ciertos datos lo amerite. Si necesitamos crear una tabla de manera rápida con un estilo aplicado podemos recurrir a herramientas como la siguiente http://www.webmastercorey.com/apps/table-gen/index.php, en la cual obtendremos un código HTML para incluir la tabla y un código CSS con el estilo de dicho elemento, hay que recordar que el uso de tablas se debe limitar a exposición de datos y no utilizar todo un layout basado en tablas.

Un sitio muy completo que nos ayuda a realizar layouts y templates propios es http://www.cssez.com/design.php, este sitio nos permite ir observando en tiempo real los resultados al modificar ciertos aspectos de nuestra hoja de estilo. Podemos descargar dicha estructura e integrarla a nuestro proyecto, así como modificarla y adaptarla a la información y media de nuestro sitio mediante un editor.

Por otro lado tenemos el uso de grids o rejillas para crear una estructura aún más específica, las rejillas son elementos utilizados para colocar información o media de manera precisa, mediante páginas como http://gridinator.com/ y http://grid.mindplay.dk podemos crear rejillas indicando el número de columnas, anchura, márgenes, padding, si no estamos muy relacionados con el uso de grids puedes leer el siguiente artículo http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1 donde se explica de forma concisa los cinco primeros pasos principales para diseñar un sistema basado en grids.

Si lo que más te molesta es realizar Menús para tu blog, existen miles de opciones para realizarlos de manera adecuada, ya que como mencionamos en otro artículo un menú es fundamental para que el cliente pueda navegar de manera correcta a través de nuestro sitio. Existen varias alternativas para realizarlos, pero en este caso nos enfocaremos en CSS, debido a su facilidad de uso y adaptabilidad a los estándares.

Desde el auge del Internet existen páginas con promociones web que nos ayudan a realizar menús, es fundamental tener claro lo que queremos como resultado para poder escoger el sitio que nos ofrezca la mejor solución. En mi caso recomiendo el siguiente sitio http://www.cssmenumaker.com/ ya que es fácil de utilizar, sencillo y adaptable.

Finalmente tenemos el caso de los formularios, los cuales generalmente tienden a ser tediosos de realizar y su diseño puede variar de un navegador a otro. Es recomendable aplicarle un estilo CSS a cada campo del formulario para crear cierta estandarización, y este luzca de manera similar en cualquier navegador.

Si lo que buscamos es crear forms de manera rápida y sencilla podemos recurrir a sitios como http://www.phpform.org/ que nos darán la estructura de un formulario con un css sencillo como base. Si además de esto buscamos editar el CSS en tiempo real desde el sitio, la alternativa adecuada es http://www.accessify.com/tools-and-wizards/accessibility-tools/quick-form-builder/.

Así como estos sitios existen muchísimos otros que nos ayudarán al momento de empezar a estructurar nuestras vistas, si manejamos algún CMS como Joomla o WordPress existen gran variedad de páginas que ofrecen templates gratuitos y de paga, todo depende del enfoque que le queramos dar a nuestro sitio.

Desde un menú hasta un layout basado en grids, todo puede realizarse de manera sencilla con estas herramientas, las cuales al ser en su mayoría gratuitas nos van a permitir ahorrar tanto dinero como tiempo, es cuestión de saber en que actividades invertir su uso.

Recomendado: Leer primera parte de herramientas para un desarrollo web má sencillo.

Publicado el 15/04/2010, última actualización 10/10/2013.

Licencia: Eres libre de distribuir este artículo siempre que mantengas los enlaces dentro del mismo intactos y des los créditos al autor.

Autor: Verónica Milán

URL: Front end

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras