Hacer Red Social con Dreamweaver y PHP.


Construye tu propia red social y aprende a utilizar Dreamweaver para llegar a construir la Web que quieras.

4.57 sobre 5 Total votos: 68

En este curso se crea una Red social partiendo de cero, de una página absolutamente en blanco, Creamos una Base de datos que albergará los datos de nuestros usuarios. Se proporcionan los ZIP descargables de los capítulos. Todo sin conocimientos previos de programación ni bases de datos. Está orientado a que todo el mundo lo pueda seguir. Evidentemente si ya has tenido que hacer cosas con Dreamweaver, te va a resultar más sencillo, pero tampoco serás el primer diseñador que acaba el curso y no tiene que depender de un programador para realizar un formulario, una base de datos, o ser autónomo para realizar tus propios formularios. ¿No te suena bien?

Crearemos zonas administrables, utilizaremos JQuery para hacer efectos modernos y de fácil manejo para nuestros usuarios. Al final del curso, transformaremos nuestra página para que se vea perfecta en tablets, IPad y móviles, tendremos 4 páginas diferentes con un sólo código

Ejemplos de páginas realizadas con este tutorial:

Red Social de ejemplo Red Social de Marcelo Red Social de Erick
Red Social de Edbi  
     

 

¿Quieres que tu Web aparezca aquí? Envíanos un e-mail con tus datos y tu tienda

Plugins y extensiones

Sección para los aportes de nuestros alumnos y disponible para aquellos inscritos al curso completo:
- Propuesta de Juan E. para la paginación tipo Google

- Nueva Extensión para completar los siguientes puntos (Precio 15 euros). Atención esta extensión no está en video, es exclusivamente una explicación detallada en PDF y el ZIP con los códigos y la Base de Datos actualizada. En esta extensión se explican en un DOCUMENTO los siguientes puntos:

1. Mostrar mensajes de los amigos en el muro propio.

2. Ver el muro de un amigo haciendo click en su foto
3. Aviso de publicación automática de avisos de foto subida en muro.
4. Mostrar sólo amigos en el chat
5. Mostrar el perfil público de un usuario
6. Permitir subir links de video
7. Publicar avisos en muro público o privado.
8. Crear una imagen de cabecera para cada usuario
9. Habilitar respuestas a los comentarios de la Web.
10. Habilitar caritas/emoticonos en los comentarios
11. Miniformulario de envío rápido
12. Efecto lightbox en la visualización de muro

 

 

Youtube

Videotutorial Hacer Red Social 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

    18 primeros capítulos de acceso gratuito.

Capítulo 1: Videotutorial Hacer Red Social con Dreamweaver y PHP

Presentación del curso, explicación de la página web que conseguiremos después de los capítulos.

Capítulo 2: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 2

15:17


Diseñamos la estructura de nuestra Web, el wireframe, la orientaremos principalmente a escritorio y a móviles, además de Tablets. Creamos nuestro sitio de Dreamweaver en local..

Capítulo 3: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 3

16:09


Creamos la plantilla en Dreamweaver con la que trabajaremos en nuestra Web, creamos la estructura y los archivos de inclusión que nos servirán para ir construyendo nuestra página.

Capítulo 4: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 4

15:25


Creamos el logo y vemos una forma de analizar nuestros colores para la Web. Entendemos la estructura de carpetas de la Web para poder seguir trabajando.

Capítulo 5: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 5

15:40


Ajustamos el estilo para que sea adaptable a resoluciones más pequeñas como móviles y tablets. Creamos la Base de Datos con la primera tabla, la de usuarios.

Capítulo 6: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 6

15:17


Creamos el primer formulario de alta de usuario. Conectamos a la Base de datos a través de las ayudas que nos proporciona Dreamweaver.

Capítulo 7: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 7

15:34


Exportamos la Base de Datos con phpmyadmin. Creamos y modificamos con Spry los campos obligatorios del alta de usuario.

Capítulo 8: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 8

15:17


Modificamos los estilos CSS para mejorar la visualización de los formularios. Empezamos a crear el formulario de usuario y contraseña.

Capítulo 9: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 9

15:14


Comenzamos con el formulario de acceso ayudándonos de las herramientas de Dreamweaver. Encriptamos la contraseña en la Base de Datos.

Capítulo 10: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 10

13:54


Resolvemos el problema con el include y codificamos la contraseña del usuario en la Base de datos para que quede encriptada. Continuamos con el acceso y alta de usuario.

Capítulo 11: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 11

14:37


Aprendemos a utilizar más de un formulario en una misma página y aumentamos el número de campos de la Base de Datos para albergar más información del usuario.

Capítulo 12: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 12

15:05


Modificamos el acceso a usuario para obtener el valor del campo que nos servirá para identificar de forma única cada usuario.

Capítulo 13: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 13

15:06


Creamos un formulario de modificación de datos para modificar el nombre y el sexo del usuario que está dado de alta en el sistema y ha accedido.

Capítulo 14: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 14

15:01


Preparamos un archivo funciones.php que albergará todas las funcionalidades de nuestra red social, de forma sencilla y eficiente.

Capítulo 15: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 15

15:10


Comenzamos con la creación de un formulario que nos subirá una imagen al servidor en PHP. Limitaremos su tamaño y su tipo.

Capítulo 16: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 16

16:27


Finalizamos la creación del formulario y mostramos la imagen del usuario en la barra lateral, muy al estilo de otras redes sociales.

Capítulo 17: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 17

16:23


Utilizamos javascript para hacer que nuestra foto se actualice automáticamente cuando la cargamos. Empezamos con modificaciones simples de CSS para mejorar el estilo de la Web.

Capítulo 18: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 18

15:17


Utilizamos CSS para ir dando estilo a los diferentes bloques de la página Web. Modificamos directamente y vemos los resultados en la página conforme los vamos desarrollando.

Capítulo 19: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 19

16:09


Creamos una tabla para insertar los mensajes de las personas, indicando la fecha de publicación. Creamos un formulario para que los usuarios puedan insertar sus mensajes. Utilizamos las ayudas de Dreamweaver para crear las consultas que necesitamos.

Capítulo 20: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 20

15:25


Limitamos el acceso a los comentarios del muro exclusivamente a usuarios registrados. Hacemos una consulta para ver los últimos comentarios. Comenzamos formateando los datos que obtenemos de esta consulta.

Capítulo 21: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 21

15:40


Modificamos la función de muestra de las imágenes para mejorar la visualización de los comentarios. Aprendemos a formatear la fecha que nos saca la BD de MySQL en PHP con una función.

Capítulo 22: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 22

15:17


Probamos el formulario de inserción de comentarios. Comenzamos con la construcción del “muro” de nuestro apartado privado de la red social. Creamos nuevas zonas laterales para los diferentes apartados de nuestra Red Social.

Capítulo 23: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 23

15:34


Iniciamos la distinción entre muro público y privado. Comprobamos el funcionamiento con dos navegadores diferentes con dos usuarios, para ver el efecto en cada uno de ellos. Comenzamos con la inserción de la imagen, para poder meter una foto en el comentario de los muros.

Capítulo 24: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 24

15:17


Preparamos la subida de imágenes, asociándolas a una carpeta por cada usuario, comprobamos que el fichero no existe anteriormente para no sobreescribirlo.

Capítulo 25: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 25

15:14


Preparamos una función para que nos genere un nombre aleatorio cuando el nombre de la imagen coincide. Mostramos la imagen en el muro.

Capítulo 26: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 26

13:54


Finalizamos la programación de los muros. Comenzamos la creación de un sistema de mensajería interno, para poder enviar mensajes a los otros participantes de la Web.

Capítulo 27: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 27

14:37


Continuamos con la creación del apartado de mensajería interna, los apartados de mensaje nuevo, mensaje recibido, etc…

Capítulo 28: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 28

15:05


Creación del formulario de mensaje nuevo a otra persona de nuestra red social. Comprobamos en la Base de Datos, donde se guarda la información del formulario, la fecha de envío, si se ha leído o no, etc…

Capítulo 29: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 29

15:06


Distinguimos entre bandeja de entrada y bandeja de enviados. Construimos la plantilla de los mensajes enviadas transformándola en una función que unificará con un formato similar, todas las comunicaciones de la Web.

Capítulo 30: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 30

15:01


Finalizamos la construcción del formato de email que se enviará en las diversas acciones de la Web. Mostramos por pantalla como se vería ese email.

Capítulo 31: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 31

15:10


Creamos una imagen parpadeante de aviso de nuevos mails. Creamos una función que nos detecte si tenemos mensajes sin leer en la aplicación.

Capítulo 32: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 32

16:27


Comprobamos mediante una función si el correo interno se ha leído o no. Comenzamos con la solicitud de amistad en la aplicación.

Capítulo 33: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 33

16:23


Modificamos el PHP y la base de datos para distinguir si un mensaje corresponde a solicitud de amistad o únicamente a mensaje del muro. Comenzamos con la preparación de la programación para aceptar-rechazar las solicitudes.

Capítulo 34: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 34

15:17


Continuamos con la creación de la función que nos permitirá controlar el estado de una petición de amistad.

Capítulo 35: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 35

16:09


Finalizamos la comprobación del estado de las peticiones de amistad y mostramos la lista de amigos de cada uno de los usuarios.

Capítulo 36: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 36

15:25


Creamos las opciones de privacidad para cada usuario. Campos checkbox útiles para definir selecciones concretas.

Capítulo 37: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 37

15:40


Utilizamos funciones para saber si un usuario tiene o no permitido recibir mensajes. Comprobamos si una amistad está en curso. Generamos una tabla con la lista de los países para que el usuario seleccione el suyo.

Capítulo 38: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 38

15:17


Completamos la tabla de países y adecuamos el formulario de modificación de datos. Comenzamos con los álbumes de fotos de usuarios. Creamos las tablas para almacenar los álbumes.

Capítulo 39: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 39

15:34


Utilizamos las herramientas de Dreamweaver para hacer en PHP los formularios que nos servirán para crear los nuevos álbumes que contendrán fotografías y ficheros.

Capítulo 40: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 40

15:17


Creamos un script para la subida múltiple de ficheros al servidor en PHP, permitiendo diferentes tipos de archivo y controlando el tamaño máximo del archivo.

Capítulo 41: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 41

15:14


Continuamos con la programación  del apartado de subida múltiple, dando acceso a ficheros de tipo doc, docx, pdf, jpg y png.

Capítulo 42: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 42

13:54


Resolvemos el problema con los condicionales. Creamos el código para que las imágenes queden registradas también en la Base de Datos. Detectamos y resolvemos errores de las consultas.

Capítulo 43: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 43

14:37


Iniciamos la página donde visualizaremos las imágenes de los álbumes creados, revisamos los errores en las rutas.

Capítulo 44: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 44

15:05


Revisamos los CSS para ajustar la muestra de las imágenes dentro del álbum. Creamos una función para que nos cuente cuantas visitas tiene la imagen o documento que estamos viendo.

Capítulo 45: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 45

15:06


Habilitamos la posibilidad de que otra persona pueda consultar nuestros álbumes.

Capítulo 46: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 46

15:01


Comprobamos el estado de una amistad para saber si está activa o no. Iniciamos la protección también cuando alguien intenta acceder a los contenidos de los álbumes sin permiso.

Capítulo 47: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 47

15:10


Añadimos una función para saber a quién pertenece un álbum.

Capítulo 48: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 48

16:27


Utilizamos funciones para que otros usuarios no puedan ver álbumes de los que no son amigos nuestros. Ponemos el volver atrás en las páginas del álbum. Comenzamos con la realización de valoración por estrellas en SQL y Jquery.

Capítulo 49: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 49

16:23


Continuamos con la generación del código para realizar la votación por estrellas, con PHP y JQuery. Creamos la tabla asociada que nos almacenará el rating de cada foto o archivo del álbum.

Capítulo 50: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 50

15:17


Seguimos las instrucciones paso a paso para el sistema de valoración por estrellas y para reconocer si el producto ya tiene o no votos.

Capítulo 51: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 51

16:09


Revisamos el número de valoraciones de las estrellas. Evitamos que una persona que ha votado ya, vuelva a votar.

Capítulo 52: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 52

15:25


Revisamos si la persona que ha subido la foto es la misma que intenta votarse a sí mismo, para evitarlo. Mostramos un mensaje de agradecimiento cuando se vota. Modificamos la zona de los álbumes para que reconozca cuando es un documento o una imagen. Averiguamos la extensión de un archivo para el proceso.

Capítulo 53: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 53

15:40


Finalizamos la parte de reconocimiento y distinción de archivos gráficos y de documento del álbum. Iniciamos la programación del selector de fecha, para ello agregamos el campo fecha de nacimiento a los datos de perfil.

Capítulo 54: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 54

15:17


Finalizamos el selector flotante de fecha, el querypicker, como se llamaría. Comenzamos con la paginación numerada del apartado del muro.

Capítulo 55: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 55

15:34


Continuamos con la creación de la paginación numerada en PHP en base al código dado.

Capítulo 56: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 56

15:17


Creamos botones de aspecto más atractivo y en CSS, de forma que les podemos dar el ancho que necesitemos.

Capítulo 57: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 57

15:14


Finalizamos el gráfico del botón dinámico. Asignamos validación a los elementos del formulario, marcando en rojo cuando nos faltan datos, todo en sencillo javascript. Realizamos el cierre de sesión en PHP.

Capítulo 58: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 58

13:54


Solucionamos el problema con el cierre de sesión. Controlar que el email en el alta no existe ya en la Base de Datos para evitar usuarios duplicados.

Capítulo 59: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 59

14:37


Solicitamos al nuevo usuario que escriba su contraseña dos veces para evitar errores. Creamos un antispam sencillo, más efectivo que un Captcha y mucho más sencillo. Creamos el campo de modificar contraseña de usuario.

Capítulo 60: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 60

15:05


Finalizamos y comprobamos que la contraseña cambiada se guarda correctamente en la Base de datos. Creamos el procedimiento para enviar un email de recuperación de contraseña.

Capítulo 61: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 61

15:06


Continuamos con el procedimiento de recuperación de contraseña de los usuarios.

Capítulo 62: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 62

15:01


Parte final del procedimiento para recuperar la contraseña de usuario. Comenzamos con la preparación del hosting para subir al Web a un dominio real.

Capítulo 63: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 63

15:10


Preparamos el servidor remoto y exportamos la Base de datos al servidor para poder utilizarla. Comprobamos, ya en el servidor, que funciona la recuperación de contraseña.

Capítulo 64: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 64

16:27


Revisamos los caracteres y acentos en el email que se recibe. Creamos el mail de confirmación de usuario y el campo en la Base de Datos que nos confirma la existencia de ese email.

Capítulo 65: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 65

16:23


Revisamos los permisos de las carpetas que utilizamos para subir imágenes al servidor, y comprobamos que todo está correcto.

Capítulo 66: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 66

15:17


Revisamos el problema que había en el envío de los emails. Realizamos una encriptación sencilla de los datos que se pasan por URL para evitar que los usuarios puedan llegar a ver zonas que no deseamos.

Capítulo 67: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 67

16:09


Revisamos el pequeño algoritmo de encriptación para que funcione correctamente. Canonicalización de la página con WWW.

Capítulo 68: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 68

15:25


Revisamos el htaccess para que finalmente nos funcione. Ponemos las condiciones de uso de la página. Colocamos el código de Google Analytics y activamos la página con las herramientas de Webmaster. Preparamos la Base de datos para preparar la programación de los selectores dependientes, o “dependant dropboxes”, todo en Jquery y sin recargar la página.

Capítulo 69: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 69

15:40


Continuamos con los desplegables dependientes en PHP y JQuery. Creamos una tabla donde guardaremos los datos de las actividades extras de la persona.

Capítulo 70: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 70

15:17


Mostramos los datos que hemos insertado con el desplegable dinámico en la página de actividades extras del usuario.

Capítulo 71: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 71

15:34


Solucionamos el problema al mostrar los datos extra del usuario y damos la posibilidad a la persona para que borre sus propios datos de actividades.

Capítulo 72: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 72

15:17


Programamos la posibilidad de eliminar los datos extra del usuario, por él mismo. Resolvemos algunos problemas con usuarios ya reales. Eliminamos la encriptación de la URL. Creamos un campo nuevo para saber si la persona ha accedido al sistema, con el fin de saber los usuarios activos en el sistema.

Capítulo 73: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 73

15:14


Realizamos una función para detectar y controlar los tiempos de cuándo fue la última vez que un usuario entró al sistema y realizó acciones con el fin de tener claro el último momento que el usuario hizo algo.

Capítulo 74: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 74

13:54


Cambiamos la plantilla principal para añadir el bloque de usuarios conectados en los últimos minutos. Comenzamos con la instalación del script de chat. Es un modulo con licencia GPL que utilizaremos para hacer un chat muy similar al de Facebook en PHP y guardando los datos en MySQL.

Capítulo 75: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 75

14:37


Configuramos el chat para que el propio usuario no salga en los usuarios conectados, así como aquellos usuarios que no hayan completado su nombre.

Capítulo 76: Videotutorial Hacer Red Social con Dreamweaver y PHP

Capítulo 76

15:05


Reparamos las opciones necesarias para que nos funcione el chat. Ultimamos temas de links y hacemos la imagen principal del logo elástica para que se vea bien en móviles y tablets.

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