Aplicaciones

Con el paso de los años los sitios online han cambiado notoriamente, desde la parte visual hasta la parte funcional, y algunas veces queremos algo más que un sencillo portal informativo, queremos que el usuario interactúe con el entorno, que realice ciertas actividades y que tengamos la certeza de que, al salir de ese sitio, pensará en volver más tarde. Pero, ¿cómo lograr esto? Para ese tipo de ideas y deseos, existe algo que está en la mayoría de sitios en línea hoy en día: las aplicaciones web.
Estas son similares a los sitios que vemos normalmente, pero a diferencia de estos, permiten a los usuarios enviar y recibir información en cualquier momento, realizar tareas y comunicarse con otras personas, todo esto sin la necesidad de instalar nada en sus computadora.
Antes de comenzar a hablar sobre todo lo que abarca desarrollar un sistema de estos, debemos tener definidos dos términos: Frontend y backend.

ventas-internet-online

FRONT-END

Es la parte que ve el usuario desde su navegador y con la cual interactuara si esta llama su atención por tanto su estructura debe ser lo más amigable posible, es decir, hay que tomar como algo prioritario en este punto la llamada experiencia de usuario UX, por otra parte para lograr la comunicación perfecta entre el sistema y los cibernautas se requiere de la participación de varios elementos con conocimientos en distintas ramas tanto del diseño gráfico como del desarrollo y el diseño web para construir este tipo de sistemas, incluso en ocasiones se necesitara de expertos en multimedia para efectos como los aplicados en realidad virtual, si bien en esta parte se hace énfasis en el usuario final también dentro de los paneles frontales entra el llamado dashboard que es la parte donde el o los administradores podrán gestionar de manera limitada o ilimitada el comportamiento y los distintos valores que se muestren en el front-office. Aquí es importante tener en cuanta si su operatividad estará diseñada para quienes saben poco o nada de programación o en su defecto si será totalmente intuitivo su manejo como el llenado de campos y la desactivación y activación de funciones etc. esta parte también suele conocerse como panel de administración.

Otra manera de ejemplificar estos términos seria la siguiente: cuando los cibernautas inician sesión en algún sistema, podemos observar como esta cambia su parte frontal y nos deja acceder a nuestra cuenta, nos muestra nuestra información y vemos todas las tareas que podemos realizar, esta parte es lo que en términos más minimalista vendría siendo el front-end.

movil-manos-personas
medios publicitarios internet

BACK-END

Es aquello que trabaja detrás del navegador, que el usuario no puede ver pero que de igual forma es imprescindible tener presente en la arquitectura con la cual contara puesto que desde esta se gestionan los recursos que demanda el programa, quizá en algún momento se ha preguntado lo siguiente: ¿cómo maneja el programa nuestra información? ¿dónde estaba guardada esta mientras no estuvimos en línea y como es que la trajo de vuelta? bueno, esto es lo que comúnmente y para evitar mayores tecnicismos es el llamado back-end donde su principal función es manejar el flujo de información del usuario desde una base de datos, ya sea desde el servidor donde se encuentra alojado la el programa o manejándolo en el navegador.

smarphone-mano-android

Lenguajes de maquetación

Parte fundamental del frontend son los lenguajes de maquetación. Durante algún tiempo se ha tenido una idea equivocada sobre estos lenguajes llegándolos a confundir con lenguajes de programación, los dos ejemplos más representativos de esto son HTML y CSS.

¿Qué no son lenguajes de programación?

La diferencia entre un lenguaje de maquetación y uno de programación son los procesos que realizan. HTML ayuda al navegador a saber qué es lo que tiene que formar, esto quiere decir, genera lo que los lenguajes de programación utilizaran para que el sistema funcione correctamente, no envía ni recibe información del servidor ni mueve elementos o les dice que harán.
Ahora, ¿porque CSS no es un lenguaje de programación si este puede manipular lo que ocurre con HTML? Volviendo a lo mencionado anteriormente, el navegador interpreta lo que está escrito en CSS, sin que este envié o reciba ningún tipo de información. Así que realmente CSS no está interactuando con HTML, el navegador interpreta ambos códigos y entiende que es lo que tiene que hacer con ellos.

wordpress-joomla-drupal-tijuana

Lenguajes de programación

Los lenguajes de programación empleados en estos desarrollos se dividen en dos grupos: lenguajes lado cliente y lenguajes lado servidor.

Lenguajes lado cliente

Estos lenguajes, como se mencionó, tienen la capacidad de controlar todo lo que hacen los lenguajes de maquetación. Cuando el navegador terminó de identificar todos los elementos que se verán en pantalla, los lenguajes lado cliente comenzarán a trabajar conforme el usuario necesite de sus funciones.
Por ejemplo, imaginemos que estamos navegando en una sistema de este tipo y vemos un botón que dice “Ver mi información”, damos clic en él y justo después de hacerlo el botón desaparece y ahora se nos muestra una ventana con todos nuestros datos, todo esto sin tener que abrir otro link. Ese tipo de funciones es generado gracias a este tipo de lenguajes.
Un gran ejemplo de estos lenguajes es JavaScript, que se encuentra la mayoría de los programas. Conforme este lenguaje fue creciendo, se fueron desarrollando librerías del mismo, con el fin de ayudar a los desarrolladores a utilizarlo de manera más rápida y aumentando su funcionalidad. Las librerías más utilizadas son: jQuery.js, Angular.js y BackBone.js

Lenguajes lado servidor

Una vez que comprendimos como se forma el sistema en nuestro navegador, pasemos a lo que hace detrás de todo esto. Sabemos que el sistema envía y recibe información desde una base de datos en el servidor, pero ¿cómo lo hace exactamente? Para eso sirven los lenguajes lado servidor, estos identifican cuando un usuario está realizando una petición de información, e inmediatamente envían comandos al servidor para que este sepa que tiene que enviar dicha información. Una vez que reciben la información del servidor, la colocan en su lugar correspondiente y ¡listo!, nuestra información nos es mostrada.
Los lenguajes más representativos de esta rama son: PHP, ASP, PERL y JSP. cuál de estos utilizar ya dependerá de los requerimientos que tengamos para nuestro sistema y que tanto crecimiento nos permitan tener.

arte-grafico-visual-texturas-matices

Antes de desarrollar

Antes de comenzar a construir nuestro sistema debemos tener muy en claro ¿qué es exactamente lo que queremos lograr con ello?, ¿por qué desarrollar este sistema y para quien está dirigido?
Existen distintas maneras de desarrollar un programa de estas características, pero las más importantes son: comenzando desde cero y utilizando frameworks, CMS, etc. Cada método tiene sus ventajas y desventajas, si comenzamos desarrollando desde cero sabremos a la perfección donde esta cada pedazo de código que escribimos, sabemos que partes de dicho código podremos adaptar y mejorar con fines de posicionamiento SEO, eso sí, esto tiene un costo y es el tiempo. Generar la maquetación, las funciones, los estilos, los llamados a la acción y las solicitudes a el servidor completamente desde cero podría costarnos semanas e incluso meses, dependiendo de qué tan amplio sea lo que estamos desarrollando.
Por otro lado, tenemos los frameworks y CMS, que nos ahorran gran cantidad de tiempo, ya que estos contienen gran cantidad de archivos con código que ya vienen predefinidos y nosotros solo tendríamos que adaptarlo a nuestro sistema, pero claro, también conlleva un costo y es la gran de cantidad de código innecesario que estas librerías nos podrían dejar. Tomemos como ejemplo Bootstrap, el framework de twitter para estilos, son hojas CSS donde ya vienen creadas una enorme cantidad de clases y condiciones de estilo para utilizar nuestra página, pero en la mayoría de los casos solo se utiliza el 45% del código de estos archivos, el restante 55% se queda en nuestro sistema, pero sin ser utilizado. Aunque claro, con las herramientas que se han desarrollado hoy en día, como “Audits” en Google Chrome, es sencillo encontrar esas partes de código que no utilizamos para poder removerlas.
Lo importante en estos casos es encontrar la mejor estrategia para poder juntar ambos métodos, sin tener que sacrificar los aspectos importantes de lo que estamos desarrollando.

Aplicaciones Populares

Ejemplos:

Redes Sociales
1. Facebook
2. Twitter
3. Google+
4. LinkedIn
5. Snapchat
6. Pinterest

Comercio electrónico
1. Ebay
2. Mercado Libre
3. Alibaba Xpress
4. Linio
5. Privalia

• Multimedia
1. Netflix
2. Youtube
3. video juegos en línea

smarphone-mano-android

Ventajas y desventajas

Pros

-Podemos acceder a ellos fácilmente desde cualquier lugar con acceso a internet.
-Son sencillos de actualizar.
-No hay riesgo de perder información al cambiar de computadora, ya que todo se guarda en línea.
-Consumen pocos recursos en los equipos.
-No es necesario instalar nada en la computadora y descargar pesadas actualizaciones.
-Los entornos pueden contener diseños creativos y con animaciones que atrapan la atención de los usuarios.
-No es necesario realizar tareas de compatibilidad con sistemas operativos (Windows, Mac, CentOS, Linux).
-Se pueden agregar fácilmente otros elementos de diferentes sistemas en la red (correo, búsquedas, redes sociales, etc).

Desventajas

-Es necesario tener una conexión a internet para poder acceder.
-Algunas veces su velocidad de carga puede ser lenta, pero con las nuevas tecnologías que se han desarrollado este problema disminuye cada vez más.
Si lo que deseamos es una plataforma interactiva donde nuestros usuarios entrarán desde cualquier lugar y podrán guardar su información o realizar actividades, las aplicaciones web son las indicadas.

taza-cafe-oficina-hombre