Cap 4

Capítulo 4: Hacia la interfaz con el usuario
4.1 Un primer acercamiento a la programación del lado del

cliente
4.1.1 ¿Qué es HTML, CSS y JavaScript?
Las pantallas de un sistema web se hacen aplicando diversas herramientas, entre las que destacan el lenguaje de marcas
de hipertexto (HTML: HyperText Markup Language), las hojas de estilo en cascada (CSS: Cascading Style Sheets) y el
lenguaje JavaScript.
 HTML es el lenguaje que permitirá especificar la forma en que se visualizará la página web, basado en campos de
captura, botones y tablas, generalmente.
 Las hojas de estilo en cascada (CSS), se describirán los aspectos visuales, como el color o el tipo de letra.
 JavaScript, en realidad es una combinación de lenguaje C y Java hacia la parte cliente de la web, aunque
actualmente también pueden utilizarse instrucciones para JavaScript del lado del servidor.
4.1.2 La coherencia entre el diseño visual y la labor del programador
Con programación web se puede superar el diseño plano de las pantallas, el más generalizado. Además, el diseño debe
ser consistente con la funcionalidad.
Code.studio.org, curso de programación con un diseño

visual excelente, realizado a través del lenguaje JavaScript.
Equilibrio de diseño y funcionalidad. Imagen conceptual,

exterior e interior de la Biblioteca de Seattle.
4.1.3 Funcionamiento obvio y adaptable, el modelo actual de los sitios web
Los usuarios no deben pensar cómo funciona un sitio de internet, en otras palabras, el manejo de la página debe ser
muy intuitivo: la colocación del menú y los hipervínculos, la estructura de los títulos y los subtítulos e incluso, por obvio
que parezca, en cual sitio se encuentra el usuario, entre otros aspectos.
• Es necesario hacer pruebas con usuario reales, lo más cercano al contexto real en que los sistemas trabajarán (prueba de
usabilidad).
• El sitio debe ser lo más fácil de usar (“si algo es complicado de utilizar, simplemente no lo uso demasiado”). Sus opciones, botones
y letreros deben ser evidentes.
• “No leemos las páginas; las hojeamos”. Por tanto, la estructura de la página debe ser fácilmente identificable de un vistazo usando,
entre otras técnicas, una jerarquía visual clara.
• Dejar claro sobre lo que se puede hacer clic.
• Disminuir el ruido visual, es decir, aquellos elementos visuales que no aportan información y distraen la atención. Eso incluye las
palabras e instrucciones innecesarias. En este sentido, menos es más.
• Las opciones en listas desplegables deben ser fácilmente localizables.
• El usuario debe ubicar de un vistazo en qué menú y submenú se encuentra.
4.2 Los primeros elementos de HTML y CSS
4.2.1 “El Dinosaurio”. Inicio con HTML
La primera pregunta: ¿con cuál ambiente comenzar?

Realicemos un primer experimento: transcribamos en
un archivo de Word el cuento más corto del mundo:
“Cuando despertó, el dinosaurio todavía estaba allí” de
Augusto Monterroso, guardemos el archivo en HTML y
después consultémoslo desde el bloc de notas de
Windows. Como resultado obtendremos más de 700
líneas de código.
Otro programa realizado con un editor sencillo consta
de aproximadamente 15 líneas, como puede verse en
la figura.
4.2.2 Estilos en HTML
Aunque las opciones de formato permiten hacer un texto visualmente más atractivo, es importante cuidar otros aspectos
igualmente importantes: deben ayudarnos a identificar la estructura de la página para hacerla más legible (título,
subtítulos, notas al pie de la imagen, etc.) y también facilitar la navegación a través del sitio web.
4.2.3 Tablas y estilos
El uso de tablas y una primera hoja de estilo, facilitan el diseño de pantallas. Existe un principio de diseño básico:
cualquier información de un sistema previsible de cambiar a mediano plazo debiera ser modificable con facilidad por el
usuario y/o por el programador, y ese cambio ser consistente a lo largo de todo el sistema. De allí las hojas de estilo.
Encaminarse hacia la facilidad de mantenimiento debe ser una habilidad inculcada desde los primeros cursos.
4.2.4 HTML5 y CCS3
¿Sería adecuado dar un panorama de todas las características disponibles en HTML5 y CCS3? Posiblemente, pero se
requerirían centenares de cuartillas, como lo ha demostrado la experiencia de varios libros de texto.
4.3 Panorama general de HTML y CSS3
4.3.1 Empleo de CSS3

¡Pantallas y más pantallas con HTML5 y CCS3! Prácticamente los elementos que aquí se describen y otros que son
necesarios para lo que se desee realizar y que no hayamos descrito (es imposible abarcarlo todo). Tenemos que lograr
la imagen visual deseada para el usuario. Cada versión ha incorporado propiedades para hacer a CSS más potente y
adaptativo.
4.3.2 Herencia en CSS

El concepto de herencia en CSS tiene cierta similitud con el de la programación orientada a objetos: una propiedad
aplica para el contenedor indicado, pero a su vez para todos los elementos contenidos en él.
4.3.3 Formulario con JavaScript

Otros elementos de HTML son los formularios. Dentro de ellos están diversos campos que serán llenados por el usuario
y enviados a otra página web al oprimir un botón. ¿Cómo se toman dichos datos desde la otra página?
Mientras tanto, se usará una rutina en JavaScript para que ésta tome los datos a efecto de realizar el cálculo y
despliegue el resultado en la misma página web (ejemplo ilustrado y explicado en el libro).
4.3.4 Uso de listas para interactuar con el usuario
Las listas son un elemento importante en HTML, dentro de su manejo, existen varias alternativas, las hay ordenadas,
anidadas, de selección única, de selección múltiple, entre otras. El tipo de lista a utilizar dependerá de la necesidades
consideradas dentro del diseño de la página Web.
4.3.5 Algunas novedades de HTML5
 Ya no es necesario el uso de comillas dobles para definir el valor de un atributo.

 Se incorporan nuevos campos para formularios que llevan validaciones incorporadas y facilitan el manejo al usuario:
• color.- código de color de la paleta de colores; • url.- dirección de Internet.

• date.- fecha con calendario emergente; • datalist.- cuadros de texto con la función de
• datetime-local.- fecha y hora local, con selección emergente; autocompletado.
• datetime.- fecha y hora emergente, incluyendo zona horaria; • soporta audio y video de forma nativa sin
• time.- una hora en concreto; necesidad de tener instaladas librerías adicionales
• week.- una semana del año; a través de las etiquetas <audio> y <video>,
• email.- correos electrónicos; respectivamente.
• month.- mes del año; • con canvas es posible dibujar gráficos en 2D y 3D.
• number.- datos numéricos;
4.4 JavaScript
 JavaScript es un lenguaje de programación interpretado... Se define como orientado a objetos, basado en

prototipos, imperativo, débilmente tipado y dinámico.
 JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de
programación Java. Sin embargo Java y JavaScript tienen semánticas y propósitos diferentes.
 Actualmente es ampliamente utilizado para enviar y recibir información del servidor junto con ayuda de otras
tecnologías como AJAX. JavaScript se interpreta en el agente de usuario al mismo tiempo que las sentencias
van descargándose junto con el código HTML.
Nota: Una recomendación es reproducir los ejercicios. Posteriormente, plantear variantes que pueden salir de
libros de JavaScript o de acervo de introducción a la programación. Es indispensable aclarar que en los distintos
ejemplos que se están colocando en este libro no se están abordando todos los temas de JavaScript.
4.4.1 Suma de dos números con JavaScript
La suma de dos números cuyo valor es asignado <!DOCTYPE html>

<html>
directamente en el programa. El ejemplo, servirá <head>
<meta charset="utf-8">
básicamente para notar la forma en que se <link href="estilos.css" type=text/css
rel=stylesheet>
introduce código JavaScript, la definición de <p class=titulopagina>
<title>Suma de dos campos con JavaScript</title>
variables, la concatenación y el despliegue. </p>
</head>
Observe que la definición no lleva tipos <body>
<h1>Suma de dos datos</h1>
explícitos, algo distinto a C y Java; por eso se dice <script type="text/javascript">
var a = 7;
que JavaScript es débilmente tipado. var b = 3;
alert("La variable a vale 7; la b vale 3.");
var c = a + b;
alert("La suma de ambas es " + c);
alert("Su diferencia es " + (a - b));
</script>
</body>
</html>
4.4.2 Serie de Fibonacci con condicionales y ciclos
La serie de Fibonacci inicia con los números 1 y 2.

Después, cada número subsiguiente es la suma de
los dos anteriores:
1, 2, 3, 5, 8, 13, 21, 34, 55, 89…
La serie de Fibonacci es, sin duda, uno de los más

famosos y atrayentes misterios matemáticos.

4.4.3 Uso de rutinas <script type="text/javascript">
var entrada1 = window.prompt("Escriba el primer valor: ", "0");
var entrada2 = window.prompt("Escriba el segundo valor: ", "0");
var a = parseFloat(entrada1);
var b = parseFloat(entrada2);
JavaScript permite la alert("La variable a vale " + a + "; la b vale " + b + ".");
var c = a + b;
definición de funciones. alert("La suma de ambas es " + c);
</script>
Estas se especifican con la
palabra function y si

retornan un resultado, se <script type="text/javascript">
function suma(x, y) {
var resultado = x + y;
utiliza la palabra return, return resultado;
}
igual que en lenguaje C.
var entrada1 = window.prompt("Escriba el primer valor: ", "0");
var entrada2 = window.prompt("Escriba el segundo valor: ", "0");
var a = parseFloat(entrada1);
var b = parseFloat(entrada2);
alert("La variable a vale " + a + "; la b vale " + b + ".");
var c = suma (a, b);
alert("La suma de ambas es " + c);
</script>
4.4.4 Empleo de arreglos
Los arreglos en JavaScript se crean

dinámicamente. Con la palabra
new se construye el objeto en
memoria, que posteriormente
puede ser utilizado para almacenar
los valores que se juzguen
convenientes; por lo común, dicho
arreglo suele recorrerse
posteriormente para desplegar su
contenido.
4.4. Canvas 2D
Ejemplo de JavaScript. Una espiral

rectangular sencilla, que no tendrá otro
objetivo que explorar las posibilidades
de Canvas 2D: el despliegue gráfico que
permite controlar la pantalla pixel a
pixel a través de líneas, elipses y otro
tipo de figuras similares.
Una de los demos para canvas 3d :

“HTML5 Canvas demos by Kevin Roast”,
en:
http://www.kevs3d.co.uk/dev/

Cap 4

Cargado por

Copyright:

Formatos disponibles

Cap 4

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cap 4

Cargado por

Copyright:

Formatos disponibles

Capítulo 4: Hacia la interfaz con el usuario

4.1 Un primer acercamiento a la programación del lado del

Code.studio.org, curso de programación con un diseño

Equilibrio de diseño y funcionalidad. Imagen conceptual,

La primera pregunta: ¿con cuál ambiente comenzar?

4.2.3 Tablas y estilos

4.2.4 HTML5 y CCS3

4.3.1 Empleo de CSS3

4.3.2 Herencia en CSS

4.3.3 Formulario con JavaScript

4.3.5 Algunas novedades de HTML5

 Ya no es necesario el uso de comillas dobles para definir el valor de un atributo.

• color.- código de color de la paleta de colores; • url.- dirección de Internet.

 JavaScript es un lenguaje de programación interpretado... Se define como orientado a objetos, basado en

La suma de dos números cuyo valor es asignado <!DOCTYPE html>

La serie de Fibonacci inicia con los números 1 y 2.

1, 2, 3, 5, 8, 13, 21, 34, 55, 89…

La serie de Fibonacci es, sin duda, uno de los más

Los arreglos en JavaScript se crean

Ejemplo de JavaScript. Una espiral

Una de los demos para canvas 3d :

También podría gustarte