Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Capitulo III
Capitulo III
Aprendiendo a Programar
Captulo III
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!
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
<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<h1>Hola Mundo</h1>
</body>
</html>
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>.
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
<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
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
<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.
<h1 class=miClase></h1>
.miClase
{
color:green;
font-size:15px;
}
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.