fmotrel web

Descripción del Proyecto

Maquetación de la nueva Portada y los nuevos Story de las Noticias del periódico digital "El Español" en un entorno de plantillas Twig.

Implementación de la estructura con HTML5. Capa de presentación con CSS3, CSS Grid Layout y Flexbox. Funcionalidad elementos de la Interface con los atributos "Data Status".

Maquetación multiplataforma, multidispositivo (Responsive Web Design) y multinavegador (Cross Browser) según diseño entregado en Figma.

Git para el Control de Versiones. Atlassian y Bitbucket para la gestión de los repositorios, Jenkins para su despliegue y Trello para resolución de incidencias.

Tecnologías Usadas

• Git, Trello, Slack, Atlassian, Bitbucket, Jenkins.
• HTML5, CSS3, Responsive Web Design, CSS Grid Layout, Flexbox, Cross Browser.
• Atributos "Data Status" (JavaScript, Jquery).
• Photoshop, Figma.
• Editor de Texto: VS Code.
• Entornos Maquetación: Twig.
• Sistema Operativo: Mac.

Año 2022 - Act

Descripción del Proyecto

Maquetación de "Griffin 3", herramienta financiera para la gestión contable de Telefónica, basada en guia de estilos aprobada y suministrada por la empresa en diferentes PowerPoint.

Implementación de la estructura con HTML5 y Bootstrap. Capa de presentación con CSS3 y Flexbox. Funcionalidad elementos de la Interface con JavaScript y Jquery. Cross browser multinavegador.

Optimización de código con SonarQube y W3C.

Entorno de maquetación java - jsp - spring con Spring Tool Suite (STS) ó Intellij. Ocasionalmente prueba en entorno .Net con Visual Studio con datos existentes de Griffin 2.

Diseñado únicamente para Portatiles y Dispositivos de Mesa por petición expresa del Cliente con resoluciones superiores a 1180px.

Git y GitKraken para el Control de Versiones. Gitlab como repositorio y Trello para resolución de incidencias.

Tecnologías Usadas

• Git, GitKraken, SonarQube, Trello, Skype, Team.
• HTML5, CSS3, Responsive Web Design, Bootstrap, Flexbox, Cross Browser.
• JavaScript, Jquery.
• Photoshop, Guía Estilos, PowerPoint.
• Editor de Texto: Atom, Notepad ++.
• IDE: Spring Tool Suite (STS), IntelliJ, Visual Studio.
• Entornos Maquetación: Java - Jsp - Spring (principal) y .Net (ocasional).
• Sistema Operativo: Windows 10.

Año 2019 - 2022

Descripción del Proyecto

Maquetación de "Radios Habladas" del Grupo Prisa para Latinoamérica (Caracol Radio, WRadio México y Colombia, ADNRadio, RadioPanamá ...) con sus respectivos Players Permanentes implementando diseños en Sketch a traves de Zeplin e Invision.

Implementación de la estructura con HTML5 y capa de presentación con CSS3 y Flexbox. Funcionalidad de los elementos de la interface con Jquery y JavaScript. Sliders, Modals y Datepicker con Jquery UI.

Menú de navegación y Aside publicitarios con Efecto Sticky. Nomenclatura con prefijo (rh-) distintivo de las clases Css utilizadas.

Extracción de imágenes y posterior optimización de las mismas. Creación de Iconos Svg.

Maquetación multidispositivo (Responsive Web Design) y multinavegador (Cross Browser).

Tecnologías Usadas

• Git, Jira, Bitbucket, Atlassian.
• HTML5, CSS3, Responsive Web Design, Sass, Flexbox, Cross Browser.
• Php, JavaScript, Jquery, Jquery UI.
• Zeplin (Sketch), Invision, Gimp.
• Editor de Texto: Atom.
• IDE: Xampp.
• Sistema Operativo: Ubuntu.

Año 2018

Descripción del Proyecto

Maquetación de contenidos en la "Migración de Mediateca" del Grupo Prisa de Bootstrap Template Material Design a Metronic Bootstrap Admin Theme en entorno con motor de plantillas Twig.

Implementación de la estructura con HTML5 y Bootstrap. Capa de presentación con CSS3 y Flexbox.

Maquetación multidispositivo (Responsive Web Design) y multinavegador (Cross Browser).

Tecnologías Usadas

• Git, Jira, Atlassian.
• HTML5, CSS3, Responsive Web Design, Bootstrap, Sass, Flexbox, Cross Browser.
• Metronic Bootstrap Admin Theme.
• Php, JavaScript, Jquery.
• Guía Estilos, PowerPoint.
• Editor de Texto: Atom, Notepad ++.
• Tareas Automatizadas: Node (npm), Webpack.
• Entornos Maquetación: Twig.
• Sistema Operativo: Windows 10, Ubuntu.

2018

Descripción del Proyecto

Maquetación, testeo y optimización de "Los40", web de la cadena de radio musical de habla hispana de PRISA Radio. Testeo y optimización web según PageSpeed Insights Google.

Implementación de la estructura con HTML5. Capa de presentación con CSS3, Home y Portadillas con Flexbox. Funcionalidad de los elementos de la interface con Jquery y JavaScript.

Menú de navegación y Aside publicitarios con Efecto Sticky. Nomenclatura con prefijo (los40-) distintivo de las clases Css utilizadas. Limpieza, optimización y reutilización de código Html y Css ya existente.

Extracción de imágenes y posterior optimización de las mismas.

Maquetación multidispositivo (Responsive Web Design) y multinavegador (Cross Browser).

Tecnologías Usadas

• Jira, Atlassian, PageSpeed Insights Google, Filezilla, VPN.
• HTML5, CSS3, Responsive Web Design, Flexbox, Cross Browser.
• Php, JavaScript, Jquery.
• Photoshop, Archivos Psd.
• Editor de Texto: Atom.
• Sistema Operativo: Windows 10.

Año 2017 - 2018

Descripción del Proyecto

Maquetación de "Mediateca", web para la consulta de archivos Multimedia del Grupo Prisa implementando Bootstrap Template Material Design.

Implementación de la estructura con HTML5 y Bootstrap. Capa de presentación con CSS3 y Flexbox.

Maquetación multidispositivo (Responsive Web Design) y multinavegador (Cross Browser).

Tecnologías Usadas

• Git, Jira, Atlassian.
• HTML5, CSS3, Responsive Web Design, Bootstrap, Sass, Flexbox, Cross Browser.
• Bootstrap Template Material Design.
• Php, JavaScript, Jquery.
• Guía Estilos, PowerPoint.
• Editor de Texto: Atom.
• Sistema Operativo: Windows 10.

Año 2017

Descripción del Proyecto

Maquetación optimizada de la Home demostrativa del proyecto Digital News Initiative (DNI) de Google y El País HD.

Implementación de la estructura con HTML5 y Bootstrap. Capa de presentación con CSS3.

Maquetación multidispositivo (Responsive Web Design) y multinavegador (Cross Browser).

Tecnologías Usadas

• HTML5, CSS3, Responsive Web Design, Bootstrap, Flexbox, Cross Browser.
• Guía Estilos.
• Editor de Texto: Atom.
• Sistema Operativo: Windows 10.

Año 2017

Descripción del Proyecto

Maquetación según guía de estilos, en el Departamento de Maquetación de Vocento, de su regional "El Correo".

Implementación de la estructura con HTML5 y Bootstrap. Capa de presentación con CSS3, Flexbox y Sass. Funcionalidad elementos de la interface con JavaScript y Jquery. Maquetación multidispositivo (Responsive Web Design) y multinavegador (Cross Browser).

Nomenclatura con prefijo (voc-) distintivo de las clases Css utilizadas y ordenadas sus propiedades por orden alfabético.

Git para el Control de Versiones, tareas e incidencias con Jira y Bitbucket. Scrum como metodología agil.

Maquetación para la prensa con CMS Méthode en base a mockups en formato Xml y hojas de estilo CSS.

Tecnologías Usadas

• Scrum, Jira, Git, Bitbucket, Atlassian.
• HTML5, CSS3, Responsive Web Design, Bootstrap, Sass, Flexbox, Cross Browser.
• JavaScript, Jquery, Xml, Swiper.
• Editor de Texto: Atom.
• Tareas Automatizadas: Node (npm), Webpack.
• Entornos Maquetación: Handlebars.
• CMS: Methode.
• Sistema Operativo: Windows 10.

Año 2017

Descripción del Proyecto

Refuerzo vacacional para la agencia Wunderman, lider en marketing y publicidad, para la maquetación de diferentes Home con sus correspondientes Vistas del Microsite de "StarRessa Cepsa" basada en los estilos y diseños de diferentes Psd aprobados y suministrados por la empresa.

Implementación de la estructura con HTML5. Capa de presentación con CSS3. Funcionalidad elementos de la Interface con JavaScript y Jquery. Cross browser multinavegador

Tecnologías Usadas

• Microsite, HTML5, CSS3, Cross Browser.
• JavaScript, Jquery.
• Photoshop, Dreamweaver, Archivos Psd.
• Sistema Operativo: Windows 7.

Año 2016

Descripción del Proyecto

Colaboración en "Bankia" como maquetador web de GFT Group para la nueva etapa tecnológica de la entidad bancaria con Arquetipo Web basado en un estudio de los frameworks más potentes del mercado.

Maquetación de varias Operativas transaccionales y Libro Rojo de la Empresa (Guía de Estilos) en base a los estilos de Bootstrap adaptándolos a la Guía de Diseño suministrada por la Empresa teniendo en cuenta la experiencia de usuario (UX).

Estructura basada en HTML5 y Bootstrap, tareas automatizadas con Gulp y dependencias con Bower, código reutilizable y escalable con Jade, Sass y la tecnología BEM. Maquetación de Componentes (HTML5 y CSS3). Multidispositivo (Responsive Web Design), multinavegador (Cross Browser) y Multilenguaje (literales Json).

Git para el Control de Versiones y Github como repositorio para la operatividad de los diferentes grupos de trabajo asignados al proyecto.

Tecnologías Usadas

• Scrum, Jira, Atlassian, Git, Github.
• HTML5, CSS3, Responsive Web Design, Bootstrap, Sass, Jade, Tecnología BEM, Cross Browser.
• Json, Font Awesome Icons, Guía de Estilos.
• Editor de Texto: Atom.
• Tareas Automatizadas: Node (npm), Gulp, Bower.
• Entornos Maquetación: AngularJs.
• Sistema Operativo: Windows 8.1.

Año 2016