Tupale

Crear sitio web con PHP y MySQL paso a paso capitulo 5

Buen día amigos de Tupale, comenzamos aquí otro capitulo mas de curso para Crear sitios web con PHP y MySQL paso a paso y como es habitual debo comenzar agradeciendo a todos los que retwitearon y compartieron el capitulo anterior en redes sociales, ademas de dar un especial agradecimiento a los usuarios que dejaron sus comentarios a través del sitio.

Recuerda que ahora puedes tomar este curso en Campuzoide con mas herramientas y contenidos gratis.
Crear sitio web con PHP y MySQL paso a paso

Y como es costumbre tambien aqui les dejo los enlaces a los otros capitulos del curso:

  1. Crear sitio web con PHP y MySQL paso a paso capitulo 1
  2. Crear sitio web con PHP y MySQL paso a paso capitulo 2
  3. Crear sitio web con PHP y MySQL paso a paso capitulo 3
  4. Crear sitio web con PHP y MySQL paso a paso capitulo 4

Este capitulo lo dedicaremos a la parte del diseño, la cual también va a ser paso a paso y en la que enseñare algunas costumbre que no pondrán muy felices a los diseñadores pero todo en pro de ser eficiente y lograr un producto web de alta calidad en poco tiempo. Si eres diseñador hardcore y solo te interesa este curso por la parte de PHP y MySQL puedes saltarte este capitulo, el cual solo va orientado a diseñar la plantilla.

Bueno para comenzar debo remontarme a otro capitulo de este curso donde publique la maqueta que esta a continuación y les decía que es muy importante diseñar primero en papel el sitio que queremos tener, aunque nunca va a llegar igual a la pantalla pero es bueno hacerse a la idea de que se quiere.

Maqueta basica

Maqueta basica

Una vez que tenemos esto dibujado en papel abrimos nuestro Fireworks y comenzamos a trabajar. Si nunca en tu vida has usado Fireworks, pues no croe que haya un buen curso de como hacerlo, es mas bien un juego de experimentación. debes jugar mucho con las herramientas y aprender a utilizarlas, no es muy dificil, algunos dicen que Fireworks es como un power point con esteroides.

Bueno ahora comencemos con las malas costumbres de las que yo hablaba que no son muy bien vistas desde el campo del diseño pero de seguro ahorraran mucho trabajo. La primera de ella se basa en una frase de Pablo Piccaso:

Los buenos artistas copian, los grandes artistas roban.

Es por eso que a la hora de diseñar siempre acostumbro buscar material interesante para usar algunos elementos, aquí les dejo un listado de sitios de donde pueden sacar muy buenas ideas, aunque la recomendación principal es navegar mucho para conocer muchos sitios web con muchos estilos diferentes.

Una forma fácil de utilizar estos sitios es con la tecla imprimir pantalla, lo que normalmente hago es buscar un diseño con una arquitectura acorde a la que necesito y luego imprimir pantalla, llevo la imagen a Fireworks y comienzo a trabajar sobre la imagen de pantalla que acabo de sacar.

Como copiar plantillas fireworks

Como copiar plantillas fireworks

Espero que esta imagen ejemplifique mas cual es el proceso para copiar el estilo de un sitio con Fireworks. xD

Iconos gratis para web

Iconos gratis para web

De echo ahora que lo pienso bien la mayor parte del diseño y desarrollo de sitios consiste en la búsqueda de herramientas y recursos que nos sean útiles. Otro ejemplo de esto son los iconos, que le dan mucha vida a nuestro sitio web, y tambien hay muchos sitios que ofrecen sets de iconos gratis para que uses como este (Free Web icons). es importante mantener la unidad gráfica en los iconos para que la pagina sea fácil de navegar, si los iconos no coinciden van a tener muchos problemas de navegación.

De la misma manera pueden hacer con las fotografías, para ahorrar tiempo y dinero pueden usar bancos de imágenes y buscar el material necesario para su proyecto web, una de las paginas que mas recomiendo es SXC que es un banco de imágenes muy grande con la ventaja de ser gratuito.

Bueno para ayudar a los son novatos en Fireworks (yo también lo fui) aquí les dejo un vídeo tutorial que enseña lo mas básico y útil.

Aclaración, estos vídeo tutoriales también hablan de un modo de exportación de imágenes que no es recomendado, sin embargo pueden utilizarlo, finalmente cada persona termina diseñando y exportando pero no recomiendo el método que se emplea en este vídeo tutorial, solo los publico para que conozcan mas de Fireworks.

Consejos importantes antes de continuar:

  1. El ancho máximo de tu área de contenido no debe pasar los 1000 pixeles pues asumiremos que el sitio esta echo para usuarios estándar con pantallas de 1024*768px de resolución.
  2. Mantén separadas las secciones como el header (cabecera), el sidebar (menu lateral), el body (cuerpo de pagina) y el footer (pie de pagina) para evitar problemas a la hora de pasarlo a Dreamweaver.
  3. Si eres nuevo en maquetación de sitio procura usar áreas cuadradas para ahorrar trabajo y dolores de cabeza en el montaje.
  4. Trabaja con una resolución superior a 100 pero inferior a 200 así mantendrás tus archivos con buena calidad pero con un peso optimo.
  5. Para exportar las imágenes te recomiendo hacerlo en PNG 32 o JPG con calidad de 75, es optimo para web.
  6. Cualquier pregunta que tengas puedes hacerla en el foro de webmasters.

Otra forma fácil de ahorrar tiempo en este paso del desarrollo del sitio y que es muy buena cuando te interesa mas la programación que la apariencia o no tienes el tiempo para diseñar un buen template es usar un template gratis. En free web templates puedes encontrar muchos que te pueden interesar, de esta manera solo debes cambiar las imágenes y retocar algunos detalles para tener lista la apariencia de tu sitio.

Ahora pasar el contenido de Fireworks a Dreamweaver.

Imaginemos que ya tenemos listo el diseño en Fireworks, como consejo personal también recomiendo que guarden los PNGs de Fireworks en una carpeta para cuando necesiten hacer modificaciones sobre el diseño, pueden hacerlo dentro de la misma carpeta del sitio que ya hemos creado previamente en el capitulo 3 de este curso.

Archivo PNG Visual Rock

Archivo PNG Visual Rock

Consejos para hacer mas fácil la exportación de las imágenes:

  1. Las áreas que son fondos repetitivos puedes exportarlas en pequeñas piezas y desde CSS las pondrás a repetir.
  2. No exportes los textos, estos debes agregarlos desde dreamweaver.
  3. Separa muy bien las imágenes que serán parte del contenido de las que serán parte del diseño, por ejemplo en la plantilla que estoy trabajando el fondo es parte del diseño pero la imagen que dice “visual rock 09” es parte del contenido así que no las combino en una sola imagen.
  4. Los nombres de los archivos que exportes guárdalos en minúsculas y sin espacios o caracteres extraños para evitarte problema con las rutas.

Aqui les dejo un ejemplo de todas las imágenes que componen mi template (visual rock) para que se hagan una idea de como se exportan.

Descargar: imagesvisualrock

Ya que este capitulo se esta tornando demasiado largo cortare aqui por hoy pero prometo que mañana publicare una segunda parte explicando el proceso de construcción de la pagina en dreamweaver con las imágenes que obtuvimos a través de este capitulo.

14 comments for “Crear sitio web con PHP y MySQL paso a paso capitulo 5

  1. elprofe_ra_2000
    2 noviembre, 2010 at 7:18 PM

    Gracias por este excelente tutorial y espero anciosamente el capitulo 6 ya que cada capitulo se pone aun mas interesante que el anterior.

  2. 3 noviembre, 2010 at 8:41 PM

    Amigo…me parace extraordinario el trabjo que haces……..son pocas la personas qe dedican tiempo a un buen tuto…..y lo mejor con la finalidad de compartir….
    exelente…
    demasiado de bueno…
    saludo2…

  3. 4 noviembre, 2010 at 11:44 PM

    y el capitulo 6?, que ancioso XD

  4. pablo
    14 noviembre, 2010 at 6:33 AM

    jaja sos un maestro como fuiste cambiando la idea que robaste esta muy bueno muy ingeniosa tu idea xD

  5. pablo
    14 noviembre, 2010 at 6:52 AM

    sabes que forma es buena tambn…le das a F11 cuando tenes la pantalla completa apretas imprimir pantalla entonces solamente sacas la imagen de la plantilla espero que a alguien le sirva esto 🙂

  6. 18 enero, 2011 at 6:28 PM

    Hice una impresion de lpantalla pero mi pregunta es como hacer una de la pantalla completa ya que me sale la pantalla a mitad y no completa. Gracias.

  7. Gabriel
    21 febrero, 2011 at 3:30 PM

    AWESOME..!!

  8. loladovana
    8 junio, 2011 at 10:58 PM

    Madre mia!!! que descubrimiento el fireworks y yo mirandolo con desidia sin saber por donde agarrarlo….gracias!!!

Deja un comentario

A %d blogueros les gusta esto: