viernes, 10 de febrero de 2017

Inteligencia en la interfaz de usuario



¿Qué es Javascript?
  • Es un lenguaje de programación que los browser directamente leen e interpretan en el momento en que cargamos nuestra página web.
  • Se usa principalmente del lado del cliente, o sea, en nuestra computadora, implementado como parte de un navegador web y nos permite hacer mejoras en la interfaz de usuario y páginas web dinámicas.
  • Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web, como Internet Explorer, Firefox o Chrome.
Librerías en Javascript
  • Qué significa que la gente haga programas abiertos para reutilizar? Grupos de programadores en todo el mundo han ido desarrollando lo que se llaman librerías, que no son mas que un conjunto de funcionalidades en un lenguaje determinado, en este caso javascript, para hacer determinadas tareas.
  • Qué tareas? Con algunas librerías podemos por ejemplo corroborar que los campos en un formulario se hayan cargado correctamente o que no estén vacíos. O podemos crear animaciones con imágenes, o simplemente mostrar un calendario para que un usuario elija una fecha. Son cosas que parecieran sencillas, y realmente lo son si utilizamos las librerías que tenemos a disposición.
Eventos
  • Para usar las librerías vamos a tener que entender algunas cosas. Y siempre que trabajemos con Javascriptdel lado del cliente tendremos que manejar lo que son Eventos.
  • Los eventos son todas las acciones que el usuario inicia: dar clic sobre un botón, presionar las teclas del teclado, etc. Cada vez que se produce un evento, se crea un objeto.
  • Cada lenguaje de programación tiene su propio modelo de eventos.
  • Javascriptregistra las fuentes de eventos (teclado, ratón, etc). La aplicación se queda escuchando y en el caso de que ocurra un evento utilizamos la información recibida para realizar las acciones adecuadas.
Programación del lado del cliente
  • Comencemos por el principio. En desarrollo web, existen una categorización que define dos tipos de tecnologías: del lado del cliente y del lado del servidor.
  • Las tecnologías del lado del servidor guardan información y modelos de datos en el server y luego envían el código de la página web al navegador del usuario cuando este lo requiere. Las tecnologías del lado del cliente directamente se interpretan y ejecutan directamente en el navegador del usuario.
  • En general, ambas tecnologías interactúan para crear un sitio web completo.
  • Javascriptes una tecnología del lado del cliente que puede ser utilizada para una variedad de cosas, como ser:
    • Validación de formularios
    • Crear efectos
    • Cambiar estilos dinámicamente
    • Hacer cálculos complejos
    • Etc.
  • Javascriptse ha convertido en una tecnología sumamente importante porque el procesamiento del lado del cliente es mas eficiente que del lado del servidor y es orientado a eventos (que veremos luego), que son las interacciones del usuario con la interfaz.
Un primer ejemplo en JS
  • Para realizar nuestro primer programa en Javascript, tomemos el HTML que hicimos en el capítulo anterior, nuestro Hola Mundo
  • Y saquemos lo que hay en el tagh1 y cambiemos nuestro titlea Mi primer programa en Javascripty agregamos en el bodyuna función para escribir información
<!DOCTYPE html>
<html>
<head>
<title>Mi primer programa en Javascript</title>
</head>
<body>
<script language=”javascript” type=”text/javascript”>
document.write(“<h1>Hola Mundo desde Javascript</h1>”);
document.write(“<br/>Este es mi primer programa en Javascript!”);
</script>
</body>
</html>

Corriendo nuestro ejemplo
  • Clickeenen el archivo HTML para abrirlo y verán el resultado. Lo que hace el tagscript es decir que allí en el HTML se insertará un programa, y defino el lenguaje en el que estará el mismo, en este caso Javascript. Luego dentro de mi código JS estoy escribiendo el documento HTML lo que se encuentra entre comillas, que no es mas ni menos que código HTML para que el navegador lo interprete y muestre lo correspondiente.
  • Pero la potencia de Javascript, viene de lo que llamamos Eventos, que veremos en la sección 3, pero que de manera simple, son todas las interacciones que hace un usuario con la interfaz. De esa manera cada vez que ocurre un evento podemos activar lo que se llaman “funciones de JS” que realizarán algún tipo de procesamiento y acción.
Funciones
  • En general, el tagde Javascriptpara funciones se suele poner en el tagHead, y luego definimos una función utilizando la palabra function:
<script language=”javascript” type=”text/javascript”>
functiondecirHola()
{
document.write(“Hola Mundo”);
}
</script>
  • Y luego lo que haremos, en el body, será llamar a la función:
<script language=”javascript” type=”text/javascript”>
decirHola();
</script>

Librerías
  • La otra manera de incluir funcionalidades en JS en nuestros programas, reutilizando código ya escrito, es llamando a librerías externas. Esto lo podemos hacer poniendo una línea como la siguiente:
<script language=”javascript” type=”text/javascript” src=”attached.js”></script>
  • De esta manera, es que podremos utilizar librerías como jQuery, que veremos en la próxima sección, solamente incluyendo el llamado a la misma insertando la siguiente línea en el head:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
  • Lo que haremos entonces será simplemente, esperar la ocurrencia de un evento y cuando ello ocurra, llamar alguna función de Javascriptpara que realice algún tipo de acción
  • Para mas información: http://www.w3schools.com/js/default.asp
jQuery
  • jQueryes una librería de JavaScript que funciona de manera rápida, es liviana y rica en funcionalidad. jQuerypermite manipular el HTML para modificarlo dinámicamente, nos permite un mejor manejo de eventos, animación y Ajax (que veremos luego), de manera mucho más simple que funciona en prácticamente todos los navegadores.
  • JQueryse puede descargar e incluirlo en nuestro proyecto directamente, o se puede utilizar desde un servidor remoto, como vimos anteriormente.
Instrucciones de jQuery
  • La manera de escribir código para jQueryes muy sencilla, y tiene cierta forma similar con CSS y con Javascript. La sintaxis está hecha a medida para la selección de los elementos HTML y realizar alguna acción sobre el elemento.
$(selector).acción()
  • Por ejemplo:
    • $(this).hide() –oculta el elemento donde se está haciendo foco
    • $("p").hide() –oculta todos los elementos <p>.
    • $(".test").hide() –oculta todos los elementos con class="test".
    • $("#test").hide() –oculta el elemento id="test".
  • Entre las animaciones y efectos que podemos agregar a nuestra página utilizando jQuery, se encuentran:
    • Hide/Show
    • Fade
    • Slide
    • Animate
    • Stop
    • Callback
    • Chaining
  • Y para manipular el HTML de nuestra página podremos utilizar funcionalidades como:
    • Get
    • Set
    • Add
    • Remove
  • Para mas información ingresar en:http://jquery.com/
Eventos en profundidad
  • Nada de lo que vimos tiene sentido si no entendemos en profundidad lo que significa un evento. Mucha de la programación de hoy día se maneja mediante eventos, ya sea en una web o un dispositivo móvil.
  • La definición corta es que un evento es una acción o acontecimiento detectado por el programa que puede ser manejado por el mismo. Típicamente, el programa tiene uno o más lugares dedicados a manejar los eventos. La fuente mas usual de eventos es el usuario (que pulsa una tecla en el teclado, mediante el clickde un mouse, el tapen una pantalla táctil, etc). Otra fuente podría ser un dispositivo de hardware, como un temporizador o reloj. Cualquier programa también puede generar su propio conjunto de eventos, por ejemplo, para comunicar la finalización de una tarea.
Programación orientada a eventos
  • Los programas se basan en los eventos para modificar su comportamiento en respuesta a los mismos, a menudo con el objetivo de ser interactivo. De esta manera es que se programan sistemas que son orientados a eventos.
  • En la programación web y en la programación de aplicaciones para dispositivos móviles, los eventos existentes son muchos y variados. Simplemente para activarlos debemos agregar programación que realice algo cuando ese evento ocurre. Si no existe ese código no significa que el evento no esté ocurriendo sino simplemente que no haremos nada con el mismo
Algunos eventos comunes
  • Algunos de los eventos mas comunes que se utilizan en programación web y móvil son:
    • onLoad: se dispara cuando se carga la página, antes de cualquier acción
    • onFocus: cuando ponemos el foco en un campo de ingreso de datos
    • onKeyPress: cuando se presiona una tecla
    • onKeyUp: cuando se suelta una tecla presionada
    • onKeyDown: cuando se se esta presionando una tecla
    • onClick: cuando se presiona el botón del mouse
    • onDblClick: doble clickdel mouse
    • onMouseMove: cuando se mueve el mouse
    • onMouseOver: cuando el mouse pasa sobre un elemento

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