Programación

Android

Apple


Utilizar los colores en un proyecto puede ser una tarea muy difícil. Combinarlos es algo vital para brindar una buena experiencia al usuario y lograr ese diseño que tanto queremos mostrar.

En este artículo te mostraremos algunas herramientas fundamentales que te ayudaran a tomar decisiones sobre que colores usar y  **crear proyectos visualmente increíbles**.

## Color Hunt

![https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/color-hunt_m5yzgu.png](https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/color-hunt_m5yzgu.png)

**Color Hunt** posee **miles de paletas de colores** que puedes elegir. Cada paleta está compuesta de cuatro colores y cada una de ellas son agregadas por la comunidad. 

Los usuarios pueden **votar sus preferidas**, de este modo aumentarán su clasificación y se guardarán en la sección de tus favoritos. ¿Tienes alguna preferida que utilices a menudo? ¡Compártela aquí para que los demás usuarios puedan verla!

Desde colores pastel, retro, oscuros y claros, encontrarás aquí muchas categorías para buscar lo que más se adapte a tus necesidades.

Puedes hallar esta herramienta en su [sitio web](https://colorhunt.co/) o como [extensión para Google Chrome](https://chrome.google.com/webstore/detail/color-tab/hchlgfaicmddilenlflajnmomalehbom).

## Coolors

![https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/coolors_yfdxyn.png](https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/coolors_yfdxyn.png)

Utilizada por empresas como **Disney, Warner Bros, Apple y Netflix**. **Coolors** se posiciona como una de las **mejores herramientas** que te puedes encontrar al momento de buscar la plantilla ideal. 

Crear una paleta de colores es muy rápido, puedes **generarla automáticamente**, extrayendo los **colores de una foto** agregada o seleccionar que la paleta **adapte los colores** para que sea accesible **a todos los tipos de usuarios**. También puedes ajustar manualmente un color mediante configuraciones extras como la saturación, brillo y temperatura. 

Esta plataforma no es solo esto, puedes **explorar las paletas** de colores **más populares** entre la comunidad, guardar tus preferidas, compartirlas, entre muchas más posibilidades que nos ofrece  Coolors.

Si deseas usarlo, se encuentra disponible en su [sitio web](https://coolors.co/), [Apple store](https://apps.apple.com/app/coolors/id956480678), [Adobe store](https://exchange.adobe.com/creativecloud.details.12124.html#.V6nhWJOLRE4) y [extensión de Google Chrome](https://chrome.google.com/webstore/detail/coolors-for-chrome/paebljbhhfgngkcldmbcogmkgegjgmbg).

## ColorSpace

![https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/colorspace_duq5yj.png](https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/colorspace_duq5yj.png)

Esta plataforma se distingue por su **simplicidad** y **practicidad** a la hora de generar una paleta de colores. 

¿Te gusta un color verde, azul o rojo? Ingresa solamente el color principal con el cual quieres formar toda la plantilla para obtener resultados increíbles. **ColorSpace** te brindará múltiples paletas de colores con **distintas combinaciones** para que encuentres la más indicada.

Puedes visitarla en su [sitio web](https://mycolor.space/).

## Adobe Color

![https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/adobe-color_yqh1cf.png](https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/adobe-color_yqh1cf.png)

La gran empresa **Adobe** tampoco se quedó atrás y tiene su propia herramienta para la creación de plantillas. 
Esta plataforma te permite **ver y modificar a medida los colores mediante una rueda cromática**. Puedes aplicar distintos métodos para obtener el color, tales como **paletas análogas, tríadas, complementarias, entre otras**. Si quieres obtener los colores de una imagen, puedes obtenerlo subiéndola para que se seleccionen los principales.

Un nuevo complemento importante que nos trae **Adobe Color** es la posibilidad de probar la **accesibilidad de un color** en términos de contraste entre el fondo y la letra. Para determinar estos resultados, **Adobe** se basa en los niveles de la **WCAG** **(Web Content Accessibility Guidelines - Pautas de accesibilidad del contenido web)**.

Si tienes dudas sobre que colores usar, explora la amplia galería de estilos y tendencias que sin duda te ayudaran a inspirarte en la creación de un proyecto. 

**Adobe Color** lo encuentras disponible en su [sitio oficial](https://color.adobe.com/es/create/color-wheel).

## Paletton

![https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/paletton_pboecy.png](https://res.cloudinary.com/peiscof/image/upload/v1639495193/december-2021/paletton_pboecy.png)

Muchas veces disponemos de un color principal para hacer todo un proyecto. Paletton nos dará una mano en ese caso. 

Partiendo de un **color principal**, podrás acceder a una **gama de colores** para complementar tu plantilla. A través de la rueda de colores, accederás a distintas paletas como **monocromáticas, adyacentes, tríadas y más.**

**Paletton** está disponible en su [sitio web](https://paletton.com/).

---

Crear una plantilla de colores no es tarea fácil y ahora que ya conoces estas herramientas te serán de gran ayuda al momento de desarrollar un proyecto. 

¿Conoces otras herramientas? ¿Cuáles son los colores que más utilizas? Síguenos en las redes sociales y cuéntanos por allí que te ha parecido este artículo.

Crea las mejores paletas de colores con estas 5 herramientas

Todos los artículos

A medida que un trabajo de desarrollo web crece, tanto Frontend como Backend, es necesario comenzar a implementar herramientas de terceros que nos brindan ciertas características extras que se necesitan en un proyecto, un ejemplo de esto puede ser una herramienta para la creación de gráficos estadísticos en JavaScript (Chart.js). 

Por lo tanto, **npm** es un gran repositorio de estas herramientas que nos permite descargarlas desde nuestra terminal. Aunque no solo eso, también es un gestor, lo cual significa que tendremos muchos comandos especiales para trabajar y aprovechar al máximo sus funciones. 

## Como instalar npm

**Para instalar npm**, necesitamos descargar Node.js el cual trae integrado el gestor de paquetes. 
Node.js es un entorno de ejecución de JavaScript en el servidor sin necesidad de un navegador para funcionar.

![https://res.cloudinary.com/peiscof/image/upload/v1637345603/november-2021/node-descargar_sdcg5t.png](https://res.cloudinary.com/peiscof/image/upload/v1637345603/november-2021/node-descargar_sdcg5t.png)

**Instalaremos npm en dos pasos:**

1. Ingresa en su sitio web oficial ([https://nodejs.org/es/download/](https://nodejs.org/es/download/)) y descarga la versión compatible con tu sistema operativo.
2. Luego debes verificar que se instaló correctamente Node.js en tu computadora. Para ello abre la consola y ejecuta el comando **node -v,** esto debe retornarte la versión instalada. Además, también verificaremos si npm se encuentra disponible mediante el comando **npm -v.** 
Si en alguno de los dos casos no obtuviste el número de versión descargada, vuelve a instalar Node.js desde su sitio y repetir este paso.

Te dejamos una imagen de ejemplo para que puedas ver el resultado.

![https://res.cloudinary.com/peiscof/image/upload/v1637345597/november-2021/versiones-node-y-npm_kgtzc0.png](https://res.cloudinary.com/peiscof/image/upload/v1637345597/november-2021/versiones-node-y-npm_kgtzc0.png)

## Comandos de npm

Como ya vimos anteriormente, **npm es un gestor de paquetes de JavaScript**. Además de trabajar con los comandos para instalar herramientas, también podrás **crear tus propios paquetes** y **compartirlos con toda la comunidad**. 

Ten en cuenta que los siguientes comandos debes correrlos en la raíz de tu proyecto.

A continuación te presentamos los comandos más populares y como utilizarlos. ¡Comencemos!

### Comandos básicos

Al iniciar tu proyecto con **npm** notaras que se creara una carpeta y dos archivos. Veamos de que se trata.

- **node_modules** (carpeta)
Es la carpeta donde se instalaran todos los paquetes que utilices en tu proyecto. Si la eliminas por equivocación, ejecuta el comando **npm install** para reinstalar la carpeta.
- **package.json** (archivo)
Es el archivo de configuración de tu proyecto el cual contendrá información sobre el autor, versión, licencia, paquetes instalados, comandos específicos, entre más datos.
- **package-lock.json** (archivo)
Describe de manera más exacta todas las dependencias instaladas en el proyecto.

| Comando | Descripción |
| ------------ | ------------ |
| **npm init** | Inicializa npm en tu proyecto y crea el package.json con los datos que cargues manualmente. |
| **npm init -y** | Inicializa npm sin tener que cargar cada dato. Crea un package.json con las configuraciones básicas. |
| **npm set init.author.email [tu email]** | Asigna un email predeterminado para la configuración de tus proyectos |
| **npm set init.author.name [tu nombre]** | Asigna un nombre predeterminado para la configuración de tus proyectos |

### Instalación de paquetes

Antes de que listemos estos comandos, tienes que conocer dos conceptos nuevos que se requieren para comprender la instalación de las herramientas.

- **Dependencias de desarrollo**
Son los paquetes que necesitamos únicamente para desarrollar un proyecto en nuestro entorno de desarrollo. Un ejemplo de esto puede ser que necesites ver los cambios que vas haciendo en el código de un proyecto, para ello debes configurar un servidor que se abra en tu navegador. De esta forma, el servidor solo se utilizaría en el desarrollo del proyecto como una ayuda al crear código, en producción no se requeriría, ya que no haría falta.
- **Dependencias de producción**
Son los paquetes que deben funcionar cuando desplegamos un sitio en internet u otra plataforma. La instalación de un framework (conjunto de herramientas que nos ayuda a resolver un fin específico), por ejemplo React, es un gran ejemplo de esto.

Separadas ambas definiciones, continuemos con la lista de comandos.

| Comando | Descripción |
| ------------ | ------------ |
| **npm install [nombre del paquete]** | Instala la dependencia. Por defecto, si no indicamos de que tipo será la instalación, la hara en producción. |
| **npm install [nombre del paquete] --save** | Instala la dependencia en modo producción. |
| **npm install [nombre del paquete] -S** | Instala la dependencia en modo producción. Forma corta de indicar el tipo de instalación. |
| **npm install [nombre del paquete] --save-dev** | Instala la dependencia en modo de desarrollo. |
| **npm install [nombre del paquete] -D** | Instala la dependencia en modo desarrollo. Forma corta de indicar el tipo de instalación. |
| **npm install [nombre del paquete] -g** | Instala la dependencia de forma global. Estará disponible en tu computadora para que lo utilices en cualquier proyecto. |
| **npm install [nombre del paquete] --force** | Instala forzosamente una dependencia sin tener en cuenta los posibles errores que se presenten en la instalación. |
| **npm install [nombre del paquete] -f** | Forma corta de indicar el tipo de instalación forzada. |
| **npm install [nombre del paquete]@[versión]** | Instala la dependencia en la versión específica que le indiquemos. |

### Listar paquetes instalados

| Comando | Descripción |
| ------------ | ------------ |
| **npm list** | Lista las dependencias instaladas en un proyecto. |
| **npm list -g --depth 0** | Lista las dependencias instaladas de forma global. |

### Actualización de paquetes

| Comando | Descripción |
| ------------ | ------------ |
| **npm update** | Actualiza todos las dependencias desactualizadas de nuestro proyecto. |
| **npm outdate** | Permite visualizar si se encuentran desactualizadas las dependencias. |
| **npm install [nombre del paquete]@latest** | Actualiza solo la dependencia y a la versión especificada. |

### Desinstalación de paquetes

| Comando | Descripción |
| ------------ | ------------ |
| **npm uninstall [nombre del paquete]** | Desinstala la dependencia especificida. |

### Solucionar problemas de caché e instalación

Al agregar una dependencia, nos podremos encontrar con diversos errores que surgen en la instalación, como un paquete no funcione adecuadamente, entre múltiples tipos de errores. Si te encuentras con alguno de ellos, ejecuta los siguientes comandos que te ayudaran a solucionarlo.

| Comando | Descripción |
| ------------ | ------------ |
| **npm cache clean --force** | Elimina la caché del proyecto. |
| **npm cache clean -f** | Forma corta de eliminar la caché. |
| **npm audit** | Visualizar las vulnerabilidades de los paquetes instalados en el proyecto. |
| **npm audit fix** | Soluciona las vulnerabilidades de manera forzada. |



### Publicar un proyecto

**npm** nos permite publicar nuestra dependencia para que la comunidad pueda utilizarlo. Para ello debes **crearte una cuenta** en su sitio web oficial ([https://www.npmjs.com/signup](https://www.npmjs.com/signup)). Luego, una vez que tengas listo tu proyecto para ser subido, sigue la siguiente lista.

| Comando | Descripción |
| ------------ | ------------ |
| **npm adduser** | De esta forma puedes agregar un usuario de npm y vincularlo en tu computadora. |
| **npm login** | Al correr este comando, te conectaras con los servidores de npm para iniciar sesión. |
| **npm publish** | Publica tu proyecto mediante este comando. |
| **npm unpublish -f** | Si deseas remover un paquete subido a npm, puedes hacerlo a través de este comando. |

---

Sin duda, **npm** marca un antes y un después en el trabajo de un desarrollador web. Con esta herramienta podrás usar todos los paquetes que ofrece la comunidad, así como también realizar increíbles proyectos para compartir. 

¡No olvides compartir el artículo en tus redes sociales!

npm (node package manager) es el gestor de paquetes más utilizado de JavaScript. Un segundo... ¿Qué es un gestor de paquetes 🤔? Continúa leyendo para conocer las principales características de esta gran herramienta.

Como utilizar npm, el gestor de paquetes donde encontrarás recursos para tus proyectos de desarrollo web


Solíamos usar como almacenamiento de contraseñas distintos métodos que incluían el papel como principal recurso ya sea un anotador, una libreta o una simple hoja de papel doblada guardada en algún lugar "secreto"

Hoy en día, la **tecnología** nos ofrece herramientas que nos facilitan todas estas tareas. Si a todo esto, le sumamos una buena organización y administración de estos recursos, las mismas serán de gran utilidad para nuestra vida cotidiana.

En esta ocasión, analizaremos diferentes **programas** para no perder ninguna de nuestras **claves** y encontrarlas de manera muy simple, clasificándolas por categoría y establecerle distintos niveles de **seguridad**.

### KeePass

![https://res.cloudinary.com/peiscof/image/upload/v1638288059/november-2021/keepass_pvixdu.jpg](https://res.cloudinary.com/peiscof/image/upload/v1638288059/november-2021/keepass_pvixdu.jpg)

El reconocido gestor de contraseñas se muestra como una de las principales aplicaciones elegidas a lo largo del mundo. Con el pasar de los años, ha demostrado **robustez** y **seguridad** en sus aplicaciones con una gran compatibilidad en todos los sistemas operativos.

El programa de **software libre** trabaja directamente almacenando las claves en un **archivo** donde el mismo puede ser **almacenado localmente** y abrirse desde cualquier cliente instalado en un dispositivo.

Este método tiene una gran ventaja, ya que al ser almacenado localmente cuenta con mayor seguridad. Su contra es que a pesar de que puede guardarse en un cliente de servicio en la nube, este último deberá ser abierto nuevamente en la aplicación instalada.

### Bitwarden

![https://res.cloudinary.com/peiscof/image/upload/v1637981129/november-2021/Bitwarden_ljilux.jpg](https://res.cloudinary.com/peiscof/image/upload/v1637981129/november-2021/Bitwarden_ljilux.jpg)

Si de **sincronización en la nube** hablamos, **Bitwarden** ofrece una muy buena oportunidad de establecer nuestra base de contraseñas en la nube.

Con su sincronización en la **nube**, será posible acceder al mismo a través de cualquier parte del mundo. Su funcionamiento es compatible con múltiples sistemas y navegadores.

El servicio cuenta con **cifrado punto a punto** y cabe destacar que es **Open Source**, brindando garantías de seguridad a los usuarios.

### 1Password

![https://res.cloudinary.com/peiscof/image/upload/v1638292763/november-2021/1password_nlwx0y.png](https://res.cloudinary.com/peiscof/image/upload/v1638292763/november-2021/1password_nlwx0y.png)

Conocida en el ámbito de empresas, cuenta con un respaldo fuerte a la hora de guardar nuestras contraseñas. El **servicio en la web**, permite acceder a ellas desde cualquier parte.

Además de ofrecer sus aplicaciones multiplataformas, cuenta con su función de doble factor de autenticación, permitiendo así, reforzar nuestras credenciales en cada servicio que deseemos.

## Añade seguridad con el doble factor de autenticación

El **doble factor de autenticación** (2FA en inglés) consiste en un **código** que nos brinda seguridad extra a nuestras cuentas. El mismo es **solicitado luego de ingresar la contraseña**, por lo que añade una dificultad extra para que las mismas no sean vulneradas.

Su configuración es muy fácil, ya que **se sincroniza con la cuenta a través de un dispositivo móvi**l que nos brindará los códigos de accesos (generalmente de **6 dígitos**) que tienen una duración de **30 segundos**, evitando así que los mismos persistan activos en caso de que sean vistos por quien no corresponde.

Cable aclarar ante esto último que **se deberá establecer un método de autenticación secundario** en caso de que el teléfono que cuenta con la aplicación sea extraviado, dañado o robado.

A continuación, les enseñamos algunas de las opciones más conocidas:

![https://res.cloudinary.com/peiscof/image/upload/v1638292531/november-2021/authenticators_kn6i8t.png](https://res.cloudinary.com/peiscof/image/upload/v1638292531/november-2021/authenticators_kn6i8t.png)

### Google Authenticator

Tal como su nombre lo indica, pertenece a **Google** y es muy popular entre los usuarios por su gran sincronización con la mayoría de los servicios en internet. El mismo es **multiplataforma** y permite añadir gran cantidad de cuentas.

A la hora de añadir un 2FA a tu cuenta de Google, **Authenticator** será una de las opciones disponibles que ofrece el gigante americano.

### Microsoft Authenticator

Su apariencia **intuitiva y fácil** de usar lo posiciona como una gran opción, sobre todo si eres usuario de servicios de **Microsoft,** ya que posee con una excelente sincronización. Cuenta con bloqueo a través de **reconocimiento facial o huella digital**. Ofrece, además, la posibilidad de sincronizar con gran cantidad de cuentas y aplicaciones.

### Authy

Similar a las anteriores, destaca por su posibilidad de realizar **copias de seguridad** ante pérdidas repentinas de datos o errores de aplicación. Su sincronización es instantánea y variada con posibilidad de utilizar múltiples plataformas.

¿Tus contraseñas están seguras? En estos sitios y aplicaciones podrás gestionarlas de forma segura sin necesidad de recordar todas por completo.

La importancia de resguardar tus contraseñas


Cambiar de teléfono cada cierto tiempo se ha vuelto una actividad normal y necesaria en todos los usuarios. Estos mismos tienen una vida marcada por la **obsolescencia**, proceso por el cual un dispositivo queda obsoleto al verse **limitado** ya sea por **hardware** o **software** en falta de actualizaciones.

El **traspaso**, también conocido como **“migración”**, consiste en **trasferir todos los datos e información de un celular a otro**. Dependiendo de la sincronización con la **nube**, gran parte de esta información estará visible desde **distintas plataformas**, accediendo a ella con la **cuenta de correo electrónico.** Esto último permite a que en caso de no disponer del dispositivo anterior, la información pueda recuperarse fácilmente. Pero ¿Qué sucede si cambiamos totalmente de Sistema Operativo?

En esta ocasión, explicaremos como funciona y se realiza correctamente un **traspaso** de plataforma **Android** a **Apple**, permitiendo así, dar el salto de calidad sin perder nada de información.

## **“Pasar a iOS” la app que lo facilita todo**

![https://res.cloudinary.com/peiscof/image/upload/v1644457351/january-2022/Pasar_a_iOS_aeem5w.jpg](https://res.cloudinary.com/peiscof/image/upload/v1644457351/january-2022/Pasar_a_iOS_aeem5w.jpg)

También conocida como “Trasladar a iOS”, la empresa **Apple** se ha encargado de facilitar la tarea de **migración** con una simple aplicación. La misma se encargará de migrar datos tales como **contactos**, **cuentas**, **archivos multimedia**, **ajustes** y **algunas aplicaciones**.

Para proceder con esta herramienta, se requiere **descargar la aplicación** disponible en **[Play Store](https://play.google.com/store/apps/details?id=com.apple.movetoios&hl=es_AR&gl=US)** y **conectar ambos dispositivos a la misma red Wi-fi**.

En el iPhone, al comenzar la configuración inicial, ofrecerá restaurar los datos de distintas maneras. En este caso, escogeremos **“Transferir datos desde Android”**.

1. Abrir la app “Pasar a iOS” en el dispositivo Android.
2. En el iPhone se mostrará en pantalla un código de seis o 10 dígitos, que debe ser observado.
3. Introducir el código en el celular Android cuando le sea solicitado.
4. En el Android, seleccionar el contenido que se desea transferir y lanzar el traspaso.
5. Ya en iPhone, esperar a que finalice el proceso y luego continuar con la configuración.

Finalizado el proceso, **se deberá revisar** que toda la información elegida se encuentre en correcto estado en el nuevo dispositivo.

## **Aplicaciones que deben migrarse de forma manual**

### **WhatsApp**

Esta famosa aplicación tiene una excelente pero limitada función de **copia de seguridad**. En **Android**, automáticamente las almacena en una carpeta denominada con el mismo nombre. La misma se puede encontrar a través de un explorador de archivos.

En cuanto a la **nube**, existe la posibilidad de **almacenar los chats sobre Google Drive**. La opción a escoger es hacerlo manualmente al tocar en **“Guardar”** o automáticamente de forma **diaria**, **semanal** o **mensual**.

Sin embargo, cuando **cambiamos de plataforma**, no hay una manera fácil de migrar esos datos sin antes pasar por una **aplicación** o **servicio web** que nos facilite esa tarea. Una de las opciones consiste en migrar los **chats** por **separado**, enviándolos por **correo**. A la misma se accede seleccionando el chat que deseamos exportar, tocando en **Ajustes > Exportar Chat > Enviar por correo.**

Si se desea realizar una **migración masiva** de chats, es ahí cuando se deberá recurrir a una **app externa**. Una de ellas es **Tenorshare WhatsApp Transfer**. De fácil uso y acceso, simplemente necesitaremos una **PC** o **Laptop** y los **dos teléfonos.**

![https://res.cloudinary.com/peiscof/image/upload/v1644371607/january-2022/Tenorshare_dgcnax.jpg](https://res.cloudinary.com/peiscof/image/upload/v1644371607/january-2022/Tenorshare_dgcnax.jpg) 

- Descargamos la aplicación desde el siguiente **[enlace](https://www.tenorshare.es/whatsapp-transfer-backup-restore.html).**
- **Ejecutamos** y **conectamos** los **dos celulares**
- Procederemos a escoger un **Origen** y **Destino.**
- **Seleccionamos** luego el archivo **Backup** de los chats para ser transferido al dispositivo destino.

### **2FA Aplicaciones**

Las aplicaciones de **doble factor** no siempre permiten migrar fácilmente las **cuentas asociadas** a la misma, lo que de alguna manera refuerza su seguridad, pero complica su traspaso, **requiriendo a veces el uso de una computadora**. A continuación, detallamos brevemente **como hacer un traspaso** en las más utilizadas.

**Google Authenticator**

- Instala la aplicación en el nuevo teléfono.
- Acude a la web de verificación en dos pasos de Google **[aquí.](https://myaccount.google.com/signinoptions/two-step-verification/enroll-welcome)** (hazlo desde la PC)
- Inicia sesión en tu cuenta de Google.
- Sección de Google Authenticator.
- Pulsa en la opción de configurar.
- Selecciona el tipo de teléfono que vas a utilizar.
- Pulsa en siguiente.
- Abre Google Authenticator en el nuevo teléfono.
- Pulsa en empezar configuración.
- Pulsa en escanear código de barras.
- Escanea el código que hay en la pantalla en la web de Google en tu ordenador.
- Introduce el código que se te pide.

### **Microsoft Authenticator**

A pesar de contar con una opción para hacer una **copia de seguridad**, la misma se realiza sobre **Google Drive** en **Android** y sobre **iCloud** en **iPhone**. Lo que significa que si el nuevo dispositivo es la misma plataforma, la copia puede ser restaurada en el nuevo teléfono, **pero no así si cambiamos de plataforma** como es el caso del artículo. A diferencia de **Google Authenticator**, **no cuenta con compatibilidad multiplataforma**.

¿Estás pensando en pasarte a Apple? Si es así, en este artículo aprenderás a como hacerlo correctamente sin perder ningún tipo de información. Brindaremos además, tips y puntos a tener en cuenta a la hora de realizar la migración.

Migrar de Android a Apple en unos simples pasos es posible


### Sus diferentes modelos

Siguiendo la línea de los últimos años, se espera que sean los siguientes:
- Galaxy S22
- Galaxy S22+
- Galaxy S22 Ultra
- **No hay novedades aún respecto a una edición FE "Fan Edition"** similar a la que ofrece la gama S20 con un precio económico sin resignar rendimiento.

### Diseño y características

Se espera que los nuevos dispositivos **conserven un diseño con curvas**, tal como lo tienen sus predecesores y formando parte incluso de una identidad de Samsung. Si podemos hablar de la inclusión del famoso **S Pen** visto en los modelos Note, garantizando de esta forma la inclusión de un pequeño hueco donde se almacenará este último.

Respecto a su hardware, conservarán el uso de procesadores **Qualcomm Snapdragon y Exynos**, estimando que serán los últimos modelos los elegidos para el teléfono. Además, la **memoria RAM de 8 gb** y un **almacenamiento mínimo de 128 gb** que iría aumentando según el modelo. En cuanto a batería, se estiman que se ubicarán entre los 4.000 y 5.000 mAh variando entre ellos con una pantalla de alrededor de 6 pulgadas.

### Cámara: apuntando alto

Teniendo en cuenta los grandes avances que se han dado en los últimos años a pasos agitandados en este campo y con mucha competencia entre las distintas marcas, el Galaxy S22 intentará no quedarse atrás. **Se presume un sensor de alrededor de 200 mpx** con una nueva tecnología de estabilización, el cual podría fabricarse en colaboración con otra compañía fotográfica como ya han hecho anteriormente distintas empresas.

Si de video hablamos, quieren llevar al máximo su potencial de los **8K** de resolución que se encuentran a partir de los S20. En esta ocasión, será un potencial objetivo alcanzar los **60 fps**, ofreciendo así, una gran cámara para aquel usuario que la utiliza con frencuencia.

### Fecha estimada de lanzamiento

Sin haber demasiados cambios respecto a estrenos anteriores, se estima que dará a conocerse en la **segunda quincena del mes de enero de 2022**. Dado que se realizará el famoso evento del **Mobile World Congress** de Barcelona, es muy posible que el mismo sea estrenado en esa fecha.

El tope de gama de los Samsung están más cerca de su estreno. Todas las novedades y características que ofrecerán los nuevos dispositivos.

SAMSUNG SE PONE A PUNTO PARA ESTRENAR SUS NUEVOS GALAXY S22

Al día de hoy, existen múltiples servicios que nos permiten alojar esos proyectos que realizamos a modo de práctica para aprender una nueva tecnología o montar algo mucho más profesional.

Cada una de las siguientes plataformas nos permiten **alojar sitios estáticos (HTML - CSS - JavaScript).** Estas cuentan con planes gratuitos así como suscripciones mensuales o anuales, para poder obtener mayores características y beneficios. Nos centraremos en los planes básicos, como utilizarlos y desplegar un sitio o aplicación web para que finalmente viva en internet.

Este artículo está enfocado en el despliegue de sitios estáticos. Si deseas utilizar herramientas como algún tipo de framework (React, Angular, Vue) puedes usar esto como guía, el proceso es muy similar. Debes tener a mano la documentación de cada plataforma para sumarle esas configuraciones extras. ¡Comencemos!

## Netlify

Netlify es una de las plataformas modernas **orientada a desarrolladores Frontend** la cual nos brinda una **velocidad de carga** asombrosa y **facilidad en el despliegue** y almacenamiento de sitios. Además, nos provee de diversas herramientas que hacen de la plataforma una gran opción a elegir, las cuales son:

- Despliegue continuo.
- CDN integrado.
- Datos analíticos del uso de nuestro sitio.

### Como crearse una cuenta

Nos permite crearnos una cuenta con diversos servicios de control de versiones como **GitHub, GitLab, Bitbucket** o mediante **correo electrónico.** Si optamos por alguna de las primeras opciones, Netlify nos solicitara autorización para crear la cuenta y también poder desplegar proyectos futuros de manera más simple desde el servicio elegido.

![https://res.cloudinary.com/peiscof/image/upload/v1636561844/november-2021/netlify-signup_yqvx3y.png](https://res.cloudinary.com/peiscof/image/upload/v1636561844/november-2021/netlify-signup_yqvx3y.png)

En este ejemplo, crearemos la cuenta mediante **GitHub** para que puedas ver todo el proceso de registro. Si utilizas otro método los pasos serán similares.
Una vez autorizado el acceso, debemos completar una serie de datos para completar nuestro perfil.

### Como utilizarlo

#### Despliegue a través de la interfaz gráfica:

Completado todo el proceso, nos encontraremos con el panel de Netlify donde podremos subir nuestro sitio mediante las siguientes formas:

- **GitHub, GitLab, Bitbucket:**
Si deseas agregar un nuevo sitio que ya tienes almacenado en uno de estos servicios. Debes seleccionar agregarlo desde el botón de **nuevo sitio desde Git** y vincular ambas cuentas. Nos pedirá elegir que proyecto queremos desplegar y luego seleccionar sobre que rama se encuentra el repositorio, entre otras configuraciones a tener en cuenta según la tecnología con la cual se encuentra desarrollado el sitio. **Si tu proyecto es estático (HTML - CSS - JavaScript)** **deja todas las opciones por defecto.**
 
![https://res.cloudinary.com/peiscof/image/upload/v1637095083/november-2021/netlify-new-site-from-git_k9ibpb.png](https://res.cloudinary.com/peiscof/image/upload/v1637095083/november-2021/netlify-new-site-from-git_k9ibpb.png)
 
- **Cargarlo manualmente:**
Subir un proyecto de esta forma es sumamente fácil, para ello debemos **arrastrar** la carpeta del proyecto al panel de Netlify desde nuestra computadora y **soltarla** allí. 

#### Despliegue a través de la interfaz de línea de comandos:

Netlify nos provee una serie de comandos para realizar el despliegue desde nuestra terminal. Sigue el paso a paso de la siguiente lista.

- **Instalar Netlify en tu computadora**

```
npm install -g netlify-cli
```

- **Luego debes iniciar sesión y vincular tu cuenta de Netlify con este comando**

```
netlify login
```

- **Iniciar Netlify en tu proyecto**

```
netlify init
```

Al correr este comando, tendremos que seleccionar entre diversas opciones. ¿Recuerdas como lo hiciste mediante la interfaz gráfica? ¡Esto es lo mismo únicamente que lo hacemos desde la terminal!

Puedes optar por crear y configurar un nuevo proyecto, elegir uno ya existente en el sitio de Netlify o conectar un repositorio mediante GitHub para habilitar los despliegues automáticos. En este caso optaremos por hacer el procedimiento mediante la primera opción.

Entre los datos a completar, deberás confirmar el **nombre del equipo de desarrollo** que elegiste previamente, **nombre del proyecto**, si posee **comandos específicos**, entre otras configuraciones adicionales. Te dejamos una imagen con nuestro ejemplo para que puedas ver el resultado del proceso. Recuerda estudiar tu proyecto y evaluar los comandos que necesites para que funcione en producción.

![https://res.cloudinary.com/peiscof/image/upload/v1637171947/november-2021/netlify-init_ss6uw6.png](https://res.cloudinary.com/peiscof/image/upload/v1637171947/november-2021/netlify-init_ss6uw6.png)

- **Desplegar a producción**

```
netlify deploy --prod
```

¡Con este comando podrás desplegar tu proyecto!
Ten en cuenta que si no quieres enviarlo a producción, puedes usar el siguiente comando para obtener una URL de prueba.

```
netlify deploy
```

Ambas formas de utilizar la plataforma nos darán el mismo resultado, la URL del proyecto ya desplegado. El cual se verá de esta manera y además nos dará opciones para personalizar el dominio (**domains settings**) y cambiarlo a un nombre que queramos, entre muchas más herramientas.

![https://res.cloudinary.com/peiscof/image/upload/v1637095918/november-2021/netlify-deploy_ixtmmx.png](https://res.cloudinary.com/peiscof/image/upload/v1637095918/november-2021/netlify-deploy_ixtmmx.png)

### Conclusión

Netlify es una herramienta que debes tener siempre presente usarla, tanto por su rapidez y simpleza que nos presenta junto con todas las herramientas que nos provee para tener un desarrollo aún más completo.

Puedes ver nuestro resultado en el siguiente enlace: [Proyecto de prueba](https://gallant-kilby-50f7db.netlify.app/)

## GitHub pages

GitHub es una plataforma para **almacenar tus proyectos** y visualizar todo el código que contengan a través del sitio. Funciona a través del sistema de **control de versiones Git**, el cual permite trabajar y guardar de forma eficiente y confiable el código creado en un repositorio local.

De esta manera, GitHub permite a los desarrolladores conectar su proyecto local y alojarlo como repositorio remoto. Al vivir en internet, tu repositorio puede aprovechar de todas las herramientas y características que nos brinda esta plataforma, tal como permitir colaboraciones de otras personas para lograr grandes herramientas a partir de la comunidad.

Fue comprada por Microsoft en 2018.

### Como crearse una cuenta

Crear una cuenta es muy similar a lo que estamos acostumbrados. GitHub nos solicitará un **email**, **contraseña** y **nombre de usuario**. Luego realizaremos un puzzle para verificar que somos humanos, así como también ingresar el código que nos llegara al correo asociado.

![https://res.cloudinary.com/peiscof/image/upload/v1637071373/november-2021/github-signup_dxdak7.png](https://res.cloudinary.com/peiscof/image/upload/v1637071373/november-2021/github-signup_dxdak7.png)

### Como utilizarlo

Una vez que ingresas, te encontraras con tu perfil con todas las herramientas que nos provee GitHub. Para poder utilizarlo, debes **tener previamente instalado Git** en tu computadora, un** repositorio iniciado** con el mismo y ya **conectado con el repositorio remoto**. Si no conoces sobre esto, no te preocupes, quédate atento que pronto tendremos disponible una guía de introducción a Git y GitHub.

Para desplegar tu sitio, debes dirigirte a la sección de tus repositorios, entrar a la carpeta del proyecto y seleccionar los ajustes. Allí verás muchas opciones, **nos centraremos en pages**.

![https://res.cloudinary.com/peiscof/image/upload/v1637091859/november-2021/github-pages_k7etfz.png](https://res.cloudinary.com/peiscof/image/upload/v1637091859/november-2021/github-pages_k7etfz.png)

En pages, indicaremos cuál es la **rama principal** del proyecto en donde se encuentra el código que deseamos ver en producción y guardamos los datos actualizados. ¡Listo, tu proyecto ya se encuentra desplegado en internet y tendrás la URL para acceder en él!

Si al entrar al enlace no puedes ver tu proyecto, debes indicar y agregar en la URL cuál es el archivo raíz del mismo. Por ejemplo: un archivo index.html

### Conclusión

Usar GitHub Pages es una manera muy simple y práctica de tener tu proyecto en producción todo dentro de la misma plataforma.

Aquí tienes el resultado de nuestro deploy: [Proyecto de prueba](https://mxrold.github.io/proyecto-de-prueba/)

## Surge

Surge tal vez es una herramienta que posiblemente no conocías para utilizar. La misma se diferencia en que únicamente nos permite **desplegar sitios estáticos a través del uso de la terminal** y no con una interfaz gráfica mediante una web.

![https://res.cloudinary.com/peiscof/image/upload/v1637010097/november-2021/surge-preview_q1l493.png](https://res.cloudinary.com/peiscof/image/upload/v1637010097/november-2021/surge-preview_q1l493.png)

### Como crearse una cuenta y utilizarlo

Al funcionar todo desde la terminal de comandos, crearse una cuenta también se hace desde la misma. Para poder utilizar Surge debemos tener **instalado previamente npm.**

- **Primeramente, instalaremos la herramienta mediante el siguiente comando:**

```
npm install --global surge
```

- **Una vez instalado de manera global en tu computadora, crearemos una cuenta. Para ello corre este comando:**

```
surge
```

Si es la primera vez que utilizas este servicio aparecerán una lista de datos que debemos agregar para crear una cuenta y desplegar nuestro sitio, tal como **email**, **contraseña**, **ruta del proyecto** y **dominio** (nos brindan uno aleatorio que podremos personalizar a nuestras necesidades). Si todo el deploy funciono correctamente, obtendrás como resultado la URL donde vivirá tu proyecto junto con el estado del despliegue.

![https://res.cloudinary.com/peiscof/image/upload/v1637009489/november-2021/surge-deploy_hoewcj.gif](https://res.cloudinary.com/peiscof/image/upload/v1637009489/november-2021/surge-deploy_hoewcj.gif)

### Conclusión

Hacer **despliegues** en Surge en muy **simple** y tenemos a mano su documentación para ayudarnos en cualquier momento que tengamos una duda.

Aquí tienes nuestro resultado de este deploy: [Proyecto de prueba](https://capricious-pets.surge.sh/)

---

Sí algunos conceptos te resultaron desconocidos, no te preocupes, pronto en **Peiscof** estaremos publicando **más tutoriales de programación** para que puedas aprender y profundizar más al respecto.

Esta es la **primera entrega del artículo** donde nos adentramos en **Netlify, GitHub Pages y Surge**. Quédate atento que en los próximos días estaremos lanzando la **segunda parte** con más plataformas para el despliegue de aplicaciones.

¿Creaste un proyecto y no sabes como subirlo a internet? ¿Estás comenzando en el mundo del desarrollo web y quieres armar tu portafolio? Acompáñanos en este artículo donde te contaremos sobre las plataformas más conocidas y como utilizarlas.

Servicios y plataformas para publicar tus proyectos de desarrollo web - Parte I


Desde hace años, la tecnología no deja de sorprendernos y ofrecernos una enorme variedad de dispositivos a elegir. Tanto básicos como avanzados, se presentan para que cada uno de estos elementos se adapte a la necesidad del usuario que lo adquiere.

En esta ocasión, dirigimos nuestro contenido a aquel usuario que requiere un uso cotidiano de su celular con variedad de aplicaciones y funcionalidades que serán aprovechadas a diario. Una vez planteada la necesidad, el comprador deberá calcular su presupuesto y adaptarlo a aquel teléfono que sea escogido.

Les presentamos los Smartphones gama media destacados del 2021, ajustado a las necesidades de una persona que requiere prestaciones a un precio accesible.

## Samsung Galaxy A22

![https://res.cloudinary.com/peiscof/image/upload/v1640304226/december-2021/Samsung_A22_pci2xk.jpg](https://res.cloudinary.com/peiscof/image/upload/v1640304226/december-2021/Samsung_A22_pci2xk.jpg)

El Galaxy A22 se presenta en la familia **Galaxy** como una alternativa accesible y de muy buenas prestaciones. Con su pantalla **AMOLED HD+ de 6,4** pulgadas brinda una muy buena calidad de imagen. Acompaña a la misma una **cámara frontal** de **13 MP** con **1080p** de resolución para **vídeo**.

Su procesador **MediaTek Helio G80** ofrece **2 GHz** de velocidad, completando el dispositivo con **4 GB de RAM y 128 GB de almacenamiento**. Cabe destacar la inclusión de poder incorporar una memoria **SD** para expandir el espacio interno. La **batería** de **5000 mAh** con una carga rápida de **15 W**.

Llegando al apartado de la **cámara principal**, la misma se forma de **4 lentes** que conforman **48 MP**, **8 MP** y los dos restantes **2 MP** y **1080p 30 FPS** para filmaciones. Brinda una tecnología de autofocus por detección de fase, estabilización óptica de imagen, flash LED, geo-tagging, HDR.

**Otras características:** Conector 3.5 mm, Bluetooth 5.0, puerto USB - C.

**Precio:** AR$ 42.000 - US$ 340

## Motorola Moto G20

![https://res.cloudinary.com/peiscof/image/upload/v1640886996/december-2021/moto-g20_eotmsh.jpg](https://res.cloudinary.com/peiscof/image/upload/v1640886996/december-2021/moto-g20_eotmsh.jpg)

Miembro de la familia **Moto**, continúa su generación con sistema operativo **Android 11**. Este último corre en un **Hardware** que está conformado por un procesador **Unisoc T700 octa-core 1.8 GHz**, **4 GB** de **RAM** y **64 GB** de **almacenamiento interno**. La **batería** que lo alimenta ofrece **5000 mAh** de capacidad y **10 W** de carga.

En cuanto a sus características externas, destaca con una **pantalla LCD IPS 6.5** pulgadas de tamaño con resolución de **1600 x 720**. La misma contiene una **cámara frontal HDR de 13 MP** y **1080p** de vídeo. Su **cámara principal** es **cuádruple** y está compuesta por un lente de **48 MP**, otro de **8 MP** y dos de **2 MP**. Con características similares a su competidor de Samsung, cuenta con autofocus por detección de fase, flash LED, geo-tagging, HDR.

**Otras características:** Conector 3.5 mm, Bluetooth 5.0, puerto USB - C.

**Precio**: AR$ 30.000 - US$ 220

## Xiaomi Redmi Note 10

![https://res.cloudinary.com/peiscof/image/upload/v1640217991/december-2021/Redmi_Note_d25cm4.jpg](https://res.cloudinary.com/peiscof/image/upload/v1640217991/december-2021/Redmi_Note_d25cm4.jpg)

La compañía de capitales chinos nos presenta este dispositivo de excelentes prestaciones que ingresa en podio de la gama media. Destacan entre sus características, su **procesador Snapdragon 678 2.2 GHz**, **4 GB** de **RAM** y dos opciones de **almacenamiento**: **64 GB** y **128 GB**. Esta última, cuenta con expansión MicroSD. La **batería** tiene una capacidad de **5000 mAh** y es aquí donde resalta sobre los demás, teniendo **super carga rápida** con **33 W**.

La **cámara** de **cuatro lentes**, está compuesta por uno de **48 MP**, otro de **8 MP**, y dos de **2 MP**. Igual a los anteriores, la tecnología que la acompaña está caracterizada por autofocus por detección de fase, flash LED, geo-tagging, HDR. El **punto a destacar**, llega con el **vídeo**. Tiene capacidad de captar imágenes **4K a 30 FPS**, mientras que sus competidores llegan hasta los 1080p 30 FPS.

La **pantalla AMOLED de 6,43 pulgadas** de tamaño tiene una resolución **1080 x 2400** píxeles y cuenta con **Gorilla Glass**. La completa una **cámara frontal HDR de 13 MP**.

**Otras características:** Conector 3.5 mm, Bluetooth 5.0, puerto USB - C.

**Precio**: AR$ 70.000 - US$ 400

## OnePlus Nord

![https://res.cloudinary.com/peiscof/image/upload/v1640217991/december-2021/OnePlus_Nord_v3q85v.jpg](https://res.cloudinary.com/peiscof/image/upload/v1640217991/december-2021/OnePlus_Nord_v3q85v.jpg)

A pesar de ser el modelo más antiguo comparados a los descritos anteriormente, presenta unas increíbles características que lo ubican, sin dudas, en el primer lugar. Cuenta con una **pantalla Full HD+ de 6,4 pulgadas 1080 x 2400** y en su margen superior izquierdo la excelente **cámara frontal bifocal de 32 MP + 8 MP**.

El punto fuerte es el hardware. Con un **procesador Qualcomm SDM765 Snapdragon 765G octa-core 2.4 GHz**, se compone de entre **6 GB, 8 GB y 12 GB** de **RAM** según la versión escogida. El **almacenamiento** también cuenta con tres opciones, de **64 GB, 128 GB y 256 GB** respectivamente. No cuenta con expansión Micro SD. La **batería** es de **4115 mAh**, que a pesar de ser más pequeña que el resto, es acompañada por una **super carga rápida de 30 W**.

La **cámara cuádruple** tiene lentes de **48 MP, 8 MP, 5 MP y 2 MP**, destacando nuevamente entre las opciones listadas hoy. La completa una capacidad de **filmación** de **2160p a 30 FPS** y **1080P a 60 FPS** y hasta **240 FPS**, además de su avanzada tecnología con autofocus por detección de fase, estabilización óptica de imagen, flash LED dual, IA, geo-tagging, HDR.

**Otras características:** USB - C 2.0, Bluetooth 5.1, Acelerómetro, Giroscopio.

**Precio**: AR$ 70.000 - US$ 400

Si estás buscando un Smartphone que ofrezca una muy buena experiencia de uso como también un costo accesible, estás en el lugar correcto. Ya cerrando el 2021, les contaremos cuáles son las marcas y modelos destacados en la mediana gama.

Smartphones destacados en calidad - precio de la gama media del 2021

¡Hola! Gracias por su interés en escribirnos. Por favor complete el siguiente formulario o envíenos un correo electrónico a [team@peiscof.com](mailto:team@peiscof.com)

Programación

¡Suscríbete al newsletter!