Microsoft Virtual Academy

Cursos tcnicos gratuitos en lnea

Tome un curso gratuito en lnea.

http://www.microsoftvirtualacademy.com

Aprendiendo a Programar
Captulo III

Qu es una interfaz de usuario?

Es el medio con que el usuario puede comunicarse con una
mquina, un equipo o una computadora. Esto significa todos los
puntos de contacto entre el usuario y el equipo. Normalmente
suelen ser fciles de entender y fciles de accionar, como en el
caso de nuestra pgina web del captulo anterior mostrndose
en la pantalla, transmitindonos el mensaje Hola Mundo.

Interfaces de Usuario - Variedades

Interfaces alfanumricas: solo presentan texto. Si alguna vez ustedes vieron

computadoras antiguas, habrn notado que solo se poda hablar con la
computadora, a travs de unas pantallas usualmente negras, donde uno
simplemente escriba comandos para que la computadora realizara. Hoy da la
mayora de las computadoras siguen brindando la posibilidad de comunicarse con
ellas a travs de ese tipo de interfaces.
Interfaces grficas de usuario (GUI, graphic user interfaces): permiten comunicarse
de una forma muy rpida e intuitiva representando grficamente los elementos de
control y medida. Las pginas web son un claro ejemplo de GUI.
Interfaces tctiles: representan grficamente un "panel de control" en una pantalla
sensible que permite interactuar con el dedo de forma similar a si se accionara un
control fsico. Esto se da mas que todo en dispositivos mviles y tabletas.

Entendiendo las IU

Cuando estamos haciendo una aplicacin 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 pas que no habla nuestro
idioma.
Tambin 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 aplicacin
para manejar una empresa o un negocio.

Entendiendo las IU

El secreto es ir siempre paso a paso. Aprendiendo no solo lo tcnico que iremos viendo en el
curso sino tambin investigando las mejores prcticas para los distintos tipos de aplicaciones
que vayamos construyendo.
Por ejemplo, si queremos armar una pgina web, como el Hola Mundo que construimos.
Pero queremos empezar a ponerle un poco de colores y diseo. Vamos a buscar un color muy
fuerte que despus de un rato haga que se nos canse la vista? O preferimos construir una
aplicacin en la cual la gente pueda pasar horas sin agotarse?
Y el tamao 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 difcil construir una aplicacin 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 atencin, hablamos sobre las aplicaciones desconectadas,

que son aquellas que no necesitan de internet para funcionar.
Te estars preguntando cmo puedo hacer una pgina web desconectada, cuando
su mismo nombre nos indica que es un documento para ser accedido a travs 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 direccin en un servidor que est en alguna
parte del mundo le pasamos una direccin de un archivo dentro de nuestra propia
mquina?
Y eso es lo que vamos a hacer

Practicando
Vamos a arrancar por crear un nuevo archivo en algn lugar de nuestra
computadora, y le vamos a poner de nombre index.html. Al ponerle una
extensin 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 botn derecho del mouse,
clickeamos en Abrir con y elegimos algn editor de texto ( el que quieran
est bien).

Practicando

Tipeamos el siguiente cdigo:

<!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 bsicas

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 slo dos elementos: head y body.
El elemento <head> contiene los metadatos del documento. Qu es un metadato? Es
informacin referida a la pgina web, que no necesariamente ve el usuario y sirve para
distintos propsitos. Por ejemplo: el ttulo (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 vern 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 Cmo funciona?

HTML significa HyperText Markup Language, o Lenguaje de Marcadores de Hipertexto. Un

lenguaje de marcador es un sistema desarrollado hace aos que nos permite crear un
documento al que podremos agregarle algn tipo de marcas que lo hagan distinto a un
archivo de texto. La idea detrs 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 informacin, lo haremos mediante el lenguaje HTML y luego
el usuario simplemente ver el texto formateado.

Algunas instrucciones bsicas

<html>: indica que se est hablando en HTML

<head>: incluye informacin sobre la pgina. Esta informacin no se muestra al usuario
<title>: escribe el titulo de la pgina en el encabezado el navegador
<body>: es el contenido de la pgina en s
<a>: enlaces
<p>: prrafo
<h1>: encabezado de primer nivel
<i>: itlica
<b>: bold/negrita
<br/>: salto de lnea
<hr/>: lnea horizontal
<ul>: lista no ordenada. Inserta vietas
<ol>: lista ordenada. Numera cada item
<li>: inserta cada item de las listas
<!-- -->: comentarios. Nos permite escribir informacin 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 pgina 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 pgina, y crear
algunos formatos bsicos sobre el texto, pero lo mas
importante y jugoso del desarrollo de interfaces web viene de
la mano de la creacin de estilos, mediante diversos atributos.
Los mismos se pueden agregar tanto dentro del HTML (lo cual
no es recomendado) como a travs de una tecnologa 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 pgina web sea #ff0000 (rojo)
<p style="color:green;">: tambin puedo definir que todo lo que haya en un prrafo 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): alineacin de los elementos hacia la izquierda, derecha o centro
Valign (top, middle, bottom): alineacin vertical
Colspan (se usa con la etiqueta <td> para especificar cuntas 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 lnea 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 informacin tocando en un nico lugar.

CSS

Bsicamente, la manera en la que escribiremos una regla de CSS es la siguiente:

h1
{
color:blue;
font-size:12px;
}

h1 sera lo que se llama selector, que indica cual es el elemento al cual estaremos aplicando
el estilo. En este caso seran todos los h1 del documento. Luego tendremos un listado de una
propiedad por lnea. Lo que est a la izquierda de los : sera el atributo y a la derecha el
valor que toma. Por ello el texto ser azul y de 12 pxeles de tamao.

CSS Selectores x ID

Si en vez de asignarle el color azul y el tamao de 12px a todos los h1 quisiramos

hacerlo con solo uno, podemos utilizar lo que se llama selector de id. Simplemente
en el tag del html deberamos ponerle:

<h1 id=miID></h1>
Y luego en el css la clase quedara
#miID
{
color:blue;
font-size:12px;
}
El ID no se debe repetir en dos elementos de la misma pgina.

CSS Selectores x Clase

Si en vez de elementos especficos, 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 tambin podemos definir elementos especficos que sean modificados por una clase, por
ejemplo:

p.miClase
{
color:green;
font-size:15px;
}
Esto significa que solo los elementos de prrafo p, con clase miClase sern 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>