Tupale

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

Antes de comenzar este nuevo capitulo del curso tengo que dar gracias por la acogida que tubo el capitulo 1, recibí muchos comentarios y correos sobre el post que hacen valer el trabajo de sentarme aquí a darles el conocimiento que tengo.

Esperando que ya hallan estudiado un poco sobre los temas del capitulo 1 (Crear sitio web con PHP y MySQL paso a paso capitulo 1) vamos a entrar en materia, y aunque se que están animados para empezar a programar sus sitios con PHP y MySQL este capitulo lo dedicare a explicar una cosa que me hubiera sido muy útil cuando empece en esto. La planificación del sitio web. Ya que considero que el 80% del tiempo de un desarrollo y la mayoría de inconvenientes y errores que se presentan se deben a una mala planificación del proyecto.

Participa de este curso en Campuzoide gratis!!

Marco lógico o teórico del proyecto

Primero abarquemos el marco teórico lógico, que es simplemente analizar el tipo de sitio que vamos a desarrollar, el objetivo, quien es nuestro publico, que pretendemos hacer con el, etc. Pero como este es un curso paso a paso, no me limitare a decirlo sino que pondré un ejemplo con un proyecto real en el cual ahora me encuentro trabajando.

Mi proyecto es un sitio web sobre el Visual Rock 2010 (Festival Colombiano de rock), de manera que  buscare hacer uso de la multi-media, audio y vídeos ya que hay que promocionar bandas, entonces quiero las siguientes secciones de contenido:

  • Sección de vídeos y cada vídeo tendrá la siguiente información: Nombre del vídeo, descripción del vídeo, artista, archivo de vídeo, genero, imagen miniatura, fecha de publicación y puntuación.
  • Sección de Fotos y cada foto tendrá: Nombre de la foto, archivo de imagen, miniatura, fecha de publicación y puntuación.
  • Sección de noticias y cada noticia tendrá: Titulo de la noticia, contenido de la noticia, imagen de la noticia,  fecha de publicación y puntuación.
  • Sección de eventos y cada evento tendrá: Nombre del evento, fecha de realización, lugar del evento, descripción del evento y puntuación.

No se si lo han notado pero este simple proceso automáticamente nos dice cual es la estructura de la base de datos, que mas adelante explicare como crear.

La importancia de este proceso radica en saber por anticipado todo lo que vamos a necesitar y hacer cada modulo pensando en el siguiente. Imaginemos que creamos el sitio y a la mitad del desarrollo decidimos agregar una imagen miniatura en los vídeos, si no lo planeamos con anticipación podría generar varios problemas.

Ahora sobre el comportamiento del usuario en el sitio y los servicios que este debería ofrecerle.

Es un sitio joven y pretende mantener informado al publico así que los enganchare con un sistema de registro de usuarios, y como estarán registrados me proporcionaran sus datos para crear un sistema que envié un boletín publicitario constantemente.

Por el mismo punto anterior se que la mayoría usa redes sociales así que agregare herramientas para compartir los contenidos (Noticias, fotos, vídeos y eventos) a través de las principales redes sociales.

Maqueta básica (borrador)

También considero muy importante esta parte, y es igualmente importante que se haga en una hoja de papel y preferiblemente con lápiz en lugar de bolígrafo. Aquí es donde definirán como estará organizado el sitio y como van a distribuir los bloques dentro de la pagina. La importancia de hacerlo a lápiz radica en que cuando hacemos la parte creativa detrás de un ordenador nos sometemos a las herramientas que nos brinda y no exploramos mas posibilidades, en pocas palabras terminamos haciendo lo que el ordenador nos entrega y no lo que nosotros queremos (Créanme a mi me pasa todo el tiempo).

Maqueta basica

Maqueta basica

Des esta manera podemos hacernos una idea clara de como va a estar construido nuestro proyecto y nuestra labor sera mas sencilla, ya no volveremos a preocuparnos por decisiones de objetos o sobre el que colocar y que no, y nos dedicaremos solamente a conseguir el sitio tal cual lo ideamos en la planificación.

Recolección de contenido

Ojo, en la mayoría de los sitios debes considerar la diagramación del sitio a partir del contenido, por ejemplo en mi caso, ya que mi sitio sera de música y bandas de rock, necesito los vídeos y debo crear el plano básico del sitio web basado en esa necesidad, ademas de determinar la cantidad de material a mostrar  para definir como se organizara.

Si tu sitio va a tener un solo vídeo, puedes incluirlo en alguna parte del diseño o si va a tener solo algunos (5 o 10 vídeos) puedes crear un bloque en el diseño donde los listes, pero si esperas tener muchos vídeos probablemente tendrás que idear una estructura con buscador y separación por categorías o algún tipo de filtro para que los usuarios puedan acceder fácilmente a cualquier vídeo.

Por lo tanto recuerda el diseño del sitio web o la maqueta básica debe trabajar en función del contenido del sitio.

Mira a tu competencia, directa o platónica.

Una de las maneras mas sencillas de ver que seria lo mas util para nuestro proyecto es ver la competencia o los sitios que manejan el mismo tema o la misma corriente, para mi caso personal (Visual Rock) miro muy bien sitios como http://www.rockalparque.gov.co/ o http://www.bogotaciudadrock.com/cmsbcr/ y aqui veo que es lo que mas le conviene a mi sitio web.

Los buenos artistas copian, los grandes artistas roban. Pablo R. Picasso

También consulta galerías de sitios web donde puede “copiar” muy buenas ideas para tu proyecto, como botones, estructuras, diseños, herramientas, modos de navegación, etc. Mi recomendado para esto es http://www.cssmania.com/ pero existen muchas alternativas.

Y eso fue todo por hoy, aunque algunos les parezca que este curso va mas lento que una carrera de caracoles paralíticos, pues esa es la idea, paso a paso, analizar cada aspecto posible del desarrollo del sitio de una manera masticable para cualquier usuario. Hasta la próxima.

32 comments for “Crear sitio web con PHP y MySQL paso a paso capitulo 2

  1. cio socrat
    19 septiembre, 2010 at 2:39 AM

    saludos tio, curioso tu sitio, lento pero sin pausa, o al menos más continuo porfavor, animo publica a diario o señala fuentes o recursos, gracias

    • 20 septiembre, 2010 at 5:46 PM

      JEJEJE que mas quisiera yo que poder entregar material a diario, sin embargo el trabajo y las obligaciones me lo impiden, pero voy a hacer un esfuerzo por entregar mas material e información en menor tiempo, gracias por el comentario.

  2. pablo
    13 noviembre, 2010 at 6:05 PM

    es lo mejor que valla avanzando de a poco, con esto cada paso queda entendido. y resultara mas sencillo realizar después la web con todo planificado.
    muy bueno tu trabajo segui asi

  3. ronald
    22 noviembre, 2010 at 7:42 PM

    hola brother de verdad es lo mejor que he encontrado y me esta sacando de muchas dudas, de verdad gracias y me gusto eso de “Los buenos artistas copian, los grandes artistas roban”. tienes razon almenos que seas un picaso o un da vinci o un super creativo mejor no te compliques la vida.. y copia algo que te ayude en tus proyecto asi de sencillo ….ah y gracias nuevamente….=)

  4. jalido
    15 diciembre, 2010 at 9:23 AM

    Hola,

    Pues la verdad es que me alegro de haber encontrado este “tuto” y te doi las gracias por haberlo creado.

    Recien nacido en esto de la creación de páginas web, ya que por el momento no sé casi nada sobre esto; pero gracias a ti espero aprender y crear mi propia página.

    Espero que si tengo algunas dudas (seguro que las tendré), me puedas responder XD

    Saludos al webmaster y gracias nuevamente 😉

    • 15 diciembre, 2010 at 3:37 PM

      Claro que si amigo, todas las dudas que se generen a través del curso pueden preguntármelas y yo ayudare a solucionarlas. xD

  5. lenny
    28 enero, 2011 at 12:33 PM

    me encanta como te explicas , soy afisionada y no tenia ni idea de como empezar por falta de explicacion , pero con este tutorial he avanzado bastante gracias eres un crack.

  6. ramon
    20 junio, 2011 at 6:02 PM

    Llevo un par de horas navegado en busca de este tipo de información; cuando ya estaba por cerrar el boliche y tomar un libro… me encuentro con este trabajo tan acabado.
    No necesito decir mucho más, es notorio el conocimiento que manejas en la materia. Continuaré leyendo. (además es ameno leer tus observaciones y opiniones, junto a las citas)
    Muy bueno!!!

  7. unknown
    4 agosto, 2011 at 5:11 PM

    es un sitio estupendo, gracias….y muy bueno lo de los caracoles paralíticos 😉

    • 8 agosto, 2011 at 8:11 PM

      Gracias, dentro de poco comenzaremos otro curso, gracias por tu opinión y espero que nos sigas. xD

  8. yo
    15 agosto, 2011 at 6:07 PM

    maldito troll, mas cuidado con sus comentarios,,, maldito envidioso

  9. Nancy
    18 agosto, 2011 at 1:00 AM

    hola,
    sigo tu curso, pero no pude descargar el cs4, tienes alguna pagina donde pueda conseguirlo?
    gracias por el aporte, me esta ayudando mucho!!!
    😀

  10. carlos
    26 agosto, 2011 at 7:03 PM

    compadre, explica de forma excelente. De esta forma es que se realizan los proyectos, primero hay que planificar las cosas que el mismo proyecto va a ir dando, mas soluciones.

    no estoy de acuerdo con desarrollar enseguida, por mas facil que sea. Cuando se planifica, podemos ver “errores” (si tenemos), tenemos la capacidad de buscar en la red ideas similares (pueden haber mejores que las que pensamos), etc…

    felicitaciones!!!

  11. Fary
    23 noviembre, 2011 at 2:17 PM

    Hola: Tu post de paso a paso, me está sirviendo de mucho… pues debo crear un sitio web dinamico usando php en linux… y por fin consegui algo que puedo entender..
    espero poder comunicarme contigo directamente, si acaso tengo alguna duda durante la creacion de la web dinamica…un abrazo desde Venezuela…

    • 23 noviembre, 2011 at 3:55 PM

      Hola amigo, gracias por los comentarios, cualquier duda que tengas durante el curso puedes formularla en el foro y con gusto te ayudare. xD

  12. IZOFER
    7 febrero, 2012 at 4:40 AM

    gracias parcero, muy bueno!!! lento pero seguro, y fluido!

  13. 20 octubre, 2012 at 7:42 AM

    excelente material …sigue asi felicidades ……

  14. I$B3L!
    20 octubre, 2012 at 12:38 PM

    esta super ….

  15. arqueopterix
    18 diciembre, 2012 at 11:15 AM

    Fabuloso amigo!!!!!!!!, bien así, paso a paso es lo que necesito y buscaba… no lo podrías haber hecho mejor!! animo, sigue adelante!!!!!!! gracias por compartir tus conocimientos y enseñarnos, que dios te bendiga!!!!!! =D

  16. Leonel
    6 junio, 2013 at 2:35 AM

    Da gusto leer esto

  17. clarita aw
    15 abril, 2014 at 3:10 PM

    fantástico muchas gracias…

  18. 20 junio, 2014 at 1:44 PM

    Excelente trabajo! Gracias por el tiempo dedicado!

  19. Nadia
    21 julio, 2015 at 6:26 AM

    A MÍ, CREO QUE ME VAS A SALVAR EL PELLEJO..

  20. gio
    21 septiembre, 2017 at 1:31 AM

    ¡¡¡exelente!!!

  21. rene hernandez
    3 noviembre, 2017 at 5:23 PM

    Pues a 7 años de este curso… vamos por buen inicio espero pueda serme útil, ya que soy muy cabezón jaja..

  22. jesus berrio
    22 noviembre, 2017 at 9:58 PM

    Gracias por este curso, no es por que sea un erudito en esto de php y mysql, sino que solo hago una preguna, no sin antes agraderte tu aporte, que para mi es muy valioso, la pregunta es ya has colocado mas capitulos a este curso,? pues pienso que tutiempo y conocimientos son muy valiosos y seria un pesar que no nos des mas, o con esto es suficiente. gracias y disculpa la ansiedad y la pregunta. recibe un saludo de verdad y un abrazo. Jesus berrio

    • 24 noviembre, 2017 at 12:40 PM

      Hola amigo, estoy trabajando duro para poder publicar proximamente un curso mas detallado de desarrollo en PHP, a decir verdad este curso ya un poco viejo, se podría mejorar bastante.

Deja un comentario

A %d blogueros les gusta esto: