Capitulo IV: Product UX/UI Desing

4.1. Style Guidelines.

4.1.1. General Style Guidelines.

Logo

● Tipo de logo: Un imagotipo es aquel que es representado por un icono visual

y el texto de la marca. No se fusionan, pero generan armonía visual.
● Icono: El elemento gráfico es una representación visual y simplificada
● Contraste: Al estar el logo ubicado en un fondo negro, se genera un contraste
visual que resalta los elementos, lo que no ocurriría si se tuviera un fondo
blanco o transparente
● Alineación: Los elementos se encuentran equilibrados simétricamente al
centro del espacio. Genera un balance, ya que el icono no destaca más que
la tipografía, ni al revés, lo cual representa una buena proporción de
elementos.
 Colores

● Primarios: Los colores principales de la marca son el verde y naranja.

Poseen atractivo visual, debido a que son colores complementarios.

● Neutros: Los colores neutros le dan un aspecto elegante y sencillo,

contrastando perfectamente con los colores primarios y secundarios

Tipografía

Iconografía:

Botones :

Imágenes:

4.1.2. Web Style Guidelines.

Para la creación de la interfaz de nuestro sitio web, decidimos buscar cuales son las
mejores combinaciones de colores para una página web que esté centrada en
reciclaje y manualidades. Con esto, logramos escoger los colores principales como
verde, naranja y del color de fondo, negro. El color verde refleja el medio ambiente y
la naturaleza, lo cual ayudará a nuestros usuarios a poder estar tranquilos y sientan
que contribuyen a cuidar el medio ambiente. El color naranja da vitalidad y
creatividad, lo cual incentiva a nuestros usuarios a dar lo mejor con las
manualidades. La combinación de estos dos colores llamará mucho la atención de
los usuarios, así se sentirán más atraídos a nuestra página web. Además el color
naranja está muy cerca del rojo, color que llama la atención inconscientemente. Para
el fondo, decidimos usar el color negro para poder lograr un contraste con nuestros
colores primarios verde y naranja lo cual va de la mano con una interfaz sencilla.
Asimismo, con nuestra paleta de colores, lograremos que nuestros usuarios asocien
nuestro logo con estos colores y donde vean estos colores pensaran en WeRecycle.
De esta manera, lograremos tener la atención de nuestros usuarios al primer
contacto. También, usamos contenido visual, lo cual nos ayudará a diferenciarnos de
las demás páginas web y lograremos destacar al tener un diseño más moderno. Así,
atrayendo a nuestro público objetivo que son personas de todas las edades. Nuestra
página web cuenta con una interfaz sencilla y fácil de usar, como botones de atajo,
un tipo de letra no tan llamativa y moderna y accesos directos a más información. De
esta manera, al tener una interfaz sencilla, intuitiva y fácil de usar, lograremos tener
toda la atención de nuestro público objetivo, que buscan información resumida y
directa para conseguir su objetivo.

Inicio:
 En el inicio, el usuario tendrá acceso a accesos rápidos a todas nuestras secciones
como Inicio, Nosotros, Noticias e Ingresar. Además, se observa una descripción de
nuestra startup y un botón de ingresar para usuarios nuevos. Se observa el uso de
nuestros colores principales verde y naranja y el color de fondo negro. Asimismo, se
usan imágenes para tener un diseño mucho más moderno y llamativo para nuestros
clientes, diferenciándose de las demás páginas webs. Además, se hace uso de
nuestro logo para mantener la atención del usuario y contando con una interfaz
sencilla y fácil de usar.

Manualidades y Noticias:

En estos apartados, el usuario observará las diferentes noticias que hay sobre
reciclajes y el medio ambiente. En esto se podrá leer una pequeño resumen de la
noticia y tendrá el acceso a un botón de más información si desea leer la noticia
completa. Asimismo, se pueden observar las manualidades recomendadas
dependiendo de la edad del usuario. Como en el anterior punto, el usuario leerá un
pequeño resumen de cada manualidad y podrá obtener más información. Se hace
uso de nuestros colores principales para transmitir creatividad y transparencia. Así,
nuestros usuarios puedan leer detenidamente cada apartado

4.1.3. Mobile Style Guidelines.

Para la creación de la interfaz de nuestra aplicación en dispositivos celulares,

decidimos seguir los lineamientos elegidos para la página web. Con esto, logramos
la armonía en las dos plataformas, y de tal forma proyectar una única imagen en el
mercado. Como bien hemos logrado visualizar en la página web, existen dos colores
resaltantes, verde y naranja. De esta manera, lograremos tener la atención de
nuestros usuarios y de sus amigos pudiendo resaltar las noticias y manualidades.

4.1.3.1. iOS Mobile Style Guidelines.

Para la creación de la interfaz la aplicación en iOS, decidimos seguir los

lineamientos generales para celular, ya que la variante son las versiones de
dimensión en cada dispositivo, para ello también consideramos los iconos más
relevantes y usuales en los dos tipos de sistema operativo.

4.1.3.2. Android Mobile Style Guidelines.

Para la creación de la interfaz la aplicación en Android, decidimos seguir los

lineamientos generales para celular, ya que la variante son las versiones de
dimensión en cada dispositivo, para ello también consideramos los iconos más
relevantes y usuales en los dos tipos de sistema operativo.

Interfaz

4.2. Information Architecture.

4.2.1. Organization Systems.

En We Recycle, a la hora de implementar nuestra página web, nos enfocaremos en

que los usuarios capten y sepan el valor y los beneficios que ofrece nuestro
proyecto. Por lo tanto, nos enfocaremos en que nuestro Home Page, tanto web
como móvil, resalte de tal manera que capte la atención de los usuarios. para
conseguirlo, en el home page se emplearan textos cortos y resumidos, botones e
imágenes.

INICIO DE LANDING PAGE

Para este apartado, el equipo decidió utilizar el método de organización por

jerarquía, ya que pensamos que es necesario e importante captar la atención del
usuario para que de esta manera logremos con el propósito de transmitir lo que
deseamos. Esta pestaña será nuestra cabecera de sección.

imagen 1 (Landing page web)

A continuación se muestra la homepage de nuestra página web. Esta aparecerá

cada vez que el usuario inicie sesión o entre directamente como usuario invitado.

“imagen 2(landing page app)”

Si el usuario decide acceder al botón ”Inicio” este será dirigido a la página donde se
encuentre las notificaciones de mensajes, unos videos de proyectos recomendados
y la búsqueda de centros de reciclaje más cercanos a su ubicación, como se
muestra a continuación.
Imagen 2 (Pagina del boton)

Por otro lado, si el usuario decide acceder al botón “Noticias”, este le dirigirá a la
página donde se encuentran las noticias destacadas sobre el tema del reciclaje,
Como se aprecia en la siguiente figura.

Imagen 3 (Pagina del boton)

“4.2.2. Labeling Systems.

Los botones que empleamos en el proceso de diseño son simples de tal manera que
logramos combinar los colores, letras y diseño en general de nuestra página con el
objetivo de que nuestros usuarios primeramente se fije en el mensaje que deseamos
transmitir y seguidamente proceda a presionar el botón de su preferencia.

Por lo general nuestras etiquetas tienen un máximo de cinco palabras, debido a que
nos enfocamos en la simplicidad para que nuestros usuarios tengan una buena
interacción con nuestra página y de esta manera evitar confundir a los usuarios.

En la parte superior izquierda de nuestro home page contamos con cinco opciones:
Inicio, Nosotros, Noticias e Ingresar.

Inicio: Aquí mostramos la información relevante y resaltante de nuestra página para

poder causar impresión en nuestros usuarios y de esta manera hacer que se queden
navegando en ella.

Nosotros: En esta opción mostramos una descripción de nuestra startup como por
ejemplo, las metas, objetivos y participantes.

Noticias: En este botón se muestran todas las noticias destacadas sobre el tema del
reciclaje.

Proyectos: Aquí se muestra todos los proyectos que se encuentran en nuestra base
de datos y/o subidos por nuestros usuarios.

Ingresar: muestra el logeo de cada usuario para que pueda entrar en su cuenta. En
caso de no tener una cuenta también muestra la opción de registrarse.

4.2.3. Searching Systems.

En esta sección se explicará los medios con los que contamos para brindar ayuda a
nuestros usuarios para la búsqueda de información estando dentro de nuestra
plataforma. De esta forma, ayudaremos a nuestros usuarios a que no se sientan
perdidos cuando navegan por nuestra página web y/o aplicativo.

Experiencia web

En nuestra página web, como búsqueda principal contamos con la opción de buscar
centros de reciclaje más cercano. De esta manera se le estaría ofreciendo una
variedad de listas de centros de reciclaje más cercano y, además, con el precio por
el material a vender, como se muestra a continuación.
(imagen )

Por otro lado, implementamos una opción de búsqueda en el apartado “proyectos”

para que de esta manera nuestros usuarios puedan buscar un proyecto según sus
preferencias, gustos y/o materiales que tengan reciclados, como se aprecia en la
siguiente imagen.

(imagen)

experiencia app

En el caso de nuestro aplicativo móvil, contamos con un apartado en la parte inferior

de la pantalla donde encontraremos una serie de opciones que nos ayudarán a
identificar fácilmente las opciones disponibles que tenemos. Uno de ellos, es la
opción de inicio donde encontraremos una lupa que nos ayudará a buscar los
centros de reciclaje más cercanos a uno, como se muestra a continuación.

(imagen)

Otro de los apartados de búsqueda se encuentra en la sección de proyectos, donde

se podrá ingresar texto de acuerdo al proyecto que el usuario desee encontrar. De
esta manera, se estará brindando una variedad de listas de proyectos para que el
usuario pueda elegir, cómo se puede apreciar en la siguiente imagen.
(imagen)

4.2.3. Navigation Systems.

En esta sección pasaremos a explicar las técnicas empleadas en la creación de

nuestra página con el objetivo de guiar a nuestros usuarios en la interacción con ella
y así poder brindar una buena experiencia.

Experiencia web

Nuestra página principal (homepage ) tendrá el siguiente diseño:

Esta estará constituida por una combinación de dos patrones de diseño de
navegación, Single-page web application (SPA) y jump to section. (Por investigar).

En la cabecera de nuestra página de inicio, será usado el patrón de diseño de

navegación SPA, este patrón permitirá agilizar la interacción con nuestros
usuarios.De esta menera nuestro usuarios podrán recorrer nuestro contenido en el
orden de Inicio, Nosotros, Noticias e Ingresar.

En el caso de que el usuarios seleccione el botón “Ingresar”, este será redirigido a la

página cuenta donde podrá llenar sus credenciales para ingresar o crear una nueva
cuenta. Para ellos usamos la opcion de patrón de diseño social login, ya que de esta
manera podrán usar diferentes cuentas para vincularlas a la nuestra., como se
aprecia en la siguiente imagen.
Finalmente, usamos la opción de perfil en la parte superior derecha de la página
donde se desplegará varias opciones como son Configuración, Mi Perfil, Subir
proyecto, Cerrar Sesión, como a continuación se muestra en la la imagen.

Experiencia app

En nuestro aplicativo móvil se usó el prototipo Splash, en el cual mostramos el logo

de nuestra startup como se puede apreciar el la siguiente imagen.
Asimismo, en la pantalla que le sigue se usó el prototipo Login and Profile, donde
nuestros usuarios se podrán registrar o crear una nueva cuenta como mostramos a
continuación.

En las siguientes páginas se usó el prototipo home and menu. donde nuestros
usuarios podrán navegar libremente por toda nuestra aplicación y si desean podrán
volver rápidamente a nuestra sección Home con el botón Inicio, como se ilustra en
las siguientes imágenes.
4.3. Landing Page UI Design.

4.3.1. Landing Page Wireframe.

4.3.2. Landing Page Mock-up.

4.4. Mobile Applications UI Design.

4.4.1. Mobile Applications Wireframes.

4.4.2. Mobile Applications Wireflow Diagrams.

 4.1.3. Mobile Style Guidelines.

Para la creación de la interfaz de la aplicación en dispositivos celulares, decidimos

seguir los lineamientos elegidos para la página web. Gracias a estos, se logró la
armonía entre las dos versiones, web y móviles, para que esto nos ayude a fomentar
una solo vista de nuestra aplicación. Como se puede observar en la version web de
nuestra aplicacion los colores resaltantes son el verde y el amarillo, debido a que
solo estos dos colores no fueron suficientes para cubrir todas las secciones de la
aplicacion tuvimos que utilizar distintas tonalaidades de ambos colores. El fondo de
nuestra aplicación predomina el color verde claro en una transparencia al 25%, para
que así el usuario distinga nuestra marca de las demás y que no sea muy resaltante
para que así nuestros usuarios puedan centrarse en lo más importante que sería la
ubicación de los centros de reciclaje y la visualización de proyectos de reciclaje.

4.1.3.1. iOS Mobile Style Guidelines.

Para la creación de la interfaz en IOS, se decidió seguir los lineamientos

generales para celular, ya que la variante son las versiones de dimensión en
cada uno de los dispositivos, para esto también consideramos los iconos más
relevantes y usuales en ambos sistemas operativos

4.1.3.2. Android Mobile Style Guidelines.

Para la creación de la interfaz en Android, se decidió seguir los lineamientos

generales para celular, ya que la variante son las versiones de dimensión en
cada uno de los dispositivos, para esto también consideramos los iconos más
relevantes y usuales en ambos sistemas operativos

Interfaz

4.2. Information Architecture.

 4.2.1. Organization Systems.

Conclusiones:

● Para todo proyecto, la organización y elaboración de tareas son requisitos

indispensables a la hora de implementar o diseñar ya que la estructura o elaboración
puede ser compleja.

● El uso de figma, fue crucial ya que nos facilitó elaborar el landing page de nuestro
proyecto.

● Gracias a las preguntas realizadas en las entrevistas pudimos reconocer y enfocar

los servicios que ofrecerá We Recycle, además reconocimos muchas necesidades y
expectativas ya formuladas.

1 - El figma con las líneas y orden de la parte mobile. - Hector

2 - 5.1.1. Software Development Environment Configuration - Conclusiones - Aaron

Project Management.

Para el manejo de este proyecto se optó por utilizar softwares de comunicación en

tiempo real y en edición de documentos. Tales como Zoom, Microsoft Office Online y

Google Drive Documents.

Product UX/UI Design.

En este caso se utilizó el UXPressia para poder tener un mejor manejo en el

desarrollo de los usuarios modelo y sus mapeos. Además, optamos por Figma para
 una buena elaboración de los Mockups, Wireframes y diseños de la aplicación.

Finalmente, para los As-Is y To-Be Scenario Maps se utilizó Mural.

Software Development.

Para el desarrollo de software de este proyecto se instaló y usó las siguientes

herramientas:

● HTML: Lenguaje de marcado estándar de la web actual en su versión

5, aceptado por la mayoría de los navegadores web modernos para

poder representar contenido en la pantalla del usuario.

● CSS: Lenguaje de estilos que indica al navegador la apariencia de

estilos del contenido de nuestra web. Nos permite poder especificar la

apariencia y el contenido responsive de nuestra landing page.

● Javascript: Lenguaje de programación que nos servirá para

implementar funcionalidad interactiva en nuestra página web en

futuras entregas.

● Visual Studio Code: Editor de código fuente multipropósito, utilizado

para cambios rápidos en nuestra landing page.

Software Testing.

Para el Software Testing de nuestro producto inicial de landing page, al ver que es una

página estática, se ve en la necesidad de un navegador web como Chrome o Firefox,

además de su respectiva consola de depuración para poder revisar los cambios

implementados.

En el caso de las pruebas nos basaremos en el Behavior Driven Development en

Gherkin para poder comprobar el flujo de comportamiento de los componentes de

nuestra landing page.

Software Deployment.

En el despliegue de nuestra landing page se podrá utilizar los servicios de Github para

poder publicar nuestra versión final de nuestra página estática, esto es debido a que no

se requiere de un backend como tal, tan solo se puede almacenar en cualquier servidor

web sin mayores requerimientos, debido a que el proceso de la apariencia final lo hará

el navegador web del usuario final.

Con los archivos del proyecto de Webstorm directamente se pueden utilizar para el

despliegue de nuestro landing page, retirando los archivos propios del IDE, ya que no

necesita una compilación como tal al ser archivos HTML y CSS.

Software Documentation.

Al ver que no se trata de un producto con código fuente de un lenguaje de programación

(HTML es un lenguaje de marcado) no tenemos una especificación de diagramas de

clases u otras entidades. En consecuencia, nos basaremos en comentarios en el HTML

o CSS para poder documentar nuestro producto.

3 - 5.1.2. Source Code Management. - Angel

En esta sección el equipo establece los medios y esquema de organización que aplicará
para el seguimiento de modificaciones. Para ello utilizará GitHub como plataforma y
sistema de control de versiones.

Repositorio en GitHub para el Landing Page:

https://github.com/rDeastt/WeRecycle.git

Repositorio en GitHub donde se registraran los acceptance test files:

https://github.com/rDeastt/Acceptance-test-WeRecycle.git

A continuación se explica la implementación del GitFlow de control de versiones, los

cuales se representan en branches (ramas) y son los siguientes:

Master branch o rama principal:

La rama principal en Git de la aplicación, mantendrá versiones estables y finales de las
etapas del desarrollo. Dentro de esta únicamente se realizarán cambios que hayan sido
testeados y ya verificados en otras ramas de prueba.

Develop branch o rama de desarrollo:

En esta rama se realizarán los avances del proyecto en equipo y se mantendrán los
archivos centrales del desarrollo continuo

Release branch o rama de lanzamiento:

Se utilizará para mantener una instancia de la rama develop que esté próxima a ser
incluida en la rama principal. Esta rama nos permite preparar nuestro proyecto final para
hacer el testing final: corregir bugs, asegurarse que la interfaz esté óptima y hacer una
puesta a punto final del proyecto antes de liberar la versión definitiva.

RELEASE DESCRIPTION

0.1.0

1.00

1.1.0

1.1.1

Feature branch o rama de funcionalidad:

En esta rama se incluirán las funcionalidades desarrolladas por parte del equipo, o
aquellas separadas del enfoque actual del desarrollo. Una vez que se encuentren
trabajadas en su totalidad, serán incluidas en la rama de desarrollo del proyecto. En la
presente aplicación únicamente se considerarán las funcionalidades del log-in de los
usuarios.

Hotfix branch o rama de corrección:

Se utilizará para desarrollar parches para la corrección de errores de forma puntual. Es

decir, cuando se identifica un bug o problema en la rama principal que afecte
significativamente la experiencia de los usuarios.

Conventional Commits:

La especificación del conventional commits es una convención ligera sobre los

mensajes de confirmación. Proporciona un conjunto sencillo de reglas para crear un
historial de confirmaciones explícito lo que facilita la estructura de herramientas
automáticas encima.

La confirmación contiene los siguientes elementos estructurales para comunicar la

intención a los consumidores de su biblioteca:
 Fix (fix): una confirmación del tipo fix parchea un error en su base de código (esto se
correlaciona con el patch control de versiones semántico).

Feat (feat): una confirmación del tipo feat introduce una nueva característica en el
código base (esto se correlaciona con el MINOR control de versiones semántico).

Cambio importante: una confirmación que tiene un pie de página Breaking Change, o
agrega un ”!”” después del tipo/ámbito, introduce un cambio importante en el API
(correlacionado con el Mejor Control de versiones semántico). Un Breaking Change
puede ser parte de compromisos de cualquier tipo,

Se permiten tipos distintos de fix: y feat, por ejemplo, @commitlint/config-

conventional(basado en la convención Angular) recomiendabuild:, chore:, ci: docs;, style;
refactor, perf., test: y otros.

Breaking Change: <description> Se pueden proporcionar pies de página que no sean y

siguen una convención similar al formato de tráiler de git.

4 - 5.1.3. Source Code Style Guide & Conventions. - Marco

Archivos. Feature

Para nuestro proyecto, en el caso de los archivos .feature haremos uso del lenguaje
Gherkin que nos ayudará a describir y comprender nuestras historias de usuario. Usaremos
sus siguientes elementos “feature, Scenario, given, When, then y examples.

HU001: Como nuevo usuario quiero registrarme en WeRecycle para comenzar a reciclar y
aprender manualidades

Scenario: Registro de nuevo usuario con red social Gmail

Given el usuario recién ha ingresado a la plataforma

and el usuario selecciona la opción registrarse para comenzar a reciclar

When seleccione Usar Gmail

Then logrará registrarse mediante este medio y poseerá una cuenta en la

plataforma

And mostrara un mensaje de registro exitoso.

Examples:

|NewUser |button |Gmail |output |

|User01 |singGmail.button() |email.select() |SignSuccesful.Message()

Scenario: Registro de nuevo usuario con Outlook

Given el usuario recién ha ingresado a la plataforma

and el usuario requiere registrarse para comenzar a reciclar y aprender manualidades

When seleccione Outlook

Then logrará registrarse mediante este medio y poseerá una cuenta en la

plataforma

And mostrara un mensaje de registro exitoso

Examples:

|NewUser |button |Gmail |output |

|User01 |singGmail.button() |email.select() |SignSuccesful.Message()

Scenario: Registro de nuevo usuario con Facebook

Given el usuario recién ha ingresado a la plataforma

and el usuario requiere registrarse para comenzar a reciclar y aprender manualidades

When seleccione Facebook

Then logrará registrarse mediante este medio y poseerá una cuenta en la

plataforma

And mostrara un mensaje de registro exitoso

Examples:

|NewUser |button |Gmail |output |

|User01 |singGmail.button() |email.select() |SignSuccesful.Message()

HU007: Como usuario en la plataforma quiero visualizar la localización de puntos de

reciclaje

Scenario: El usuario busca información sobre los puntos de reciclaje

Given el usuario esta dentro de la aplicación

and el usuario haya iniciado sesión

When seleccione El botón de local

Then la aplicación mostrara un mapa brindando la localización de los locales

más cercanos

And el usuario selecciona indicaciones de cómo llegar

Examples:

|Usuario |section |button |output

|User01 |SeeMaps() | button | indications.Message()

HU009: Como usuario en la plataforma quiero visualizar la localización de puntos de

reciclaje

Scenario: El usuario busca contenido multimedia por nombre

Given la aplicación muestra la sección “buscar” en la parte superior de la interfaz

and el usuario hace click en buscar

When el usuario completa el campo “buscar”

 Then la aplicación contenido multimedia por nombre

And el usuario podrá observar el contenido

Examples:

|Usuario |section |button |output

|User01 |SeeMultimedia() | button | indications.Message()

HTML Convenciones que se utilizaran para la implementación del landing page

Para el desarrollo del landing page de nuestro proyecto, se utilizarán las siguientes
nomenclaturas.

· Declaración del tipo documento

En nuestro archivo index.html, en la primera línea de código colocaremos la

siguiente instrucción:

DOCTYPE html

· Atributo Lang

Con este atributo permitiremos a los motores de búsqueda identificar y

configurar nuestro idioma

Html Lang= “es”

· Para disminuir nuestro texto en párrafos usaremos la siguiente etiqueta

Nuestra startup se llama WerRecycle, se centrara en crear un sitio web, que

ayude a las personas a reciclar encontrando puntos de reciclaje cercanos y
mostrando videos de manualidades para facilitar el reciclaje.

/p

· Implementaremos la etiqueta meta data

Esta etiqueta encabezará nuestro documento HTML, esto nos servirá para
proporcionar información codificada a navegadores y motores de búsqueda
sobre nuestra pagina web

· Implementaremos la etiqueta viewport

En nuestro proyecto, usaremos la etiqueta viewport para que nuestra pagina

web pueda ser adaptable dependiendo del dispositivo que nuestro usuario
este usando.

CSS Convenciones de nomenclatura

· En nuestra codificación de nuestro proyecto, usamos para el nombre

de nuestras clases y elementos letras minúsculas, así, evitaremos
conflictos con ciertos navegadores que no distinguen entre letra
mayúscula y minúscula

· Además, para nombrar nuestras variables usaremos el tipo de

escritura camelCase; es decir comenzaremos el nombre de nuestra
variable con letra minúscula y la siguiente palabra, sin espacio,
comenzara con letra mayúscula
 · Evitaremos el uso de tildes

· Usaremos nomenclatura en ingles

Ejemplo:

#btnRojo border-radius:2px;font-size:16px;

JavaScript Convenciones de nomenclaturas:

· Paquetes

El prefijo del nombre en un paquete se escribira con el código ASCII

El nombre del paquete ser escrito en minúsculas y debe ser uno de los nombres de dominio
de alto nivel

com.sun.eng

· Clases

Usaremos palabras simples

En caso sea una sola palabra toda ira en minúscula. Por otro lado, si el nombre fuese una
frase compuesta usaremos el tipo StudlyCaps; es decir, cada inicio de una palabra del
nombre compuesto va en mayúscula. Así, diferenciarlo de otras estructuras.

Usaremos palabras completas; es decir, sin abreviaturas.

classReciclaUsuario;

· Variables

Usaremos, para nombrar a nuestras variables, la forma camelCase.

Para el nombre de las variables, evitaremos usar caracteres especiales como “$” o “%”.

El nombre de la variable de ser reducido y significativo. Sin embargo, para variables

temporales podemos usar un icono carácter.
Int i, float miReciclaje;

· Constantes

Serán nombradas en mayúsculas

En caso, el nombre de la constante sea compuesta, usaremos un guion abajo (_) como
separador.

No usaremos el uso del comando “@const”, ya que podía generar conflictos con el
navegador Explorer.

static final float ANCHO_MAX=40;

5 - 5.1.4. Software Deployment Configuration. - Carlo

El despliegue de la solución del Landing Page mediante GitHub permite hospedar el sitio
web en dicho sitio.

Entre los requisitos principales para acceder cabe destacar que, primero, es necesario
contar con una cuenta personal. Después de esto procedemos con la creación del
repositorio con el nombre de la aplicación WeRecycle. Luego, se suben los archivos que el
servidor debe leer para desplegar la página web. En este caso se opta por usar la carpeta
“docs” para cargar el landing page cuyo archivo principal lleva el formato de “index.html”,
además de un archivo .css llamado “styles.css” y una carpeta “Imagenes” que almacena
todas las imágenes que usamos para el desarrollo de la página web. A su vez es importante
resaltar que, en las siguientes entregas, es posible incluir una archivo javascript dentro del
código del landing page. Una vez realizado el commit de manera correcta, nos dirigimos al
apartado de Pages. En el repositorio debe indicarse la branch correspondiente que seria
main y el folder “docs”. Finalmente, se espera que GitHub realice los respectivos checks y
se obtendrá el enlace para el landing page.

AVANCE DE LAS CONCLUSIONES - Aaron

● Hemos visto la importancia de los programas y páginas web para un mejor

desarrollo en la creación de los modelos de diseño.
● Apreciamos la importancia de los colores, las formas, etc. En lo que tendría que ser
el diseño, para una mejor apreciación del usuario.
● Concluimos que para un mejor desarrollo, es circunstancial emplear softwares útiles
para un mejor diseño.