FacebookYoutubeBlog

Actualizada
Noticias, descuentos, sorpresas
Recibe gratuitamente nuestro boletín con todas las novedades acerca de los cursos, descuentos, promociones, etc...


Últimas Noticias


Todas las consultas y los usuarios que siguen el tutorial los puedes encontrar en el blog: blog.ayzweb.com y en http://www.dreamweaver-tutoriales.com/soporte.

Los archivos ZIP de descarga están en esta misma Web, en el apartado Cursos, dentro del tutorial que estés buscando.

  • - Más de 29.000 seguidores en el canal de Youtube
  • - 4.000.000 visualizaciones de los videos de Youtube, y subiendo...
  • - Más de 4.000 fans en Facebook.
  • - Más de 1800 alumnos en todo el mundo.

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: 72

 

¿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 exámen.
  • - 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...
  • - ...

Ejemplos de páginas realizadas por alumnos con este tutorial:

Web de Sergio Web de Roberto Web de Aitor

 

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 desarrolo es la misma para todos. Puedes visitar la Web de demo en http://www.webdecolegios.com para que veas como funciona todo, o bien acceder al primer capítulo, donde se presenta el contenido del curso.

Videotutorial Hacer página Web avanzada con Dreamweaver y PHP

Lista en youtube Acceder a la lista completa en Youtube

 

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... .
Tutorial: Cap. 1 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 2 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-2

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.
Tutorial: Cap. 3 - Como hacer una página Web avanzada en PHP con Dreamweaver

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
Tutorial: Cap. 4 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-4

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
Tutorial: Cap. 5 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-5

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.
Tutorial: Cap. 6 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-6

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.
Tutorial: Cap. 7 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-7

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.
Tutorial: Cap. 8 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-8

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
Tutorial: Cap. 9 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-9

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
Tutorial: Cap. 10 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-10

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.
Tutorial: Cap. 11 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-11

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.
Tutorial: Cap. 12 - Como hacer una página Web avanzada en PHP con Dreamweaver
Archivos para descargar:Descargar ZIPcolegio-12


Suscríbete para poder ver el resto de vídeos

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.
Tutorial: Cap. 13 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 14 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 15 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 16 - Como hacer una página Web avanzada en PHP con Dreamweaver

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
Tutorial: Cap. 17 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 18 - Como hacer una página Web avanzada en PHP con Dreamweaver

Capítulo 19: (15:08)
Finalizamos las validaciones del acceso de usuarios y generamos el cierre de sesión por parte del usuario
Tutorial: Cap. 19 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 20 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 21 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 22 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 23 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 24 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 25 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 26 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 27 - Como hacer una página Web avanzada en PHP con Dreamweaver

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
Tutorial: Cap. 28 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 29 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 30 - Como hacer una página Web avanzada en PHP con Dreamweaver

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
Tutorial: Cap. 31 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 32 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 33 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 34 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 35 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 36 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 37 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 38 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 39 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 40 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 41 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 42 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 43 - Como hacer una página Web avanzada en PHP con Dreamweaver

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
Tutorial: Cap. 44 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 45 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 46 - Como hacer una página Web avanzada en PHP con Dreamweaver

Capítulo 47: (15:41)
Continuamos con la exportación a PDF de los datos obtenidos de una consulta de búsqueda.
Tutorial: Cap. 47 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 48 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 49 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 50 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 51 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 52 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 53 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 54 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 55 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 56 - Como hacer una página Web avanzada en PHP con Dreamweaver

Capítulo 57: (15:52)
Continuamos con el proceso para guardar los resultados del examen o test que el usuario acaba de realizar.
Tutorial: Cap. 57 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 58 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 59 - Como hacer una página Web avanzada en PHP con Dreamweaver

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.
Tutorial: Cap. 60 - Como hacer una página Web avanzada en PHP con Dreamweaver

Noticias, descuentos, sorpresas
Recibe gratuitamente nuestro boletín con todas las novedades acerca de los cursos, descuentos, promociones, etc...


Últimas Noticias


Todas las consultas y los usuarios que siguen el tutorial los puedes encontrar en el blog: blog.ayzweb.com y en http://www.dreamweaver-tutoriales.com/soporte.

Los archivos ZIP de descarga están en esta misma Web, en el apartado Cursos, dentro del tutorial que estés buscando.

  • - Más de 29.000 seguidores en el canal de Youtube
  • - 4.000.000 visualizaciones de los videos de Youtube, y subiendo...
  • - Más de 4.000 fans en Facebook.
  • - Más de 1800 alumnos en todo el mundo.

Comentarios rápidos

83.37.124.82: Gracias, Jorge. Eres un crack

separador 190.189.72.77: Excelentes Tutoriales. Muy agradecido por todo lo que me has enseñado. Sigue adelante!!! Abrazo desde Argentina.

separador 186.105.231.193: muy bien!

separador 95.22.245.92: Genial. Me siento muy a gusto en tu sitio. Espero que este sitio te de mucha prosperidad por ayudar a tanta gente como yo!!

separador Escribe tu comentario
Ver todos los comentarios

5 motivos

  • 1- Aprenderás a manejar Dreamweaver.
  • 2- Serás capaz de crear desde cero cualquier Web que te propongas.
  • 3- Podrás tener tu propio negocio de creación Web
  • 4- Contarás con una comunidad de alumnos que te podrán ayudar.
  • 5- Adquirirás independencia para realizar cualquier programación