Muy buenas!

Maqueta Web

Cómo ya sabréis la mayoría de vosotros, trabajo de programador web desde hace ya casi un año.

Un año en el que he aprendido mucho, y en el que me he ido adaptando en función de las características técnicas y el tamaño del los proyectos que vamos haciendo.

Así que hoy me dispongo a explicaros las herramientas que usamos para diseñar una web, o una aplicación web (sin pretender hacer publicidad de nada) partiendo desde una idea:

Diseño Inicial:

Lo primero es “dibujar la idea”. Siempre partimos de una idea de proyecto, o de una propuesta de web del cliente, a partir de la cuál se hace una propuesta, y las posteriores revisiones y retoques necesarios. Para ello utilizamos:

Bloc de Notas (papel):

Si parece una broma, pero es muy importante hacerse una primera idea en papel de lo que queremos, ya que es mucho más fácil modificar directamente un papel y dibujo a mano, que uno ya plasmado en ordenador.

Addobe Illustrator:

Logo Photoshop Illustrator

Esta es una aplicación de dibujo vectorial muy potente. Personalmente la he usado poco ya que me dedico más a la maquetación web final (en html o el lenguaje que sea), que al diseño en sí, pero es bastante sencilla de usar para lo básico, y después ofrece mil combinaciones diferentes para mover, escalar, separar y modificar objetos de tipo imagen, texto y demás.

Se puede desde crear una tipografía nueva, crear iconos y para los que tienen más mano y creatividad, dibujar lo que sea. Una opción muy útil es que permite modificar pdf’s directamente.

Addobe Photoshop o Gimp:

Programas de edición de imágen. Una vez tenemos el diseño en Illustrator (o freehand o lo que sea) se recortan los objetos, y se pasan a photoshop para acabar de asignar formato y si hace falta ajustar medidas y retocar levemente los objetos necesarios para nuestra web.


Maquetación Web:

Una vez tenemos el diseño inicial y el dibujo separado en partes, pasamos a la fase de maquetación web, en la que se crean las reglas, los contenedores y las partes necesarias para que la web sea igual (o lo más parecida posible) al diseño de Illustrator. Para esta parte usamos:

CodeLobster:

Editor HTML, CSS, PhP y con soporte para muchos frameworks (plataformas de desarrollo web) . Se usa para crear el código base de la página web. Primero se crean los elmenetos HTML y se asignan las diferentes clases o identificadores a cada elemento para poder referenciarlos y modificarlos posteriormente en los archivos de estilo o CSS.

Code Lobster Logo

Este software proporciona muchas herramientas para la creación web, con una Intelligence (sistema de ayuda a la programación)  muy potente para casi cualquier sistema de creación web.Muy recomendable tanto para editar archivos como para crear desde cero una web.

Navegador Web:

Una vez tenemos una primera aproximación del código de la web, se tiene que visualizar de alguna manera, para ello se usa el navegador web que a cada uno le guste, yo uso el Mozilla Firefox, el Google Chrome y el Internet Explorer 7, porqué son los más usados básicamente.

De los 3 el que más uso es el Firefox y le añado plugins de diseño web que ayudan mucho para acabar de maquetar la web. Los que más uso son:

– Firebug: Permite seleccionar y modificar al vuelo elementos de la web. Una vez instalado nos aparece un botón en la barra superior o inferior del navegador, que al pulsarlo nos abre una ventana con toda la información de la web. Esta divida en 2 partes a la derecha el codigo del CSS y en la izquierda el código HTML. A parte tiene una pequeña herramienta que nos ayuda a seleccionar elementos dentro de la web que se llama “Inspeccionar”. Descargar (click aquí)

– Web Developer Toolbar: Añade funciones tales como medidas, información y posición de elementos en la web. Validación W3C (estándar web), validación CSS etc… No he usado ni el 20% de las funciones que trae, así que imaginad lo que se puede hacer.  Descargar (click aquí)

– ColorZilla: Permite seleccionar el color de cualquier elemento de una web, o que este dentro del navegador. Muy útil para buscar qué tiene un botón, o seleccionar colores dentro de una web. Descargar (click aquí)

ColorZilla

A parte de estas herramientas para el Diseño Inicial y para la Maquetación Web, hay cientos más, supongo que cada uno usa las que más le gustan, o las que le han enseñado, pero yo he ido cambiando hasta conseguir las que más se adaptan a mis necesidades.
Si vosotros usais alguna más, o quereis infromación más detallada sobre alguna de ellas, o me quereis recomendar o pedir recomendación sobre algun otro software, adelante! Los comentarios estan para eso!

 

Espero que os haya gustado el articulo de hoy, y gracias por leerlo!

Saludos

Kristian Muñoz Muñoz
Programador Web



8 Comments

  1. Funo Says Responder

    Bon post Kristian!
    No coneixia el codeLobster, però he vist que hi ha llibreries de codeIgniter, joomla, wordpress, etc… llastima que nomès sigui per Windows!!!
    Com a extensions del Firefox has de catar HackBar (per fer proves amb POST i GET entre d’altres coses) i el SeoQuake (per controlar coses de les webs com page rank, nº d’enllaços, densitat de paraules, etc…).
    Felicitar-te per la iniciativa de fer una web/blog personal per parlar d’aquestes coses, a veure si per fi algun dia m’hi poso i munto algo tb 😉

    • Kristian Muñoz Muñoz
      retek2005 Says Responder

      Merci per les felicitacions i tals Funo! 🙂

      Sobre els pluggins que dius, els hi faré un cop d’ull, per el tema del seo, page rank etc faig servir un altre que no recordo el nom ara…
      Pero el tema del HackBar esta prou interessant.

      A veure si quedem un dia… que aquestes coses son les que hem de compartir jeje

      Salut maco, i espero que segueixis llegint-me!

  2. Jamie Arjona Says Responder

    Firebug es un PEDAZO de plugin buenísimo. No solamente te permite modificar css o html al vuelo, si no que puedes ver webs de otras personas y mirar su código html, css y javascript y de esta manera aprender nuevas formas de utilización de estos lenguajes.

    Gran entrada, juntada a las anteriores (wordpress y seo), macho, ¡estas hecho un máquina!

    • Kristian Muñoz Muñoz
      retek2005 Says Responder

      Gracias Jamie!
      La verdad que es un subidón de ego que me feliciteis por el blog jejeje

      Firebug es esencial si programas webs.. Igual que tener un navegador ecente jejeje

      Saludoos!!

  3. Oscar Says Responder

    Pues webdeveloper para firefox, lo uso para fallos en JS o CSS y luego algo que ya esta implementado en chrome y firefox (no se en los demas) que es boton derecho -> inspeccionar elemento, NECESARIO xD

    probaré

  4. Detectando Errores en nuestra web y validando el HTML + CSS | Cristian Muñoz Muñoz Says Responder

    […] mejorar el funcionamiento de una página web, o para retocar. En el articulo de hace dos semanas, Kit de programación web ,hablé de algunas de las herramientas que hoy también trataré pero en más […]

  5. Kehos Says Responder

    Prenc nota, Cristian. Molt bona! 😉

    • Kristian Muñoz Muñoz
      Cristian Muñoz Muñoz Says Responder

      Hola Pau!
      He visto que trabajas de programador web ahora no?
      Que tal te va? He visto que estas en PuntCentric! Los conozco, he visto la web y la he visitado varias veces jeje
      Con que sistema esta programada, directamente con algún framework o tiene alguna base rollo e-commerce?
      La idea esta muy bien! Ánimo 🙂

Dejar un comentrario:

¿Eres humano? * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.