Un orgullo haber podido colaborar con Made in Cima, una importante agencia web de Italia.
Gracias a la colaboración con Made In Cima , tuve la oportunidad de desarrollar el frontend de la web www.cosbi.eu. La parte más interesante e inspiradora para mí fue la creación de numerosas animaciones en "Vanilla" Javascript. Para la estructura y aspecto de las páginas utilicé HTML 5.0 y SCSS [Sass], empezando de un design realizado en Adobe XD.
CoSBi (computational and systems biology) es una empresa conjunta entre Microsoft Research y la Universidad de Trento, formada por un grupo de investigadores, desarrolladores y analistas expertos en bioinformática relacionada con la nutrición, farmacología de sistemas y ecología, los cuales han desarrollado un lenguaje de programación llamado Blex, que hace posible simular y modelar sistemas bioquímicos complejos.
Tecnologías
- HTML 5.0
- PHP
- SCSS [Sass]
- Vanilla Javascript
- Swiper JS
- Git [Bitbucket]
- Adobe XD
La Animación Gráfica
Entre todas las animaciones de CoSBi.eu, la más hermosa pero también más complicada de lograr fue aquella que llamé "Graphics", un entrelazado de líneas y puntos de diferentes logos [© COSBI - Binomi design] que representa las secciones "What we do hacemos" de CoSBi. Para la creación de la animación llamada "Graphics" además de Javascript y clases para el estilo, utilicé la conocida librería Swiper JS .
-
Scientia extractionis
Officiis beatae eius quasi similique facilis repudiandae optio maxime neque nemo minima, cum provident quidem deserunt ullam debitis accusamus possimus nulla velit rerum autem impedit, illo ex dolorem harum. Cum placeat, pariatur, odio neque, recusandae id esse rerum minus officiis quaerat eligendi dolores ut architecto
-
Indicium integrationem
Quaerat dolores non distinctio, culpa at temporibus nesciunt voluptate. Dicta qui porro, neque sint hic quos nisi ducimus expedita assumenda officiis explicabo facilis magni velit veritatis culpa placeat nam veniam. Odit blanditiis a delectus ipsum itaque quo quae sint
-
Biologa idem
Possimus deserunt beatae recusandae officiis consequuntur natus odio nulla in dolore! Nulla vero labore similique tenetur maiores! Ullam illum neque iusto debitis! Consectetur laboriosam enim nesciunt vel illum, consequatur omnis tempore quisquam? Error quam deserunt omnis ea explicabo
-
Via integrationem
Ex in, dolorem dicta unde voluptatem illum harum eius deserunt! Quas reprehenderit natus blanditiis beatae alias rem quod possimus, fugit dolorum itaque. Et praesentium dolorum temporibus doloremque porro vero quasi debitis consectetur, illum
-
Examplum & simulae
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aliquam harum, non nihil qui nesciunt, sapiente suscipit obcaecati, commodi porro soluta cumque aperiam corporis dolorem! Consectetur nam assumenda deserunt ad Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis, qui error perspiciatis veritatis
El Carrusel
El carrusel, también conocido como Carousel, en el diseño web, consta de varios elementos que se deslizan horizontalmente por la pantalla hasta desaparecer y reaparecer en el lado opuesto. En la página Join Us de CoSBi, el carrusel debía desplazarse automáticamente sin detenerse.
La técnica que utilicé consiste en duplicar cada elemento para que siempre esté visible en el viewport. A pesar de las muchas librerías disponibles para lograr un efecto "carrusel", preferí crear esta animación por mí mismo para reforzar mis conocimientos en el lenguaje JavaScript.