Sitio Web Portfolio personal Computación 3 UNLa
Diseño web     Computación III UNLa.

Portfolio personal
con html5, css3, funciones y comportamientos
Uso de @media screen (responsive design) y @media print

A través de mi marca, quise enfatizar los triángulos y las lineas en los
diferentes componentes ya sea como contenedores de imágenes o
animaciones de css. Utilicé botones ghost o invisibles para visualizar las
lineas. Las animaciones contienen lineas que se mueven. En el index, se
inicia una animación con contenido lineal. A su vez, usé la caligrafía como
un recurso lineal en títulos y elementos de jerarquía que atrajeran al
usuario.

Además de ser un contenedor de imágenes de los links de la galería, el
triangulo es el botón del menú desplegable en el responsive design a
partir de un ancho de 1200px donde el nav se esconde porque su ancho
ya no resulta eficaz para estar visible en celulares.
Los colores que usé fueron lilas, naranjas, blancos y bordós. Los títulos y
algunos elementos :hover en blanco. El lila como el principal y el naranja
como segundo color de soporte por el contraste. Los bordós para dar
toques especiales de elementos diferentes como el texto de la biografía.
Sólo en el inicio hay un section diferente al resto de las páginas. Los
elementos de la página de la maqueta son comunes en las 15 páginas delsitio web.

En :hover se utilizaron diferentes opacidades y también interacciones
animadas como rotate para interesar al usuario.
El header es animado en su totalidad con un slider automatico que se
desplaza la continuidad de la imagen. El logo cambia de posici{on y deja
de ser animado en el ancho de 1200px.
Las cinco páginas dispuestas en el nav y algunas de las galerías son
responsive. Esto quiere decir que cambia la estructura. Se modificaron y/o
se eliminaron los float para que todo se desplace hacia uno abajo del otro
para atender al ancho que va disminuyendo. En algunos casos, se
modifico el ancho o se especificó un ancho de 100% respecto al ancho de
la ventana.

La animación del index propone que al pasar los patines se haga visible el
"Hola" letra por letra. Se utilizó transform para rotar el patin de acuerdo a
su posición en el espacio. Al "Hola" se le otorgó diferentes opacidades.
Las animaciones del bio.html son de translaci{on dentro de su contenedor
ya que vertical o diagonal con un cambio de color en el :hover en el perfil.
Las tipografías que se usaron fueron Ubuntu Condensed y Work Sans. El
logo tiene Alegreya pero se prefierió una alternativa sans serif. Ubuntu
Condensed de primera jerarquía y Work Sans como segunda. El font-size
tomó la medida de em para no confundir al px de diferentes pantallas.
Están vinculadas desde el meta con el link de Google Fonts.
Se utilizo un contenedor para responsive de 1700px de alto y 480px de ancho.




index: con animación de presentación








bio: con animación :hover de foto y título






galería con animación :hover en cada tema






blog




contacto con formulario, iframe map & iframe fanpage Facebook






galeria/afiches: con comportamientos







galeria/identidad: con comportamientos







galeria/editorial: con comportamientos






galeria/fotografia: con comportamientos








galeria/caligrafia: con comportamientos








galeria/tipografia: con comportamientos







galeria/videos









galeria/pintura: con comportamientos










galeria/dibujos: con comportamientos








galeria/agendas: con comportamientos







Sitio Web Portfolio personal Computación 3 UNLa
2
128
0
Published:

Sitio Web Portfolio personal Computación 3 UNLa

Portfolio personal web para Computación III UNLa. (2018) Con hmtl, css, funciones, comportamientos, animation, @media screen (responsive design) Read More
2
128
0
Published:

Tools

Creative Fields