Defensa Proyecto ASIR Maribel Cortes Hernandez - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Bueno, pues empezamos. Estamos grabando. Buenos días Maribel. Buenos días Sabina. Hoy día
00:00:00
17 de enero a las 12.50 estamos convocados a través de jefatura de departamento para
00:00:07
la defensa del módulo profesional del proyecto del ciclo formativo de grado superior de administración
00:00:12
de sistemas informáticos en red. Te informo de que esta grabación se usará en el entorno
00:00:18
cerrado de Educamadrid con fines educativos y sólo estará a disposición de los profesores
00:00:22
evaluadores en el aula virtual para llevar a cabo la evaluación y calificación de la defensa
00:00:27
del proyecto. En el aula virtual de proyectos habéis sido informados de los criterios y
00:00:32
rubrica de calificación. El orden de la presentación del proyecto es el siguiente, 15 minutos máximo
00:00:37
para defender el proyecto y cinco minutos para preguntas por parte del tribunal. Dicho esto,
00:00:42
tu tiempo de exposición comienza a partir de que empieces a compartir la pantalla. Mucha suerte.
00:00:48
Vale, pues me estáis viendo ahora en la pantalla compartida. Te veo a ti, no veo la pantalla.
00:00:53
Bueno, iniciamos. Este es mi proyecto, lo presento, es una tienda online de carcasas
00:01:11
de PC de escritorio. Esta es mi imagen de portada y pues analizando un poco el contexto por qué
00:01:18
nace este proyecto, vamos a suponer o imaginar un supuesto grupo de jóvenes emprendedores que se
00:01:23
quieren dedicar a la venta de carcasas de ordenadores, tienen un presupuesto limitado y
00:01:28
para ello necesitan aumentar su presencia en internet. Lo que quieren y lo que recurren es
00:01:33
a contratar los servicios de un técnico programador para que les elabore un escaparate web con servicios
00:01:39
gratuitos y que de esta forma puedan los clientes ver sus productos y comprar algún artículo. De ahí
00:01:44
nace mi proyecto y es donde entro yo. En cuanto a los objetivos, destacar uno muy fundamental, que
00:01:49
he podido pues implementar este diseño de mi página web y a su vez implementar herramientas
00:01:56
libres para una pequeña empresa de jóvenes emprendedores en este caso. También he de comentar
00:02:03
que ha sido un poco complicado para mí en general porque pues he sido capaz de idear una de las
00:02:08
cosas importantes del mismo, que es la planificación del proyecto. No sabía cómo empezar hasta pues que
00:02:13
poco a poco he ido ideando los objetivos que tengo indicados en el cuadro y así de esta manera pues
00:02:18
llevar uno a uno. Algo también muy importante es que he tenido una parte de inconveniente, pues ha sido
00:02:24
mi falta de experiencia y sobre todo los conocimientos en cuanto a edición de código, porque he de
00:02:32
reconocer que lo que tengo es la base mínima que aprendí en el grado, que me ha servido mucho, pero
00:02:37
aún así he tenido que dedicar gran parte para estudiar, como lo voy a explicar más adelante. Esto me ha
00:02:41
hecho que variara mucho el tiempo porque pues las tareas y la ejecución de pruebas me ha tomado gran
00:02:46
parte del tiempo del proyecto, pero aún así he ido avanzando. Pues en este caso he utilizado este
00:02:51
hosting, me he decidido por Infinity Free, ¿por qué? Es un hosting gratuito, también lo hay de pago, aunque
00:02:57
existen muchos más en el mercado, pero este en concreto me ha llamado la atención pues por sus
00:03:01
características, sus ventajas, que ofrece la versión gratuita. Se pueden alojar hasta tres
00:03:06
dominios en su web, su interfaz intuitiva, su versatilidad, su facilidad y las herramientas que te
00:03:10
proporciona él, como las que me deja usar desde fuera. No he tenido ningún inconveniente ni
00:03:16
problemas con ello. En cuanto a las herramientas y tecnologías que he usado, pues son los íconos
00:03:20
que tenéis en imagen, en pantalla, os explico muy brevemente cada uno de ellos. He usado el editor
00:03:26
de código Visual Studio Codes, uno de los demás destacados en la actualidad, permitiéndome
00:03:32
instalar extensiones para así simplificarme mucho el trabajo. Con Bustra, pues es una biblioteca
00:03:36
multiplataforma que me ha permitido usar sus plantillas para integrarlas en mi diseño de mi
00:03:40
página web. Flexila Client, es una herramienta que he utilizado exterior y con ella me ha permitido
00:03:46
subir mis archivos sin estar en necesidad cada vez que quiera actualizar algo, entrar al dominio.
00:03:51
Simplemente lo he hecho desde afuera, me ha dejado carga los archivos y solo con las credenciales
00:03:56
de Infinity Print, muy fácil. Con LightShop, lo que he hecho es para el tema de las capturas de
00:04:00
pantalla, que he buscado en internet, he cogido los logos de las tiendas y de mis productos, he hecho
00:04:06
las capturas. Esta herramienta muy útil, me ha gustado. Y con Flickr, lo que he hecho que es
00:04:12
un repositorio de imágenes, me ha permitido con esas capturas, con la herramienta anterior, guardarlas
00:04:18
ahí. En la versión gratuita te deja guardar hasta mil imágenes. En la versión de pago, pues infinitas,
00:04:22
también muy completas. Simplemente para poder sacar esa imagen, lo que he hecho es tomar su URL,
00:04:28
que hay varios métodos, y me la ha llevado a mi base de datos. Con la herramienta MySQL Workbench,
00:04:33
también la he usado de forma exterior, que me ha facilitado mucho editar la parte del script de la
00:04:38
base de datos y posteriormente me la ha llevado al servidor de base de datos de Infinity Print,
00:04:43
que es PHP My Admin. Simplemente la he copiado tal cual y me la ha importado sin problemas,
00:04:48
me la ha dejado ejecutar. Y con Paypal lo que he hecho es usar uno de sus botones para simular
00:04:54
el tema de la pasarela de pago. Los pasos que he seguido, pues una vez he creado mi dominio,
00:05:01
que en mi página se ha llamado pccasecrafters, con el subdominio que te asigna lo que es
00:05:07
infinityfree.com. Una vez que he instalado Visual Studio Code, está la interfaz gráfica inicial,
00:05:14
es una herramienta muy fácil de usar y tiene muchísimas, muchísimas extensiones que te
00:05:22
recomienda y al mismo tiempo te indica. O sea, me ha parecido algo tan completo para usar desde
00:05:29
mis conocimientos. Las herramientas que están en el lateral izquierdo son las que he usado
00:05:35
para realizar mi proyecto, nada más. Esta es la interfaz gráfica tal cual. Y en la siguiente
00:05:39
imagen vemos que una vez yo he instalado mi Visual Studio Code, lo que he hecho es hacer una prueba.
00:05:46
Inicialmente he creado mi carpeta, donde voy a alojar todo el contenido de mi proyecto. Pues se
00:05:52
puede abrir perfectamente desde el menú file o del ícono o arrastrarla. Y en ella voy a integrar,
00:05:57
pues todos mis archivos. Iré creando carpetas uno a uno, etcétera. Inicialmente he creado un
00:06:02
índice PHP para probar que lo que he creado en mi dominio, pues funcione a modo de prueba para
00:06:07
saber y para poder avanzar, claro. Y con la parte de Flex y la client, lo que he hecho es subir ese
00:06:13
archivo para comprobar que efectivamente me permite subir este archivo sin ningún contratiempo. Y
00:06:17
de ello, pues esta es la imagen de lo que me ha resultado una vez abierto en un navegador. Veo
00:06:24
que funciona perfectamente. Continúo con mis objetivos. Aquí lo que hago es que, como he
00:06:28
mencionado, con la herramienta MySQL y WordPress, lo que he hecho es crear mi script. Aunque las
00:06:34
tablas que estáis viendo, esta fue mi parte inicial. Es cierto que no la he llevado a cabo
00:06:39
al 100%. En la tabla de categorías no he podido aplicar algún filtro. Me ha faltado un poco más
00:06:44
de tiempo. Las otras tres sí las he implementado. Con alguna variación a medida que iba avanzando el
00:06:48
proyecto, pues tenía que hacer cambios. Pero también es cierto que no tenía que estar tocando lo que
00:06:53
era MySQL y WordPress. Una vez ejecutado ese script, lo que yo ya hacía en Infinity Free y PHP
00:06:58
MyAdmin, simplemente era modificar las tablas. Como ya tenía la RAM, ya tenía mi base metida, pues
00:07:03
se me facilitaba mucho. Y aquí una vez ya elaborado ese código anterior, lo que hago es
00:07:08
importo desde, o cojo, mejor dicho, una plantilla de Bustra para llevarla a mi escaparate web para
00:07:19
incorporarla. A ver cómo me quedaría inicialmente implementando esta herramienta para ver. Digo, voy
00:07:25
a mirar a ver cómo se visualiza en un navegador, si me gusta, si utilizando estas plantillas puedo
00:07:32
generar mi página web o tengo que utilizar otro método. Inicialmente sí, cuando he visto que me
00:07:37
salía algo de lo que yo quería, pues he cogido su código y me lo he importado a mi carpeta del
00:07:42
proyecto y a mi documento index.php. Y gracias a un enlace, pues también he seguido unas
00:07:48
recomendaciones para modificar unas etiquetas para que ese código se me cargue todo lo necesario de
00:07:53
esa página de Bustra, se me cargue en línea. También se puede llevar el proyecto, descargarlo
00:07:59
en los ficheros. Yo lo he usado en este caso en línea, que al tener internet no tenía ninguna
00:08:03
dificultad. Y esta sería la visualización en pantalla una vez abierta esa plantilla incorporada
00:08:07
en mi página web. Digo, inicialmente la veo y digo, pues empezar a hacer modificaciones, a incorporar
00:08:13
mis cosas, cómo quedaría. En la siguiente imagen observamos, pues con esta herramienta Flickr,
00:08:19
como le he mencionado, lo que he hecho es subir a ese repositorio de imágenes todas mis capturas
00:08:25
que había realizado. Las he incorporado en la galería. Es una herramienta muy fácil también de usar.
00:08:29
Ya lo he comentado, mil imágenes gratis. Y tan solo tocando o cogiendo, perdón, a su URL a través de tres
00:08:34
métodos que tiene, pues se extrae de ella y me la llevo a la base de datos. Y aquí he guardado todas
00:08:40
mis imágenes. Aquí tengo que hacer un gran inciso, sobre todo porque llegado a este punto ya empezaba
00:08:45
a tocar o a necesitar el tema de código. He tenido que hacer un parón casi de un par de semanas y
00:08:50
dedicar tiempo a aprender las bases mínimas de programación. Por lo menos a ver cómo funcionaba,
00:08:56
porque me encontraba con golpes y no sabía para qué era una cosa. Practicaba y he dicho, pues tengo
00:09:01
que parar para poder avanzar. He utilizado esta herramienta que yo la desconocía, pero súper,
00:09:06
súper importante en mi caso, porque al tener unas bases tan mínimas te enseña desde cero. Paso a paso
00:09:13
me he visualizado todos sus vídeos para poder practicar pseudocódigo y de esta manera pues
00:09:19
entender cómo funcionan los bucles, los arreglos, las variables, etcétera. Y yo así poder usar toda
00:09:23
esa información, sobre todo en PHP, para poderla pintar esa información en todos mis documentos,
00:09:29
en mi página web. Pues después de hacer el inciso y haber tomado el tiempo y de estudiar lo que es
00:09:34
los conocimientos de pseudocódigo con PCI, ya cojo, hago pruebas, repaso, etcétera, y prosigo a hacer
00:09:40
el tema del código, lo que es conectar la base de datos con PHP. Y lo que hago aquí, gracias al
00:09:46
vídeo que está en el final de la imagen, me ha ayudado bastante porque he podido seguir muchos
00:09:55
pasos y guiarme para conectar la base de datos. Lo que hago es coger las credenciales que me dan
00:10:01
Infinity Pre, pues mi usuario, mi nombre, mi password, la base de datos y el puerto. Hago
00:10:06
la conexión, además, perdona, cojo los datos que me da Infinity Pre, los almaceno en unas variables, creo
00:10:12
la conexión, evalúo la condición de que si no hay ningún error con la conexión de base de datos, y en
00:10:18
la parte final del código también he tenido que usar un cambio de codificación porque todas las
00:10:23
pruebas que realizaba me salían errores como las señas y las tildes. Y era con la codificación de
00:10:28
caracteres que tiene PHP. Con este código que, gracias a este vídeo, perfecto, me ha funcionado.
00:10:33
Pues una vez que tengo conectada la base de datos, lo que hago es crear y ejecutar una consulta a
00:10:39
la base de datos, en este caso a la tabla stock. Una vez cuando tengo este resultado, pues evalúo
00:10:45
una condición de ese resultado y conecto, pinto la información, dónde está el div, la parte del div
00:10:51
que me ha generado la plantilla de Bustra con su información. Yo la he adaptado a mi información y
00:10:57
lo que he metido, pues el tema de las variables que he asignado con la variable row, he metido
00:11:02
mi imagen, mi descripción, mi precio, mi ID de mis productos, para posteriormente yo abrir una web,
00:11:07
abrirlo en un navegador y comprobar cómo se vería. Y este sería mi resultado de cómo se vería una
00:11:13
vez introduciendo todos estos datos en mi plantilla. Y digo, pues bueno, partiendo de aquí,
00:11:19
genial. Estos son tres cajas que se ve, pero hacia abajo he metido mucho más contenido. Pues una vez
00:11:23
que he hecho la primera, pues lo que hago es hacer una segunda página. Hago de la misma,
00:11:33
perdón, del mismo modo que la página anterior, lo que hago es pinto una etiqueta en el menú para
00:11:39
meterlo en mi índice PHP y que este me lleve a la página de tiendas. Perdón, aquí se me había
00:11:44
pasado la, se me ha quedado la diapositiva, esta imagen, perdón, aquí una vez que he hecho igual
00:11:51
con la anterior, lo que hago es en este hago, en el menú meto una etiqueta para que me lleve a
00:11:55
esta página. Y en esta diferencia del anterior, lo que hago simplemente que le añado un botón de
00:11:59
web de tiendas que me llevará pues a toda la información de cada tienda. Este tiene su imagen,
00:12:04
su nombre, su dirección y su teléfono. Y de igual forma que las anteriores, hago con el formulario.
00:12:08
Importo un formulario desde Boostra, el inicial no me ha gustado mucho, lo he modificado y este
00:12:15
es el que a mí me ha gustado, las cajas que ves de formulario y de carrito. Para ello tengo que
00:12:20
hacer un inciso, para toda esta información que pueda recoger en el formulario y sobre todo en
00:12:25
el carrito, tengo que hacer una parte importante y explicar un poco qué es este punto de sesión de
00:12:29
PHP. Pues esto técnicamente complicado, yo lo explicaré de una forma más resumida que es como
00:12:35
imaginar una nube que está en el servidor de PHP y lo que hace es guardar la información que yo le
00:12:41
pido, que yo quiero. Por ejemplo, pues como una RAI, como una caja con huecos y para qué, pues lo
00:12:46
que me almacena es por ejemplo, lo que yo quiero en este caso que me almacenen las ideas de mis
00:12:52
productos, para qué, pues maras adelante, cuando yo lo requiera mediante la sesión start que es de
00:12:56
PHP, los pueda llamar y así usarlos en tres de los siguientes archivos que he hecho, que es en este
00:13:01
caso, por ejemplo, el código, la función de agregar el carrito, de borrar el carrito y de ver el
00:13:06
carrito. Con esto que hago ahora teniendo estos archivos editados, lo que hago es necesitar una
00:13:12
acción. ¿Qué tengo que hacer para que el usuario, por ejemplo, me llame a uno de estos archivos? Pues
00:13:18
simplemente cuando haga el clic en agregar, añadir al carrito en una de las imágenes, el
00:13:24
producto que él quiera, es la acción que me realizará con esos archivos. ¿Y cómo ejecuto
00:13:28
estos mismos? Pues mediante este código y ayuda de estas dos URLs, que me han ayudado muchísimo de
00:13:33
W3school y de Startoverflow, me ha ayudado a entender de cómo funciona gran parte. Hay líneas
00:13:39
que me cuesta todavía, pero en general lo que entiendo es que hace, que me hace llamadas HTTP a
00:13:46
mis productos, a mis archivos, perdona, y la función send, que es de envío, pues envía mi información a
00:13:51
mis ficheros, ¿como cuál? Pues, por ejemplo, como el ID de mi producto que almaceno en cada tarjetito, en
00:13:57
cada caja del producto. Una vez ejecutado los scripts anteriores, esa información la recupero
00:14:02
para que se me cargue, en este caso con estos scripts, en la función, perdona, hago que se me cargue
00:14:08
toda esa información anterior en la parte del carrito, que es este, todo este código que hace
00:14:14
que me llame y se me cargue ahí. Destaco en la parte del formulario que lo que hace esta parte
00:14:19
de código JS, que también me la genera Boostra, es validar la información dentro de una de las etiquetas
00:14:26
del contenedor de la plantilla, perdona, de las etiquetas DEEP, es el contenedor de una de la plantilla
00:14:32
generada del formulario, lo que hace es validar esa información, la etiqueta class, require, requerido,
00:14:38
obligatorio, que cuando se introduzca la información, ese botón lo que hace es validar que esa
00:14:43
información sea correcta. Por ejemplo, pues si se introduce un dato erróneo, te la va a pintar en
00:14:47
forma de color rojo y te saldrá un texto que te dirá por favor introduzca el dato correcto y se
00:14:53
puede proseguir. Pues una vez que se da a comprobar y continuar, pasamos a la
00:14:58
pasarela de pago. Otro punto enorme, hago un breve resumen, he tenido muchos problemas con mi cuenta
00:15:04
personal, he tenido que usar una cuenta familiar, el tema de los botones no sé si los ha actualizado
00:15:11
Paypal, no te deja general en sí el precio del producto que tienes, he tenido que poner un precio
00:15:16
simulativo, 0.01 céntimo, también al realizar las pruebas pues tenía que pagar, con lo cual pues
00:15:22
bueno, he cogido la parte del código, lo que he hecho con la parte de sesión de PHP es coger los
00:15:27
datos que están almacenados en el formulario para llevármelos a la sesión, poderlos guardar ahí.
00:15:32
En este caso la parte de por, que es el botón que he extraído el código de Paypal y en otro botón
00:15:39
también que he simulado, que ambos hacen lo mismo, sea por Paypal o el botón que yo he generado, se puede
00:15:47
comprar perfectamente, uno paga y otro no paga. Pues una vez ejecutado y pasado por la pasarela
00:15:51
de pago, lo que hago es ejecutar la compra, que se hace aquí, que una vez guardado los datos que había
00:15:58
que tenía en el formulario, lo que hago con esta parte de sesión es recuperar esos datos, los he
00:16:03
guardado en una nueva interior y aquí lo recupero, ¿para qué? Para poder actualizar la tabla de
00:16:09
ordes, que se saque el producto y en la base de datos pues se pueda implementar a qué cliente
00:16:14
se ha pedido ese producto y luego pues actualizar la tabla de stock para descontar el producto. Uno
00:16:20
me actualiza los datos y en otra me descuenta. Y en esta última pues ha sido, he añadido las
00:16:26
bibliografías en los enlaces más importantes, aunque he detallado mucho más en el PDF, pero
00:16:31
estas son las que me han parecido más importantes y creo que con esto pues ya he terminado alguna
00:16:38
pregunta, puedo pasar a hacer una prueba, si hay alguna pregunta o paso a hacer rápidamente una
00:16:43
simulación de que funciona la aplicación. Vale, vamos a hacer una simulación.
00:16:49
Perdona, que había silenciado el micrófono porque hay mucho ruido por aquí a veces. Vamos a ver la
00:16:53
simulación. Vale, pues en este caso tenemos, tengo la página de Infinity Free, mi dominio,
00:17:02
vamos a ver la base de datos para ver que cuando haga la compra se descuente el producto. Me voy
00:17:13
a mi base de datos que es phpMyAdmin. Esta es mi base de datos. Voy a ver mi tabla de stock en este
00:17:18
caso. Vamos a coger los tres primeros productos, por ejemplo, en este momento tengo 100 de cantidad
00:17:28
el primero, 140 el segundo y 80 el tercero. Me voy a mi página, a mi página web. Vamos a ver el
00:17:33
carrito que esté vacío en este caso. Perfecto, esta sería toda mi página web. Vamos a comprar tres
00:17:41
productos, hacer una simulación, añado uno, añado dos y añado tres. Vamos a ver que se haya cargado en el
00:17:47
carrito. Perfectamente, veo que está uno, dos y tres. Nos vamos al carrito, compruebo de que se
00:17:53
ha cargado mi información. Los datos de envío pues los he tenido predeterminados para no tardar
00:17:59
mucho. Le damos a comprobar y continuar y perfectamente aquí. Si yo le doy a comprar en el
00:18:05
primer botón de PayPal se me va a generar la compra sin ningún problema. Si yo la doy en este segundo
00:18:11
que es mi botón que he generado, me va a salir compra efectuada con éxito. Muy bien, pues ahora nos
00:18:15
vamos a ver si nos ha actualizado la base de datos. Y aquí como se puede comprobar nos ha reducido la
00:18:20
cantidad de productos de 99, 139 y 79. Y esto es todo. Muy bien, fenomenal.
00:18:26
Como preguntas, ¿tendría...
00:18:38
¿Quieres destacar la utilidad de alguna de las herramientas que has probado? Después de haberlas
00:18:46
usado, ¿hay alguna que te haya resultado especialmente sorprendente o útil?
00:18:54
Dos, la de Visual Studio Code porque lo desconocía. O sea, los editores normales, de hecho los básicos que he usado en el grado.
00:18:58
Pero es que esta yo no tenía conocimiento. Me vi bastantes tutoriales y me ha parecido una herramienta tan
00:19:07
completa porque pueden navegar o pueden convivir, mejor dicho, en diferentes lenguajes. Tiene muchísima
00:19:13
autoayuda. No necesitas tanto de, me explico, de las extensiones que te ayudan. Pues en este caso, por ejemplo,
00:19:23
PHP no he tenido que tener XAMPP, por ejemplo, descargado. Simplemente la parte del servidor Visual Studio ya me da más
00:19:33
extensión. Y son cosas que te va quitando y que dices, hola, pues si ya tengo esto, esto es una ayuda. Y obviamente, bueno,
00:19:40
aparte del hosting, que es una herramienta también completa, también es cierto destacar que no te deja, en este caso tuve
00:19:47
también inconvenientes porque intentaba abrir o intenté abrir el servidor desde el Visual Studio Code y no me cargaba la
00:19:54
página. Con lo cual, había que abrirlo desde dentro de Infinity Premium. Obviamente, entiendo yo que al ser una versión
00:20:02
gratuita tiene sus limitaciones. Pero por ejemplo, usando herramientas desde afuera, pues también. Pero yo en este caso me
00:20:07
quedaría con Visual Studio Code y aparte, pues una de las plantillas que hay de bibliotecas multiplataforma, pues con
00:20:13
Bustra. Hay muchas también, pero esta, pues aparte de que aunque te genere el código, también te da pautas, te explica cómo
00:20:20
puedes modificar las clases. Pero con todas me quedo con Visual Studio Code. La verdad que me ha parecido una herramienta
00:20:28
muy completa. Muy bien, ya puedes dejar de compartir pantalla. Voy a detener la grabación.
00:20:33
- Idioma/s:
- Autor/es:
- Sabina Martinez
- Subido por:
- Sabina M.
- Licencia:
- Todos los derechos reservados
- Visualizaciones:
- 7
- Fecha:
- 17 de enero de 2024 - 13:17
- Visibilidad:
- Clave
- Centro:
- IES CIFP a Distancia Ignacio Ellacuría
- Duración:
- 20′ 45″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 203.09 MBytes
