En este vamos a ver el proyecto final que estaremos construyendo en este curso.
Siempre he creído que se aprende mucho más cuando realizas un proyecto de la vida real y este será el
proyecto que estaremos realizando.
Primero puedes ver la parte superior lo que viene siendo el Geer con una imagen de fondo muy grande
pero tenemos lo que viene siendo este nombre del sitio web estaremos construyendo un sitio web para
auges de la webcam que es una conferencia de diseño web la mejor conferencia Diseño Web.
Tenemos el lugar donde se encuentra con estos iconos de Photoshop y la fecha en la que será este evento.
Además del menú de redes sociales hacemos un poco de scroll tenemos la barra principal de navegación
podemos ir a las distintas secciones internas de esta página web así como el logotipo y todo esto será
responsivo.
Por ejemplo si lo voy a inspeccionar y lo voy a colocar a este lado puedes ver que el sitio web se adapta
correctamente y podemos dar clic aquí.
El menú cambia y podemos acceder a los distintos elementos desde el dispositivo móvil te mostrará cómo
crear todo esto.
Muy importante toda la parte visual también la parte de base de datos y PHP todo será código escrito
por nosotros nos tenemos utilizando ningún Framework entonces estaremos creando todo más que nada para
mostrarte cómo funciona cada una de las tecnologías que se incluyen en este curso por separado.
Si aprendes lo básico créeme este será muy fácil comenzar a trabajar con los Frend Works que hoy en
día después tenemos la mejor conferencia de diseño web un texto sobre la conferencia tenemos un poco
del programa de elementos tenemos mostrando dos seminarios dos conferencias y dos talleres vídeo de
fondo y puedes ver que por ejemplo se doy clic en conferencias me parece este filtrado o en talleres
y también me filtra los distintos eventos que van a pasar en esta conferencia de diseño web.
Si quieres puedes dar clic en Ver todos y eso te va a llevar a todos los eventos de la conferencia.
Muy importante mencionar que todo esto viene desde una base de datos estaremos creando un administrador
enseguida te lo voy a mostrar vamos a volver a la página principal.
Nota como lo que viene siendo el menú se queda atorado en la parte superior.
También te mostrará cómo crear un efecto que muchos clientes lo piden en su sitio web incluso si tienes
un proyecto lo podrás agregar en él para que se vea bastante bien a mi me gusta mucho tener un menú
fijo arriba.
Continuando tenemos nuestros invitados también la parte de los invitados su fotografía su nombre y su
biografía todo vienen desde la base de datos.
Puedes dar click aquí viene más información de esta persona su nombre lo que viene siendo su fotografía
y lo que viene siendo su biografía también y todos ellos de nueva cuenta vienen desde la base de datos.
Más abajo tenemos estos números que se animan una vez que lleguemos a esta zona y demos scroll.
Estos números animan dándonos un resumen de la conferencia 6 invitados 15 talleres 3 días y 9 conferencias
y más abajo tenemos una tabla de precios el pase por día de 30 todos los días que son tres cincuenta
y dos días por 45 y desde aquí los puedes comprar también las animaciones.
Esta parte te lleva a las reservaciones.
En ellas es donde los usuarios eligen qué boleto van a comprar y a qué conferencia se quieren inscribir
enseguida te estarán mostrando cómo funciona esa parte.
Si continuamos tenemos un mapa.
Este es un mapa de una aplicación que se llama Affleck debido a que Google Maps recientemente decidió
cobrar o pedir al menos una tarjeta de crédito para poder utilizar su API hemos migrado a un servicio
completamente gratuito y que funciona bastante bien bastante.
No le pide nada a Google Maps.
Entonces te mostré cómo integrarlo.
Después tenemos una parte de testimoniales estaremos creando todo el HTML CSS para darle esta apariencia
se ve bastante bien también si estás construyendo un portafolios muy seguramente quieres mostrar testimoniales
para que la gente conozca tus servicios.
También tenemos un registro al newsletter puedes darle clic aquí en registrar dejar tu correo electrónico
y eso lo va a conectar con un servicio llamado MailChimp y podremos ir construyendo una lista para el
newsletter recibir notificaciones o avisos sobre el evento.
Mostraré cómo integrar MailChimp también a tu servicio a tu página web.
Al igual que el servicio de mapas y un poco más adelante también PayPal un poco más abajo tenemos este
contador le hemos dado una fecha en la que inicia este evento y tenemos cuántos días cuántas horas cuántos
minutos incluso cuántos segundos faltan para que inicie la conferencia.
De esta forma tenemos más información a los visitantes para que sepan cuando inicia la parte inferior
te mostraré cómo agregar el widget de Twitter así como el menú de redes sociales y un poco de información
sobre nosotros.
Quiero mostrarte la parte de cómo funciona lo que es el administrador que estaremos creando.
Si damos clic derecho si abro esta R.L aparece un formulario para elogiar o iniciar sesión.
Voy a colocar aquí las credenciales que he puesto como ejemplo de que quiere iniciar sesión y aparece
esta notificación lo incorrecto.
Bienvenido JuanPablo y primero eso nos lleva a lo que es el dashboard un pequeño resumen con todo lo
que tenemos de registros tenemos una gráfica que nos dice cuántas personas se han ido registrando.
Estos son algunos registros de ejemplo tenemos un resumen de registros.
Por ejemplo tenemos total registrado son 22.
Nos han pagado 6 16 se quedaron sin pagar no completaron el proceso de PayPal y nuestras ganancias totales
son de 840 te mostraré cómo crear toda esta parte.
Después aparecen los regalos si vemos lo que es el formulario de reservaciones en la parte inferior
les estamos dando un regalo etiquetas pulsera o plumas.
Los usuarios eligen qué quieren recibir y en lugar de estar yendo por cada uno de los registros podemos
escribir un poco de código SQL para traer estos reportes y no tener que ir a cada uno de los registros.
Saber cuántos usuarios han pagado cuántos son nuestras ganancias y qué regalos han decidido tener para
mandar a hacer los regalos de nueva cuenta todo esto es código PHP todo está almacenado en una base
de datos.
Quiero mostrarte algo y es que si por ejemplo Toy scroll hacia arriba aquí tenemos a nuestros invitados
digamos que este personaxe más Juan Sánchez queremos cambiarle su nombre nos equivocamos está mal capturado
esquivamos si eran invitados y puedes dar clic en Ver todos entonces aquí aparece un resumen de todos
los invitados encontramos a Juan Sánchez aparece aquí su imagen puedo dar click aquí y cambiar por Juan
Pérez por ejemplo y también podemos cambiar su imagen te mostraré cómo crear este pequeño botón para
subir imágenes subir archivos lo que viene siendo PHP y SQL hecho para mostrarte cómo funciona voy a
hacer esto hacia un lado y voy a cargar una imagen nueva será una imagen de una mujer.
Entonces aquí vamos a ponerle la nueva imagen con el Carolina Pérez está bien y doy click en Añadir
además que ese se guardó correctamente.
Vamos que no volvemos a nuestros invitados y vemos que aparece Carolina pero también puedes ordenarlos
por geografía por nombre o por imagen entonces ver que aparece Carolina Pérez y aparece su imagen.
Nueva muestra de cómo hacer todo esto todos estos códigos PHP y SQL escrito por nosotros no utilizaremos
pringarse nuevamente y si recargamos lo que es la página principal aparece Yuri Herrera y también aparece
Carolina Pérez esta imágenes de Yauri.
Por eso se repite pero te muestra cómo crear todo este panel de administración en el que puedes cambiar
los eventos las categorías los invitados revisar qué personas están registradas e incluso crear nuevos
administradores.
Este es el listado de los que vienen siendo los invitados que hay pero puedes dar click aquí y agregar
nuevos.
Con el mismo formulario también puedes agregar distintos invitados nuevos a los que ya tenemos.
Tener un sitio web 100 por ciento ministrable.
Ahora vamos a ver los eventos calendario de eventos donde se irá a eventos y ver que tenemos ver todos.
Aquí tenemos un listado de todos los eventos que suceden ese día.
Entonces supongamos que dice angular 5 de momento ya va en la versión 7 vamos a cambiarlo.
Aquí ponemos angular 7 damos su nombre elegimos una categoría que tenemos tres las categorías también
las podemos administrar va a ser seminario La fecha está bien y digamos que de hora cambia a las 5 p.m.
y desde aquí podemos elegir el ponente quién la va a dar esta plática y esta parte está conectada con
invitados.
Si agregamos aquí estamos invitados esta parte se actualiza automáticamente.
Entonces el clic en Guardar y guardamos cambios y recargamos el calendario y vemos que ahora si se angular
7 y ha cambiado a las 5 de la tarde va a ser más grande esto otra vez.
Entonces como mencioné anteriormente las categorías de los eventos están conectadas puedes dar clic
en Agregar una nueva categoría.
Digamos que vamos a agregar una para workshops y aquí tenemos un listado de íconos aquí podemos seleccionar
el icono para esta categoría en específico vamos a poner cualquiera en realidad digamos que ésta que
tiene como unos engranes damos clic en Añadir.
Se agregó correctamente y si voy a eventos y agregar un nuevo evento en lo que vienen siendo las categorías
y aparece whatsapps toda esta parte está conectada y te mostraré cómo hacerlo todo con código escrito
por nosotros.
De la misma forma los invitados o ponentes puedes dar clic aquí.
Invitados agregar uno nuevo y voy a agregar aquí mi nombre.
Juan de la Torre instructor en Demy y no voy a colocar imagen porque no tengo ninguna lista de click
en Añadir vemos que se guarda correctamente y aquién en crear Evento ya podré seleccionar de mi categoría
de workshops que acabo de crear y también a los ponentes aparece Juan de la Torre.
Entonces toda esa parte 100 por ciento dinámica y cada evento que tengamos en esta parte y lo tengamos
en eventos lo podemos eliminar podemos verlos.
Podemos crear nuevos o podemos eliminarlos supongamos que queremos eliminar uno digamos este diseño
de interfases eventos ver todos y que el diseño de que parece interfases este lo da Susan Sanchez pero
aquí buscará el evento voy a cerrar estas ventanas dice Susan Sánchez Navas presionando este botón de
basura.
Nos pregunta si estamos seguros para eliminarlo vamos que si hemos eliminado registro eliminado y recargamos
en lo que es el front end y vemos que se ha ido ese registro tenemos otras secciones en el sitio web
por ejemplo conferencia tiene una serie de imágenes utilizando un plugin llamado Lightbox podemos agregar
este pequeño efecto para ver una imagen más grande se ve bastante bien en invitados es lo mismo que
tenemos en el frontón y finalmente lo más importante es la parte de reservaciones.
Es en esta página en la que los usuarios van a elegir los días que quieren pagar.
Tenemos paquetes para un día para dos días o para los tres días.
Van a colocar su nombre su apellido y su correo del listado de conferencias lo van a elegir en base
a los días que han decidido comprar.
También estamos vendiendo algunos productos y estamos dándoles un regalo.
Y finalmente tienen que realizar el pago por medio de PayPal.
Vamos a realizarlo aquí para ver no tenemos registro de usuarios aquí se nombre si esto lo dejas vacío
aparece este campo es obligatorio para mostrarte cómo validar un formulario si que va a poner.
Juan de la Torre y voy a colocar aquí un correo cualquiera no importa que no importa por el ejemplo
que estamos elaborando pero obviamente en este correo estaremos enviándoles avisos a los usuarios.
Después tenemos elige el número de boletos tenemos pase por un día pasé por los tres días o por dos
días con lo que incluye cada uno.
Por ejemplo el pase por un día puedo hacer click aquí y vemos que puedo reservar los eventos del día
lunes puedo volver y vemos que desaparece o incluso aquí viene el de dos días para darle clic aquí para
que aparezca uno aparecen los lunes y los del martes o el de todos los días.
Puedo dar clic aquí aparecen lunes martes y miércoles los tres días puedo elegir eventos para mantenerlo
simple a unos elegidos.
Boletos por ejemplo vamos a comenzar a elegir toda esta parte que ves aquí.
Todo esto viene de nueva cuenta desde el administrador todos los eventos está conectado con esta parte.
Si agregas nuevos eventos se reflejan aquí si los eliminas se reflejan aquí también si recuerdas previamente
mostré en el calendario que habíamos eliminado un evento de aquí porque teníamos seis ya nada más tenemos
cinco.
Aquí siguen apareciendo cinco entonces estás conectado toda esta parte con la base de datos no elejir
por ejemplo aquí algunos algunas conferencias y después viene la parte de pagos y extras.
Aquí nos venden una camiseta del evento puedes elegir una cantidad digamos dos camisetas un paquete
de etiquetas etiquetas de las tecnologías que quiero uno de esos y nos dan un regalo si doy click en
calcular o vemos que dice debes elegir un regalo si el regalo es obligatorio y digamos que quiero elegir
una pluma de clic en calcular aparece cuánto debo pagar con un pequeño resumen y doy clic en pagar.
Al realizar este pago me lleva a lo que es la página de Paypal puedes ver que aparece la página de PayPal
y voy a mostrarte algo más si vamos a quedar registrados doy clic en Ver todos los filtros por la fecha
de registro para tener los últimos puedes ver que mi registro que estoy haciendo de 110 dólares es el
que estamos haciendo ahorita con las conferencias que he elegido que son tres dicen no pagado entonces
tenemos que ir a PayPal y aquí nada más le voy a dar continuar procesa el pago de PayPal.
Revisa que yo tengo fondos y si es correcto me aparece el pago se realizó correctamente y me da una
idea hago estaremos utilizando PayPal para comprobar que este pago es real real y se hizo correctamente
y si recargo nuevamente y Los ordeno por la fecha de registro puedes ver que aparece mi registro ahora
como parados tenemos comprobando y enviando una petición al servidor de PayPal para que nos diga si
esta persona en realidad pagó.
Aquí puedes eliminar los registros editarlos en caso de que alguien después llegue oye yo quisiera cambiar
mi conferencia etcétera.
Toda esta parte la puedes hacer aquí pero puedes ver que tenemos esta parte 100 por ciento funcionar
y las personas pueden reservar lo que vienen siendo sus conferencias pero también pueden comprar algunos
artículos algo que quiero mostrarte es que esta persona por ejemplo pagó 110 dólares y eligió plumas.
Si vamos de vuelta a lo que es el dashboard claudiquen dadas por el número de las ganancias totales
es mayor y las plumas aparecen en 12 aparecen en dos porque si vemos los registros y aquí le ponemos
por regalo tenemos plumas 1 y 2 entonces no hay necesidad como que si esperamos mil visitantes estar
viendo quienes eligieron plumas tenemos este resumen que aquí viene.
Cuántas personas han elegido plumas cuántas etiquetas y cuántas pulseras puedes ver el total de parados
también cambia 7 y nuestra gráfica también incrementa estaremos creando este panel de resumen y te mostraré
también cómo hacerlo.
El curso incluye siete tecnologías de desarrollo web HTML5 CSS3 JavaScript AJAX PHP y Meucci.
Todo el código que ves aquí los tenemos creando nosotros salvo en la parte del administrador que es
ésta la que incorporaremos una Libéré llamada admin LTI.
El curso describiremos todo el código como mencioné anteriormente no estaremos utilizando frameworks
como vostra ni como Arabel.
Nada en contra de los gringos como siempre digo pero si aprendes lo básico el día que decidas comenzar
a aprender un framework te va a ser mucho más sencillo.
La idea de este curso es que te conviertas en un desarrollador web profesional que domine las distintas
tecnologías y creéme con este proyecto que estás construyendo aquí y se lo muestras a un posible empleador.
Existen grandes posibilidades de obtener un empleo en esta industria para obtener un trabajo en esta
industria no es necesario tener un título pero sí se necesita saber cómo escribir código y a lo largo
del curso estaremos escribiendo literalmente miles de líneas de código así que espero verte en el en
los próximos videos puedes ver los otros proyectos que estaremos construyendo son dos más.
Espero que sean de tu agrado y verte en el curso.