Object 1

Paginas de lectura
pagina de descarga plantillas
http://blog.templatemonster.com/free-website-templates/

TUTORIAL
http://www.aulaclic.es/dreamweaver8/

http://tupale.org/crear-sitio-web-con-php-y-mysql-paso-a-paso-capitulo-1.html

sitio web dinámico,estático, saber que es php, que es una base de datos, ¿Cual es la diferencia
entre un sitio web estático y uno dinámico?
Es muy sencillo, los sitios web estáticos son aquellos que no cambian ni manejan información con
respecto al usuario o al administrador, siempre que los visitas son exactamente iguales y
su única función es mostrar una información que no se va a actualizar, por otra parte, los
sitios dinámicos son aquellos que toman información del usuarios o de otra fuente para generar
cambios en el funcionamiento y contenido del sitio. Por ejemplo el sitio web de tupale es un
ejemplo de un sitio dinámico, ya que los post o noticias o contenidos son agregados dinamicamente
a travez de un panel de administracion echo en PHP que guarda la información en una base de datos
MYSQL (si muchos diran que es un simple wordpress pero solo intento dar una idea), ademas de
ellos los usuarios pueden agregar contenido a travez de los comentarios y realizar un registro.
Una de las principales diferencias entre los sitios estáticos y dinámicos es el lenguaje
de programación con los que están echos, ya que para lograr el dinamismo del que hablamos se
necesita que el lenguaje en el que se trabaja pueda procesar datos. Voy a intentar explicarlo mejor:
Los sitios en HTML plano son sitios estaticos pues HTML por si solo no puede procesar
informacion del usuario o del servidor o de alguna otra aplicacion, HTML es un lenguaje que
simplemente sirve para crear documentos y mostrarlos en el navegador, pero es muy importante
saber HTML ademas no es muy complicado. HTML es un lenguaje que se interpreta en cliente,
quiere decir que simplemente es traducido por tu navegador o browser.
Los sitios web dinámicos por lo general echos en PHP ofrecen la interactividad de información de
la que estamos hablando, donde el sitio puede leer información de diferentes fuentes y
transformarlas en eventos. Ojo PHP no es una alternativa a HTML, ya que PHP no es un lenguaje
de marcas sino de scripting, quiere decir que lo que haces con PHP no se visualiza sino que se
interpreta, y el resultado no es un documento sino un comportamiento, una función o un evento que
produce algo con la información que se le suministra, pero no te asustes aun con
tantos tecnicismos solo es una explicación mas adelante explicaremos mejor todo esto. PHP es un
lenguaje activo en servidor, quiere decir que se procesa en el servidor de Internet en el que
alojas tus archivos y no necesariamente envía datos al cliente (navegador o browser).
¿Que es una base de datos MySQL?
MySQL por otra parte no es un lenguaje de programación sino un gestor de bases de datos,
su función es simplemente guardar información de una manera organizada y con una estructura que
facilite el acceso a dicha información, por ejemplo un sitio como este tiene una base de datos con
varias tablas, una de ellas seria por ejemplo “contenidos” y dentro de la tabla de
contenidos tendríamos campos con la información de los contenidos (ej. “titulo”, “fecha”, “autor”,
etc), de manera que todos los contenidos los puedo almacenar en una tabla y poder utilizarlos en el
momento que sea necesario. Para que te sea mas claro imaginate una tabla de MySQL como una
hoja de excel, donde los campos son las columnas (vertical) y los registros son las filas (horizontal).
Tabla MySQL
Como pueden ver en el ejemplo hay una columna para cada dato y una fila para cada registro, en
este ejemplo se ve  una tabla llamada usuarios donde tenemos listados los usuarios de un sitio web
con su nombre de usuario, password, correo electrónico y nivel de acceso ademas de otros datos.
Noten que cada registro (fila) tiene un “idusuario” este es un identificador, nos sirve para
diferenciar un usuario de otro asi que si decido ver la informacion del usuario 8 tendre el nombre
“Luis Henao”, correo “lhenaou@sofasa.com.co” y así sucesivamente.
MySQL no funciona solo, debe ser llamado por un lenguaje activo en servidor (en este caso PHP)
para poder trabajar.

¿Que es un servidor web?

Un servidor web o servidor de hosting es una maquina que alojara los archivos de tus sitios web,
cuando tecleas Google.com o cualquier otra dirección estas viendo los archivos almacenados en un
servidor web, algunas herramientas indispensables para el desarrollo de sitios web como PHP y
MySQL solo funcionan en servidores web. De ay la exprecion de lenguaje activo en cliente o en
servidor, depende de donde se ejecuta el codigo (ej. Javascript es un lenguaje activo en cliente pero
PHP es un lenguaje activo en servidor).
¿Que software necesito para crear sitio web estáticos y dinámicos?
Bueno esta parte es muy importante ya que los programas que aquí mencionamos son
fundamentales para continuar tomando el curso te creación de sitios web dinámicos con PHP y
MySQL. Aunque existen muchas alternativas a los programas que aquí voy a mencionar,
recomiendo que usen específicamente estos ya que el resto del curso hablara de estas herramientas
en especial.
• Adobe Creative Suite mejor conocida como Adobe CS3, Adobe CS4 o Adobe CS5.
Aunque finalmente este tutorial o curso se basara solamente en dos herramientas básicas del
Adobe Creative Suite: Adobe Dream Weaver y Adobe Fireworks.
Descargar Adobe CS4 Master Collection
• XAMPP
Xampp es una herramienta que crea un servidor local en tu equipo ya que el código PHP
solo puede ser ejecutado en servidor, esto lo hacemos para poder probar los sitios que
hagamos de manera local antes de subirlos a Internet. (Incluye: APACHE, PHP, MySQL,
PHPmyAdmin).
Descargar Xampp server
• NicoFTP3
Este es un simple cliente de FTP que utilizaremos cuando vallamos a publicar nuestro sitio
en Internet, es muy fácil de usar y de fácil configuración.
Descargar NicoFTP3
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
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

Ahora vamos a comenzar con la parte interesante que es el administrador de contenido y

la creación de los comportamientos dinámicos, en resumen lo que nos permitirá administrar nuestro
sitio web desde un panel de control sin tener que abrir dreamweaver cada vez que queramos hacer
un cambio. es aqui donde nace la magia de usar PHP y MySQL.
Debido a que este es un curso enfocado solo en la creación del sitio, no voy a profundizar en las
funciones PHP o en las consultas MySQL solo en las herramientas que nos da Dreamweaver para
crear un sitio de este alcance.
Entonces manos a la obra, vamos a construir nuestro sistema o panel de administración, de manera
que crearemos una carpeta nueva dentro de nuestro sitio llamada “admin” o “administrador” o como
quieran llamarle, en esta carpeta guardaran todos los archivos de su panel de administración. Te
recomiendo que por anticipado coloques estas cosas básicas en tu carpeta de administración.
Un set de iconos, te puede ser muy util puedes conseguir varios en http://www.freeiconsweb.com/
procura tener mucho iconos para cualquier acción que realices y que tenga una linea gráfica similar
para que se vean bien.
1. Un editor Wisyng, es un simple script para colocar editores HTML a tus áreas de texto asi
cuando vallas a agregar contenido desde tu administrador podras usar, negrillas, párrafos y
en fin muchos elementos que facilitaran el trabajo de quien agrega el contenido. Existen dos
editores Widyng que yo recomiendo, uno es el CKeditor que es que mas uso en mis
proyectos por su robustez y su soporte, aunque debo reconocer que TinyMCE suele ser
mucho mas eficientes en muchas ocasiones.
 CKEditor: http://ckeditor.com/demo
TinyMCE: http://tinymce.moxiecode.com/examples/full.php
2. Scripts que puedas necesitar, que te puedan ser útiles, librerías de PHP, aunque no es
obligatorio y tal vez no entiendas que son las librerías pero bueno son pequeños scripts que
en determinado momento nos pueden ahorrar trabajo, por ejemplo si voy a enviar muchos
correo electrónicos desde mi sitio podría usar la librería o clase PHPmailer. Sin embargo no
te preocupes mucho por esto, durante el curso voy a publicar los códigos que utilizo
frecuentemente para que te faciliten la vida.
3. Extensiones de Dreamweaver para ahorrar trabajo, hay muchas extensiones de
Dreamweaver que nos pueden ayudar a la hora de realizar ciertos procesos que podrían ser
un poco tediosos o complicados. Por ejemplo para paginar registros yo recomiendo el FX
Record set, que es una herramienta excelente ademas que sera muy utilizada durante este
curso así que deberían instalarla.