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.
- 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…
- 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 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.
<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
<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.
- 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.
- 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/
- 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!
Twittear
No hay comentarios:
Publicar un comentario