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 33.000 seguidores en el canal de Youtube
  • - 5.000.000 visualizaciones de los videos de Youtube, y subiendo...
  • - Más de 4.500 fans en Facebook.
  • - Más de 2200 alumnos en todo el mundo.

Página web de servicios onlineUna web real, explicada paso a paso.

5 sobre 5 Total votos: 4


¿Cuántas veces habéis visto una web de servicios online y os habéis preguntado cómo se empieza, por dónde empiezo, cómo lo hago? Pues bien, en esta ocasión, este tutorial va dedicado a la construcción del servicio real (HaceYa.com) y del cual podéis ver el funcionamiento en dicho link.

Por supuesto, sólo podréis ver en dicho link la parte pública de la web, pero hay una parte privada que corresponde a los administradores que también se explica en los vídeos.

Este tutorial comienza desde cero, partiendo de dos plantillas gratuitas realizadas en Bootstrap 4, usaremos PHP 7 y MySQL 5.2, lo que asegura que esta web tardará muchos años en quedarse envejecida en cuanto a estructura de programación y desarrollo.

Es aconsejable al menos haber seguido las partes gratuitas de alguno de nuestros tutoriales, como el de Tienda Online 2017, aunque explicaremos también muchas cosas repetidas anteriormente, para que por fin podáis comprender entre varias explicaciones, el objeto de hacer las cosas de una determinada manera.

Este curso se publicará el 14 de mayo de 2019 y los 12 primeros capítulos serán de acceso gratuíto. Durante 12 semanas estos capítulos se publicarán de forma gratuita en el canal de Youtube, recuerda marcar la campanita para que te lleguen las nuevas publicaciones.

Si quieres acceder YA* al curso completo, sin esperas, puedes hacerlo en la página de suscripción donde verás los datos necesarios para inscribirte.

El objetivo de la web será crear un entorno donde por una parte, usuarios que busquen todo tipo de servicios online en una zona tendrán acceso a realizar propuestas para que otra parte de usuarios, esta vez, profesionales, puedan contactar con ellos para realizar dichos trabajos.

Algunos de los puntos que se desarrollan en el curso y se especifican en el temario:

  • - Uso de las plantillas elegidas para el desarrollo
  • - Creación de las plantillas para utilizarlas en Dreamweaver
  • - Comprobación de existencia de e-mails al darse de alta.
  • - Parte de Administración con plantilla separada de la parte pública
  • - Envío de correos de aviso de comunicaciones a los usuarios
  • - Script para subir imagen con barra de progreso
  • - Diferentes niveles de acceso en función del usuario
  • - Utilización de HTML5 para formularios
  • - Ventanas flotantes para el acceso de usuario y para el alta del mismo.
  • - Generación dinámica de formularios con campos variables en función de los datos introducidos en la base de datos
  • - Protección del acceso a la administración por bloqueo de carpeta.
  • - Generación de un servicio CRON o Tarea programada para el envío de notificaciones.
  • - Generar la base de datos desde cero con un softwqare gratuito.
  • - Establecimiento de las relaciobnes entre los distintos campos de las tablas utilizadas para comprender el mecanismo de desarrollo.
  • - Página de error que detecta accesos no deseados al sistema o prohibe el accewso a las mismas.
  • - Validación de formularios con HTML5
  • - Uso de Bootstrap 4 sobre PHP 7 y mySQL 5
  • - Subir la página a un servidor remoto para publicarla, con su Base de datos, etc...
  • - ...

La Web final que queda después de todo el curso es la siguiente: haceya.com

Curso Página Web de servicios online 2019



Suscríbete al canal para recibir un aviso cada publicación


Cap 1: (Ver en youtube)
Presentación del curso

Cap 2:(Ver en youtube)
Preparamos el entorno de trabajo y comenzamos a construir nuestra primera plantilla para que el proceso de desarrollo sea mucho más cómodo.
Archivos para descargar:Descargar ZIPhaceya-2

Cap 3:(Ver en youtube)
Finalizamos con la creación de la plantilla que usaremos en la parte visual de la página Web. Creamos una región editable que nos ayudará a clasificar las diferentes secciones de la Web. Descargar ZIPhaceya-3

Cap 4:(Ver en youtube)
Creamos nuestra primera página de plantilla. Creamos nuestra primera tabla de base de datos donde se guardarán los datos de usuario. Descargar ZIPhaceya-4

Cap 5:(Ver en youtube)
Creamos nuestra primera conexión a la base de datos y empezamos a manipular el formulario de acceso registrado de usuarios Descargar ZIPhaceya-5

Cap 6:(Ver en youtube)
Comenzamos con la creación de la página que logueará y dará acceso a nuestros usuarios al servicio como usuario logueado y le permitirá realizar acciones. Descargar ZIPhaceya-6

Cap 7: (Se publicará el 25 de junio de 2019)
Finalizamos el procedimiento de acceso de usuario y comenzamos con el alta y registro de usuario que nos dará los datos para luego poder acceder como un usuario real al servicio.

Cap 8: (Se publicará el 2 de julio de 2019)
Completamos el formulario de alta y empezamos con la consulta que nos introducirá los datos del nuevo usuario dentro de la base de datos.

Cap 9: (Se publicará el 9 de julio de 2019)
Finalizamos el alta de usuario, codificando la contraseña con SHA256 para mayor seguridad. Comenzamos con la creación de la tabla en la que guardaremos todas las consultas que se realicen a la base de datos, lo que nos facilitará encontrar errores de desarrollo y de posterior funcionamiento de la página.

Cap 10: (Se publicará el 16 de julio de 2019)
Creada la función que nos permitirá controlar todas las consultas que se hagan a la base de datos desde nuestra web.

Cap 11: (Se publicará el 23 de julio de 2019)
Creamos la función para comprobar que el correo electrónico de un usuario nuevo no existe ya en la base de datos y evitamos duplicados. Gestionamos el menú superior para ocultar el botón de acceder cuando el usuario está logueado.

Cap 12: (Se publicará el 30 de julio de 2019)
Creamos el logout del usuario, y ajustamos el menú a nuestras necesidades. Solventamos el error del espacio vacío en la parte superior de la web. Cambiamos las imágenes del slider.

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

 

Cap 13:
Completamos los textos del menú y ajustamos el estilo. Creamos la tabla de categorías que dirigirá toda nuestra página web porque será donde las personas elijan el flujo de la información.

Cap 14:
Preparamos la primera consulta a la base de datos para obtener las categorías principales en el buscador que habrá en la página principal

Cap 15:
Utilizamos las ventajas de bootstrap para realizar un filtro sobre la información que pongamos en un campo. Organizamos los resultados para que todo se vea coherente y facilite el trabajo del usuario.

Cap 16:
Creamos dos listas para los resultados y solucionamos el tema de los acentos, para que no sean determinantes a la hora de buscar una información

Cap 17:
Arreglamos el diseño y la forma de mostrar la información en la página principal y comenzamos a definir los dos tipos de formulario que necesitaremos para que los usuarios puedan solicitar un servicio.

Cap 18:
Creamos el formulario que nos servirá para actualizar la información de contacto del usuario y de la persona que ofrece sus servicios.

Cap 19:
Mostramos las provincias para que pueda seleccionar varias de ellas a la hora de seleccionar de dónde quiere recibir trabajos el profesional, así como empezamos con la lista de las categorías sobre las que es especialista el usuario.

Cap 20:
Comenzamos con la lista de categorías, donde el usuario podrá seleccionar todas aquellas en las que vaya a poder desempeñar un trabajo profesional. Usaremos parte de la programación de index.php para aprovechar información

Cap 21:
Organizamos la forma de mostrar la información y distinguimos entre los dos formularios que tenemos en la misma página, porque la información será diferente para cada tipo de usuario.

Cap 22:
Creamos la tabla que nos almacenará la información para cuando un usuario almacene la provincia donde quiere trabajar.

Cap 23:
Procesamos la información de cada una de las provincias y eliminamos los datos anteriores que teníamos para disponer de la información justa en la tabla de la base de datos.

Cap 24:
Procesamos la información de las categorías, que será muy similar a como hemos procedido con las provincias. Insertamos el código para subir una imagen del usuario con una barra de progreso.

Cap 25:
Finalizamos el procedimiento para subir la imagen de logo de usuario, permitimos que se sobreescriba la imagen y le damos el nombre que nos viene bien para la base de datos.

Cap 26:
Añadimos un campo de tipo textarea donde se mostrará la información de presentación de cada usuario que ofrezca trabajos. Creamos una página para el listado de resultados.

Cap 27:
Creamos una página donde el usuario seleccionará la provincia para la que necesita el servicio. Será un form muy sencillo para que la navegación y usabilidad del sitio sean agradables.

Cap 28:
Creamos la página final donde pediremos a través de un form los datos que necesitamos de la persona para crear una solicitud. Detectaremos si el usuario se ha logueado previamente y si no le invitaremos a hacerlo para poder tener sus datos de contacto.

Cap 29:
Añadimos la tabla de solicitud para guardar los datos de las solicitudes que nos vayan entrando. Creamos algunos usuarios ofertantes, que nos servirán para mostrar los resultados previos de ellos mismos cuando se esté buscando un servicio.

Cap 30:
Utilizamos MySQL Front para que nos ayude a hacer una consulta que relacionará 3 tablas de la base de datos para obtener los resultados relacionados con la provincia y la categoría de cada usuario.

Cap 31:
Creamos la página individual donde se mostrarán todos los datos del profesional que estamos buscando, también irán aquí las valoraciones, comentarios, etc.

Cap 32:
Comenzamos a desarrollar la plantilla de lo que será la página de administración. Utilizaremos las plantillas de Dreamweaver para acelerar la productividad del desarrollo.

Cap 33:
Creamos la página principal basándonos en la plantilla y comenzamos con la página para gestionar los usuarios del sistema, tanto los que ofertan servicios, como los que los ofrecen.

Cap 34:
Comenzamos con la paginación de los resultados de los usuarios en esta página, para verlo de una forma organizada y poder saltar por los grupos de usuario que determinemos.

Cap 35:
Gestionamos los datos del usuario que queremos mostrar, la imagen, el nombre, etc. Creamos una función muy sencilla para mostrar la fecha en formato europeo, con la posibilidad de mostrar la hora también

Cap 36:
Empezamos a crear el apartado para poder modificar los datos de usuario, especialmente el campo de si están activos o no, así como el campo donde los usuarios completan su texto de presentación.

Cap 37:
Obtenemos los datos que necesitamos del usuario y creamos un formulario donde se nos permitirá modificar los datos como la presentación y el estado del usuario.

Cap 38:
Hacemos un UPDATE para actualizar los datos en nuestra base de datos y le mostramos al usuario un aviso para que vea si necesita volver a un apartado o al otro en función de sus necesidades.

Cap 39:
Iniciamos el formulario para buscar los datos dentro de los usuarios, nos servirá para el resto de páginas donde queramos utilizar este tipo de listados.

Cap 40:
Arreglamos el buscador para que funcione como búsqueda sobre diferentes campos. Realizamos un pequeño truco para poder volver a la página donde estábamos dentro de los dos tipos de usuario. Colocamos el logo en la administración.

Cap 41:
Volvemos al frontend para ocuparnos de registrar, mediante Ajax, y de forma muy sencilla, las visitas que se realicen a cada usuario que ofrece servicios. Este guardado de información será transparente al usuario.

Cap 42:
Completamos el sencillo código en Ajax con PHP donde guardamos la información y el tipo de visita realizado.

Cap 43:
Preparamos el entorno para que los usuarios profesionales reciban un correo electrónico con la propuesta que se ha enviado. Guardamos toda la información en tablas donde distinguiremos el estado.

Cap 44:
Preparamos la tabla que almacenará la información de cada solicitud y guardará registro de los correos enviados. Generaremos un servicio CRON o tarea programada, que nos permitirá el envío de correos de forma automatizada.

Cap 45:
Generamos dinámicamente el correo con los datos que se enviará a los usuarios profesionales que tengan las características adecuadas para recibir una nueva propuesta de trabajo de un usuario de la página.

Cap 46:
Actualizamos los estados de las solicitudes enviadas y guardamos el correo que se enviará a los diferentes usuarios en la base de datos por si los queremos consultar en el futuro.

Cap 47:
Preparamos la página donde se mostrarán los datos completos del solicitante en base al link generado para el correo electrónico.

Cap 48:
Contrastamos la información del número de visitas que ha tenido una solicitud para saber si el usuario puede ver los datos de contacto o no e indicárselo en su caso.

Cap 49:
Construimos el área donde se verán las diferentes solicitudes y su estado, comenzamos con los usuarios que realizan las solicitudes y mostramos tablas con sus resultados.

Cap 50:
Habilitamos la posibilidad de cambiar el estado de las solicitudes para que el usuario tenga total visibilidad para todas sus propuestas y preparamos la valoración de las mismas.

Cap 51:
Utilizamos estrellas para valorar el trabajo que nos hayan realizado, además de un texto donde el usuario podrá introducir la información que necesite.

Cap 52:
Ampliamos el formulario para indicar cuál ha sido el usuario asignado que estamos valorando. Añadimos campos en la base de datos para poder almacenar toda esta información

Cap 53:
Insertamos en la base de datos la información de la valoración, que podrá ser consultada por otros usuarios.

Cap 54:
Mostramos las valoraciones del usuario en los resultados de la búsqueda de profesionales. Ajustamos los valores y los parámetros que necesitemos para mostrar la información como queremos.

Cap 55:
En la página de detalle, obtendremos la información de los comentarios realizados a cada uno de los profesionales, y nos quedará una página con información muy completa.

Cap 56:
Procesamos los datos de cada comentario, incluidas las estrellas que se mostrarán de forma separada para proporcionar los datos de cada valoración

Cap 57:
Finalizamos el asunto de las estrellas de valoración y comenzamos a crear URL amigables, o "SEO friendly" para las direcciones de nuestros profesionales.

Cap 58:
Generamos el archivo htaccess para las URL amigables y comenzamos a subir a un servidor real toda la información que necesitamos para que la web funcione en un entorno público

Cap 59:
Subimos finalmente la base de datos y configuramos los ficheros para adaptarlos al nuevo entorno de trabajo en real.

Cap 60:
Solucionamos los problemas para el funcionamiento correcto en remoto. Creamos el CRON o la tarea programada para el envío automatizado de correos. Comenzamos con la notificación de las cookies.

Cap 61:
Aclaramos mejor el tema de las cookies y comenzamos a construir la función que enviará los correos electrónicos con los diferentes avisos.

Cap 62:
Finalizamos el tema de envíos de correos para que nos funcionen también dentro de la tarea programada que tenemos instalada.

Cap 63:
Finalizamos la página de solicitudes para los profesionales, para que puedan ver los datos de las mismas y tener un almacén de ellas.

Cap 64:
Páginas finales y finalización del curso, adaptación del menú según la página en la que estamos.

 

 

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 33.000 seguidores en el canal de Youtube
  • - 5.000.000 visualizaciones de los videos de Youtube, y subiendo...
  • - Más de 4.500 fans en Facebook.
  • - Más de 2200 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