Hacer página Web avanzada con Dreamweaver y PHP.


Crea o mejora tu página o tienda con las últimas tecnologías imprescindibles para la usabilidad.

4.56 sobre 5 Total votos: 75

¿Ya tienes tu web hecha pero quieres darle un aspecto profesional?, ¿aún no lo tienes claro y quieres comenzarla de cero utilizando las últimas tecnologías que mejoran la usabilidad de la misma?¿Quieres diferenciarte de la mayoría de Webs con técnicas que se usan en las grandes Webs?. Te lo explicamos todo en este curso de 60 capítulos.

En este tutorial explicaremos los siguientes apartados, entre otros:

  • Menú desplegable de hasta 3 niveles
  • Calendario dinámico en Jquery con gestión del mismo
  • Validación avanzada y en Jquery de formularios
  • Comprobación en AJAX de existencia de e-mails al darse de alta.
  • Autoadministración de la Web a través de la administración embebida en la propia Web.
  • Envío de correos de aviso de comunicaciones a los usuarios
  • Apartado de anuncios, o zona de intercambio de productos para los usuarios
  • Script para subir imagen de anuncios publicados
  • Diferentes niveles de acceso en función del usuario, administrable
  • Utilización de HTML5 y CSS3 para efectos gráficos avanzados.
  • Gestión de Preguntas frecuentes avanzada con efectos deslizantes JQuery.
  • Ventanas flotantes para el acceso de usuario y para la confirmación de eliminación de datos.
  • Registro avanzado en el sistema, con chequeo de campos complejo
  • Gestión de avisos en la Home en función del tipo de usuario.
  • Campos de formulario dinámicos para seleccionar fecha y hora a través de calendario.
  • Gestión completa de test o exámenes con resultados inmediatos para el que realiza el examen.
  • Selección de test para ciertos grupos de alumnos seleccionados.
  • Permiso para crear un número indefinido de tests con hasta 20 preguntas y respuestas ilimitadas.
  • Generación dinámica de gráficas de estadísticas de resultados.
  • Generación de informes PDF en base a consultas realizadas en la administración
  • Generación dinámica de formularios con campos variables para los test
  • Subir la página a un servidor remoto para publicarla, con su Base de datos, etc...

Irás mucho más rápido y entenderás mucho mejor todo si al menos has comenzado alguno de los tutoriales anteriores, pues la estructura de desarrollo es la misma para todos. Puedes visitar la Web de demo en http://www.webdecolegios.com para que veas cómo funciona todo, o bien acceder al primer capítulo, donde se presenta el contenido del curso.

 

Youtube

Videotutorial Hacer página Web avanzada con Dreamweaver y PHP


  • Lista de capítulos completa en Youtube

    Acceso directo a la lista de capítulos del curso en Youtube

  • Curso disponible

    12 primeros capítulos de acceso gratuito.

Capítulo 1: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 1

14:33


Presentación del curso de página Web avanzada. Explicación de los puntos que se van a dar, donde dirigirse para las preguntas, etc... .

Capítulo 2: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 2

15:12


Creamos la plantilla con la que trabajaremos todo el proyecto. Incluimos los include que vamos a ir utilizando, para separar adecuadamente cada parte de la página. Buscamos un tipo de letra de para dar un aspecto más profesional a nuestra Web.

Capítulo 3: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 3

15:32


Completamos la instalación de la fuente y creamos un logo en Photoshop. Hacemos la cabecera de nuestra página con el logo y creamos un fondo que se repite a lo largo de toda la Web.

Capítulo 4: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 4

16:57


Empezamos manejando Firebug para encontrar y modificar las clases de los CSS que nos interesa. Creamos cajas redondeadas con CSS3 para tener la estructura de trabajo preparada

Capítulo 5: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 5

15:09


Finalizamos la configuración de la fuente de Google Fonts en nuestra Web. Creamos la Base de datos y la primera tabla de la misma donde irán las preguntas frecuentes. Hacemos un formulario de inserción de datos usando Dreamweaver

Capítulo 6: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 6

15:14


Mejoramos el aspecto de los formularios creando clases para los campos y botones. Creamos una validación de formulario en JQuery con un panel informativo y deslizante.

Capítulo 7: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 7

13:58


Finalizamos la modificación del estilo del aviso de validación. Comenzamos con Jquery, bajándonos la versión actualizada. Creamos un aviso de información cuando el campo es insertado correctamente.

Capítulo 8: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 8

15:03


Creamos el código para insertar los datos del formulario a través de Jquery y AJAX de forma que se realiza la inserción de los datos sin cambiar de página y dando un mensaje de OK al usuario.

Capítulo 9: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 9

15:02


Revisamos los caracteres erróneos que nos salen en la base de datos con funciones de PHP. Realizamos la primera consulta para obtener resultados de la base de datos. Utilizamos funciones para mostrar la fecha en el formato determinado. Utilizamos un código para mostrar y ocultar información de una capa con Jquery

Capítulo 10: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 10

15:13


Finalizamos el script para mostrar y ocultar una capa con Jquery. Creamos un archivo de funciones y revisamos las rutas para hacer funcionar funciones en todo momento. Empezamos a crear el formulario de contacto, que tendrá validación también y inserción en la BD y envío por e-mail

Capítulo 11: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 11

15:20


Creamos la validación para el nuevo formulario de contacto y modificamos nuestro archivo de funciones de jquery y Ajax, para que inserte los datos en la base de datos a la vez que no está cambiando la pantalla actual de proceso.

Capítulo 12: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 12

15:08


Revisamos el formulario de contacto para corregir los errores. Preparamos una función para enviar el e-mail con el contenido del formulario a la persona de contacto.

Capítulo 13: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 13

15:15


Creamos el alta de usuario y establecemos el concepto de permisos de usuario, que nos permitirá dar acceso a una parte u otra de la Web en función de ese nivel.

Capítulo 14: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 14

15:09


Repetimos el campo de e-mail y contraseña para comprobar que en el alta de usuario, todos los datos están correctos. Comenzamos con la comprobación en Jquery/AJAX para informar al usuario si el e-mail con el que intenta darse de alta ya está registrado en la Base de datos.

Capítulo 15: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 15

15:03


Realizamos las modificaciones necesarias para la comprobación de la existencia del e-mail en la base de datos a través de una consulta realizada en background con JQuery.

Capítulo 16: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 16

15:08


Deshabilitamos el botón de darse de alta, si los valores no son correctos no permite continuar. Colocamos un gráfico en los avisos de validación. Comenzamos con la realización de la ventana flotante para el acceso al sistema.

Capítulo 17: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 17

15:32


Completamos la capa oscura que nos hará de base para el flotante con el acceso a usuario. Hacemos el formulario de login al sistema, incluyendo el nivel de acceso de usuario

Capítulo 18: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 18

15:49


Revisamos el fichero de acceso para asignar variables globales que nos servirán para limitar el acceso del usuario a otras zonas que determinemos. Arreglamos la ventana de acceso para que cumpla con la estética de la Web.

Capítulo 19: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 19

15:08


Finalizamos las validaciones del acceso de usuarios y generamos el cierre de sesión por parte del usuario

Capítulo 20: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 20

15:12


Cambiamos la contraseña para que esté encriptada en la Base de datos. Realizamos una función para obtener el nombre de la persona que ha accedido al sistema. Hacemos un switch de PHP para mostrar el nivel del usuario. Comenzamos a realizar el menú desplegable de 3 niveles. Convertimos nuestra Web a HTML5 para aprovechar las ventajas de las nuevas etiquetas.

Capítulo 21: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 21

15:28


Mejoramos la apariencia de los formularios. Añadimos el botón de aceptar condiciones de uso para el alta. Insertamos el CSS para el menú de 3 niveles y lo adaptamos a nuestras necesidades modificando el código.

Capítulo 22: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 22

16:00


Solucionamos los problemas del menú desplegable modificando los CSS adecuadamente. Creamos lo iconos que usaremos para la edición de los datos de la base de datos. Comenzamos con la edición de las preguntas frecuentes.

Capítulo 23: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 23

15:25


Manipulamos los niveles a través de la base de datos para dar permisos de administrador a un usuario. Se explica el concepto de niveles y como afectan a lo que se ve en la página. Creamos la tabla de resultados de los datos obtenidos en MySQL según las restricciones que solicitamos por consulta.

Capítulo 24: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 24

16:33


Construimos unos estilos adecuados para sacar listas de datos, para que sea sencillo de ver y comprender. Realizamos la edición de un registro con la ayuda de Dreamweaver.

Capítulo 25: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 25

16:02


Construimos el procedimiento de eliminación de un registro, con una ventana flotante que le pregunta al usuario previamente si la eliminación es deseada.

Capítulo 26: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 26

15:06


Completamos el flotante de confirmación de eliminación de un registro. Colocamos un código para que las nuevas líneas de texto de nuestros campos, salgan de forma organizada. Creamos un nuevo apartado para editar las preguntas activas.

Capítulo 27: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 27

15:18


Revisamos la vuelta atrás de los formularios cuando se produce la actualización, mandando más parámetros que nos sirven para hacer el sistema más consistente. Protegemos el acceso a las páginas de administración para evitar su uso aun sabiendo la URL de la misma. Limitamos el acceso a los apartados del menú superior.

Capítulo 28: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 28

15:13


Creamos la tabla Clase, que nos distinguirá un usuario de otro, asociándolos a grupos diferentes dentro de la web. Creamos la consulta de los usuarios. Creamos la edición de usuarios

Capítulo 29: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 29

15:15


Hacemos una función para obtener el curso al que pertenece cada usuario. Añadimos un campo para determinar el estado de cada usuario, pudiendo activarlo o desactivarlo según nuestras necesidades. Iniciamos la construcción de un buscador para los usuarios, con lo que mejoramos la gestión interna de la página.

Capítulo 30: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 30

15:55


Modificamos el formulario de búsqueda de usuarios con el fin de que cumpla los requisitos de los campos que le indicamos, de forma que creamos una consulta dinámica.

Capítulo 31: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 31

15:05


Mostramos resultados cuando los hay, o mostramos un mensaje de error cuando no hay resultados en lo que buscamos. Comenzamos con la creación de los avisos para los usuarios. Creamos la tabla en MysQL

Capítulo 32: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 32

15:17


Añadimos un campo en la tabla de avisos. Creamos el formulario de añadir aviso, con el estado para que el aviso se muestre a unas personas determinadas o a todo el mundo. Cambiamos el formulario de búsqueda para utilizarlo con este tipo de datos.

Capítulo 33: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 33

15:57


Creamos el formulario de editar registro con Dreamweaver. Utilizamos la técnica adecuada para localizar errores en el código, utilizable en prácticamente todos los formularios y código de PHP. Programamos el estado de los avisos.

Capítulo 34: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 34

15:53


Creamos una función para mostrar los avisos en las páginas que indiquemos. Hacemos una capa adecuada para mostrar los avisos.

Capítulo 35: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 35

15:22


Formateamos la nueva capa que utilizamos para los avisos. Presentamos el calendario y el datepicker que vamos a utilizar para crear el calendario dinámico.

Capítulo 36: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 36

15:14


Creamos la tabla donde guardaremos los eventos. Obtenemos la lista de eventos e inserción eventos. Creamos un campo para la hora y el minuto del evento.

Capítulo 37: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 37

15:26


Insertamos los archivos externos que necesitamos para hacer funcionar el datepicker o calendario seleccionador de fecha para nuestro formulario. Construimos el campo fecha según nos pide el MySQL que lo formateemos, en base a varios campos.

Capítulo 38: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 38

15:32


Recurrimos a JqueryUI para ayudar a hacer nuestro datepicker. Preparamos un plugin para crear un calendario dinámico en PHP en el que cargaremos datos a través de los formularios que hemos realizado anteriormente.

Capítulo 39: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 39

15:32


Insertamos nuestro calendario dinámico en el apartado de la izquierda y analizamos el archivo de texto que nos servirá para transmitir los datos al calendario y que complete las fechas. El archivo que generaremos será de tipo JSON, sencillo y práctico.

Capítulo 40: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 40

15:29


Revisamos el error del archivo para que funcione nuestro calendario. Revisamos los efectos secundarios de ubicar un script externo, como el tipo de letra. Revisamos las opciones del calendario y los textos para ponerlos en castellano. Creamos la página donde podremos ver los eventos desarrollados.

Capítulo 41: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 41

15:39


Creamos la sección de tienda/intercambio, parecido a una Web de intercambio o venta de artículos de segunda mano para que los alumnos puedan publicar sus artículos para vender/cambiar.

Capítulo 42: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 42

16:06


Añadimos la página donde el usuario insertará tu artículo para vender o intercambiar. Utilizamos el código para permitir la subida de una imagen, que acompañará al producto.

Capítulo 43: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 43

15:08


Creamos la página donde se mostrarán los diferentes artículos de nuestro pequeño sistema de segunda mano. Creamos las capas adecuadas para que nos muestre todos los productos de cada categoría.

Capítulo 44: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 44

15:55


Centramos la capa del botón de contacto. Creamos la página con el formulario para contactar con el propietario de un artículo de segunda mano o venta para enviarle un e-mail con la información

Capítulo 45: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 45

15:36


Utilizamos Navicat para crear rápidamente unos cuantos productos de ejemplos para verificar el funcionamiento del apartado de intercambio. Comenzamos con la creación del apartado para que los propios usuarios puedan modificar o desactivar las publicaciones que ha realizado.

Capítulo 46: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 46

15:19


Limitamos el acceso a los que estén registrados en el sistema para ver los datos de los productos de segunda mano. Creamos la página para modificar el estado de un producto. Comenzamos a usar domPDF para generar una lista de usuarios en PDF, que nos servirá de base para generar cualquier otro PDF que necesitemos en nuestra Web.

Capítulo 47: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 47

15:41


Continuamos con la exportación a PDF de los datos obtenidos de una consulta de búsqueda.

Capítulo 48: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 48

15:16


Finalizamos con la creación del PDF. iniciamos con la estructura que necesitamos para crear un sistema de tests o exámenes que nos permitan generar una cantidad ilimitada de exámenes, con hasta 20 preguntas y respuestas de opción indefinidas también.

Capítulo 49: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 49

15:59


Creamos la inserción de un test y obtenemos la lista de los mismos. Comenzamos con la creación de las preguntas del examen.

Capítulo 50: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 50

15:40


Generamos el control de las respuestas de cada pregunta, de forma que podemos poner un número de respuestas de 1 hasta lo que necesitemos a cada pregunta.

Capítulo 51: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 51

15:03


Hacemos la consulta relacionada para obtener las preguntas que corresponden a un examen y creamos la asociación entre los dos conceptos.

Capítulo 52: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 52

15:22


Creamos el apartado donde vamos a guardar los datos de los exámenes o test, según los vayamos respondiendo. Generamos la lógica para permitir que cada persona sólo pueda responder una vez a cada test.

Capítulo 53: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 53

15:14


Utilizamos dos navegadores, para poder insertar exámenes que afecten a unos usuarios u otros en función del grupo al que pertenezcan. Obtenemos las preguntas y respuestas del examen para los usuarios.

Capítulo 54: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 54

15:23


Seguimos con la construcción del test para los usuarios, con campos select obligamos a que el usuario responda siempre a todas las preguntas.

Capítulo 55: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 55

15:08


Creamos un aviso para impedir que ningún usuario complete el examen sin haber respondido a todas las preguntas, conformaremos un javascript dinámico que se generará en función del número de respuestas.

Capítulo 56: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 56

15:19


Solucionamos los problemas de la validación. Creamos la página donde insertaremos los datos del examen, las respuestas, y le damos a la persona el resultado completo de su examen.

Capítulo 57: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 57

15:52


Continuamos con el proceso para guardar los resultados del examen o test que el usuario acaba de realizar.

Capítulo 58: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 58

15:09


Comenzamos con la creación de gráficos generados a partir de un script con los resultados del examen de cada alumno. Modificamos el script para hacerlo dinámico.

Capítulo 59: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 59

15:57


Calculamos el total y los porcentajes para generar los resultados de la gráfica que hemos elegido. Añadimos un tercer nivel a los submenús.

Capítulo 60: Cómo hacer página Web avanzada con Dreamweaver y PHP.

Capítulo 60

18:42


Subimos la página al servidor, comprobamos el funcionamiento de los e-mails que se envían y solucionamos los últimos detalles.

Suscripción

Tipo de acceso Qué incluye Precio
Acceso Online por tiempo ilimitado y ficheros con archivos utilizados.
  • Acceso online a los vídeos del tutorial al que te inscribes por tiempo indefinido
  • Descarga del código fuente
  • Recepción del acceso a los vídeos en 2-3 días
  • Respuesta preferente a dudas del tutorial durante 30 días
Ver
Descarga directa de vídeos con archivos utilizados El acceso en descarga incluye lo anterior y:
  • Descarga de los videos en calidad FullHD
  • Trabaja los tutoriales sin estar conectado a internet
Ver