oraddryAPUNTES DE CSS Y HTML

Flex es un tipo de display que permite que el contenedor padre sea

flexible a los cambios que puedan tener los elementos hijos en su
alineación.

Una vez tengamos el elemento padre con display: flex tenemos

otras propiedades que podremos usar para nuestro beneficio.

Flex-direction: Te permite elegir la alineación de los elementos

hijos sea en vertical (column) u horizontal (row), esta alineación
viene por defecto.
Justify-content: Esta propiedad nos permite alinear el contenido de
forma horizontal
Valores:
Flex-start: Alinear items del flex desde el comienzo.
Flex-end: Alinear items desde el final.
Center: Alinear items en el centro del contenedor.
Space-between: Distribuir items uniformemente, el primer items al
inicio, el último al final.
Space-around: Distribuir items uniformemente, estos tienen el
mismo espacio a su alrededor.
Space-evenly: Distribuye uniformemente el espacio entre los items
y su alrededor.
Align-items: Sirve para alinear los elementos hijos de forma
vertical.
Valores:
Flex-start: Se alinean desde arriba.
Flex-end: Se alinean desde abajo.
Center: Alinea los item al centro del eje y del contenedor.
Stretch: Estira el alto de los elementos hijos al 100% del alto del
elemento padre.
Baseline: Escala el alto del elemento al tamaño de su contenido.
Flex-wrap: Permite que un elemento cuyo tamaño sea mayor al de
la página haga un salto de línea sin salirse del contenedor, pues
este se agranda.
Order: Especifica el orden utilizado para disponer los elementos en
su contenedor flexible. Los elementos estarán dispuestos en orden
ascendente según el valor de order.
Flex-grow: Especifica qué cantidad del espacio restante dentro del
contenedor flexible, debería ocupar el ítem en cuestión según su
dirección principal, esta última determinada por flex-direction.
Flex-basis: Especifica el tamaño inicial de un elemento flexible.

Son grupos familiares de fuentes, los navegadores web poseen

fuentes predeterminadas y dependiendo del mismo cada uno de
ellos posee estilos diferentes.

Algunas Generic Families

serif: Son un tipo de fuente de estilo formal o clásico como Times
New Roman.
sans-serif: No tienen acabado en las puntas, como: Verdana.
cursive: Son las que tienen estilo cursivo.
monospace: Son tipos de fuentes con espaciado entre las letras,
como: Roboto mono.
¿Como puedo saber que tipo de fuente tengo instaladas en mi
navegador?

Menú>Configuración>Diseño>Personalizar Fuentes>Fuente
Serif/Fuente Sans-serif

¿Como puedo importar tipos de fuentes a mi proyecto?

Ir a Google Fonts.
Seleccionar la fuente.
Seleccionar Estilo de fuente.
Agregar al proyecto, se considera buena práctica agregar las
fuentes utilizando la etiqueta <link>, ya que la fuente cambia la
fuente una vez que se haya cargado la página.
Buenas Prácticas
Cargar una sola fuente.
Importarlas siempre en la etiqueta del head.
Diferencias entre la estructura de archivos de Windows, Mac o
Linux.

La ruta principal en Windows es C:\, en UNIX es solo /.

Windows no hace diferencia entre mayúsculas y minúsculas pero
UNIX sí.
Recuerda que GitBash usa la ruta /c para dirigirse a C:\ (o /d para
dirigirse a D:\) en Windows. Por lo tanto, la ruta del usuario con el
que estás trabajando es /c/Users/Nombre de tu usuario

Comandos básicos en la terminal:

pwd: Nos muestra la ruta de carpetas en la que te encuentras ahora

mismo.
mkdir: Nos permite crear carpetas (por ejemplo, mkdir Carpeta-
Importante).
touch: Nos permite crear archivos (por ejemplo, touch archivo.txt).
rm: Nos permite borrar un archivo o carpeta (por ejemplo, rm
archivo.txt). Mucho cuidado con este comando, puedes borrar todo
tu disco duro.
cat: Ver el contenido de un archivo (por ejemplo, cat nombre-
archivo.txt).
ls: Nos permite cambiar ver los archivos de la carpeta donde
estamos ahora mismo. Podemos usar uno o más argumentos para
ver más información sobre estos archivos (los argumentos pueden
ser -- + el nombre del argumento o - + una sola letra o shortcut por
cada argumento).
- ls -a: Mostrar todos los archivos, incluso los ocultos.
- ls -l: Ver todos los archivos como una lista.
cd: Nos permite navegar entre carpetas.
- cd /: Ir a la ruta principal:
- cd o cd ~: Ir a la ruta de tu usuario
- cd carpeta/subcarpeta: Navegar a una ruta dentro de la carpeta
donde estamos ahora mismo.
- cd .. (cd + dos puntos): Regresar una carpeta hacia atrás.
- Si quieres referirte al directorio en el que te encuentras ahora
mismo puedes usar cd . (cd + un punto).
history: Ver los últimos comandos que ejecutamos y un número
especial con el que podemos repetir su ejecución.
! + número: Ejecutar algún comando con el número que nos
muestra el comando history (por ejemplo, !72).
clear: Para limpiar la terminal. También podemos usar los atajos de
teclado Ctrl + L o Command + L.
Todos estos comandos tiene una función de autocompletado, o
sea, puedes escribir la primera parte y presionar la tecla Tab para
que la terminal nos muestre todas las posibles carpetas o
comandos que podemos ejecutar. Si presionas la tecla Arriba
puedes ver el último comando que ejecutamos.
Recuerda que podemos descubrir todos los argumentos de un
comando con el argumento --help (por ejemplo, cat --help).
comandos de git aprendidos en esta clase:

git init: lo usamos para determinar la carpeta en la que vamos a

trabajar.

git status: lo usamos para saber si tenemos un archivo añadido o

borrado en nuestro proyecto, para saber en la rama en la que
estamos y si tenemos commits.

git add: es para añadir un archivo a nuestra rama seguidamente

ponemos entre comillas el nombre de nuestro archivo o poner un
punto para añadir todos los archios de nuestra carpeta.

git rm: lo usamos para borrar un archivo que hayamos añadido,

para eliminarlo por completo de nuestra rama usamosgit rm --
cached.

git commit: se usa para añadir un commit a nuestra rama, también

podemos ponerle un -m seguidamente ponemos entre comillas
nuestro ensaje.

git config: muestra configuraciones de git también podemos usar –

list para mostrar la configuración por defecto de nuestro git y si
añadimos --show-origin inhales nos muestra las configuraciones
guardadas y su ubicación.

git config --global user.name: cambia de manera global el nombre

del usuario, seguidamente ponemos entre comillas nuestro
nombre.

git config --global user.email: cambia de manera global el email del

usuario, seguidamente ponemos entre comillas nuestro nombre.

git log: se usa para ver la historia de nuestros archivos, los commits,
el usuario que lo cambió, cuando se realizaron los cambios etc.
seguidamente ponemos el nombre de nuestro archivo.

inhales again

uuuuuuffff si que me costó escribir esto

Algunos comandos que pueden ayudar cuando colaboren con
proyectos muy grandes de github:

git log --oneline - Te muestra el id commit y el título del commit.

git log --decorate- Te muestra donde se encuentra el head point en
el log.
git log --stat - Explica el número de líneas que se cambiaron
brevemente.
git log -p- Explica el número de líneas que se cambiaron y te
muestra que se cambió en el contenido.
git shortlog - Indica que commits ha realizado un usuario,
mostrando el usuario y el titulo de sus commits.
git log --graph --oneline --decorate y
git log --pretty=format:"%cn hizo un commit %h el dia %cd" -
Muestra mensajes personalizados de los commits.
git log -3 - Limitamos el número de commits.
git log --after=“2018-1-2” ,
git log --after=“today” y
git log --after=“2018-1-2” --before=“today” - Commits para localizar
por fechas.
git log --author=“Name Author” - Commits realizados por autor que
cumplan exactamente con el nombre.
git log --grep=“INVIE” - Busca los commits que cumplan tal cual está
escrito entre las comillas.
git log --grep=“INVIE” –i- Busca los commits que cumplan sin
importar mayúsculas o minúsculas.
git log – index.html- Busca los commits en un archivo en específico.
git log -S “Por contenido”- Buscar los commits con el contenido
dentro del archivo.
git log > log.txt - guardar los logs en un archivo txt
1. git log --oneline - Te muestra el id commit y el título del commit.
2. git log --decorate- Te muestra donde se encuentra el head point en el log.
3. git log --stat - Explica el número de líneas que se cambiaron brevemente.
4. git log -p- Explica el número de líneas que se cambiaron y te muestra que se cambió
en el contenido.
5. git shortlog - Indica que commits ha realizado un usuario, mostrando el usuario y el
titulo de sus commits.
6. git log --graph --oneline --decorate y
7. git log --pretty=format:"%cn hizo un commit %h el dia %cd" - Muestra mensajes
personalizados de los commits.
8. git log -3 - Limitamos el número de commits.
9. git log --after=“2018-1-2” ,
10. git log --after=“today” y
11. git log --after=“2018-1-2” --before=“today” - Commits para localizar por fechas.
12. git log --author=“Name Author” - Commits realizados por autor que cumplan
exactamente con el nombre.
13. git log --grep=“INVIE” - Busca los commits que cumplan tal cual está escrito entre
las comillas.
14. git log --grep=“INVIE” –i- Busca los commits que cumplan sin importar mayúsculas
o minúsculas.
15. git log – index.html- Busca los commits en un archivo en específico.
16. git log -S “Por contenido”- Buscar los commits con el contenido dentro del archivo.
17. git log > log.txt - guardar los logs en un archivo txt

$ git show-branch: para ver el historial de ramas

Stashed:
El stashed nos sirve para guardar cambios para después, Es una lista de estados que
nos guarda algunos cambios que hicimos en Staging para poder cambiar de rama sin
perder el trabajo que todavía no guardamos en un commit
Ésto es especialmente útil porque hay veces que no se permite cambiar de rama,
ésto porque porque tenemos cambios sin guardar, no siempre es un cambio lo
suficientemente bueno como para hacer un commit, pero no queremos perder ese
código en el que estuvimos trabajando.
El stashed nos permite cambiar de ramas, hacer cambios, trabajar en otras cosas y,
más adelante, retomar el trabajo con los archivos que teníamos en Staging pero que
podemos recuperar ya que los guardamos en el Stash.
git stash
El comando git stash guarda el trabajo actual del Staging en una lista diseñada para
ser temporal llamada Stash, para que pueda ser recuperado en el futuro.
Para agregar los cambios al stash se utiliza el comando:
git stash
Podemos poner un mensaje en el stash, para asi diferenciarlos en git stash list por si
tenemos varios elementos en el stash. Ésto con:
git stash save "mensaje identificador del elemento del stashed"

Obtener elelmentos del stash

El stashed se comporta como una Stack de datos comportándose de manera
tipo LIFO (del inglés Last In, First Out, «último en entrar, primero en salir»), así
podemos acceder al método pop.
El método pop recuperará y sacará de la lista el último estado del stashed y lo
insertará en el staging area, por lo que es importante saber en qué branch te
encuentras para poder recuperarlo, ya que el stash será agnóstico a la rama o
estado en el que te encuentres, siempre recuperará los cambios que hiciste en el
lugar que lo llamas.
Para recuperar los últimos cambios desde el stash a tu staging area utiliza el
comando:
git stash pop
Para aplicar los cambios de un stash específico y eliminarlo del stash:
git stash pop stash@{<num_stash>}
Para retomar los cambios de una posición específica del Stash puedes utilizar el
comando:
git stash apply stash@{<num_stash>}
Donde el <num_stash> lo obtienes desden el git stash list
Listado de elementos en el stash
Para ver la lista de cambios guardados en Stash y así poder recuperarlos o hacer
algo con ellos podemos utilizar el comando:
git stash list
Retomar los cambios de una posición específica del Stash || Aplica los cambios de un
stash específico
Crear una rama con el stash
Para crear una rama y aplicar el stash mas reciente podemos utilizar el comando
git stash branch <nombre_de_la_rama>
Si deseas crear una rama y aplicar un stash específico (obtenido desde git stash
list) puedes utilizar el comando:
git stash branch nombre_de_rama stash@{<num_stash>}
Al utilizar estos comandos crearás una rama con el nombre <nombre_de_la_rama>,
te pasarás a ella y tendrás el stash especificado en tu staging area.
Eliminar elementos del stash
Para eliminar los cambios más recientes dentro del stash (el elemento 0), podemos
utilizar el comando:
git stash drop
Pero si en cambio conoces el índice del stash que quieres borrar (mediante git
stash list) puedes utilizar el comando:
git stash drop stash@{<num_stash>}
Donde el <num_stash> es el índice del cambio guardado.
Si en cambio deseas eliminar todos los elementos del stash, puedes utilizar:
 git stash clear
Consideraciones:
 El cambio más reciente (al crear un stash) SIEMPRE recibe el valor 0 y los que
estaban antes aumentan su valor.
 Al crear un stash tomará los archivos que han sido modificados y eliminados. Para
que tome un archivo creado es necesario agregarlo al Staging Area con git add
[nombre_archivo] con la intención de que git tenga un seguimiento de ese archivo, o
también utilizando el comando git stash -u (que guardará en el stash los archivos
que no estén en el staging).
 Al aplicar un stash este no se elimina, es buena práctica eliminarlo.

A veces creamos archivos cuando estamos realizando nuestro proyecto que

realmente no forman parte de nuestro directorio de trabajo, que no se deberían
agregar y lo sabemos.
 Para saber qué archivos vamos a borrar tecleamos git clean --dry-run
 Para borrar todos los archivos listados (que no son carpetas) tecleamos git clean
-f

A veces hacemos un commit, pero resulta que no queríamos mandarlo porque faltaba algo
más. Utilizamos git commit --amend, amend en inglés es remendar y lo que hará es que
los cambios que hicimos nos los agregará al commit anterior.

UTILIZAMOS GIT REFLOG PARA VER EL HISTORIAL DE TODOS LOS COMMITS Y LOS
CMABIOS

Git nunca olvida, git reflog

Git guarda todos los cambios aunque decidas borrarlos, al borrar un cambio lo que
estás haciendo sólo es actualizar la punta del branch, para gestionar éstas puntas
existe un mecanismo llamado registros de referencia o reflogs.
.
La gestión de estos cambios es mediante los hash’es de referencia (o ref) que son
apuntadores a los commits.
.
Los recoges registran cuándo se actualizaron las referencias de Git en el repositorio
local (sólo en el local), por lo que si deseas ver cómo has modificado la historia
puedes utilizar el comando:
git reflog
Muchos comandos de Git aceptan un parámetro para especificar una referencia o
“ref”, que es un puntero a una confirmación sobre todo los comandos:
 git checkout Puedes moverte sin realizar ningún cambio al commit exacto de la ref
 git checkout eff544f
 git reset: Hará que el último commit sea el pasado por la ref, usar este comando
sólo si sabes exactamente qué estás haciendo
 git reset --hard eff544f # Perderá todo lo que se encuentra en staging y
en el Working directory y se moverá el head al commit eff544f
 git reset --soft eff544f # Te recuperará todos los cambios que tengas
diferentes al commit eff544f, los agregará al staging area y moverá el
head al commit eff544f
 git merge: Puedes hacer merge de un commit en específico, funciona igual que con
una branch, pero te hace el merge del estado específico del commit mandado
 git checkout master
git merge eff544f # Fusionará en un nuevo commit la historia de master
con el momento específico en el que vive eff544f

A medida que nuestro proyecto se hace grande vamos a querer buscar ciertas
cosas.
Por ejemplo: ¿cuántas veces en nuestro proyecto utilizamos la palabra color?
Para buscar utilizamos el comando git grep color y nos buscará en todo el
proyecto los archivos en donde está la palabra color.
 Con git grep -n color nos saldrá un output el cual nos dirá en qué línea está lo
que estamos buscando.
 Con git grep -c color nos saldrá un output el cual nos dirá cuántas veces se
repite esa palabra y en qué archivo.
 Si queremos buscar cuántas veces utilizamos un atributo de HTML lo hacemos
con git grep -c "<p>".
 git shortlog -sn = muestra cuantos commit han hecho cada miembros del
equipo.
 git shortlog -sn --all = muestra cuantos commit han hecho cada miembros
del equipo hasta los que han sido eliminado
 git shortlog -sn --all --no-merge = muestra cuantos commit han hecho cada
miembros quitando los eliminados sin los merges
 git blame ARCHIVO = muestra quien hizo cada cosa linea por linea
 git COMANDO --help = muestra como funciona el comando.
 git blame ARCHIVO -Llinea_inicial,linea_final= muestra quien hizo cada cosa
linea por linea indicándole desde que linea ver ejemplo -L35,50
 **git branch -r **= se muestran todas las ramas remotas
 git branch -a = se muestran todas las ramas tanto locales como remotas
Curso de Flujo de Desarrollo Moderno CodeStream
Definición de flujo: Es cuando estas trabajando y no sientes el paso del tiempo. Es estar tan
concentrado que todo lo demás no importa.
Workflow o flujo de trabajo: Es una secuencia de tareas organizadas de tal manera que
tengas mejor eficiencia.
Los ciclos de vida en software: Cascada y Moderno
El ciclo en cascada el software es tratado en cada departamento de forma separada y va
pasando de uno en uno.
El ciclo moderno se habla que todos los departamentos están conectados de tal manera que
trabajan uno con otro haciendo un flujo de trabajo.
El principio shift left es conocido en DevOps que moviendo el enfoque de la calidad a la
izquierda para comprimir el ciclo se logra mejor calidad y mejor rendimiento.
 Esto se hace porque al corregir errores en producción en 100 veces más caro que hacerlo al
principio del diseño.
Puedes comenzar con el flujo moderno implementandolo en ti mismo, conforme vas
avanzando, podrás aplicarlo en tu equipo añadiendo feedback request y asi todos se
beneficiarán.
Cuando varios equipos usen el flujo moderno, podrás llevarlo a la organización
beneficiándolo incorporando el área administrativa, la documentación y la parte de
analítica.
En la colaboración tradicional se hace una revisión al código al terminar el desarrollo y en
la colaboración moderna se hacen muchas revisiones de código pequeñas a medida que se
va desarrollando el proyecto.
Google atomiza la revisión de códigos para que dichas revisiones se tome un tiempo menos
de 24 horas, teniendo un tiempo promedio de revisión de todo el ciclo en menos de 4 horas.
56

Ventajas de tener un issue tracker integrado:

 Agregar un ticket mientras escribes o revisas código
 Conectar el ticket directamente al código
 Notificar a la persona de tu equipo que hay un ticket y dirigirlo al lugar correcto
 No estar cambiando de aplicación o contexto
 Crear un registro de los tickets asociados al código mismo
Binario

⠀
Machine Code es un lenguaje binario. El sistema binario es basicamente un sistema
de conteo.
La computadora solo entiende en ceros y unos.
⠀

Ejemplo: Número 70 a binario

128 64 32 16 8 4 2 1 → estos números son usados como referencia para convertir
un número decimal a binario.
⠀
128 → 0 (128 > 70, el dígito es 0)
64 → 1 (64 < 70, el dígito es 1 y utilizamos el resto 70 - 64 = 6)
32 → 0 (32 > 6, el dígito es 0)
16 → 0 (16 > 6, el dígito es 0 )
8 → 0 (8 > 6, el dígito es 0 )
4 → 1 (4 < 6, el dígito es 1 y utilizamos el resto 6 - 4 = 2)
2 → 1 (2 = 2, el dígito es 1, como el resto llegó a ser 0, el resto de dígitos es 0)
1 → 0 (1 > 0, el dígito es 0)
⠀
El resultado es 70(decimal) → 01000110(binario)
⠀

Ejemplo: Número 151 a binario

128 64 32 16 8 4 2 1 → estos números son usados como referencia para convertir
un número decimal a binario.
⠀
128 → 1 (128 < 151, el dígito es 1 y utilizamos el resto 151 - 128 = 23)
64 → 0 (64 > 23, el dígito es 0)
32 → 0 (32 > 23, el dígito es 0)
16 → 1 (16 < 23, el dígito es 1 y utilizamos el resto 23 - 16 = 7)
8 → 0 (8 > 7, el dígito es 0 )
4 → 1 (4 < 7, el dígito es 1 y utilizamos el resto 7 - 4 = 3)
2 → 1 (2 < 3, el dígito es 1 y utilizamos el resto 3 - 2 = 1)
1 → 1 (1 = 1, el dígito es 1)
⠀
El resultado es 151(decimal) → 10010111(binario)
Configuración del proyecto
.
Setup del proyecto, es como vamos a organizar nuestras carpetas y archivos del proyecto.
Shortcut, abreviación que nos permite generar un grupo de código.
.
Repaso de etiquetas:
• <!DOCTYPE html> esta etiqueta sirve para avisar al navegador que estamos hablando de
HTML5.
• Head, es una etiqueta contenedora, y no es visible para el usuario, pero es necesaria para
manejar dependencias.
• Body, es una etiqueta contenedora, y contiene todo lo visual con lo que el usuario puede
interactuar.
• Link, es una etiqueta de contenido que sirve para referenciar ciertos assets y por medio
de esta invocaremos nuestro archivo css.
rgklñ

overflow-x
La propiedad de CSS overflow-x establece lo que se muestra cuando el contenido
desborda los bordes izquierdo y derecho de un elemento a nivel de bloque. Puede
que no sea nada, una barra de desplazamiento o el contenido adicional.
overscroll-behavior
la propiedad de css overscroll-behabior establece lo que hace un navegador cuando
alcanza el límite de un área de desplazamiento. Es una abreviatura de overscroll-
behavior-x y overscroll-behavior-y.
scroll-snap-type
La propiedad CSS scroll-snap-type establece qué tan estrictamente se aplican los
puntos de snap en el contenedor de desplazamiento en caso de que haya uno

SISTEMAS DE DISEÑO

Si no tenemos principios sólidos para construir nuestros sistemas de diseño, todos los
caminos son correcto. (Es muy difícil tomar decisiones sin estos)
Para tomar decisiones tenemos que tener en cuenta nuestros principios.
Primeros principios:
**Accesibilidad: **Todos los usuarios puedan utilizar la plataforma. Debe ser perceptible,
operable (Debe poder ser utilizada), Entendible (En este punto tener en cuenta el lenguaje,
más si el producto se exporta a otros países). Robusto (Debe darle oportunidad a todos los
tipos de usuarios, por ejemplo a los daltonicos).
Consistencia: Siempre hablarle de una misma manera al usuario, de manera escrita, visual,
en procesos. Esto permitirá al usuario menos esfuerzo utilizar nuestro producto.
Reusable: Es importante que cada hora de trabajo que inviertamos tanto en diseño,
desarrollo, etc. Sea reutilizable.
Shareable: Toda la documentación debe ser compartido.
La plataforma puede ser restrictiva ( Guiar siempre al usuario para cumplir un objetivo),
permisiva ( perdona ciertos errores) Forgiveness (Perdonar al usuario si hace algo mal,
darle la posibilidad de volver atrás, etc)
Los principios lo tenemos que decidir nosotros, es como crear una personalidad. Un buen
punto de partida para definir los principios pueden ser las 10 reglas Heurísticas.
Martín Coronel
Diseño UX/UI
Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel
15

• Solitario: tú construyes, los demás consumen

• Centralizado: tú consultas a los demás departamentos y construyes un SD
 • Confederado: varios equipos dentro de varios departamentos y todos construyen el
sistema

Existen varios paradigmas de diseño que pueden guiarte en la construcción de tu

sistema de diseño.
El paradigma procedural es la construcción de objetos variados para posteriormente
construir nuestros sistemas a partir de estos elementos, es la construcción de
funciones que en el futuro se construirán a sí mismas. En vez de construir todos los
objetos de nuestro sistema, vamos a trabajar los elementos y reglas que se
resolverán después. Por ejemplo, construir las mangas, el cuello u otros elementos
para al obtener el resultado de un abrigo.
Otro paradigma que debemos entender es el diseño atómico para organizar los
elementos de nuestros diseños y software. Los elementos independientes más
sencillos de nuestro sistema (labels, inputs, botones, títulos, etc) los conocemos
como átomos, pero cuando juntamos átomos construimos moléculas, elementos
sencillos unidos entre sí (un buscador por ejemplo, el conjunto de label + input +
botón), y formamos organismos cuando juntamos moléculas (por ejemplo, una barra
de navegación con logos, enlaces y un buscador).
Con la suma de estos organismos generamos templates, la forma más básica de
nuestras plataformas qué podemos utilizar en diferentes partes de nuestros diseños
aplicando pequeños cambios en los átomos, y cuando aplicamos estos cambios para
las partes especificas de nuestro sitio obtenemos páginas, el resultado final de toda
la organización de elementos independientes hasta formas conjuntos de organismos
complicados y armónicos entre sí.
Por último, vamos a entender el paradigma dry (Don’t Repeat Yourself) para construir
elementos reciclables y no gastar tiempo volviendo a construir los mismos objetos
una y otra vez.

Los sistemas de diseño son un conjunto de reglas que organizamos con nuestros
equipos, y los fundations son las partes más básicas que podemos configurar en
nuestro sistema. Vamos a repasar cada una de estas bases mientras escribimos la
documentación en Notion:
 Tipografía
 Colores
 Layout y spaces (son las formas y espacios fundamentales que utilizamos para
ordenar los elementos de nuestro sistema)
 Iconografía
 Styles (nuestra marca puede presentarse con estilos juguetones o realistas, lo
importante es definir tan claro como sea posible qué intentamos transmitir)
 Tono (con qué personalidad o de qué forma debemos hablar con nuestra audiencia)
 Los colores también deben llevar algún tipo de clasificación ya que definen el estilo
visual de nuestro sistema. La paleta de colores define el estilo de tu sistema de
diseño y ayuda a definir el sistema de diseño, diferenciando la identidad de la marca
y del resto de efectos y elementos visuales.
Muchos sistemas de diseño clasifican sus colores según sus productos (un color para
ventas, otro para servicio al cliente, etc), otros utilizamos Material Design y
clasificamos los colores como actions colors, _secondary colors _ y otros niveles de
clasificación. En realidad no importa, podemos tomar cualquier otro paradigma de
fundamentos de color para nuestros sistemas, lo importante es clasificar el uso de
estos colores y asegurarnos de que todo el equipo los entiende.
Para escoger estos colores debemos tener en cuenta los colores de la marca, los
colores principales (colores de acción o call to actions), colores secundarios, los grises
y los colores de fondo. El trabajo se puede complicar un poco cuando tenemos en
cuenta todos estos colores, pero el resultado será mucho mejor, los colores
funcionaran correctamente entre todos.

Los 12 principios de la animación son un conjunto de reglas creadas por Disney para
la animación de personajes, pero muchos de estos principios son muy útiles para
ciertos aspectos de la animación de elementos de nuestras interfaces:
 Anticipación: Vamos a a preparar a los usuarios para la acción que viene a continuación,
por ejemplo, antes de desconectar la señal de un teléfono podemos animar el icono del
avión y transmitir que no señal durante algún tiempo.
 Estirar y encoger: Nos ayuda a generar drama sobre algún elemento, por ejemplo, para
dramatizar la animación de un botón cuando el usuario ha cometido un error o alguna
acción incorrecta.
 Entradas y salidas lentas: Nos permite introducir o remover elementos de la plataforma,
tal vez conozcas estas animaciones como Fade In y Fade Out.
 Acciones secundarias: Todas las microinteracciones trabajan con este principio, estas
animaciones nos ayudan a transmitir o dar información adicional como respuesta a alguna
acción de los usuarios.
 Timing: Mientras más detalles añadimos a las animaciones, más rápidas o lentas se
pueden percibir. Podemos utilizar estos efectos visuales para transmitir apuro o
tranquilidad mientras la plataforma esta cargando.
 Exageración: Así como las acciones secundarias, podemos exagerar los movimientos de
nuestros elementos para transmitir alguna sensación, por ejemplo, cuando el usuario
quiere eliminar su cuenta.
También vamos a utilizar Animate.css, una librería para trabajar con todo tipo de
animaciones sin mucho trabajo, también nos facilita el proceso de documentación
de las reglas de animación de nuestro sistema.

Los iconos son muy útiles para comunicar o resaltar características y

funcionalidades de nuestros productos, podemos construir nuestras propias
 librerías de iconos personalizados o utilizar librerías como Font Awesome y
completar los iconos que hagan falta si no tenemos un equipo tan grande.
Para definir las reglas y la documentación de una iconografía consistente debemos
tener en cuenta los siguientes aspectos:
 Grid: Las medidas y lineamientos que deben seguir todos los iconos
 Shapes: Las formas o figuras que podemos utilizar
 Size: Qué tamaño deben tener nuestros iconos para estar alineados con la tipografía y el
resto de la plataforma
 Styles: Cómo deben estar construidos visualmente nuestros iconos, podemos utilizar
colores planos o podemos trabajar en iconos mucho más realistas, etc, lo importante es
estar alineados con las reglas de nuestro sistema

Los iconos podemos utilizar librerías de que ya existen por ejemplo (Fontawesome,
Material Design, etc), otra es crear una libre ria desde cero y otra opción es utilizar
una librería que ya existe pero necesitamos agregar iconos que necesitamos y no
estén
Grilla: Nos va a servir para que sean iguales los tamaños y tengan un mismo
espaciado…
Shapes: Definir las formas permitidas de nuestros iconos. (Iconos redondeados, sin
lineas, etc) Esto sirve para cuando se tengan que crear iconos nuevos no rompan los
lineamientos.
Tamaños: Es para estandarizar los elementos dentro de los componentes que
hayamos definidos.
Syles: Es simplemente definir como van a ser, que tipo de caracteristicas van a tener
(Lineales, con rellenos, etc)
Ademas definir como los integrantes del equipo de Design system como deben
definir un nuevo icono y como hacen para agregarlo.
Martín Coronel
Diseño UX/UI
Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel

Hitos son los elementos identificador de un producto, Aveces las marcas tienen

elementos que los representan muy bien sin necesidad de que este el logo presente.
Los hitos en nuestro producto pueden ser Loaders, icons, animaciones, etc.
Martín Coronel
Diseño UX/UI
Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel
 El proceso de creación de software no es tan definitivo como la creación de otros
tipos de producto, son productos vivos que siguen mutando y desarrollándose en el
tiempo. Los sistemas de diseño también pueden prever la forma de iterar, es decir,
mejorar todos los días las construcciones y la forma de construir del equipo, lo más
importante es que entre todos nos pongamos de acuerdo de manera fácil, rápida y
efectiva.
Para organizar el proceso de iteraciones debemos documentar todos los cambios y
problemas que nos encontramos para que todo el equipo este actualizado y
logremos entender el trabajo de la misma forma. Vamos a seguir los siguientes
pasos:
 Darle un nombre a la iteración
 Describir por qué estamos iterando, ¿qué problema vamos a resolver?
 ¿Qué solución encontramos a estos problemas?
 Cambios de estimación de conflictos, la duración y la dificultad estimada para
trabajar esta iteración

khfbgkjsd
MAQUETCIÓN CON GRID
 Les recomiendo que, si están trabajando en Chrome, pueden hacer lo siguiente para que
puedan los números de línea de su Grid 😄:
.
1. Seleccionar el elemento que sea Grid
2. Abrir la pestala que dice “Layout”
3. En el panel de abajo, hagan scroll hasta abajo y seleccionen “Grid Overlays” y denle click al
check que aparece ahí.
.
De esa manera se habilitará la grid en su layout mostrando los números de línea 😄
 Algunos comandos básicos para ahorrar tiempo en Figma:
 Para crear un Frame solo oprime la tecla F.
 Para crear un rectángulo solo oprime la tecla R (si deseas un cuadrado perfecto oprime las
teclas Shift + Option mientras arrastras el mouse, de esta forma crear un cuadrado en vez de
un rectángulo)
 Para crear un circulo perfecto oprime la tecla O
 Para alinear un elemento en el centro del FRAME (de todo el frame, no del contenedor)
oprime Option + H
 Para alinear en el centro del Frame de forma vertical oprime Option + V
 Si desea cambiar el nombre de varios elementos al tiempo (Si te das cuenta en el panel
izquierdo los elementos son nombrados como Rectangle 1, Rectangle 2, o Ellipse 1, Ellipse
2… Ellipse 9, etc y quizás tu los quieras llamar music button o player buttons) solo los
seleccionas (puede ser dentro directamente en el Frame de diseño o seleccionas las capas en
el panel izquierdo) y oprimes Command + R, de esta forma puedes renombrar muchos
elementos al tiempo.
 }
JAVASCRIPT
V8 JAVASCRIPT
CALLBACK - PROMESAS Y ASINCRONISMo
NPM, GESTION DE DEPENDENCIAS CON NPM
as
Correciiones
CURSO FINANZAS PARA EL FUTURO
BLOCKCHAIN
 TRAID
IG
TRAIDING 2
EXAMEN FINAL
COMPUTACION BASICA
efjdsjncjasd

ENGLISH
FUNDAMENTOS DE ING DE SOFTWARE
f
TERMIAL Y COMANDOS
PREPROCESADORES CSS HTML
INGLES
ANIMACIONE S CON CSS
 V

INGLES
MAS ANIMACIONES CON CSS
BASICO DE MARKETING
COPY
}
MÁS MARKETING
FACEBOOK ADS
EMAIL MARKETING
GOOGLE ADS
FACEBOOK ADS