1
2 Capítulo 4: Hacia la interfaz con el usuario4.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.
3 4.1.2 La coherencia entre el diseño visual y la labor del programadorCon 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 4.1.3 Funcionamiento obvio y adaptable, el modelo actual de los sitios webLos 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.
5 4.2 Los primeros elementos de HTML y CSS4.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.
6 4.2.2 Estilos en HTML 4.2.3 Tablas y estilos 4.2.4 HTML5 y CCS3Aunque 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.
7 4.3 Panorama general de HTML y CSS34.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).
8 4.3.4 Uso de listas para interactuar con el usuarioLas 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; date.- fecha con calendario emergente; datetime-local.- fecha y hora local, con selección emergente; datetime.- fecha y hora emergente, incluyendo zona horaria; time.- una hora en concreto; week.- una semana del año; .- correos electrónicos; month.- mes del año; number.- datos numéricos; url.- dirección de Internet. datalist.- cuadros de texto con la función de autocompletado. soporta audio y video de forma nativa sin necesidad de tener instaladas librerías adicionales a través de las etiquetas con canvas es posible dibujar gráficos en 2D y 3D.
9 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.
10 4.4.1 Suma de dos números con JavaScriptLa suma de dos números cuyo valor es asignado directamente en el programa. El ejemplo, servirá básicamente para notar la forma en que se introduce código JavaScript, la definición de variables, la concatenación y el despliegue. Observe que la definición no lleva tipos explícitos, algo distinto a C y Java; por eso se dice que JavaScript es débilmente tipado.