martes, 7 de febrero de 2017

Aplicaciones conectadas, como funcionan, hola mundo



Aplicaciones conectadas
  • En la actualidad, muchas de las aplicaciones necesitan estar conectadas.
Ya sea porque necesito interactuar con otras personas o porque la misma aplicación necesita de datos se guardan en otra ubicación para que otros usuarios puedan acceder.
  • El ejemplo más simple de comprender, son las redes sociales, donde un usuario comparte información con otros usuarios de la red.
Ejemplo – Red Social
  • Juan, saca una foto con su teléfono o su cámara digital. Al momento de sacar a la foto, no precisa de una conexión a internet para utilizar la aplicación.
  • Luego Juan llega a su casa donde tiene conexión a internet, se conecta a una red social y sube las fotos a internet. Estas archivos, viajan, a través de internet, a los servidores de la red social.
  • Los servidores, no son más que computadoras, que se encuentran las 24 horas del día encendidas, con discos rígidos lo suficientemente grandes, como para guardar las fotografías de Juan, de Pedro, de José.
  • Los servidores, buscan en sus registros, quienes son los amigos de Juan, encuentra que son Pedro, y Pablo. Entonces, escribe una notificación para cuando ellos se conecten.
  • Cuando un Pedro, un amigo de Juan se conecta a la red social, ve en el muro una notificación que dice “Juan subió un nuevo album de sus vacaciones”, y clickea 
  • La aplicación, se conecta a los servidores, donde están almacenadas las fotografías, y las muestra en el navegador de Pedro.
Aplicaciones conectadas
  • Del ejemplo anterior notamos que existen tres componentes básicos que intervienen en la aplicación
    • Un navegador de internet (Browser)
    • Un servidor de aplicación
    • Un servidor de datos
  • Podemos resumir el funcionamiento de cualquier aplicación como tres partes .
    • Un lugar donde muestro información
    • Un lugar donde decido que hacer
    • Un lugar donde guardo lo que necesito
Accediendo una aplicación web
  • El usuario ingresa la dirección de la aplicación web en la barra del navegador http://www.facebook.com
  • Llega el pedido a un servidor. Responde una documento
  • El documento viaja hasta destino pasando por las mismas secciones por donde pasó el pedido
  • El documento llega a la computadora destino
  • Se efectúa el renderizado de la aplicación, o sea, se dibuja la interfaz
  • Lo que intentamos representar con esta imagen, es que sucede cada vez que alguien ingresa a un sitio o aplicación web, y pide una pagina o hace click en alguna sección.
  • El navegador de internet, es esencialmente, un visor de páginas web. Estas páginas, no están físicamente en la computadora, sino que son solicitadas al servidor web, que es la computadora del otro lado y que recibe todas las peticiones del usuario.
  • Cada vez que se hace una petición a un servidor web, este pedido va con toda la información necesaria para que el servidor sepa que responder.
  • Así por ejemplo, si estoy en una página donde me pregunta cuál es mi nombre de usuario y contraseña, esta información es enviada junto con la petición, el servidor toma esos datos y nos da una respuesta.
  • Esta respuesta es leída por el navegador de internet y nos permite ver un resultado.
Hagamos un experimento
  • Ingresa a cualquier sitio de internet.
  • Cuando hayas recibido respuesta, hace click derecho sobre la pantalla
  • Luego, selecciona la opción VER CODIGO FUENTE
  • Y vas a ver distintos símbolos
  • Todas las paginas de internet, están escritas en HTML.
  • Es posible ver el código HTML de cualquier página, haciendo clic derecho y seleccionando VER CODIGO FUENTE.
  • El código HTML es el que nos permite diseñar las PANTALLAS de nuestra aplicación.
  • Cada uno de los lugares en donde nuestro usuario INTERACTURA con la aplicación.
  • Aprender el código HTML es el primer paso para empezar a programar aplicaciones
Empezando a programar
  • Es posible empezar a programar con las herramientas básicas que tiene la computadora.
  • Sigue con atención estos pasos
    • En Windows, abrí el block de notas, ubicado en Accesorios
    • Transcribí este código exactamente igual, intenta de que no aparezca ningún símbolo diferente al que estamos ingresando

<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<h1>Hola Mundo</h1>
</body>
</html>
  • Guarda el archivo, asegúrate al momento de guardar, de elegir el siguiente nombre: hola.html.
  • Asegúrate que al momento de guardar, el tipo de archivo sea *.*
  • Es importante que el nombre del archivo termine en HTML
  • Hace doble clic sobre el archivo y fíjate que se abre en un Browser de internet.
  • Empezaste a programar, ya estas escribiendo código fuente en formato HTML. Es el primer paso para desarrollar aplicaciones.
Qué es un ambiente de desarrollo?
  • Si bien en teoría es posible programar utilizando solamente el block de notas, este programa no está del todo preparado para ayudarnos a desarrollar aplicaciones.
  • Existen aplicaciones específicas que hacen mucho más simple el desarrollo de aplicaciones.
  • El ambiente de desarrollo es un conjunto de herramientas y programas que necesitas instalar en tu computadora, para que sea mas fácil crear aplicaciones.
  • En una aplicación funcionando en producción estos componentes están instalados en diferentes máquinas, en edificios especiales.
  • Para comenzar a desarrollar la aplicación, es posible instalar estos componentes, en una versión reducida, en una computadora común y corriente.
  • La única diferencia de nuestro ambiente simulado con respecto a un ambiente real, es que nuestra computadora tiene una capacidad limitada de velocidad y procesamiento y al mismo tiempo, no posee una conexión a internet de la capacidad que se necesita para atender a muchos usuarios al mismo tiempo.
  • Los programadores, no desarrollamos las aplicaciones en el ambiente real, sino que lo hacen siempre en el ambiente simulado, el ambiente de desarrollo.
  • Esto nos permite probar la aplicación cuantas veces precisemos y sólo cuando este libre de fallas y cumpla todo lo que querramos que haga, la publicamos para que sea accesible por cualquier persona desde cualquier equipo.
Qué precisamos para un entorno de desarrollo?
  1. Tener un browser de internet (en realidad, es preferible tener instalado TODOS los browsers de internet que existen)
  2. Tener un servidor web donde programemos el comportamiento de la aplicación
  3. Tener un servidor de base de datos para guardar y recuperar información
Montando el ambiente de desarrollo
  • Para instalar todos los browser de internet podemos descargarlos desde su correspondiente página de internet.
  • Un programador siempre necesita tener instalado todos los navegadores que existen. Cada uno tiene características diferentes y es preciso probar nuestra aplicación desde diferentes navegadores.
  • Es preferible siempre tener instalada LA ULTIMA VERSION DEL NAVEGADOR compatible con tu sistema operativo.
  • También es preferible, que tu navegador no tenga instalada barras de terceros, ni plugins fuera de la instalación estándar. Por lo general, estas barras provocan un funcionamiento anormal de las aplicaciones y son un gran dolor de cabeza al momento de tener que verificar el correcto funcionamiento de las aplicaciones que desarrollemos. Es preferible no tenerlas.
  • Una vez instalados, recomendamos instalar las herramientas Firebug correspondientes para cada browser
  • Todavía no has terminado, para desarrollar, precisas dos componentes fundamentales, el servidor web y el servidor de datos.
  • Es posible instalar el servidor web y el servidor de datos en forma manual, eligiendo entre diferentes fabricantes
  • En el presente curso, vamos a utilizar las herramientas de desarrollo de Microsoft, por lo que para simplificar la instalación te recomendamos que te bajes e instales el siguiente set de herramientas 
    • Microsoft Visual Studio Web Express Edition
    • Microsoft SQL Server Express Edition
  • https://www.dreamspark.com/
Algunas aclaraciones importantes
  • Las aplicaciones que instalas cuando montas tu propio ambiente de desarrollo son muy delicadas. Es posible que si instalas software de dudosa procedencia o tengas la maquina con virus este software no te funcione correctamente.
  • No instales software de más “por las dudas”. Evitá tener 3 antivirus al mismo tiempo, evitá tener software de monitoreo. Si bien son programas útiles para mantener el equipo libre de virus, son bastante problemáticos para los ambientes de desarrollo.
  • Sabemos que sos un geek, pero a partir de ahora, tienes que prestar especial atención de no instalar programas innecesarios en la computadora, salvo que realmente lo necesites.
  • Evita instalar software pirata o que infecten la máquina.
Hola Mundo en Visual Studio
  • En el Menu inicial de Windows, en Programas, abrimos Microsoft Visual Studio
  • En el menú Archivo, hacemos clic en Nuevo sitio Web ASP.NET MVC
  • Aparecerá entonces una ventana nueva
  • En Plantillas instaladas, hacemos clic en C# y, después, seleccione Sitio web ASP.NET MVC
  • En el cuadro Ubicación web, seleccionamos Sistema de archivos y, a continuación, escribimos el nombre de la carpeta en la que queremos guardar las páginas del sitio web.
  • Por ejemplo, escribimos el nombre de carpeta C:\BasicWebSite.
  • Hacemos clic en Aceptar.
  • Visual Studio crea un proyecto web que incluye funcionalidad que nos ayuda con el diseño.
  • En la parte derecha, se incluyen las porciones de código HTML que utiliza la aplicación web para mostar las diferentes vistas.
  • Vamos a editar la vista: home.cshtml
  • Abrimos haciendo doble clic y escribimos el siguiente código:
<html>
<head>
<title>Mi primera aplicación en visual Studio</title>
</head>
<body>
<h1>Mi primera aplicación en visual Studio</h1>
</body>
</html>
  • Guardamos y ponemos play (el ícono del triángulo verde)
Diseñando con Visual Studio
  • Te mencionamos que desarrollar aplicaciones en el ambiente de desarrollo es mucho más simple, y menos propenso a errores.
  • Detén la aplicación (no es posible hacer cambios si la aplicación está ejecutándose, siempre frena la aplicación para modificarla)
  • Abre la vista Default.cshtml, y haz clic en la sección Vista Diseño
  • En la parte izquierda de Visual Studio existe una caja de herramientas de diseño visual.
  • Elige un componente que desees y arrástralo hasta la vista 
  • El diseñador visual te permite, si no te acuerdas algún código HTML, directamente arrastrar el componente que deseas a la pantalla, para ir diseñándola más fácil.
  • Al finalizar este curso, sabrás como el código la totalidad de los componentes HTML, pero por si acaso te olvidas de alguno, puedes utilizar el diseñador visual para asistirte.
  • Haz algunos cambios arrastrando componentes a la vista, y coloca play. 
  • Los cambios que haces en la pantalla se ven reflejados en tu aplicación



Espero haber ayudado en algo. Hasta la próxima oportunidad!









  

No hay comentarios:

Publicar un comentario

       

Etiquetas

Academy (23) Accediendo a datos con ADO .NET (31) Acceso a la red (30) Algoritmo (34) Algoritmos en JAVA (2) Ampliación de clases (2) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (3) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (10) Aprendiendo a desarrollar en Windows 8 (5) Aprendiendo UML en 24 Horas (Autor : Joseph Schmuller ) (30) Arquitectura (29) Arquitectura del Computador (3) Arquitectura del Computador - Historia de la informática (1) Asignación de direcciones IP (23) Aspectos fundamentales de bases de datos (5) Auditoría de la dirección (2) Auditoría de Sistemas (3) Auditoría Informática - Un enfoque práctico - Mario G . Piattini y Emilio del Peso (7) Avanzado (23) Base de Datos (67) Básico (23) Bios (29) Business Productivity Online Suite - BPOS (3) Capa de Red (22) Capa de Transporte (16) Capítulo 1 - Documentos HTML5 (6) Capítulo 10. API Web Storage (2) Capítulo 11. API IndexedDB (4) Capítulo 12. API File (1) Capítulo 2. Estilos CSS y modelos de caja (7) Capítulo 3. Propiedades CSS3 (4) Capítulo 4. Javascript (6) Capítulo 5. Video y audio (6) Capítulo 6. Formularios y API Forms (8) Capítulo 7. API Canvas (5) Capítulo 8. API Drag and Drop (2) Capítulo 9. API Geolocation (2) CCNA1 v5.0 (212) CCNA1 v6.0 (23) CCNA2 v5.0 (26) CCNA3 v5.0 (25) CCNA4 v5.0 (23) CD-ROM (3) Chapter 1 How does Xamarin.Forms fit in? (7) Chapter 2 Anatomy of an app (5) Cisco (314) Cloud Computing (3) CNNA v5.0 Routing & Switching (233) CNNA v6.0 Routing & Switching (2) Codigo (2) Computadora (32) Configuración (29) Configuración de un sistema operativo de red (21) Control (29) Creación de tipos de datos y tablas (3) Creación y Administración de bases de datos (3) Creando la Interface de la Aplicación Windows (50) Creating Mobile Apps with Xamarin.Forms (13) Cuenta (29) Curso (32) Curso Aprendiendo a Programar (25) Datos (3) Desarrollando en Windows 8 - AVANZADO (2) Desarrollando en Windows 8 - BÁSICO (3) Desarrollando en Windows 8 - INTERMEDIO (2) Desarrollo (2) Desarrollo .Net (21) Desarrollo avanzado de Windows Store Apps usando C# (1) Desarrollo basado en conceptos de Ingeniería de Software para Visual Studio (2) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (37) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (Autor: Luis Dueñas Huaroto) (29) Desarrollo en Microsoft Visual Studio (44) Desarrollo en Microsoft Visual Studio - AVANZADO (15) Desarrollo en Microsoft Visual Studio - BÁSICO (14) Desarrollo en Microsoft Visual Studio - INTERMEDIO (18) Desarrollo en Windows Phone 8 (13) Diagnostico (4) Diagrama (3) Diagramas de actividades (2) Diagramas de colaboraciones (2) Diagramas de secuencias (2) Digital (2) Diplomado (2) Disco (29) Disco Duro (4) Diseño de aplicaciones de Windows 8 en HTML 5 (7) Dispositivos Electrónicos (11) Doctorado (2) Ejemplos (3) Ejemplos de algoritmos (27) El camino hacia el CSS3 (3) El diseño web flexible (6) El elemento de diseño Canvas (3) El enfoque de los sistemas (3) El flujo de un programa (2) El gran libro de HTML5 - CSS3 y Javascript - Autor: Juan Diego Gauchat (55) El principio de organicidad (7) Electrónica (2) Elementos de un sistema (5) Empresas (2) Entrada y salida (4) Entropía y neguentropía (7) Estrategia (2) Estructura de un programa Java (12) Estructuras de almacenamiento (10) Estructuras de control (6) Estructuras de las tablas en SQL Server (2) Estructuras fundamentales de los datos (2) Ethernet (21) Evolución y Familias de los Microprocesadores (15) Exámen (23) Exploración de la red (23) Extensión de clases (4) Facebook (4) Familia Intel (15) Forefront (8) Función (3) Funciones de una red (12) Funciones de una red informática (1) Fundamentos de C# para absolutos principiantes (17) Fundamentos de programación en Java (50) Generaciones de la computadora (5) Gestión (3) Gestión de riesgos - Auditoría de Sistemas (1) GONZALO MARTÍNEZ (1) Grupos Facebook (1) Harvard (29) Historia de las computadoras (11) HTML5 y CSS3 - Autor: Christophe Aubry (99) HTML5 y CSS3 aplicadal texto (7) HTML5 y CSS3 para los formularios (15) Imágenes (2) Implementación de Windows 7 (11) Información (31) Informática (29) Ingeniería (4) Instalar (29) Inteligencia (2) Inteligencia de Negocios con SQL Server (3) Intermedio (23) Internet (29) Internet Explorer 9 (3) Introducción a ASP.NET 5 (8) Introducción a Java (7) Introducción a jQuery (8) Introducción a la Auditoría de Sistemas (2) Introducción a la teoría general de sistemas (Oscar Johansen Bertoglio) (39) Introducción a Networking (2) Introducción a Window Forms (5) Introducción al acceso a datos con ADO .NET (9) Investigación de Operaciones (12) Java (52) Jump Start de consultas en las bases de datos de Microsoft SQL Server 2012 (8) La definición de un Sistema (6) La evolución del HTML y del CSS (3) La nueva sintaxis HTML5 (12) LA QUINTA DISCIPLINA en la práctica (Autor : Peter Senge) (28) Las animaciones en CSS3 (5) Las transformaciones CSS3 (11) Las transiciones con CSS3 (8) Licenciamiento Microsoft (3) Local Area Network (LAN) - Red de Area Local (2) Lógico (2) Los elementos de la estructura en html5 (9) Los elementos multimedia: audio y vídeo (2) Los estilos de caja en CSS3 (13) Los nuevos selectores de CSS3 (6) Maestría (2) Mantenimiento de Mouse y Teclado (2) Manual de Microsoft SQL Server - Full Transact SQL (68) Manual de soporte técnico para escuelas sobre windows 7 (42) Marco Teorico de Investigación de Operaciones (6) Medios de Almacenamiento (11) Medios de Networking (2) Mejorando la Interface de las Aplicaciones Windows (26) Memoria Tipos y Clases (5) Método (2) Metodología (1) Microsoft (324) Microsoft Lync 2010 (7) Microsoft Silverlight 4.0 (2) Microsoft Virtual Academy (356) Modelo (2) Modelo OSI y TCP-IP (2) Modelos con poco grado de dificultad de Programación Lineal - Investigación de Operaciones (13) Modelos con razonable grado de dificultad de Programación Lineal - Investigación de Operaciones (10) Modelos de desafio de Programación Lineal - Investigación de Operaciones (5) Modelos difíciles de Programación Lineal - Investigación de Operaciones (5) Modelos Fáciles de Programación Lineal - Investigación de Operaciones (13) Modelos lineales con solver (3) Modulo (23) Movimiento (2) Mozilla (29) MS SQL Server (77) MS Virtualization para Profesionales VMware - Gestión (3) MS Virtualization para Profesionales VMware- Plataforma (4) MVA (263) Negocio (2) Nivel Avanzado Desarrollo .Net (6) Nivel Básico Desarrollo .Net (11) Nivel Intermedio Desarrollo .Net (8) Normas técnicas peruanas y su evolución - Auditoría de Sistemas (1) Nube Privada - Avanzado (6) Nube Privada - Básico (6) Nube Privada - Intermedio (6) Office 365 (3) Optimización de Escritorio (10) Optimización de Escritorio - Avanzado (4) Optimización de Escritorio - Básico (3) Optimización de Escritorio - Intermedio (3) ORACLE 10g - ADMINISTRACIÓN Y ANÁLISIS (3) Oracle 10g y el Grid Computing (3) Organización aleatoria y secuencial (1) Partes principales de la Mainboard (12) Perceptron (2) Perfil (2) Periféricos de Entrada / Salida (15) Pesi (2) PHP y MySQL - Manual de aprendizaje para crear un sitio web - Autor : Olivier ROLLET (79) Plan (2) Plataforma (29) PMBOK (24) PMBOK - Guía de los fundamentos para la dirección de proyectos (24) PMBOK - INFLUENCIA DE LA ORGANIZACIÓN Y CICLO DE VIDA DEL PROYECTO (6) PMBOK - Introducción (11) PMBOK - PROCESOS DE LA DIRECCIÓN DE PROYECTOS (5) Prevención - Herramientas e Instrumentos de Medida (9) Principios básicos de enrutamiento y switching (186) Proceso (2) Proceso de auditoría de sistemas informáticos (2) Programación en Android - Auor : Salvador Gómez Oliver (46) Programación paso a paso de C# - Autor : Nacho Cabanes (16) Protocolos y comunicaciones de red (17) Proyecto (2) Qué es un sistema (4) Red de Área Local Inalámbrica (WLAN) (4) Redes (30) Redes inalámbricas - WIRELESS - Conocimiento general (15) Redes neuronales (2) Redes y Comunicaciones (45) Reparación de Fuentes - UPS - Estabilizadores (10) Reparación de Impresoras (9) Reparación de Monitores (16) Router (29) Seguridad en la Nube (3) Seminario (23) Server (24) Sharepoint 2010 - Nivel Básico (6) Sharepoint 2010 - Niveles Avanzados (18) Sharepoint 2010 - Niveles Avanzados - Básico (8) Sharepoint 2010 - Niveles Avanzados - Intermedio (9) Sinergia y recursividad (4) Sistema (33) Sistema de Cableado Estructurado (9) Software (30) SOLUCIÓN GRÁFICA DE MODELOS DE PROGRAMACIÓN LINEALES - INVOPE (8) Soporte a Infraestructura (3) SQL (38) SQL Azure - Introducción (3) Subsistemas de control (4) Tablas (4) Tarjeta Principal del Sistema (10) Tarjetas de Interfaces (7) Tecnología (31) Tecnologías LAN (1) TEORÍA GENERAL DE SISTEMAS (1) Tic (2) Tipo (2) TML5 y CSS3 - Autor: Christophe Aubry (12) Trabajando con el Formulario (7) Un diseño HTML5/CSS3: dConstruct 2011 (3) Un diseño HTML5/CSS3: FlipThru (2) Un diseño HTML5/CSS3: The Cat Template (2) Usando Controles Windows Forms (12) Usando Herramientas de Datos de Visual Studio (6) Ventas (2) Virtualización Hyper - V Nivel Básico (5) Virtualización Hyper - V Nivel Intermedio (5) What’s New in Windows 8.1 Security (4) Window (29) Windows 7 Segunda Fase - AVANZADO (4) Windows 7 Segunda Fase - BÁSICO (6) Windows 7 Segunda Fase - INTERMEDIO (4) Windows 8 - Vista Previa (4) Windows 8.1 To Go (2) Windows Azure (3) Windows Phone 7 (2) Windows Server 2008 R2 (3) Windows Server 2012 - Gestión y Automatización (3) Windows Server 2012 R2 Essentials (7) Windows Server 2012: Almacenamiento (5) Windows Server 2012: Identidad y Acceso (4) Windows Server 2012: Revisión Técnica (7) Xamarin (1)

Páginas vistas en total según Google