We Code:
Winter Edition
Hace un tiempo se desarrolló una prueba piloto de algo que llamamos We code, en donde se desarrollaron
interfaces
e interacciones llamativas usando propiedades de CSS y funcionalidades de JavaScript que no usamos comúnmente.
En está presentación puedes encontrar más información al respecto.
Uso de la API SpeechRecognition de los navegadores para hacer reconocimiento de voz.
Speech detection
En esta charla, Henry nos explicó acerca de una API de JavaScript llamada SpeechRecognition; la cual permite acceder al reconocimiento de voz a través de la interfaz de SpeechRecognition, que da la capacidad de reconocer el contexto de voz desde una entrada de audio y responder de manera adecuada. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
See the Pen We code - Speech detection by Henry Zarza (@HenryZarza) on CodePen.
Explicar por qué el z-index puede no funcionar y qué es un stacking context.
Stacking context
En esta charla, Capi nos explicó acerca de los contextos de apilamientos en CSS, el orden de los contextos y las razones de porque a veces no nos funciona la propiedad z-index por mas valor que le asignemos. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
See the Pen Stacking order test by Damián Finkelstein (@dami-n-finkelstein) on CodePen.
Reglas básicas de los modelos de color, y analizar el efecto del color en la percepción.
Teoría del color
En esta oportunidad Tute nos explicó acerca de la teoría del color y la importancia que tienen estos a la hora de transmitir emociones y sensaciones, además de darnos algunas herramientas para escoger nuestras paletas de colores. En este link puedes encontrar más información. Y en este link el video de la charla. Además, Tute nos dejó una actividad para que realicemos: haciendo uso del ejercicio que él realizó en Figma (debemos de hacer un duplicado del diseño así no se edita sobre el original), cambiarle los colores por los que consideremos que son los indicados y luego implementarlo en el Codepen que se encuentra abajo, para escoger los colores nos podemos guiar de algunas herramientas para paletas SPACE y Deep Learning.
See the Pen Card test by Henry Zarza (@HenryZarza) on CodePen.
Uso de las propiedades counter-reset y counter-increment para crear una cuenta regresiva.
Countdown only with CSS
Raúl nos enseño una propiedad muy interesante de CSS que nos sirve para hacer contadores y otras cositas. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
See the Pen Css counter - Css Only Countdown by Raúl Suescún (@raulsuescun) on CodePen.
Efectos visuales usando propiedades de sombra de CSS.
Sombras en CSS
Kike nos explicó conceptos acerca de las sombras, las propiedades en CSS que tenemos disponibles para aplicarlas y nos dió algunos tips a tener en cuenta a la hora de usarlas. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
Exportar assets desde after y packages de cada framework para usarlos sin tener que usar gifs ni animaciones.
Complex animations in 5 minutes of code
Flor y Frank nos explicaron como hacer animaciones complejas exportándolas como archivos JSON, usando algunas bibliotecas interesantes y sin usar gifs o videos. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
¿Por qué es tan importante la accesibilidad en nuestros productos digitales?.
Accesibilidad
Clau nos explicó conceptos acerca de la accesibilidad y porque es tan importante que nuestros productos digitales sean accesibles para todas las personas. En esta presentación puedes encontrar más información. Y en este link el video de la charla. Además, nos dejó una actividad para desarrollar: al Codepen asociado a está sección debemos de aplicarle los principios de accesibilidad que ella nos explicó, para esto podemos abrir el inspector de elementos y nos mostrará en la consola los erroes que tenemos asociados a la accesibilidad.
See the Pen We code - Accessibility by Henry Zarza (@HenryZarza) on CodePen.
Uso de la API speechSynthesis para hacer una síntesis de la voz en tiempo real.
Speech synthesis
En esta charla, Henry nos explicó la continuación de la API de JavaScript de Web speech API; en este caso la de SpeechSynthesis la cual permite realizar una síntesis de la voz a través de una interfaz. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
See the Pen We code - Speech Synthesis by Henry Zarza (@HenryZarza) on CodePen.
Explicación, casos de uso y ejemplos de los array method de JavaScript.
Array methods
En esta charla, Alejo nos explicó los array methods que tenemos actualmente disponibles en JavaScript, como los podemos usar, algunos ejemplos y casos de uso. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
Razones de porqué aplicamos motion a un proyecto, y qué tener en cuenta a la hora de desarrollarla.
Principios de animaciones
Nico nos explicó los principios de las animaciones y que factores debemos de tener en cuenta a la hora de implementarlos en nuestros productos digitales. En esta presentación puedes encontrar más información. Y en este link el video de la charla. Además, nos dejó una actividad para desarrollar: al Codepen asociado a está sección debemos de aplicarle los principios de accesibilidad que ella nos explicó, para esto podemos abrir el inspector de elementos y nos mostrará en la consola los erroes que tenemos asociados a la accesibilidad.
See the Pen We code - Animation by Henry Zarza (@HenryZarza) on CodePen.
Explicación y ejemplo de una animación con SVG usando CSS y JavaScript.
Animaciones con SVG
En esta charla, Andy nos explicó sobre como podemos realizar animaciones usando SVGs, ya sea con CSS o con JavaScript. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
See the Pen Svg Ligth animation by Andy Francisco Olarte Cardona (@andyOlarte514) on CodePen.
Veremos un poco el funcionamiento de la api de face detection integrada en Chrome.
Face detection
Cherny nos explicó en esta charla acerca de una API que funciona en Chrome (por el momento) para realizar reconocimiento facial, nos estuvo mostrando su funcionamiento y lo que podemos hacer con ella. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
¿Alguna vez tuviste que implementar Lazy Loading para imágenes o Infinite Scrolling en un listado? Usar esta API te puede solucionar muchos problemas.
Intersection Observer
Cerrando con broche de oro está edición, Kike nos estuvo mostrando una API llamada Intersection Observer la cual nos sirve para hacer lazy loading o darle una interacción genial a nuestros elementos cuando se hace scroll. En esta presentación puedes encontrar más información. Y en este link el video de la charla.
See the Pen Intersection Observer by Enrique Mejia (@jmtov) on CodePen.