Para que en la parte del preview, el nombre y apellidos o profesión que le pongamos en el input entre, poner word-wrap y cambiar height por min-height en el contenedor

To do HTML:

• Landing page
• Header
• Colapsable form: DISEÑA
• Colapsable form: RELLENA
• Colapsable form: COMPARTE
• Card preview
• Footer
• Desktop layout

To do Sass:

• Landing page
• Header
• Colapsable form: DISEÑA
• Colapsable form: RELLENA
• Colapsable form: COMPARTE
• Card preview
• Footer
• Desktop layout

Nota: Hay que hacer una nueva rama para este ticket :)

Se queda así y no puedes hacer scroll

Tenemos que:

• 1. Comprobar que lo que mete el usuario es igual que el placeholder.

2. De lo que meta el usuario, quedarnos solo con la parte que nos interesa:

• 2.1 En linkedin, si el input es linkedin.com/in/blanca-ubis-martinez/ quedarnos con: blanca-ubis-martinez (la última parte del link)
• 2.2 En github, si el input es @ blancaum, quedarnos con blancaum (quitar el @).

3. Construir cada link con esos datos:

• 3.1 Linkedin: https://www.linkedin.com/in/ + lo que nos hayamos sacado del input
• 3.2 GitHub: https://github.com/ + lo que nos hayamos sacado del input

Have the content stored in the browser's LocalStorage.

VALUE

Share my online card via Twitter

CONTEXT

Martha is looking for a job. She uses Awesome Profile Cards to create her online card and shares it with potential employers via Twitter. She receives an email from a fintech startup that wants to interview her for a position in the team.

RESOURCES
Service to publish a card online and get a shareable link

DoD

• Published online
• Updating the photo in the card preview, using the provided component
• Adding Twitter sharing functionality, first sending data to the server to get the sharing URL

Acceptance criteria

• Create a link with the card
• Share the link via Twitter
• Preview interactive - photo

Investigar y usar etiquetas ARIA para las paletas, ya que al no tener los nombres de los colores puede dar problemas de accesibilidad a una persona ciega.

Para traerte los cambios que pueda tener dev antes de empezar a resolver tu ticket.
! Importante: bajarse todos los cambios antes de hacer merge (git pull)

1. Primero te pones en tu rama:
   git checkout nombre-de-rama
2. Te traes dev a tu rama
   git merge origin dev

Coger el código que ya tenemos y ponerlo más limpio, meter lo que se pueda en funciones, eliminar duplicidades y simplificar lo que se pueda.

Tenemos que compartir el enlace creado con el botón Crear tarjeta a través de twitter. Para ello tenemos que usar web intents (lo dijo Iván en clase).
Documentación adicional:

• Documentación oficial de Twitter
• Página que puede ser interesante si no funciona lo anterior

Hay que ver tambien si este botón necesita de estilos (css) adicionales o si twitter se los da por defecto.

Zeplin project

https://app.zeplin.io/project/5c94ca7ad58aef056fdd6a67

Zeplin-Proyecto 2: Awesome profile-cards

Paleta 1: añadir checked para que aparezca seleccionada por defecto.

PRIMERO avisar a las compañeras en slack

0- git checkout nombre-rama (nos ponemos en nuestra rama propia)
1- git add -A (añadimos nuestro trabajo)
2- git commit -m "descripción de la versión" (creamos una versión poner delante ADD, DELETE, UPDATE del comentario, o cualquier otro verbo en inglés)
3- git push

4- git checkout main (cambiamos a la rama main)
5- git pull (nos bajamos los últimos cambios que haya en main)
6- git checkout nombre-rama (nos cambiamos a nuestra rama)
7- git merge main
8- Resolvemos conflictos si los hay. Aquí puede haber dos casos
8.1- MERGE BLANDO: Si te sale una pantalla raruna (editor VIM) en la terminal es porque se está haciendo un merge "blando", es decir, los conflictos que haya los puede resolver git él solo. Para salir de esta pantalla raruna, hacer Ctrl + X (Windows). Esto te hace un git add y un git commit automático, por lo que solo te quedaría hacer git push.
8.2- MERGE DURO: En este caso nos pondrá exclamaciones en aquellos archivos con conflicto y hay que resolverlos a mano, decidiendo si nos quedamos con nuestro código, con el de main, o con ambos. Una vez resueltos los conflictos, hacer git add -A, git commit -m y git push

9- git checkout main (volvemos a cambiar a main)
10- git merge nombre-rama (nos traemos nuestra rama a main). No debería dar conflictos porque ya los hemos resuelto antes al traernos main a nuestra rama, por lo que probablemente sea un merge blando.
11- git push

To do:

• Landing page
• Header
• Colapsable form: DISEÑA
• Colapsable form: RELLENA
• Colapsable form: COMPARTE
• Card preview
• Footer
• Desktop layout

To do Sass

• Landing page
• Header
• Mobile layout
• Colapsable form: DISEÑA
• Colapsable form: RELLENA
• Colapsable form: COMPARTE
• Card preview
• Footer

• Habría que usar esto:
  https://books.adalab.es/materiales-del-curso-r/5zc3ClJLpggaTDudig5I/proyectos/p2_proyecto/p2_anexo

Pensar alguna idea de logos, temática, colores, etc. y ponerla en el excel, en la pestaña de "Ideas para personalizar la página".

• Investigar el atributo capture:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture

Ahora mismo si mostramos la parte de compartir tarjeta (la que se abre al pulsar el botón "Crear tarjeta") y luego cerramos la sección del formulario correspondiente, esta parte de compartir tarjeta se sigue viendo.

We have to make a presentation or video for the demo.
We can use Canva for example, is easy and pretty.
Make a trailer (María knows :D).

PROPUESTAS POR ADALAB

• Definir quién es la SCRUM master cada sprint y sus funciones
• Definir cómo se toman las decisiones el equipo
• Definir canales de comunicación
• Definir horarios de trabajo/coordinación fuera del horario presencial de Adalab
• Establecer cómo se trabajará en el proyecto: individualmente, por parejas, en equipo...
• Definir cómo se compartirán los aprendizajes del proyecto entre los miembros del equipo
• Establecer actividades que fortalezcan el teambuilding
• Buscar eventos y asistir juntas como mínimo a un evento tecnológico
• Establecer horario daily
• Preparar la presentación final del proyecto
• Definir la convención de código del proyecto
• Formateador por defecto: El formateador de VisualStudio Code para HTML y Prettier para CSS y JS.
• Word-Wrap: 80
• Para strings, usar " en HTML y ' en JS.
• Fin de línea con LF (ver barra inferior en el VisualStudio Code)
• Indentación con 2 espacios (ver barra inferior en el VisualStudio Code)

ACUERDOS EQUIPO

To do HTML:

• Landing page
• Header
• Mobile layout
• Colapsable form: DISEÑA
• Colapsable form: RELLENA
• Colapsable form: COMPARTE
• Card preview
• Footer

To do Sass

• Landing page
• Header
• Mobile layout
• Colapsable form: DISEÑA
• Colapsable form: RELLENA
• Colapsable form: COMPARTE
• Card preview
• Footer

• New logo
• New image or images in the preview card
• More palettes
• New colors for the web
• Work on our personal brand

El botón de reset debe dejar todas las secciones del formulario como estaban al principio y además dejar la preview card como estaba inicialmente.
Probar el método de JS reset(): https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

OBJECTIVES

• Aprender los conceptos básicos de programación (variables, estructuras de datos, condicionales, funciones, etc.)
• Comprender cómo manipular el DOM de una página y responder a eventos del usuario
• Manejar estructuras de datos complejas, con arrays y objetos
• Realizar peticiones al servidor y almacenar datos en local
• Implementar Scrum como marco de referencia para el desarrollo del producto, basándonos siempre en los valores de Agile como puntos clave del trabajo en equipo y la mejora continua
• Mejorar la comunicación entre los miembros del equipo
• Mejorar vuestras habilidades de comunicación en público al exponer el proyecto en la sesión final

In this project we are going to create a web application that allows us to create a personalised business card. On the web page we can enter our professional data and obtain a layout view with this information. The good thing about this project is that it will be a tool that you can benefit from. It will be an interactive web application created by you and that you can use to create your own professional business cards.

https://github.com/Adalab/project-promo-r-module-2-team-1

• También habría que añadir los estilos para que al pulsar el botón "Crear tarjeta" se ponga gris

FIRST TASKS

• Create the repository in GitHub.
• Create board on GitHub Projects.

• Definir quién es la SCRUM master cada sprint y sus funciones: LAURA.
• Definir cómo se toman las decisiones el equipo: consenso durante las daily
• Definir canales de comunicación: slack.
• Definir horarios de trabajo/coordinación fuera del horario presencial de Adalab: organizarlo cada día y hablarlo.
• Establecer cómo se trabajará en el proyecto: individualmente, por parejas, en equipo...: en función de las necesidades.
• Definir cómo se compartirán los aprendizajes del proyecto entre los miembros del equipo: durante las horas de proyecto, comentarios en visual studio o slack, subir comentarios a git mas específicos.
• Establecer actividades que fortalezcan el teambuilding: tener una sesión de autocuidado.
• Establecer horario daily: al principio de las sesiones.
• Preparar la presentación final del proyecto: (después del segundo sprint)
• Definir la convención de código del proyecto: (Modulo 1+2)
• Formateador por defecto: El formateador de VisualStudio Code para HTML y Prettier para CSS y JS.
• Word-Wrap: 80
• Para strings, usar " en HTML y ' en JS.
• Fin de línea con LF (ver barra inferior en el VisualStudio Code)
• Indentación con 2 espacios (ver barra inferior en el VisualStudio Code)

CONTEXT
A web developer, Angelina, is exploring her Twitter timeline and discovers a tweet with a link to an Adalabers ongoing project: Awesome Profile Cards. She accesses the URL to the project, checks the project UI and finds it awesome. The next day, she shares the URL with her company manager since they are looking for a UI developer for the team.

RESOURCES

• A group name.
• APC design, mobile and desktop.

DoD (cuándo consideramos que está acabado)

• Published and accesible online.
• The repo name follows the indicated conventions.

Acceptance criteria

• Landing page
• Header
• Mobile layout
• Colapsable form: DISEÑA
• Colapsable form: RELLENA
• Colapsable form: COMPARTE
• Card preview
• Footer
• Desktop layout

En este excel iremos poniendo diferentes cosas en común para organizarnos:

https://docs.google.com/spreadsheets/d/1qnnyNCVSOodUCRQ20rbVB3BxPZdExEWLAS6vvxmuN-k/edit?usp=sharing

• Hacer clicable todo el wrap 1 en cada sección del form en vez de que solo sea la flecha.
• Cursor pointer, para que se cambie el cursor al acercarte a la zona clicable.

En el desarrollo de esta aplicación web usaremos las siguientes tecnologías:

• Uso avanzado de formularios HTML
• Maquetación usando CSS avanzado, como flex y grid
• Uso de mediaqueries para que el diseño sea adaptable al dispositivo usando la estrategia mobile first
• Gestión de eventos en el navegador (al hacer click, pasa x, etc.)
• Acceso y envío de datos a un servidor
• Almacenamiento en local usando LocalStorage
• Uso de git para el control de versiones del proyecto
• Publicación del resultado en Internet usando GitHub Pages

El proyecto consta de 2 páginas:

• Una página landing de bienvenida
• Una página con la aplicación de crear tarjetas

La aplicación funciona siguiendo estos pasos:

1. Permitir al usuario elegir el estilo de la tarjeta, eligiendo paleta de colores
2. Permitir al usuario que, mediante la introducción de información en un formulario, este texto se muestre maquetado automáticamente en un cuadro similar a una tarjeta de visita, que será la muestra del resultado final
3. Permitir que el usuario pueda crear una web con su tarjeta y compartirla por Twitter

La tarjeta de visita deberá tener los siguientes campos (entre paréntesis el nombre del campo a usar):

• Nombre completo (full_name)
• Profesión (desarrolladora front-end ;) (job)
• Datos personales
• Teléfono (phone)
• Correo electrónico (email)
• RRSS
• LinkedIn (linkedin)
• GitHub (github)

Respecto a la interacción con la web:

• Los campos deberán tener restricciones para su formato indicado. Campo de teléfono para el móvil, mail para el correo, etc.
• Las modificaciones que hacemos en el formulario (diseño y contenido), aparecen automáticamente en la vista previa de la tarjeta
• Las 3 partes del proceso de creación serán elementos colapsables, que al hacer clic en el título se mostrará/ocultará solo mostrando una sección a la vez
• Toda la información del formulario debe almacenarse en LocalStorage (almacenamiento local del navegador), de forma que al recargar la página siga disponible y podamos borrarla con un botón de Reset. Para esto, debemos definir una estructura de datos compleja (con arrays y objetos) que es lo que guardaremos en el navegador

Para compartir en Twitter seguiremos 2 pasos:

1. Al hacer clic en el botón de "Enviar" enviaremos el formulario (submit) a un API que devolverá la URL de una web con la tarjeta de visita con la información rellena
2. Mostraremos esta URL para que el usuario verifique si la tarjeta está bien definida y un botón de "Compartir" que enlazará a Twitter donde habrá un tweet con texto predefinido que incluye la URL de la tarjeta

En cuanto a colapsar las secciones del formulario, se deberían cumplir dos criterios:

• Solo una de las secciones debería estar abierta a la vez, es decir, cuando una se abre, las demás se cierran.
• Siempre debe haber una sección abierta al menos, no pueden cerrarse las 3 secciones.

VALUE

Someone in the Internet could see an interactive ongoing Adalabers project

CONTEXT

Corina is a back-end developer is a startup in Campus Madrid. She finds out that the adalabers working in Campus are building a project about an interactive site. She checks out one of the projects from GitHub and create a pull-request with improvements to help them.

To Do

• Preview interactive - color palette
• Preview interactive - full name
• Preview interactive - job
• Preview interactive - social networks
• Interactive form: when modifying a form field, both the card design and the user data (except the photo), the preview is updated.
• Perform form data validations: mandatory fields, email, etc.

DoD (cuándo consideramos que está acabado)

• Published online

• Updating the photo in the card preview, using the provided component

Que al hacer click en los colorines de las paletas te vaya cambiando de paleta también, para que el área clicable sea más grande.

VALUE

Someone in the Internet could see an interactive ongoing Adalabers project.

CONTEXT

Ashley is a devops engineer is a company. She finds out that the adalabers working in Campus are building a project about an interactive site. She uses the project to create a profile card and when she reloads the page, the info is still there.

DoD

• Published online.
• Have the content stored in the browser's LocalStorage.

Acceptance criteria

• When the page is refreshed, the filled out info is still there.
• The Reset button erases the info.

URL of our published page