diseño, desarrollo y optimización de una página web...
TRANSCRIPT
![Page 1: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/1.jpg)
Diseño, desarrollo y optimización de una página web interactiva para una empresa de servicios tecnológicos
Autor: Manuel Sánchez Moreno Consultor: Mikel Zorrilla Berasategui
Máster en Aplicaciones Multimedia Itinerario profesional
![Page 2: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/2.jpg)
1 2 3 3.1 3.2 3.3 3.4 4
Contextualización Objetivos Creación de la página web
Planteamiento y planificación Diseño y producción gráfica Construcción del entorno de trabajo Desarrollo del proyecto
Conclusiones
![Page 3: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/3.jpg)
La aparición de la página web en la década de los noventa supuso un gran avance y un escaparate para empresas y particulares.
Son muchas variables a tener en cuenta en busca de la diferenciación, tales como: • Usabilidad • Experiencia de
usuario • Diseño novedoso • Accesibilidad
A día de hoy la competencia es durísima, y el éxito radica en la construcción de sitios web distintos a lo común.
01 Contextualización
![Page 4: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/4.jpg)
02 Objetivos
Desarrollo nuevo sitio web
Capybara Studio
Aplicar diseño
a medida
Responsive &
mobile-first
Aplicar nuevos conocimientosPotenciar
Capybara Studio
![Page 5: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/5.jpg)
Para la consecución del producto deseado se han identificado cuatro fases muy marcadas
Planteamiento y
planificación
03. Creación de página web
Desarrollo del proyecto
Diseño y producción
gráfica
Construcción del entorno de trabajo
![Page 6: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/6.jpg)
Para el desarrollo del proyecto se ha hecho uso de metodologías scrum a nivel general.
A nivel de tareas s ha hecho uso de paneles Kanban específicos.
3.1 Planteamiento y planificación
Para la gestión de las tareas se ha realizado un desglose de la pila de producto con el software Asana
![Page 7: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/7.jpg)
En esta fase de han definido:
3.1 Planteamiento y planificación
Arquitectura de la web
Secciones y elementos
Sistemas de navegación
![Page 8: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/8.jpg)
Siguiendo las tendencias de diseño web para el curso 2019/2020
3.2 Diseño y producción gráfica
Colores brillantes y vivos
Combinación tipografías
Ilustración propia SVG
Comfortaa Gloria Hallelujah
#0EA7B3
#333333 #F7F7F7 #FFFFFF
PRINCIPAL B / N
#FC960B #E965C6 #7AEB58 #85FFD5
SECUNDARIOS
#FAD1CC #FDC74E #FCF07C #9BD1BF #ACD7F4
ACENTOS
![Page 9: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/9.jpg)
Prototipo de alta fidelidad realizado con el software Adobe XD debido a la rapidez, agilidad y compatibilidad con Adobe. Illustrator
3.2 Diseño y producción gráfica
![Page 10: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/10.jpg)
En esta fase de han definido:
3.3 Creación del entorno de trabajo
Creación de un repositorio en
GitHub
Utilización de la terminal
Servidor local con Apache por
MAMP
![Page 11: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/11.jpg)
3.4 Desarrollo del proyecto
HTML y PHP
Creación de estructura sólida Utilización de etiquetas semánticas Apoyo en el framework front-end bulma.io Paso a PHP para la utilización de includes para disponer de un código ordenado y más escalable. Recursos externos llamados por CDN evitando cargar el servidor.
![Page 12: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/12.jpg)
3.4 Desarrollo del proyectoJavaScrips
Pequeños scripts a medida, en ficheros independientes y asociados a las páginas concretas donde se utilizan y con un mantenimiento más escalable.
• Sticky menú Home • Filtrado de items en
portfolio • Active items de menú • Menú móvil
![Page 13: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/13.jpg)
3.4 Desarrollo del proyectoEstilos CSS
Nomenclatura de clases propia basada en metodologías BEM
Utilización de preprocesadores de código con sintaxis SCSS. Para poder ejecutar se instala, mediante tecnología NODE JS la dependencia
NODE-SASS que ejecutamos desde la terminal
![Page 14: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/14.jpg)
3.4 Desarrollo del proyectoEstilos CSS
Ventajas del uso de preprocesadores SCSS
Escalabilidad Fácil acceso al código VariablesFunciones Anidados
![Page 15: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/15.jpg)
Sitio web completo, animado, rápido y responsive
Resultado del proyecto
Repositorio del proyecto: https://github.com/msanchezmoreno/TFM-UOC-ManuelSanchez
![Page 16: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/16.jpg)
Resultado satisfactorio
Recomendable dedicar más tiempo a una correcta planificación
Hay que estar atento al cambio de tendencias, evitar quedarse obsoleto
04 Conclusiones
Mayor número de animaciones individuales por SVG
Despliegue del proyecto sobre framework PHP como Symphony o Zend
Creación de un espacio de clientes
Líneas de futuro
![Page 17: Diseño, desarrollo y optimización de una página web ...openaccess.uoc.edu/webapps/o2/bitstream/10609/95986/8... · 1 2 3 3.1 3.2 3.3 3.4 4 Contextualización Objetivos Creación](https://reader031.vdocumento.com/reader031/viewer/2022013023/5fb5f3f1800a81782e2cf820/html5/thumbnails/17.jpg)
Gracias!