miércoles, 8 de febrero de 2017

La interfaz de usuario



Qué es una interfaz de usuario?

Es el medio con que el usuario puede comunicarse con una máquina, un equipo o una computadora. Esto significa todos los puntos de contacto entre el usuario y el equipo. Normalmente suelen ser fáciles de entender y fáciles de accionar, como en el caso de nuestra página web del capítulo anterior mostrándose en la pantalla, transmitiéndonos el mensaje “Hola Mundo”.

Interfaces de Usuario - Variedades
  • Interfaces alfanuméricas: solo presentan texto. Si alguna vez ustedes vieron computadoras antiguas, habrán notado que solo se podía “hablar” con la computadora, a través de unas pantallas usualmente negras, donde uno simplemente escribía comandos para que la computadora realizara. Hoy día la mayoría de las computadoras siguen brindando la posibilidad de comunicarse con ellas a través de ese tipo de interfaces.
  • Interfaces gráficas de usuario (GUI, graphic user interfaces): permiten comunicarse de una forma muy rápida e intuitiva representando gráficamente los elementos de control y medida. Las páginas web son un claro ejemplo de GUI.
  • Interfaces táctiles: representan gráficamente un "panel de control" en una pantalla sensible que permite interactuar con el dedo de forma similar a si se accionara un control físico. Esto se da mas que todo en dispositivos móviles y tabletas.
Entendiendo las IU
  • Cuando estamos haciendo una aplicación que va a interactuar con los usuarios, o mismo con otras aplicaciones, debemos entender con quien estaremos trabajando y cual es la mejor manera de hacerlo.
  • Sabemos que no es lo mismo interactuar con chicos de nuestra edad, con nuestros papas, nuestros abuelos, o mismo con alguien de otro país que no habla nuestro idioma.
  • También sabemos que no es lo mismo hacer una interfaz para un juego de Xbox que para una PC. Los controles pueden ser distintos, y lo que uno puede estar buscando en un juego de consola puede ser distinto que lo que uno busca en un juego de PC o en una red social. Y tampoco es igual la interfaz para una aplicación para manejar una empresa o un negocio.
  • El secreto es ir siempre paso a paso. Aprendiendo no solo lo técnico que iremos viendo en el curso sino también investigando las mejores prácticas para los distintos tipos de aplicaciones que vayamos construyendo.
  • Por ejemplo, si queremos armar una página web, como el Hola Mundo que construimos. Pero queremos empezar a ponerle un poco de colores y diseño. Vamos a buscar un color muy fuerte que después de un rato haga que se nos canse la vista? O preferimos construir una aplicación en la cual la gente pueda pasar horas sin agotarse?
  • Y el tamaño de letra? Vamos a escribir todo bien chiquito para que a algunos les cueste leer lo que escribimos o preferimos que todos puedan estar a gusto y entender lo que nosotros quisimos transmitir?
  • No es difícil construir una aplicación amigable y que todos quieran usar, pero tenemos que ir aprendiendo lo que debemos y lo que no debemos hacer. Y eso lleva tiempo!
HTML, el Rey del Mundo
  • Si estuviste prestando atención, hablamos sobre las aplicaciones desconectadas, que son aquellas que no necesitan de internet para funcionar.
  • Te estarás preguntando cómo puedo hacer una página web desconectada, cuando su mismo nombre nos indica que es un documento para ser accedido a través de una red. Sin embargo, como les mostramos antes, nuestro navegador es simplemente un programa que cuando le pasamos instrucciones en un lenguaje las va interpretando y mostrando en la ventana para nosotros.
  • Qué pasa si en vez de pasarle una dirección en un servidor que está en alguna parte del mundo le pasamos una dirección de un archivo dentro de nuestra propia máquina?
  • Y eso es lo que vamos a hacer…
Practicando
  • Vamos a arrancar por crear un nuevo archivo en algún lugar de nuestra computadora, y le vamos a poner de nombre index.html. Al ponerle una extensión HTML, le estamos diciendo a nuestro Sistema Operativo que el archivo contiene un determinado tipo de contenido, así como el TXT contiene texto, o el DOC un archivo de Word. Los archivos HTML contienen instrucciones que pueden ser reconocidas y ejecutadas por nuestro navegador.
  • Una vez que creamos nuestro archivo, con el botón derecho del mouse, clickeamos en Abrir con… y elegimos algún editor de texto ( el que quieran está bien). 
  • Tipeamos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<h1>Hola Mundo</h1>
</body>
</html>
  • Guardamos nuestro archivo, y ahora simplemente clickeamos dos veces en él, y veremos como se abre en nuestro navegador predeterminado

HTML – Secciones básicas
  • Cuando escribimos <!DOCTYPE html> le estamos indicando al navegador que todas las instrucciones que va a leer en el documento son pertenecientes al lenguaje HTML.
  • El elemencto <html> Es el elemento principal de un documento HTML y a partir del cual se arranca a trabajar. Contiene el documento por completo y únicamente el DOCTYPE está fuera de él. Debe contener dos y sólo dos elementos: head y body.
  • El elemento <head> contiene los “metadatos” del documento. Qué es un metadato? Es información referida a la página web, que no necesariamente ve el usuario y sirve para distintos propósitos. Por ejemplo: el título (que pueden ver en el elemento <title>), el autor, el estilo, etc.
  • Luego tenemos el elemento <body> donde van las instrucciones de HTML que se verán en la ventana que visualizan ustedes. Es lo que se llama el cuerpo del documento.
  • Y finalmente, tenemos un elemento que no es de estructura, sino de formato propiamente dicho, que es el <h1>.
HTML – Cómo funciona?
  • HTML significa HyperText Markup Language, o Lenguaje de Marcadores de Hipertexto. Un lenguaje de marcador es un sistema desarrollado hace años que nos permite crear un documento al que podremos agregarle algún tipo de marcas que lo hagan distinto a un archivo de texto. La idea detrás de esto es que estas marcas nos permitan realizar distintas anotaciones al documento de forma tal que quien lo lea pueda realizar distintas acciones como ser encontrar una parte determinada, agregarle estilos (negrita, colores, tipos de letra, etc). HTML en particular permite agregarle formato a nuestro texto de forma tal de presentar al usuario una interfaz visualmente rica.
  • Quien en particular lee los archivos HTML es el navegador del usuario. Y lo que hace es darle forma a la interfaz que mostrará de acuerdo a lo que nosotros indiquemos en los marcadores. Esto significa que si le indicamos al navegador que ponga un fondo rojo, letras blancas y una tabla con diversa información, lo haremos mediante el lenguaje HTML y luego el usuario simplemente verá el texto formateado.
Algunas instrucciones básicas

<html>: indica que se está hablando en HTML
<head>: incluye información sobre la página. Esta información no se muestra al usuario
<title>: escribe el titulo de la página en el encabezado el navegador
<body>: es el contenido de la página en sí
<a>: enlaces
<p>: párrafo
<h1>: encabezado de primer nivel
<i>: itálica
<b>: bold/negrita
<br/>: salto de línea
<hr/>: línea horizontal
<ul>: lista no ordenada. Inserta viñetas
<ol>: lista ordenada. Numera cada item
<li>: inserta cada item de las listas
<!-- -->: comentarios. Nos permite escribir información que no será vista por el usuario
<img src=”comunidad.jpg" alt=”Comunidad IT" />, <img src="images/logo.png" />, <a href="http://www.html.net"><img src="logo.png" /></a>
<div>: unidad de contenedor que encapsula otros elementos de página y divide el documento HTML en secciones. Se utilizan elementos <div> para agrupar los elementos HTML y aplicar estilos a los elementos a la vez

Agregando estilos
  • El HTML nos permite darle una estructura a la página, y crear algunos formatos básicos sobre el texto, pero lo mas importante y jugoso del desarrollo de interfaces web viene de la mano de la creación de estilos, mediante diversos atributos. Los mismos se pueden agregar tanto dentro del HTML (lo cual no es recomendado) como a través de una tecnología llamada CSS.
  • Existen una variedad de atributos que se pueden utilizar para definir estilos
Ejemplos de estilos en HTML

<body style="background-color:#ff0000;">: aquí estamos definiendo que el color del fondo de todo lo que hay en mi página web sea #ff0000 (rojo)
<p style="color:green;">: también puedo definir que todo lo que haya en un párrafo determinado de texto sea de color verde.
border="1” (en pixeles): este atributo me permite agregarle un borde a un elemento
width="30%” (en pixeles o porcentaje): con width define el ancho de un element, en este caso para que sea del 30% de la pantalla.
Align (left, center o right): alineación de los elementos hacia la izquierda, derecha o centro
Valign (top, middle, bottom): alineación vertical
Colspan (se usa con la etiqueta <td> para especificar cuántas columnas ocupará la celda, idem rowspan con filas, para cuando estamos creando tablas)
<div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000; border: 1px dotted black;">: en esta línea tenemos diversos atributos, como id, name o title. Pero en particular, todo lo que está en el atributo style es lo que nos permite agregar estilos. 

CSS
  • Pero HTML, no fue originalmente pensado para contener los estilos de la interfaz, sino los contenidos de la misma. Para solucionar esto, la World Wide Web Consortium (W3C) creó lo que se llama CSS o Cascade StyleSheet, que nos permite guardar los estilos en un archivo separado. De esa manera podemos aplicar una hoja de estilos CSS a todos mis archivos HTML a la vez, y de esa manera manejar como voy a presentar mi información tocando en un único lugar.
  • Básicamente, la manera en la que escribiremos una regla de CSS es la siguiente:
h1
{
color:blue;
font-size:12px;
}
  • h1 sería lo que se llama selector, que indica cual es el elemento al cual estaremos aplicando el estilo. En este caso serían todos los h1 del documento. Luego tendremos un listado de una propiedad por línea. Lo que está a la izquierda de los “:” sería el atributo y a la derecha el valor que toma. Por ello el texto será azul y de 12 píxeles de tamaño.
CSS – Selectores x ID
  • Si en vez de asignarle el color azul y el tamaño de 12px a todos los h1 quisiéramos hacerlo con solo uno, podemos utilizar lo que se llama selector de id. Simplemente en el tag del html deberíamos ponerle:

<h1 id=”miID”>…</h1>

  • Y luego en el css la clase quedaría
#miID
{
color:blue;
font-size:12px;
}
  • El ID no se debe repetir en dos elementos de la misma página.
CSS – Selectores x Clase
  • Si en vez de elementos específicos, o de elementos iguales, queremos asignarle un estilo a un conjunto de elementos que pueden ser distintos, se utiliza el selector de clase. Para ello, utilizaremos el atributo class en el HTML:

<h1 class=”miClase”>…</h1>

  • Y en el CSS definiremos el estilo para la clase “miClase”
.miClase
{
color:green;
font-size:15px;
}

CSS – Selectores x elementos x Clase
  • Y también podemos definir elementos específicos que sean modificados por una clase, por ejemplo:
p.miClase
{
color:green;
font-size:15px;
}
  • Esto significa que solo los elementos de párrafo p, con clase “miClase” serán verdes de 15px de altura.
  • Pueden encontrar un listado de los atributos utilizables en CSS en el siguiente link:
  • http://www.w3schools.com/cssref/
Incluyendo estilos en el HTML
  • Finalmente, la manera en la que diremos en nuestro archivo HTML que utilizaremos una hoja de estilos, es agregando en el tag head el link a la misma:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>



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











  

No hay comentarios:

Publicar un comentario

       

Etiquetas

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 (239) 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 (341) Cloud Computing (3) CNNA v5.0 Routing & Switching (260) 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 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 (213) 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