Search

Diseño Web HTML5 CSS3 Javascript

Diseño Web – Amit Kvint

Category

DreamWeaver

Base de datos & DreamWeaver

En esta entrada voy a explicar de como conectamos una web que hemos creado con dreamweaver a una base de datos que tenemos creado en un servidor remoto. Tenemos una web HTML & CSS creada con dreamweaver hemos hecho nuestras plantillas, hemos usado comportamientos (javascript) y todo nos funciona bien, pero llega el momento (y llega bastante rapido) que nos falta el poder de un base de datos para añadir funcionalidad a nuestro sitio web.

Con dreamweaver podemos conectar a diferentes tipos de bases de datos, aquí vamos a trabajar con MySQL con PHP –

  1. Primero tenemos que tener una web alojada en hosting remoto con PHP & MySQL. Entramos a nuestro panel de control de base de datos usando phpMyAdmin, aquí hay que crear un nuevo base de datos, darlo un nombre & crear, ahora podemos o crear o importar las tablas o tabla de nuestro base de datos. Ahora  a la izquierda en la lista de los bases de datos aparece nuestro base de datos & si lo seleccionamos vemos nuestra información en las tablas.
  2. Ahora teniendo el base de datos hecho vamos a configurar el dreamweaver para vincularlo con el programa, entramos en el administrador de los sitios web & en servidor de prueba seleccionamos Php & MySQL y ahora en acceso seleccionamos FTP & ponemos los datos del servidor FTP, abajo de todo en la dirección del sitio web tenemos que cambiar lo que aparece & insertar la direccion correcta de nuestra web asi – http://www.miweb.com.
  3. Es tiempo de crear un recordset – o sea empezar a trabajar dentro de dreamweaver con el panel de aplicaciones para añadir conexiones para base de datos – abrimos el panel de aplicaciones, abrimos un archivo web – debe de ser un archivo PHP (miarchivo.php), en la pestaña de bases de datos pinchamos en el boton del mas arriba a la izquierda & vamos a tener que rellenar los datos de conexion al base de datos, tal y como lo tenemos en el phpMyAdmin – nombre de conexion (creamos uno), servidor MySQL, nombre de usuario, contraseña & si tenemos todo bien definido vamos a poder seleccionar ahora las tablas de nuestro base da datos pinchando en seleccionar base de datos – ahora aceptar & podemos empezar a usar datos que tenemos allí.
  4. Usando contenido dinámico – lo que vamos a hacer a continuación es cambiar el contenido estático que tenemos en la web con el contenido dinámico que corresponde cambiar, como un ejemplo digamos que tenemos una tabla con prendas de diferentes marcas con sus nombres sus fotos & sus descripciones, paralelamente hemos creado una base de datos que tiene una tabla con los nombres, marcas, url de fotos & descripciones de cada ítem que tiene que aparecer en la tabla. En la ventana de aplicaciones vamos a los enlaces que aparecen & seleccionado el contenido estático lo cambiamos cada vez con el contenido dinámico que viene de la base de datos, en el caso de fotos podemos usar el menú de selección abajo para cambiar el src> así que dentro de la etiqueta del src=””> se va a rellanar con el contenido dinámico. Esto es todo bueno – pero como repetimos la información ? – así –
  5. Repetir información de la base de datos – aquí usamos el panel de comportamiento de servidor – vamos a nuestra pagina & seleccionamos el elemento que queremos repetir, pongo como un ejemplo un DIV que contiene toda la informacion que queremos mostrar de nuestras prendas, asi que seleccionamos el DIV y vamos al panel de comportamientos de servidor, pinchamos en el botón del mas (+), y escogemos repetir región, escogemos nuestro recordset & decidimos cuantas veces queremos repetir esta región o todo

Ahora bien – para que el contenido sea dinámico de verdad tenemos que hacer un poquito de plan antes – tenemos que crear un sistema donde los vínculos diferentes & la información se van a poder mostrar en forma dinámica, por ejemplo llamar a los archivos de las fotos con un nombre que podemos llamar de la base de datos & después construir de manera correspondiente la base de datos.

Suerte,
Amit

Estoy Malito…


Hola todos,

Estoy malito en cama con el portátil :- ) por supuesto…

Os deje anoche un resumen bastante informativo con las herramientas de producción que podemos usar con el DreamWeaver,

Os pido por favor que usáis esto para comprobar vuestros paginas web antes de subirlos al servidor donde os he creado espacio, o si ya lo habeis subido comprobar de nuevo (Ojo – Josemari, Manuel, Dani & Pepe) quiero ver el fin de semana que todo el mundo ha subido algo a la web & que este bien o sea sin vínculos rotos ni archivos de JPG enormes & por supuesto que sin ningún PSD, Word etc…la web puede ser con HTML4 o 5 me da igual pero tiene que funcionar bien y el código bien escrito.

El Lunes sin falta empezamos con Flash así que animo que llegamos a la recta final, habéis conseguido ya mucho & ahora llegan cosas interesantes WordPress & Posicionamiento entre otras cosas

Cualquier cosa teneis aqui el FB del curso – http://www.facebook.com/webtrucos

Espero que tengáis un buen fin de semana, el lunes nos vemos,

1Abrazo

Amit

Comprobando & Colaborando nuestro web usanso DreamWeaver

Buenos días,

Antes de lanzar nuestro sitio web al FTP para que todo el mundo lo va a poder ver, podemos usar varias herramientas que nos ofrece DreamWeaver para comprobar que el sitio esta preparado, que no tenemos vínculos rotos o archivos huérfanos, y usando las opciones del programa podemos corregir lo que hace falta corregir.

  1. Abrimos la ventana de los informes (reports) (en el menú de arriba — ventana —resultados)
    1. Aquí tenemos un panel muy entero que nos ofrece (entre otras opciones) – buscar & cambiar código en toda la pagina, usar manuales de código para HTML, CSS etc, validar el código según las versiones de HTML que tenemos instaladas, comprobar compatibilidad en los diferentes navegadores, comprobar vínculos rotos & archivos huérfanos, varios informes & logs del FTP
  2. En la opción de informes podemos escoger si queremos recibir informes solo del documento abierto ahora, de todo el sitio, escoger archivos o carpetas & a continuación escogemos que características queremos que se comprueba DW – o del proceso del trabajo o del código HTML — en accesibilidad podemos seleccionar lo que queremos comprobar
    1. Por ejemplo podemos en la parte del HTML comprobar si tenemos atributos alt & titulo de documentos para todos nuestros archivos en el sitio – cuando nos llega el resultado podemos o abrir los archivos & repararlos o crear un informe & compartirlo con nuestros compañeros del equipo
    2. Otro ejemplo es comprobar los vínculos rotos & archivos huérfanos del sitio web -podemos seleccionar que queremos corregir – ahora con los resultados podemos directamente en el panel corregir los errores (examinar carpeta & buscar el archivo) – aquí podemos ademas guardar el informe se guarda como archivo de texto así podemos tener seguimiento de los informes diferentes
  3. El proceso de producción o lanzamiento del sitio
    1. aquí abrimos el programa FTP del DW – pulsando el botón que esta a la derecha en el panel de archivos – y ahora si vamos al menú SITIO arriba podemos usar la opción de sincronizar , como ya lo hemos visto tenemos varias opciones de sincronización depende de lo que queremos (get & put newer files por ejemplo), en el informe que sale podemos ir quitando archivos que no queremos colocar o descargar
    2. podemos también especificar los tipos de archivos que nos interesa colocar o descargar al servidor con la opción de encubrimiento  (?) vamos a abrir el administrador del sitio (arriba en el menú de SITIO — manejo del sitio), tenemos que ir a encubrimiento & aplicar su uso & después abajo podemos agregar a la lista de tipos de archivos lo que no nos interesa sincronizar con el servidor (por ejemplo documentos psd, doc, etc…)

Trabajo en equipo con DW –

Cuando trabajamos en equipo queremos no tener conflictos a la hora de trabajar – impedir que por ejemplo alguien nos cambia un archivo que ya hemos cambiado etc…

  1. usamos las opciones de registro & verificación (check in & check out) – vamos al sitio & manejo del sitio & en la categoría de información remota aplicamos el registro, escribimos nuestro nombre & mail, comprobamos que tenemos verificar archivos & aceptamos
    1. ahora tenemos en el FTP las opciones de registro & verificación para el sitio – registramos el sitio con el botón de registro & ahora tenemos un candado a lado de los archivos, ahora para trabajar en un archivo lo tenemos que abrir & así los otros miembros del equipo saben que alguien esta trabajando con este archivo, por eso cuando terminamos lo registramos otra vez (como prestar & devolver libros de la biblioteca)
    2. Notas de diseño – para nosotros & para trabajar en equipo – podemos añadir notas de diseño con fecha & descripciones a nuestros archivos asignando tareas etc a otros miembros del equipo – aquí también cambiamos en las preferencias del sitio en la categoría de notas de diseño permitimos compartir notas de diseño & otra cosa que ahora nos viene bien cambiar esta en la categoría de ver columnas de archivo, cambiamos la opción para se muestran las notas, ahora cuando volvemos a la pantalla del FTP podemos ver que tenemos una columna con la notas.
    3. Podemos crear notas para todos los miembros del equipo o para nosotros incluyendo la opción que siempre cuando se abre el archivo aparece un mensaje para revisión por ejemplo, ademas en la opción de todos podemos cambiar el tipo de notas, después podemos añadir una columna con esta nueva categoría de notas de diseño

Blog at WordPress.com.

Up ↑