Presentación del curso. Breve resumen y explicación de las 3 partes del tutorial.

Preparación del entorno de trabajo, descargamos Bootstrap, Jquery e iniciamos el proyecto Web para poder ir trabajando.

Acabamos de configurar la plantilla que nos servirá de base para todo el proyecto. Creamos nuestra primera página y nos preparamos para desarrollar la estructura

Comenzamos a trabajar con nuestra página principal, creando la estructura de lo que será nuestra Web. Creamos un menú comprimible, que va a cambiar cuando estemos viéndolo desde un móvil.

Ajustamos y resolvemos definitivamente las capas de nuestra Web para ajustarlas al tamaño y creamos la primera tabla de la base de datos. Ajustamos el contenido del menú.

Hacemos el menú con desplazamiento suave, configuramos un carrousel/slider de forma sencilla en Bootstrap y creamos la primera ventana modal.

Creamos nuestro primer formulario en bootstrap, aprendemos a exportar e importar la base de datos y hacemos nuestra página de registro de usuario.

Configuramos nuestros fragmentos de código para hacerlos servir en Dreamweaver, en Sublime Text y en otros editores para facilitar el desarrollo de la Web en cualquier entorno.

Preparamos el formulario de alta de usuario para insertar los datos en la base de datos. Utilizamos el fragmento para evitar la inyección SQL y la inserción de datos.

Comprobamos el funcionamiento del formulario que nos servirá de base para todos los formularios que vamos a ir realizando en la Web. Comenzamos con la validación de los campos del formulario.

Perfilamos el sistema de validación del alta de usuario utilizando javascript y mensajes bien claros de bootstrap. Comprobamos que repite el email y el password, etc...

Creamos un flotante para las condiciones de uso y realizamos las últimas validaciones. Comenzamos a estructurar el formulario de acceso al sistema.

Realizamos la validación de los campos correspondientes al acceso de usuarios.

Generamos un logo y algunos sliders para dar una apariencia más profesional a nuestra web.

Completamos el script para el login en la Web de las personas registradas y comenzamos a generar la primera función para obtener el nombre del usuario y mostrarlo por pantalla.

Mostramos el nombre de la persona logueada a la izquierda y habilitamos el botón de cerrar sesión

Creamos la tabla donde se van a almacenar los datos de los hoteles o propiedades de los usuarios, así como la tabla de provincias. Comenzamos con el formulario de alta de propiedad.

Realizamos una consulta para sacar los datos de las provincias y continuar creando el formulario de alta de propiedad.

Realizamos el javascript para recordar los campos que el usuario debe de completar para que la inserción sea válida. Modificamos la consulta INSERT para adaptarla a nuestra consulta.

Finalizamos el alta inicial de la propiedad y preparamos una página donde saldrán las propiedades que tengamos como propias para poder modificarlas. Restringimos el acceso a algunas páginas si no hay nivel por parte del usuario o es una página donde necesitamos saber quien completa los datos.

Generamos la página donde aparecerá la lista de propiedades que pertenecen al usuario que está conectado.

Arreglamos la lista de propiedades del usuario y comenzamos a crear la página donde subiremos las fotos del usuario relacionadas con la propiedad.

Continuamos con el formulario donde podremos subir varias imágenes seguidas y asociarlas directamente a una propiedad del usuario

Modificamos el formulario para que compruebe los tamaños de las imágenes, su extensión y resolvemos los problemas de "strict PHP".

Creamos la página que nos cambiará cual de las imágenes favoritas queremos utilizar para nuestra propiedad.

Evitamos que cualquiera pueda modificar fotos de hoteles que no son suyas, o que pueda ver hoteles que no son propios.

Finalizamos la eliminación de fotos a través de Ajax, con lo que conseguimos eliminarlas sin recargar la página.

Aprendemos a utilizar firebug para detectar errores en Javascript y en archivos PHP llamados desde el propio Javascript por Ajax

Eliminamos la imagen físicamente del servidor cuando alguien elimina la imagen y mostramos la imagen favorita por pantalla.

Comenzamos la realización del formulario de edición de propiedades con el fin de actualizar los datos de la misma si lo necesitáramos.

Finalizamos el formulario de actualización y comenzamos con el apartado del calendario, para marcar los días de disponibilidad de nuestra propiedad.

Personalizamos el calendario para que salga en castellano y creamos una tabla para almacenar los días que el alquiler no está disponible

Resolvemos el marcado en rojo de los días seleccionados y creamos el evento para marcar dinámicamente los que el usuario seleccione.

Comprobamos si la fecha existía ya en la base de datos al respecto de ese hotel para almacenarla o eliminarla según sea el caso.

Hacemos una función para obtener el nombre de la propiedad que estamos manejando, comenzamos a operar con el pie de página.

Finalizamos el pie de página y comenzamos con la consulta con paginación que nos mostrará las propiedades disponibles

Agregamos el campo de precio en la Base de datos y mostramos la paginación organizada de la página principal

Solucionamos los problemas gráficos y añadimos el precio a los datos de las propiedades. Empezamos a construir un selector de fecha para la búsqueda de propiedades. Cambiamos la fuente original de la Web.

Seleccionamos y configuramos el selector de fechas Desde-Hasta, y lo enmarcamos en la parte superior de la página para empezar a obtener los datos.

Añadimos el campo provincia en el buscador y comenzamos a definir la búsqueda que se tendrá que hacer en la base de datos

Arreglamos el formulario de búsqueda en una página aparte y comenzamos a trabajar con la consulta dinámica de búsqueda.

Finalizamos el buscador de propiedades, guardando la fecha y la provincia después de cada búsqueda, revisamos la paginación

Arreglamos la visualización de la página principal e introducimos un mapa de Google Maps de forma dinámica en la página principal.

Generamos los marcadores para el mapa principal de los resultados de la búsqueda de propiedades

Acabamos con la generación del mapa con GMaps, y ocultamos los resultados en principio para no llenar la página con demasiados datos. Comenzamos a diseñar la página donde mostraremos los datos de la propiedad como tal para poder efectuar la reserva.

Sacamos los datos de la propiedad y realizamos tabs de bootstrap, donde almacenaremos los datos concretos de la propiedad que estamos viendo.

Solucionamos el problema del Gmaps cuando metemos el mapa en un campo que al principio está vacío. Centramos el mapa en nuestra propiedad concreta.

Realizamos el desarrollo de la galería utilizando exclusivamente código de Bootstrap

Introducimos el selector de fechas en la vista de propiedades para poder seleccionar el cambio de las mismas.

Preparamos el selector de fechas con una función que nos confirma si los datos corresponden a días libres.

Preparamos los textos de aviso para cuando la propiedad no está lista. Mostramos un calendario que nos enseñará cuales son las fechas no disponibles de la propiedad en cuestión.

Creamos una función para mostrar los días que están anulados por el propietario del hotel.

Cambiamos el color de algunos aspectos del calendario y comenzamos a crear el botón para efectuar la reserva.

Creamos la página donde mostraremos al usuario lo que va a reservar definitivamente, para pasar al pago por Paypal.

Calculamos el número de días de nuestra reserva así como el coste de la misma para pasar el pago a Paypal

Generamos la página final que nos saltará a Paypal para realizar el pago una vez hayamos realizado todas las comprobaciones.

Guardamos los datos de la reserva en una tabla de la base de datos e iniciamos el formulario para el pago por Paypal

Subimos la Web al servidor para ponerla en abierto y poder efectuar algunas pruebas de Paypal

Completamos el pago por Paypal enviando los parámetros y efectuando las comprobaciones necesarias.

Realizamos las funciones que nos actualizan o eliminan las reservas realizadas. Creamos una función de limpieza de reservas caducadas.

Actualizamos el calendario de reservas de forma que no se nos muestren las que están reservadas o en proceso de pago

Iniciamos la explicación de la consulta que nos dará las propiedades que tienen fechas de reserva coincidentes con las buscadas de forma que nos dé el resultado apropiado en la respuesta

Continuamos con la consulta dinámica que nos eliminará de los resultados, las reservas que tenemos ya ocupadas

Finalizamos la consulta para evitar que se reserven propiedades en días seleccionados. Comenzamos con la parte para mostrar al gestor de propiedades los días reservados.

Mostramos al alquilador de propiedades las fechas que están ocupadas con reservas. Ajustamos el menú y las páginas de regreso de las principales.

Modificamos el menú de la izquierda para hacerlo más atractivo y comenzamos a crear la página donde mostraremos las reservas al usuario.

Modificamos la estructura donde mostramos los datos de las reservas conseguidas

Mostramos las reservas del usuario público y creamos la tabla que utilizaremos para la gestión de facturas

Comenzamos con la generación de facturas, para ello creamos un usuario administrador con un nivel superior, que será el único que puede generar la numeración de las facturas.

Generamos el formulario para el número de factura y comenzamos con el script para poder generar un PDF con PHP de la misma.

Generamos los datos de la factura para que el usuario se pueda imprimir y generar la factura directamente en PDF.

Mostramos el PDF generado también al usuario que realizó la compra. Comenzamos con el código para detectar cuando un usuario está activo en el sistema.

Creamos una tabla donde almacenaremos el último momento en que el usuario se movió por la Web, de forma que detectaremos si un usuario está online o no con un tiempo de error reducido.

Limpiamos las sesiones huérfanas y comenzamos a definir el chat integrado para que los clientes puedan comentar detalles con los propietarios

Continuamos creando el jquery que hará que funciones nuestro chat y se quede guardado como ficheros independientes.

Seguimos modificando el formulario para el chat

Finalizamos el chat con el propietario y mostramos un aviso para saber si el propietario está o no conectado en ese momento y así poder hablar con él en directo.

Creamos la página donde se nos mostrarán todos los chats que tenemos iniciados.

Creamos un pequeño aviso en el menú de la izquierda que nos avisa de los chats que tenemos activados y creamos el chat para la interacción directa con la parte que pregunta.

Listamos también los chats que hemos iniciado todos y damos la posibilidad de eliminarlos.

Comenzamos con la generación de las pistas para alquilar, copiando y pegando todo el trabajo que teníamos hecho en las propiedades.

Preparamos el seleccionador de fecha para ponerlo en modo agenda y poder seleccionar las fechas en las que no deseamos que nadie pueda reservar.

Modificamos el script que gestiona las horas de cada día para guardar en la base de datos las franjas de horario en las que no permitimos la reserva.

Guardamos la información de las fechas denegadas por el propietario de la pista en una tabla con el fin de mostrarlas a posteriori y así evita que nos reserven rangos de fecha que tenemos como bloqueados.

Solucionamos el problema con las fechas guardadas y empezamos a generar la página para ver la pista con sus reservas

Mostramos el calendario, esta vez en formato horas para que el usuario pueda ver las reservadas y pueda efectuar su selección

Modificamos las consultas que nos van a servir para determinar si tenemos horas reservadas en determinados rangos.

Modificamos la página previa de reserva para comprobar que los datos nos llegan correctamente.

Llegamos a la página de pago por Paypal de la pista que estamos reservando, pero para saber el precio necesitamos saber el número de horas, así que hacemos una función para tal efecto.

Finalizamos el pago por Paypal y arreglamos las funciones para el tema de las pistas.

Efectuamos los retoques finales para mostrar las horas ocupadas por las reservas y finalizamos el proyecto.

Segunda parte del Tutorial. Hacer una página Web responsive basada en una plantilla gratuita o comprada. Parte 1

Hacer una página Web responsive basada en una plantilla gratuita o comprada. Parte 2

Hacer una página Web responsive basada en una plantilla gratuita o comprada. Parte 3

Tercera Parte del tutorial. Transformar una Web a responsive. Parte 1

Tercera Parte del tutorial. Transformar una Web a responsive. Parte 2

Tercera Parte del tutorial. Transformar una Web a responsive. Parte 3

Tercera Parte del tutorial. Transformar una Web a responsive. Parte 4

Tercera Parte del tutorial. Transformar una Web a responsive. Parte 5

Tercera Parte del tutorial. Transformar una Web a responsive. Parte 6