sábado, 6 de junio de 2020

Transformación Digital

Transformación Digital:

Para comenzar la transformación digital debemos tener claro en que espacio de mercado estamos. pero debemos identificar nuestro espacio de mercado único, por ejemplo NIKE no vende tennis, vende salud para deportistas, darse cuenta de esto te llevará al éxito para dirigirte a a tu publico objetivo.

"No quedarse dormido en los laureles" significa que no debes creer que porque has tenido éxito por años, vas a seguir teniendo éxito en el futuro, el mundo está cambiando y lo seguira haciendo, las empresas que no se adapten morirán, el caso siempre mas mencionado es Block Buster, que no se adapto al cambio pensando que ellos ya eran suficientemente éxitos, Bluck Buster pudo haber sido el Netflix de nuestros días, pero "se quedó dormido en los laureles"

La transformación digital: es muy importante comprender que transformar tu empresa a digital, no significa que únicamente debes invertir en tecnologías. cambiar la cultura del equipo será un reto aún mayor, hay empresas que ya nacieron siendo digitales y no tendrán este problema, pero aquellas empresas que desean transformarse a lo digital, tendrán este gran reto de cambiar la cultura, el punto es no derroches dinero en inversiones tecnológicas descuidando la cultura de la empresa.

Metodologías para el desarrollo de productos:
Design Thinking, Lean UX, Agil, Growth hacking.
la metodología Lean Startup, incluye las 4 metodologías anteriores en distintas fases.



1. Design Thinking: explora el problema, empatiza con el usuario, puede ser caro pues es un verdadero estudio de mercado.

2. Lean UX: metodología muy utilizada por emprendedores, sacamos un MVP (producto mínimo viable) sin hacer estudios de mercado, al ser un MVP debe ser un producto barato que me ayude a salir del edificio y salir al mercado, para probar nuestra hipótesis, y rápidamente debemos ir trabajando en nuestro MVP según veamos la respuesta del mercado.  

3. Desarrollo Agil: es una metodología para construir, se debe usar únicamente cuando vamos a construir un producto, si no, se debe omitir, las metodologías ágil mas populares son SCRUM y Kanban. son metodologías que me permitirán construir un producto con entregarles en cortos plazos para poder dar una retroalimentación del producto e irlo mejorando poco a poco

4. Growth Haking: una vez se tiene un Product Maket Fit (lo explicaré mas adelante) esta metodología nos ayudará a escalar nuestro proyecto

Todas estas metodologías son parte de Lean Startup, es una visión que nos ayudará a fallar rápido y temprano para ir aprendiendo y creciendo de forma muy rápido.
Lean Startup es una metodología muy simple de 3 etapas y en cada etapa hay un proceso que me lleva a la siguiente etapa y esto se vuelve cíclico:


Primero tienes una idea que partes de una enseñanza previa y a través de estas métricas logramos diseñar un producto. Con esto pasamos a la fase de construcción de un MVP , y debemos tener la manera de como nuestro producto genere datos, resultados. Una vez tengamos resultados pasamos a analizarlos y medirlos con esto observamos en que nos hemos equivocado o en que hemos tenido éxito con el objetivo de tener un aprendizaje que nos ayudará a conectar con la primera etapa y volver a generar ideas.

Innovacion: 
las empresas digitales tiene una gran ventaja para ser innovadores por las siguientes razones:
1. Velocidad y bajo costo de experimentación.
2. Disponibilidad y calidad de datos analíticos
3. Escalabilidad
4. Relación con los clientes
5. Facilidad de colaborar con otros

1. Velocidad y bajo costo de experimentación: tener un espacio en Internet es mucho mas barato que tener un local físico. los canales de distribución son mas baratos también en Internet, como los market places. en el mundo digital también podemos aprovechar todos los desarrollo que ya existen y están a disposición, no debemos inventar la rueda de nuevo, aprovechemos estas tecnologías

2. Disponibilidad y calidad de datos analíticos: en Internet es posible obtener un montón de datos que serían muy difíciles o caros de obtener en una empresa que realiza sus transacciones de manera física. la data es muy importante para obtener aprendizaje y tomar mejor decisiones, que serán decisiones objetivas y no subjetivas, ya no serán decisiones basadas en lo que creemos, si no en lo que los datos nos están demostrando

3. Escalabilidad: en Internet, tu cliente puede ser el mundo, sin necesidad de abrir tiendas por todos lados, son impresionantes las cifras de Instagram, que logró obtener 30 millones de usuarios con solamente 13 empleados

4. Relación con los clientes: en medios digitales es mas fácil y ágil llegar a los clientes, las redes sociales nos ayudan a interactuar y conectar con el cliente en una relación un poco mas cercana, hay que recordar que estos tiempos el cliente ademas del producto que ofreces desea tener una experiencia de usuario con tu empresa y esto será clave para el éxito de tu empresa.

5. Facilidad de colaborar con otros: Internet siempre ha sido símbolo de colaboración, un ejemplo es Netflix que libera una API para que fabricantes de productos electrónicos desarrollen sus propias aplicaciones para sus productos, Netflix no esconde su tecnología, mas bien motiva a otras personas o empresas lo aprovechen y les ha dado buenos resultados 

Estrategias para tener éxito para tener éxito con una empresa digital:
1. Adoptar la experimentación
2. Innovación Abierta
3. Diseño basado en Data
4. Integración entre canales

1. Adoptar la experimentación: debemos aceptar el fallo como un camino hacía el éxito, está bien fallar de forma controlada para aprender constantemente

2. Innovación Abierta: Ser abiertos en nuestros conocimientos, e incluso con nuestros propios departamentos, la alta burocracía hace lento el crecimiento, aunque también se debe tener innovacion abierta fuera de la empresa, asi podremos ser un referente de conocimiento en nuestro mercado y podemos aprovechar el talento externo de nuestros clientes u otras empresas

3. Diseño basado en Data: la data debe ser nuestra manera de tomar decisiones y no nuestras creencias, en la data detectaremos en que cosas esta fallando nuestra empresa para poder atacar esos fallos, sin no analizamos la data, es posible que no nos demos cuenta de fallos que están sucediendo, o nos nos daríamos cuenta de que cosas estamos teniendo éxito para aprovecharlo

4. Integración entre canales: debemos entender que al transformar nuestro negocio en digital, no significa que ampliaremos un canal mas para nuestra empresa, si no que la parte digital debe integrarse por completo a la empresa y alinearse a los objetivos y colaborar con las otras áreas y no competir con otras áreas de la empresa. la experiencia del cliente debe ser la misma no importa el canal que use para adquirir nuestra propuesta de valor

Cultura en empresas digitales

En las empresa digitales debemos lograr que los integrantes de nuestro equipo se involucren con los objetivos de la empres, nos sirve mas una persona inexperta en determinada área pero que esté comprometida con los objetivos de la empresa que un especialista en esa misma área que solo se limita a hacer su trabajo específico y se desentiende de todo lo demás que sucede al rededor.

La empresa Spotify nos comparte en un video su cultura y es una pauta a seguir para todos aquellos que somos parte de una empresa digital, aquí dejo un resumen de su cultura. y puntualizo que en general Spotify asume una cultura de error / cultura de aprendizaje

- Fallar rápido, aprender rápido, improvisar rápido
- Enfocarse en el problema y no la solución
- Limited Blast Radious, limitar el área de riesgo al poner a prueba una nueva característica
- Metodologías ágiles para desarrollar productos
- Impacto > Velocidad, desarrollar MVP y generar impacto es mejor que desarrollar todo un producto completo que no genere impacto
- Tomar decisiones en base a la Data y no a la percepción de los líderes
- Tener un balance entre Caos y burocracia
- Definir el norte de la empresa (Awesomeness)
- Storytelling
 
Estructura Organizacional en empresas digitales
Es muy recomendable formar equipos de máximo 8 personas y estos deben ser eauipos multifuncionales y autónomos que son capaces de generar productos alineados a la misión general de la empresa

El trabajador del futuro.
Importante comprender que las nuevas generaciones tiene visiones y comportamientos son diferentes, debemos identificar que las motivaciones de las nuevas generaciones son diferentes.
La diversidad, el dinero es un propósito, busca innovación y creatividad

La tecnología de una empresa digital
Muy recomendable tener un centro de Data Science y a través de un API (modelo de datos) conectar con las diferentes áreas de la empresa.
en una empresa digital, el departamento de TI se vuelve en un motor de creación de valor para los usuarios, democratiza la información para que otras áreas o externos que desarrollaran innovación para los clientes. 

Growth

El crecimiento de tu empresa dependerá de la forma en como obtienes datos, retroalimentación, como analizas los datos y que decisiones tomarás. debes tener cuidado con las métricas vanidosas esto se refiere a gráficos a análisis que se enfocan en crecimientos, pero no nos muestra otro tipo de información, los análisis deben ser mas detallados y no tan generales. para generar crecimiento es importante generar tracción, esto quiere decir que un cliente se quede contigo y que no sea una sola interacción de una sola vez.

Etapas del crecimiento:
1. propuesta de valor: es tener un product market fit, el objetivo es generar una retención de los usuarios
2. Preparación para el crecimiento: en esta etapa, aquí debemos optimizar cada parte del proceso para mejorar la experiencia de usuario, el objetivo es conseguir un modelo rentable para adquirir clientes
3. Crecimiento: Aquí el objetivo es escalar y perfeccionar el producto, abriendo poco a poco el mercado mientras vamos analizando como se comporta nuestro producto

Growth Hacking:
Es un proceso de rápida experimentación con diferentes canales de mercadeo y con el desarrollo de un producto para identificar la manera más eficaz de crecer un negocio.
para diferenciar con el marketing tradicional, en el growth hacking obtenemos retroalimentación en tiempo real de los resultados de nuestro crecimiento y esto nos permite reaccionar mas rápido a mejores decisiones a diferencia del marketing tradicional donde los resultados de una campaña pueden tardar hasta 2 años.
En el growth hacking los equipos de producto y marketing están entrelazados, donde se forma un unico equipo comprometido con los objetivos de la empresa, a diferencia del marketing tradicional donde los equipos de producto y marketing son departamentos separados.
nota: marketing digital no es growth hacking

Etapa 1 de crecimiento Product Market Fit:
es encontrar un mercado suficientemente grande que esta dispuesto a comprar un producto o servicio, a pesar que la idea esta en una etapa muy temprana de desarrollo, es lo mismo que apostar por desarrollar pain killers en vez de vitaminas.
Sabes que tiene un product market fit , cuando al menos 40% de tus clientes se decepcionarían de no obtener mas tu propuesta de valor, el product manager es quien lidera esta etapa de la empresa

Etapa 2 de crecimiento prepararse para el crecimiento:
Pirate Metrics: Aquí se debe trabajar en conjunto, la retención de usuarios junto con la tracción de clientes, en esta pirámide, el marketing llega hasta cierta etapa y luego es importante retener al cliente con nuestra propuesta de valor


En esta etapa de crecimiento es importante poder medir nuestros resultados y para medir se puede usar el lean analytics, donde definiremos que métricas aplicaremos a cada etapa, la mas común será el conversión rate.

Ejemplo de una aplicacion movil:

Etapa                                Metrica

Publicidad:                      Conversion rate
Appstore:                        Número de descargas
Registro                          Cantidad de usuarios que hacen login
Retención                        Numero de usuario activos
                                        Churn Rate (usuarios que se vuelven inactivos en un periodo de tiempo)
                                        # transacciones por usuario
Recomendación              # de usuarios que invitan a otras personas
                                        # numero promedio de personas invitadas por usuario
                                        % de aceptación de usuarios

viernes, 5 de junio de 2020

Modelo de negocios Canvas

Modelo de negocios Canvas

La metodología Canvas, introducida en 2008 por Alexander Osterwalder explica de una manera muy simple y precisa, los diferentes aspectos necesarios para que una idea de negocios funcione.

En general consiste en un lienzo, presentado normalmente en un gran formato, en el que los distintos grupos de personas pueden discutir sobre los elementos que hacen al proyecto y cómo se relacionan entre sí, dando entonces muchísima claridad sobre qué es lo que hacen, cómo lo hacen y a quién se dirigen.

El formato está compuesto por 9 componentes:

  • 1 Segmentos de Clientes
  • 2 Propuesta de Valor
  • 3 Canales de Distribución y Comunicación
  • 4 Relación con los Clientes
  • 5 Flujo de Ingresos
  • 6 Recursos Claves
  • 7 Actividades Claves
  • 8 Red de Partners (Socios clave)
  • 9 Estructura de Costos

Un modelo de negocios es la manera en la que definimos como funcionará nuestra empresa, de que manera agregaremos valor para entregarlo a nuestros clientes, definir un modelo de negocios es útil para enfocarnos en lo que de verdad importa. existe muchos modelos, en este caso vemos el modelo de negocios CANVAS porque se adapta a las empresas mas modernas, es un modelo ágil, eso significa que lo podemos modificar cuando sea necesario de una manera rápida, cosa que es difícil para las empresas tradicionalistas, si vas a comenzar un emprendimiento, definitivamente necesitas definir tu modelo de negocios y el model CANVAS es una de las mejores opciones para estos tiempos.

Un modelo Canvas se mira de esta manera:

Ejemplo del diseño del modelo canvas


La numeración indica en que orden debes ir definiendo tus áreas

1 Segmento de Clientes:
Aquí identificas a que publico te diriges y debes segmentarlo lo mas pequeño posible y se usan 3 términos para definirlo:

Imagina que estamos haciendo un proyecto para ofrecer servicio a domicilio nuestra empresa de cuidados de mascostas

TAM: Define todo el mercado al que podrías dirigirte, suele ser muy amplio, en este caso sería todas las personas que tienen mascotas

SAM: esta limitado por el tipo de cliente, ejemplo el universo son las personas que tienen mascotas, pero el SAM lo reduce a las personas que tienen mascotas y los dejan solos por largos periodos de tiempo frecuentemente

SOM: está limitado por nosotros como empresa es decir , ya sabemos que nuestros clientes son las personas que tienen mascota y necesitan cuidados de sus mascota, ahora con el SOM detectamos que solo podemos atender a personas que viven en nuestra ciudad por ejemplo, en este caso no se limita a causa del perfil del cliente, esta limitado por nuestra capacidad de empresa de dar el servicio solo a una ciudad

Una ve llegues al SOM, acabas de encontrar al publico a quien te diriges

2 Propuesta de Valor
Este es el corazón de la empresa, es lo que tu empresa o proyecto está ofreciendo, una vez definida la propuesta de valor, todas las demás áreas del modelo CANVAS se enfoncarán en que esta propuesta de valor funcione, sea rentable y llegue al cliente

Para generar una propuesta de valor debes tomar todo el tiempo necesario posible, semanas o meses. Existen muchas técnicas para generar propuestas de valor, generalmente es realizar un verdadero estudio de mercado,  realizando entrevistas, encuestas, lo importante es lograr entender a tu cliente, no asumas que por saber del tema comprendes al cliente, debes hacer un trabajo de investigación si quieres hacerlo bien, te recomiendo la metodología de DESING THINKING para lograr entender a tu cliente y poder generar una propuesta de valor


3 Canales de Comunicación

Define de que manera haremos llegar nuestra propuesta de valor a nuestro cliente, cuando el producto es electrónico, posiblemente llegará a tu cliente por medio de una plataforma online, o videos, etc. cuando son productos físicos puede ser a través de una tienda y entregas a domicilio, cuando son servicios pueden ser los profesionales que realizarán el servicio, puedes tener uno o mas canales de comunicación.

4 Relaciones con los Clientes
Es la manera de como el cliente se puede comunicar con nosotros, puede ser por un chat, por correo electrónico? por whatsapp, mensajes de facebook, 
Esto lo debe definir la empresa y debemos comprometernos con ofrecer un buen servicio como responder en menos de 1 hora, esto es lo que mas afecta la experiencia de usuario, es posible que los clientes elijan a la empresa por la experiencia de usuario y deje de lado otra empresa que sea mas barata pero tiene un mal servicio, o incluso que su propuesta de valor sea mejor. entonces es sumamente importante definir como nos relacionaremos con los clientes, comprometernos

5 Flujos de Ingresos

Define como la empresa obtendrá un beneficio monetario. en este punto también se define , cuanto está dispuesto a pagar el cliente por nuestra propuesta de valor, de que manera prefiere pagar el cliente, pago unico? subcripcion? dependiendo del consumo? (ejemplo la electricidad como servicio publico usa este método) por crédito? por cuotas? por donaciones? recibiendo publicidad? renta o alquiler? licencias o franquicias? 
puedes elegir uno o mas tipos de flujos de ingresos, por ejemplo las membrecias freemium donde usas una aplicación gratis pagando viendo publicidad o puedes pagar para eliminar la publicidad y obtener algunos beneficios extra


6 Recursos Claves

Son todos aquellos activos que necesitas para que todos los puntos anteriores puedan funcionar. es decir los activos que necesitas para entregar la propuesta de valor, los activos que necesitas para cumplir en tus canales de comunicación y relaciones con los clientes y los activos que necesitas para recibir pagos.
por ejemplo puedes decir que necesitas un local comercial o plataforma online, un correo corporativo, una cuenta de whatsapp empresarial, una cuenta en alguna red social, pasarelas de pago, inventario, pueden ser pantentes, algunos recursos humanos por profesiones específicas, recursos monetarios como créditos o liquidez, etc.

También es muy útil para identificar que activos son realmente necesarios y cuales son accesorios, los activos accesorios pueden ser muy útiles para tu negocio pero es importante identificarlos que podemos prescindir de ellos


7 Actividades Claves

Son todas las actividades imprescindibles para llevar a cabo nuestra propuesta de valor, es importante de nuevo diferenciar de actividades claves a actividades opcionales, si debemos incluir las actividades necesarias para cumplir con todos los puntos antes mencionados, como atender las relaciones con los clientes, manejar el flujo de ingresos, explotar los canales de comunicación, etc. se pueden dividir en tipos de actividades:
- Producción: diseño, realización y entrega de productos

- Solución de problemas: consultoría o brindar servicios

- Plataforma/red (solo si aplica)


En las actividades claves, identificas también quien realizará cada actividad, y en este punto es posible identificar que la carga de trabajo es muy elevada para las personas que integran en el equipo, aquí se puede decidir quitar alguna actividad clave y remover lo relacionado en todos los demás puntos.

ejemplo, imagina que decides quitar la actividad de escribir un blog, entonces como no tienes quien escriba el blog, debes borrar el blog de tu canal de comunicación y de tus recursos claves, podrías incluirlo en un futuro cuando el equipo crezca


8 Red de Partners (Socios clave)
Quienes son nuestros provedores y aliados claves, son todas aquellas actividades que tercerizaremos, estos socios claves hacen que funcione el modelo de negocio.
muchas actividades se tercerizan porque no tenemos la capacidad, o para reducir riesgos, o para reducir gastos.
por ejemplo una tienda online puede tercerizar los envíos, seguro le saldrá mas barato que ellos ir a dejar el producto,
los proveedores mayoristas también son socios estratégicos, los servicios como Paypal son socios, Shopify, puedes tercerizar tu contabilidad y finanzas a otra empresa.


8 Estructuras de costos

son los costos más importantes inherentes a nuestro modelo de negocios, lo importante acá es detectar cuales son las actividades claves mas costosas, identificamos todos los costos necesarios para poder operar


Costos fijos            por ejemplo rentas o subscripciones

Costos variables

Economía de escala        ejemplo comprar como mayorista

Economía de amplitud    

debemos detectar que costos son fijos y que costos son variables, importante identificar los costos mas elevados y cuestionarnos si son necesarios o no para nuestra propuesta de valor


Con esto termino de explicar todas las áreas del modelo Canvas, quiero destacar que Canvas es un modelo agil , diseñado para poder modificarse rápidamente, es buena práctica que realices todo tu canvas y si no tienes algunas areas claras aun asi puedes seguir definiendo las demás areas y luego puedes volver a la area que dejaste pendiente.
seintete en la libertad de modificar el canvas las veces que sea necesario, y también una vez arranques tu proyecto también puedes modificar tu canvas para que se adapte a las necesidades que vayan surgiendo. Otra cosa muy importante no esperes a tener todo, pienza en un MVP, un producto minimo viable, lanza tu proyecto lo mas pronto posible y prepárate para ir creciendo junto a las necesidades de tu cliente























 

lunes, 27 de abril de 2020

Sitios para aprender y practicar CSS


Sitios para practicar y mejorar tu CSS:

Aquí te dejo una lista de sitios web muy útiles cuando estas utilizando CSS. estos enlaces son juegos, documentación oficial de referencia, bibliotecas de fuentes, colores e imágenes


Todos los enlaces fueron obtenidos del CURSO DE FRONTEND  de la plataforma de Aprendizaje PLATZI.

Agradezco a Estefany Aguilar Restrepo quien impartió este curso de manera épica.

ella trabaja como desarrolladora frontend en La Haus (Bienes inmobiliarios) y como profesora en PLATZI


A ella la puedes encontrar como el seudónimo de teffcode en diferentes redes sociales, te recomiendo seguirla, ya que comparte muy buen material relacionado a CSS y tecnologías Front End
https://twitter.com/teffcode?lang=es 
https://co.linkedin.com/in/teffcode 
https://github.com/teffcode
https://www.teffcode.com/

Ahora si, aquí están los enlaces prometidos:

HTML: 
Para comenzar, es necesario que tengas los conocimientos básicos de HTML, aquí hay una buena documentación de las etiquetas HTML que existen:
https://htmlreference.io/

Una vez construyas tu estructura HTML puede serte útil este sitio web, que puede revisar todas las etiquetas que utilizaste y mostrarte los errores
Validador de etiquetas:
https://validator.w3.org/

CSS:
Mozilla es un referente que tiene muy buena documentación en cuanto a tecnologías web, por lo que verás varios enlaces a mozilla sobre diferentes temas

Documentación de las propiedades existentes en CSS:
https://cssreference.io/

Referencia Oficial de Mozilla sobre Pseudoclases:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Referencia Oficial de Mozilla sobre Pseudoelementos:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements


Bibliotecas:
Mientras estás creando un sitio web, vas a necesitar contenido adicional, aquí te dejo diferentes sitios donde puedes obtener todos estos elementos, gratis.

Biblioteca de Emojis:
te muestra un tablero con emojis, solo da click al que te guste y estará en tu portapapeles para que lo pegues en cualquier editor de texto
https://coolsymbol.com/emojis/emoji-for-copy-and-paste.html

Bibliotecas de iconos
https://iconos8.es/

Biblioteca de fuentes:
con fuentes me refiero a tipos de caligrafía, google nos ofrece descargar la fuente para luego incluirla en el código, o el código HTML para incluir la fuente directamente desde los repositorios de google
https://fonts.google.com/

Biblioteca de Fotos:
Definitivamente es mala idea que incluyas cualquier imagen en tu sitio web, ya que la imagen podría tener copyrigth.
Usa imágenes propias o que tengas permisos para utilizarlas o usa una de este sitio donde puedes obtener fotos y videos que comparten creadores talentosos totalmente gratis
https://www.pexels.com/es-es/

Bibliotecas de colores:
Cuando creas un sitio web, es importante tener una paleta de colores. Aquí te dejo enlaces de sitios donde puedes obtener los codigos RGB o hexadecimal de los colores que podrías incluir en tu sitio web
https://picular.co/Video
http://paletton.com/

En especial me gusta coolors.co te permite compartir paletas de color con un enlace, útil para trabajar en equipo
https://coolors.co/001514-fbfffe-6b0504-a3320b-e6af2e

Arquitecturas de CSS
Cuando trabajes en el desarrollo de sitios web, lo mejor es que uses una arquitectura, para que tu código pueda ser entendido por otros desarrolladores sin tantos problemas.

Aquí te dejo documentación oficial para que elijas la arquitectura que se adapte a las necesidades de tu proyecto, en mi caso elegí BEM.

CSS orientada a objetos
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

BEM
BLOQUE - ELEMENTO - MODIFICADOR
http://getbem.com/introduction/

SMACSS
arquitectura de CSS escalable y modular
http://smacss.com/

ITCSS
Triangulo invertido de CSS
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

ATOM
CSS modular y escalable, inspirada en química
https://bradfrost.com/blog/post/atomic-web-design/


Tecnologías para maquetación en HTML5
desde HTML5 la propiedad display (que permite trabajar con los layouts) nos ofrece las tecnologías FLEXBOX o CSS-GRID, no debemos pensar que una tecnología es mejor que otra, simplemente en algunas ocasiones lo recomendavle será usar flexbox y en otras ocasiones CSS-GRID

FLEXBOX documentación oficial
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

conceptos básicos de FLEXBOX
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Definitivamente, la manera que me ayudo mas a afianzar los conocimientos de FLEX, fue este juego, donde usando propiedades CSS para FLEX debemos colocar ranitas en sus hojas

FLEXBOX FROGGY
https://flexboxfroggy.com/#es

CSS-GRID documentación oficial
https://css-tricks.com/snippets/css/complete-guide-grid/

CSS-GRID documentación oficial Mozilla
https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Jen Simmons es diseñadora y programadora senior en Mozilla, ella tiene un sitio web, donde tiene ejemplos de CSS usando CSS-GRID
https://labs.jensimmons.com/

Jen Simmons también tiene un canal en youtube, llamado Layout Land, donde podrás encontrar contenido relacionado a CSS
https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag

Similar al juego de las ranas para flex, está este juego donde tendrás que regar plantas usando propiedades de CSS-GRID, muy recomendado
https://cssgridgarden.com/#es


Accesibilidad:
Cuando creamos sitios web, es nuestra responsabilidad, otorgar toda la información posible a los lectores de pantallas para las personas no videntes.

Para esto debemos trabajar en nuestro código para utilizar las etiquetas de manera adecuada y tomar en cuenta el tab-index de las etiquetas

Aquí te dejo unos enlaces que serán de ayuda
Configuración de voces:
https://support.apple.com/es-lamr/HT202362

ANDI herramienta de pruebas de accesibilidad
https://www.ssa.gov/accessibility/andi/help/install.html

herramienta de prueba de navegacion tabindex
https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales/tabindex



Storybook
https://storybook.js.org/docs/guides/guide-html/