html y css

maquetación html y css responsive
Proyecto Desarrollo web responsive con HTML y CSS #24 Proyecto Desarrollo web responsive con HTML y CSS #24

Proyecto Desarrollo web responsive con HTML y CSS #24

Proyecto Desarrollo web responsive con HTML y CSS #24

Proyecto Final del Curso de Domestika.org de Javier Usobiaga Ferrer de Introducción al Desarrollo Web Responsive con HTML y CSS.

Es un proyecto final orientado a aplicar las directrices de maquetación html y css responsive, donde fuí lo más fidedigna posible al diseño web planteado, teniendo en cuenta un correcta composición, alineación y tratamiento de textos, imágenes, logotipo, iconos, elementos de navegación, etc. Como resultado el diseño se adapta y visualiza correctamente en tablet, pc y móvil.

mockup index sala liberat
Prop. de Rediseño Web Mockups Sala Liberat#21 Prop. de Rediseño Web Mockups Sala Liberat#21

Prop. de Rediseño Web Mockups Sala Liberat#21

Prop. de Rediseño Web Mockups Sala Liberat#21

Propuesta de rediseño web con aportación de mejoras de accesibilidad y usabilidad, a parte de las propuesta de mejora de la imagen corporativa para salaliberat, una empresa de Terapias Holísticas y Formación en Barcelona. La propuesta fue a su vez el proyecto final del curso de Creación de Wireframes y Mockups de CIFO l’Hosp. Fue un trabajo libre. Actualmente está en curso, algunas páginas están con el mockup como es la de Registro de Usuario y otras maquetadas como son la index y Terapias. Está siendo maquetada aplicando conocimientos de html y css responsive del curso de domestika.org y puede de momento adaptarse y verse correctamente en algunas tablets y ordenadores.

diseño-web-responsive-novacolor-movile
Diseño y maquetación de web responsive corporativa wd#20 Diseño y maquetación de web responsive corporativa wd#20

Diseño y maquetación de web responsive corporativa wd#20

Diseño y maquetación de web responsive corporativa wd#20

Diseño y maquetación de la nueva web corporativa responsive de Grupo Novacolor como diseñadora gráfica y web en plantilla. Para el diseño de la home page o página de inicio se hizo algo diferente, sin seguir ninguna plantilla y se hizo una maquetación html independiente. Se realizaron fotos representativas de las 6 prinicpales categorías de productos junto con el equipo de marketing de la empresa y se realizó un menú principal muy accesible, sencillo e intuitivo por imágenes. Así cualquiera que entre por primera vez en la web y no conozca los productos de la empresa su ubicará más fácilmente.

Para adaptar la home a nivel responsive se tubo que aplicar algunos “estilos css” de bootstrap con que está maquetada esta plantilla de Opencart haciendo así escalables y adaptables las imágenes y títulos por distintas columnas (1 – 3) según el ancho de cada dispositivo.

Proyecto terminado por mi parte. La introducción de imágenes de los productos del catálogo on-line no corrió a mi cargo, el objetivo era conectarlas y mostrarlas a través del crm o programa de gestión de la empresa .

 

siscel-web-tipo-e-comerce-home
Diseño de web corporativa tipo e-commerce wd#19 Diseño de web corporativa tipo e-commerce wd#19

Diseño de web corporativa tipo e-commerce wd#19

Diseño de web corporativa tipo e-commerce wd#19

Diseño de web corporativa tipo e-commerce con catálogo de productos a través de la plataforma Opencart como trabajadora y única diseñadora en plantilla. En esos momentos la opción de tienda se decidió de deshabilitar. Se aplicó la nueva versión del logo de Siscel (rediseño también realizado por mi). Se personalizó lo más posible la plantilla según el orden de prioridades, requerimientos y especificaciones aplicando el azul corporativo del logo y tipografías afines. Para la home hice 2 banners que redirigen a las principales categorías de productos: productos desechables y material detectable. Y para la página de productos se decidió de desarrollar junto con el programador freelance, un filtro de búsqueda por iconos de Tipo de Protección. Este módulo (Mega Filter Pro) es de mucha utilidad para agilizar la búsqueda de productos según criterios por requerimientos técnicos, o de tipo de protección en vestuario profesional. Yo me encargué del diseño de los distintos iconos y de su adaptación a nivel de css y html en la página. Se pospuso su adaptación visual a nivel responsive, hasta ver nuevos análisis de SEO.

La introducción de contenidos en esta web tipo e-commerce, en cuanto a productos, descripcciones de los mismos (con misma estructura html base) y preparación de todas las imágenes también corrió a mi cargo.

El diseño de página de descargas es sencillo, ágil y atractivo, pues se decidió usar imágenes en miniatura de las portadas de los 3 catálogos de productos como links para descargar los pdf’s de los mismos.

Hay un importante trabajo de css detrás para edición y personalización corporativa de toda esta página tipo e-commerce. Logré ocuparme personalmente de la edición y personalización de algunos elementos de la página llegando a tocar y editar exitosamente […]

wordpress-web-brand-name-design
Diseño web corporativa con WordPress y Newsletter-wd#18 Diseño web corporativa con WordPress y Newsletter-wd#18

Diseño web corporativa con WordPress y Newsletter-wd#18

Diseño web corporativa con WordPress y Newsletter-wd#18

Proyecto freelance de diseño de web corporativa con WordPress para analista programador y newsletter para difusión sus servicios. La página fué totalmente personalizada siguiendo la línea corporativa de logotipo ya existente proporcionado por el cliente.
El worpdress theme se personalizó totalmente con diseño previo en photoshop y trabajo de maquetación css adaptando una plantilla responsive (adaptable a distintos dispositivos).
En su desarrollo se activaron los plugins de social media de compartir para llevar cómodamente los distintos posts de la sección de noticias a su página de Facebook u otros medios y para que otros usuarios puedan a su vez compartir sus posts relacionados con software y ofimática.

Para la newsletter también se creó un díptico en pdf descargáble e imprimible en formato din-A4.

Mantenimiento web pags Grupo Piaggio Vyrtucom
Mantenimiento webs motos Piaggio post-wd#17 Mantenimiento webs motos Piaggio post-wd#17

Mantenimiento webs motos Piaggio post-wd#17

Mantenimiento webs motos Piaggio post-wd#17

Mantenimiento web las distintas webs de distintas marcas de moto del grupo Piaggio de venta y difusión, como diseñadora web y técnica de mantenimiento en plantilla de la agencia multimédia Vyrtucom strategy and creativity (2013). Marcas G.Piaggio abarcadas: Piaggio, Aprilia, Derbi, Scarabeo, MotoGuzzi y Gilera.  Tareas realizadas: actualización de contenidos y diseño de composiciones de piezas o elementos varios en secciones de noticias, promociones / Cambio de color de motos / Retoque fotográfico intensivo. Otras marcas: JRoca, Rafa Nadal Fundation, Sea, Vyrtucom. Funciones y tareas para otras marcas: tratamiento de imágenes, creación de postales de navidad, fotocomposiciones y readaptaciones entre otras.

corpse-bride-animacion-css3-javascript-1
Diseño web Merchandising SD-Toys post-wd#15 Diseño web Merchandising SD-Toys post-wd#15

Diseño web Merchandising SD-Toys post-wd#15

Diseño web Merchandising SD-Toys post-wd#15

Diseño web y maquetación html y css2 (tb. css3) del muestrario de merchandising para “Corpse Bride”, “Big Bang Theory” y “Lo que el Viento se Llevó” entre otros apartados de merchandising, licencias o juguetes varios de SD-Toys como diseñadora gráfica/web parte de la plantilla de Esdecómic Digital. Marcas trabajadas (diseño y maquetación web): – Licencia: Monster Theater (rediseño y readaptación de página en flash a html con galeria javascript),  – Series: The Big Bang Theory, Dallas, Gossip Girl, The Vampire Diaries y Game of Thrones -(de este último solo maquetación html y css3) . – Películas: Corpse Bride y Gone With The Wind.

rediseño web ribet dentistes wordpress
Diseño web Ribet Dentistes cms post-wd#8 Diseño web Ribet Dentistes cms post-wd#8

Diseño web Ribet Dentistes cms post-wd#8

Diseño web Ribet Dentistes cms post-wd#8

Rediseño de web corporativa inicial y adaptación a plantilla personalizada y responsive para WordPress (cms) para Ribet Dentistes. Página principal (home) y de contacto. Objetivo: Mejoras en funcionalidad, proporciones visuales más adaptadas al medio y otros dispositivos y facilitar la autogestión, mantenimiento y edición de contenidos por parte del cliente. Trabajo de maquetación y creación de estilos css específicos / Búsqueda de imágenes de autor en fotolía / Creación de banners / Adición de plugins para compartir con Redes Sociales y botón-link de acceso a su página de empresa del fb.

diseño de banners y mantenimiento web de e-commerce de comics digitales
Diseño de banners y mantenimiento web e-comerce post-wd#3 Diseño de banners y mantenimiento web e-comerce post-wd#3

Diseño de banners y mantenimiento web e-comerce post-wd#3

Diseño de banners y mantenimiento web e-comerce post-wd#3

Diseño de distintos tipos de banners para la promoción de los nuevos cómics digitales a la venta en la web de Koomic, e-commerce de comics dígitales. Tareas también de mantenimiento y de rediseño web de algunas secciones de la web. Trabajo realizado en plantilla (año 2012).

web gestión guarderías, gall mullat, proyecto para Infinity Labs
Diseño web gestión guarderías post-wd#2 Diseño web gestión guarderías post-wd#2

Diseño web gestión guarderías post-wd#2

Diseño web gestión guarderías post-wd#2

Creación de imagen corporativa para empresa de Gestión de Guarderías, targeta, propuesta de diseño web y maquetación con html y css. Proyecto realizado para Infinity Labs.