. Cabeceras. Son títulos de nivel 1 a 6. H1 es el más grande h6 el  . más pequeño.      L W      Y

: párrafo. Es una de las etiquetas más utilizadas. Permite definir los párrafos que forman .E   el texto de una página.      C  C      J
Salto de línea.  . L        P

Lista no ordenada A      A P  
Lista ordenada      L .  J  
1. Elemento de lista      C  C      E  .

   Lista de definición Y 

   Término de una definición      W L   . E  

   descripción de una definición.      W  S   Imagen.      W W      S  Longdesc = ”url”. Indica una URLen la que puede encontrarse una descripción más W      E  . detallada de la imagen.      L  Name = “texto”. Nombre del elemento. W      Y .E   Height = “unidad de medida”. Indica la altura con la que se deba mostrar la       C imagen.  C      J  .      P  Width = “unidad de medida”. Indica la anchura con la que se debe mostrar la L   A imagen.      A P        L . Tabla. Las tablas HTML utilizan los mismos conceptos de filas, columnas, cabeceras y .  J   títulos que los que se utilizan en cualquier otro entorno. Hasta hace años las tablas se      C utilizaban, aparte de para mostrar información tabular, para definir la estructura de las páginas C      E  .web. Esa técnica es ya obsoleta existiendo la etiquetas div, y no debe usarse la etiqueta table Y  para este fin, si no para el lógico, que es mostrar información en forma de tabla.      W L   .  Summary = “texto”. Permite describir el contenido de la tabla (lo utilizan los E        W buscadores y las personas discapacitadas visualmente)  S        W
   
   11
   
   Promoción Interna de Técnico de Soporte Informático
   
   
   
   TEMA 20
   
   Técnico de Soporte informático
   
   Border = “numero”. Grosor del borde de la tabla.
   
   Fila de tabla.

   Celda de tabla.  Colspan = “numero”. Número de columnas que ocupa esta celda  Rowspan = “numero”. Número de filas que ocupa esa celda.

   Celda cabecera de tabla. (Mismos atributos que td) Un ejemplo del código de una tabla sencilla sería el siguiente:   Tabl a en HTML Cabecer a 1Cabecer a 2Cabecer a 3 A1A2A3 B1B2B3 Se mostraría de la siguiente manera en el navegador: 12 Promoción Interna de Técnico de Soporte Informático TEMA 20      S      E  .      L      Y      C      J  .      P      A      L      C      E  . Especifica el número de frames      W  Cols =”numero”. Número de columnas.      W  Rows =”numero”. Número de filas.      W Define cada frame  Src = “archivo”. Documento html que se muestra en ese frame.  Name =”nombre”. Nombre del frame. Técnico de Soporte informático W W W .E    C L   A P   .  J    C Y  L   .E    S   W      S  Frameborder = “numero”. Borde del frame. W      E  .      L  Noresize > este atributo indica que no se puede cambiar el tamaño del frame. W      Y  Scroll = “auto/yes/no”. Indica si el frame tendrá scroll siemrpe, nunca o depende . E        C del tamaño.  C      J  . Contenido alternativo para los navegadores que no admiten frames. L        P A Cabe destacar que los Frames o Marcos están quedando obsoletos.      A P        L .  J        C <span> Se utiliza para diferenciar trozos de contenido especiales, a los que habrá que dar un C      E  .estilo diferente. Y  <form> Formulario. Encierra todos los contenidos de un formulario.      W L   .  action = "url"  Indica la URL que se encarga de procesar los datos del formulario E        W  S    method = "POST o GET"  Método HTTP empleado al enviar el formulario      W<br /> <br /> 13<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> <br /> <br /> enctype = "application/xwwwformurlencoded o multipart/<br /> <br /> <br /> <br /> formdata"  Tipo de codificación empleada al enviar el formulario al servidor (sólo se indica de forma explícita en los formularios que permiten adjuntar archivos)<br /> <br /> <br /> <br /> <br /> <br /> accept = "tipo_de_contenido"  Lista separada por comas de todos los tipos de archivos aceptados por el servidor (sólo para los formularios que permiten adjuntar archivos) <br /> <br /> Otros: acceptcharset, onsubmit, onreset<br /> <br /> <input /> Control de un formulario. <br /> <br /> type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button"  Indica el tipo de control que se incluye en el formulario<br /> <br /> <br /> <br /> name = "texto"  Asigna un nombre al control (es imprescindible para que el servidor pueda procesar el formulario)<br /> <br /> <br /> <br /> value = "texto"  Valor inicial del control<br /> <br /> <br /> <br /> size = "unidad_de_medida"  Tamaño inicial del control (para los campos de texto y de password se refiere al número de caracteres, en el resto de controles se refiere a su tamaño en píxel)<br /> <br /> <br /> <br /> maxlength = "numero"  Máximo número de caracteres para los controles de texto y de password<br /> <br /> <br /> <br /> checked = "checked"  Para los controles checkbox y radiobutton permite indicar qué opción aparece preseleccionada<br /> <br /> <br /> <br /> disabled = "disabled"  El control aparece deshabilitado y su valor no se envía al servidor junto con el resto de datos<br /> <br /> <br /> <br /> readonly = "readonly"  El contenido del control no se puede modificar<br /> <br /> <br /> <br /> src = "url"  Para el control que permite crear botones con imágenes, indica la URL de la imagen que se emplea como botón de formulario<br /> <br /> <br /> <br /> alt = "texto"  Descripción del control<br /> <br /> <select>. Lista desplegable. <br /> <br /> size = "numero"  Número de filas que se muestran de la lista (por defecto sólo se muestra una)<br /> <br /> <br /> <br /> multiple = "multiple"  Si se incluye, se permite seleccionar más de un elemento<br /> <br /> <br /> <br /> Otros: name, disabled, onchange, onfocus, onblur<br /> <br /> 14<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> <option> Elemento de una lista desplegable. selected = "selected"  Indica si el elemento aparece seleccionado por defecto al cargarse la página<br /> <br /> W      S  value = "texto"  El valor que se envía al servidor cuando el usuario elige esa opciónW      E  .      L  Otros: label, disabled W      Y <textarea> Área de texto .E        C  rows = "numero"  Número de filas de texto que mostrará el textarea  C      J  .  cols = "numero"  Número de caracteres que se muestran en cada fila del textarea L        P A  Otros: name, disabled, readonly, onselect, onchange, onfocus, onblur      A P        L <! …. >. Comentarios. .  J        C Todos estos elementos de formulario y sus funciones y manejo serán estudiados más adelante C      E  .en este tema. Y       W L   . E        W  S        W <br /> <br /> Estas son solamente unas nociones muy básicas de cómo crear una página web con HTML. En caso de que se desee profundizar en el tema se recomienda practicar mucho con las etiquetas.<br /> <br /> W      S Los permiten incluir “programación” en una página web. En realidad es una W      E lista de comando que se pueden ejecutar con la participación del usuario o sin ella. En  . definitiva estamos hablando de un lenguaje de programación, que suele emplearse dentro de W      L un contexto (otra aplicación) y que no permite programar aplicaciones independientes, si no      Y que necesitan de un intérprete. .E        C  C Existen múltiples lenguajes de script: JavaScript, VBScript, Perl etc… Sin embargo, por      J  .compatibilidad, los más empleados son VBScript y con mucha diferencia JavaScript. L        P La diferencia entre ellos se encuentra básicamente en su sintaxis, aunque los dos nacieron con A      A el mismo fin que es dotar de un lenguaje de script rápido y sencillo a las páginas web. P        L .  J        C  C      E  . Y  Habitualmente los lenguajes script en páginas HTML se utilizan para cuatro fines que son los      W L   siguientes: . E        W1) Validación de datos. Se hace en el equipo cliente y consiste en verificar que los datos  S        W que se van a enviar en un formulario son adecuados dependiendo de unas reglas 2.2 LENGUAJE DE SCRIPT lenguajes de script <br /> <br /> 15<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> marcadas. Por ejemplo, que en un campo número de teléfono no aparezca una letra, que un campo obligatorio no esté vacío, que un campo email es realmente un email, e infinidad de validaciones más. 2) Actualizar campos en un formulario. Como por ejemplo cuando se actualiza una lista desplegable dependiendo del botón de radio que se haya seleccionado. 3) Procesar información que no requiere base de datos. Por ejemplo sumar dos número de dos campos de formulario, convertir euros a pesetas, etc. 4) Servir de base para la utilización de otras tecnologías. DHTM, ActiveX. Los lenguajes de script además pueden actuar sobre lo que está mostrando el navegador, a través de los objetos integrados que se representan en el documento, la ventana activa, cada uno de los controles del formulario, etc. Para conseguir esto se emplea un modelo de objetos denominado Document Object Model ( DOM ). Gracias a DOM, por ejemplo, podemos cambiar, por ejemplo, el color de un párrafo dependiendo de un botón de radio que se haya pulsado.<br /> <br /> INCRUSTAR EL SCRIPT Hay tres maneras de llamar a un script dentro de una página HTML: 1) Usando una etiqueta &lt;script></script>. Esta etiqueta permite incluir el código directamente en la página o que apunte a un fichero externo usando el atributo src. 2) Usando los atributos de etiquetas HTML que soportan scripts. Por ejemplo con el atributo “onclick” de un botón de formulario, se llamaría a una función JavaScript. <input type=”button” onclick=”pulsar()” /> Al pulsar el botón se ejecuta la función “pulsar()” que será un trozo de código que se encuentre o bien en el mismo documento o bien en otro. 3) Incluyendo en el atributo href de un elemento a. Por ejemplo: <a href=”javascript:pulsar()” rel="nofollow">Función Pulsar</a> Al pinchar en el enlace definido por esta etiqueta <a> se ejecutará la función javascript “pulsar()”.<br /> <br /> El código del script puede escribirse en un fichero a parte que después se guardará con la extensión . js (en el caso de JavaScript). Este fichero será “llamado” por el documento html dentro de la etiqueta <head><head>. Por ejemplo: &lt;script type="text/javascript" src="scripts/script.js"><br /> <br /> 16<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> Otra manera de escribir el código es dentro de las etiquetas <head></head> del mismo documento html. De la siguiente manera:<br /> <br /> W      S W      E  .      L W      Y .E        C PARTES DE L SCRIPT  C      J  .El código de un script o programa JavaScript consta de los elementos que se dan aL        P continuación, los cuales se discutirán en detalle en los siguientes temas: A      A principal. Cualquier código situado entre las etiquetas &lt;script></script> y queP        L Cuerpo . no sea una definición de una función.  J        C  C Manipuladores de eventos. Los eventos son acciones que ocurren en respuesta a algo      E  . que el usuario realiza. Cuando un usuario hace click con el ratón es un evento (onclick)Y  pulsa una tecla también es un evento… etc. Los manipuladores de eventos son      W cuando L   scripts que se definen para enlazar la aparición de un evento con la llamada a. E        W funciones JavaScript.  S   Las funciones son rozos de código JavaScript que permanecen a la espera      W Funciones. de ser ejecutados por otras secciones de código. Es un concepto muy utilizado en <scr i pt l anguage=”J avaScr i pt” > Códi go<br /> <br /> </ s cr i pt ><br /> <br /> cualquier lenguaje de programación.<br /> <br /> W      S W Al igual que con HTML para profundizar en este tema se requiere un estudio centrado en el      E  . tema, además de unos mínimos conocimientos de programación.      L W      Y .E        C 2.3 INTRODUCCIÓN PROGRAMACIÓN WEB  C      J  .Daremos una visión muy genérica sobre este concepto, ya que es fundamental tener una baseL        P A sólida de programación para poder llevarlo a la práctica.      A P        L Ya hemos visto que el “lenguaje” utilizado para montar la estructura de una página web es . HTML o bien XHTML, pero estas etiquetas solamente permiten mostrar información en la  J        C pantalla, no va más allá.  C      E  .Las aplicaciones web son una combinación de diferentes lenguajes de programación yY  llamadas a bases de datos que consiguen que una web muestre información en función de loL        W que el código de la programación estipule además de ser capaz de leer y almacenar contenido. E        W en una base de datos.  S        W<br /> <br /> 17<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> Con todo esto se consigue el concepto de “web dinámica” donde los contenidos se muestran y cambian en función de estas llamadas a bases de datos y en función de esta programación.<br /> <br /> Es importante saber diferenciar entre dos conceptos: los lenguajes del lado cliente y los lenguajes del lado servidor. <br /> <br /> Lenguajes del  lado cliente. Son los que puede ejecutar directamente el navegador<br /> <br /> del equipo donde se está visualizando la página web. Un ejemplo es JavaScript. Cuando un usuario se conecta a una página que tenga un código JavaScript, su propio navegador es el encargado de “compilar” y ejecutar este código sin necesidad de un servidor. <br /> <br /> Lenguajes del lado servidor: son los lenguajes que se ejecutan en el servidor donde<br /> <br /> está alojada la página. Estos lenguajes son por ejemplo PHP, ASP… El propio navegador no es capaz de interpretar ciertos códigos, por eso, al conectarse a una página con este tipo de código, el propio servidor que lo aloja está preparado para ejecutar las sentencias de estos lenguajes.<br /> <br /> Varios lenguajes de programación sirven para este cometido, los más usados son los siguientes: LENGUAJE PHP<br /> <br /> Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Preprocessor”, (inicialmente se llamó Personal Home Page). Surgió en 1995, desarrollado por PHP Group. PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas características específicas. Los archivos cuentan con la extensión (php). VENTAJAS:<br /> <br /> Muy fácil de aprender. Se caracteriza por ser un lenguaje muy rápido. Soporta en cierta medida la orientación a objeto. Clases y herencia. Es un lenguaje multiplataforma: Linux, Windows, entre otros. Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras. Capacidad de expandir su potencial utilizando módulos.<br /> <br /> 18<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una de sus funciones.<br /> <br /> W      S Incluye gran cantidad de funciones. W      E  .      L No requiere definición de tipos de variables ni manejo detallado del bajo nivel. W      Y .E        C  C      J  . Se necesita instalar un servidor web. L        P A Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más      A P        L ineficiente a medida que las solicitudes aumenten de número. .  J   La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP.      C  C      E  . La programación orientada a objetos es aún muy deficiente para aplicaciones grandes. Y       W Dificulta la modularización. L   . E   Dificulta la organización por capas de la aplicación.      W  S        W Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.<br /> <br /> DESVENTAJAS:<br /> <br /> SEGURIDAD:<br /> <br /> PHP es un poderoso lenguaje e intérprete, ya sea incluido como parte de un servidor web en forma de módulo o ejecutado como un binario CGI separado, es capaz de acceder a archivos, ejecutar comandos y abrir conexiones de red en el servidor. Estas propiedades hacen que cualquier cosa que sea ejecutada en un servidor web sea insegura por naturaleza.<br /> <br /> W      S W      E  . PHP está diseñado específicamente para ser un lenguaje más seguro para escribir programas      L CGI que Perl o C, y con la selección correcta de opciones de configuración en tiempos deW      Y compilación y ejecución, y siguiendo algunas prácticas correctas de programación. .E        C  C      J  . L        P A Es una tecnología del lado de servidor desarrollada por Microsoft para el desarrollo de sitio      A web dinámicos. ASP significa en inglés (Active Server Pages), fue liberado por Microsoft enP        L 1996. Las páginas web desarrolladas bajo este lenguaje es necesario tener instalado Internet.  J        C Information Server (IIS).  C      E  .ASP no necesita ser compilado para ejecutarse. Existen varios lenguajes que se pueden utilizarY  para crear páginas ASP. El más utilizado es VBScript, nativo de Microsoft. ASP se puede hacer      W L   también en Perl and Jscript (no JavaScript). El código ASP puede ser insertado  junto con el . E   código HTML. Los archivos cuentan con la extensión (asp).      W  S        W LENGUAJE ASP<br /> <br /> VENTAJAS:<br /> <br /> 19<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> Usa Visual Basic Script, siendo fácil para los usuarios. Comunicación óptima con SQL Server. Soporta el lenguaje JScript (Javascript de Microsoft). DESVENTAJAS: Código desorganizado. Se necesita escribir mucho código para realizar funciones sencillas. Tecnología propietaria. Hospedaje de sitios web costosos.<br /> <br /> ASP.NET<br /> <br /> Este es un lenguaje comercializado por Microsoft, y usado por programadores para desarrollar entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnología ASP, fue lanzada al mercado mediante una estrategia de mercado denominada .NET. El ASP.NET fue desarrollado para resolver las limitantes que brindaba tu antecesor ASP. Creado para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Los archivos cuentan con la extensión (aspx). Para su funcionamiento de las páginas se necesita tener instalado IIS con el Framework .Net. Microsft Windows 2003 incluye este framework, solo se necesitará instalarlo en versiones anteriores. VENTAJAS: Completamente orientado a objetos. Controles de usuario y personalizados. División entre la capa de aplicación o diseño y el código. Facilita el mantenimiento de grandes aplicaciones. Incremento de velocidad de respuesta del servidor. Mayor velocidad. Mayor seguridad. DESVENTAJAS: Mayor consumo de recursos.<br /> <br /> 20<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br />      S      E  .      L      Y      C      J  .      P      A      L      C      E  .      W      W      W<br /> <br /> W W W .E    C L   A P   .  J    C Y  L   .E    S  <br /> <br />      S      E  .      L      Y      C      J  .      P      A      L      C      E  .      W      W      W<br /> <br /> W W W .E    C L   A P   .  J    C Y  L   .E    S  <br /> <br /> 21<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> 3. PRINCIPIOS DE L DISEÑO DE INTERFACES. Ya vimos en el primer punto de este tema una introducción al diseño de interfaces. Ampliaremos la información en este apartado. Cuando se habla de Sitios Web, se llama interfaz al conjunto de elementos de la pantalla que permiten al usuario realizar acciones sobre el Sitio Web por el que está navegando. Por la misma razón, se considera parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de acción. Todos estos elementos deben estar preparados para ofrecer unos servicios determinados al usuario, para que éste pueda obtener lo que entró a buscar cuando visitó el Sitio Web. Por todo esto, cada uno de los elementos que se integren dentro de la interfaz debe estar pensado para causar un efecto sobre el usuario y deben ser utilizados con un fin. En este sentido, es esencial considerar que uno de los autores más citados en cuanto a la usabilidad de los Sitios Web, destaca que los elementos más importantes de la portada de cualquier Sitio Web se pueden resumir en cuatro premisas generales: Dejar  claro el   propósito del  sitio: se refiere a que el sitio debe explicar a quién<br /> <br /> pertenece y qué permite hacer a quienes lo visitan; se entiende que debe hacerlo de manera simple y rápida. Por ejemplo, ayuda en este sentido el cumplimiento de las normas referidas a uso de URLs y logotipos oficiales.  Ayudar  a los usuarios a encontrar  lo que necesitan: implica que debe contar con un<br /> <br /> sistema de navegación visible y completo, pero que además deberá estar complementado por algún sistema de búsqueda que sea efectivo para acceder al contenido al que no se logra acceder o que no se encuentra a simple vista. Demostrar  el  contenido del  sitio: significa que el contenido se debe mostrar de<br /> <br /> manera clara, con títulos comprensibles por parte del usuario y con enlaces hacia las secciones más usadas que estén disponibles donde el usuario los busque. Ayudará en este sentido tener un seguimiento de las visitas para comprender qué es lo más visto y lo más buscado del Sitio Web. Usar  diseño visual  para mejorar  y  no  para definir  la interacción del  Sitio Web: se<br /> <br /> refiere a que los elementos gráficos del Sitio Web deben estar preparados para ayudar en los objetivos del sitio y no sólo como adornos utilizados para rellenar espacio. Aunque se trata de uno de los temas más debatibles, su alcance no es el de restringir el uso de imágenes y elementos gráficos, sino a que su uso sea adecuado para la experiencia de uso que se desea ofrecer.<br /> <br /> 22<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> Como se puede apreciar, el foco central de una interfaz es permitir que el usuario que llega como visitante consiga los objetivos que lo trajeron al Sitio Web y que éste le ponga fácil el acceso a los contenidos a través de sus pantallas.<br /> <br /> W Para conseguir este objetivo, es necesario que la interfaz adopte los elementos, que      S detallamos en este capítulo, a través de los cuales será posible conseguir el cumplimiento deW      E  . los postulados antes señalados.      L W      Y .E        C ELEMENTOS DE LA INTERFAZ  C      J  .La interfaz del Sitio Web, cualquiera sea el objetivo que persiga, debe tener una serie deL        P normas de carácter general, referidas a sus características como sistema de información yA      A comunicación. Gracias al cumplimiento de esas normas, el usuario conseguirá acceder a lasP        L informaciones que se le ofrecen y, además, podrá realizar las acciones que el organismo.  J   propietario del espacio digital le entrega a través de este sistema.      C  C      E  .Dichas características tienen que ver con los elementos de identificación, de navegación, deY  contenidos y de acción que el Sitio Web debe contener, todos los cuales se analizan en las      W L   siguientes páginas. . E        W La existencia e importancia de dichos elementos, como asimismo la ubicación que deben tener  S   en la interface, se ha visto comprobada a través de las investigaciones que se han hecho en      W torno a los Sitios Web. W W W .E    C L   A P   .  J    C Y  L   .E    S  <br /> <br /> Respecto de los elementos de la interface, los aspectos más relevantes a tener en consideración son los siguientes:<br /> <br />      S Uso de logotipos      E  .      L Sistema de navegación      Y Áreas de contenidos      C Áreas de interacción      J  . Experiencia de usuario      P      A      L      C      E  .      W      W      W<br /> <br /> 23<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> La ubicación relativa de estos elementos podría ser, por ejemplo, la siguiente.<br /> <br /> SISTEMA DE NAVEGACIÓN Es el conjunto de elementos presente en cada una de las pantallas, que permite a un usuario moverse por las diferentes secciones de un Sitio Web y retornar hasta la portada, sin sentir la sensación de haberse perdido en ese camino. Para conseguir esto se incluyen elementos como: Menú de secciones: es una zona de la interfaz en la que se detallan las secciones o categorías en las que está dividida la información contenida en el Sitio Web. Menú de rastros (migas de pan o breadcrumb): es el menú que indica mediante los nombres de cada sección o categoría del menú la distancia que separa a la página actual de la portada. Es el típico menú que suele aparecer justo debajo de la cabecera de las páginas, indicando, o bien las páginas por las que hemos navegado hasta llegar donde nos encontramos, o bien la estructura de páginas del sitio con respecto al documento donde estamos. Normalmente se suele utilizar la segunda. Suele tener el siguiente sencillo formato: (Ejemplo) Inicio > Menú de libros > Novelas<br /> <br /> Identificación de secciones: debe estar en la zona superior de la página, cerca de la zona donde se encuentra el logotipo que se haya elegido para identificar al Sitio Web. Es una manera de identificar, a través de colores, o imágenes la sección de la página donde nos encontramos.<br /> <br /> 24<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> Botones de acción: son aquellos elementos que permiten realizar acciones directas relativas a la navegación y que se muestran como parte de ésta (Volver al inicio, Contacto, Mapa del sitio).<br /> <br /> W Pie de página: es la zona inferior de cada pantalla cumple el relevante papel de completar su la      S información que se ofrece en las zonas superiores de navegación. (Nombres, direcciones,W      E  . teléfonos, emails…)      L W      Y .E        C ÁREA DE CONTENIDOS  C      J  .Son las zonas en la que se expone la información en cada página web, sin importar el formatoL        P A o los medios que ésta utilice.      A P   Lo ideal es que se divida en tres zonas. Título, resumen y contenido.      L .  J        C  C      E  .ÁREA DE INTERACCIÓN Y       W L   Se entiende por "áreas de interacción" a las zonas en la que se ofrece realización de acciones. por parte de los usuarios del Sitio Web, a través de las cuales pueden utilizar los servicios de laE        W  S   institución que pone en marcha el espacio digital. La interacción, en este sentido, va desde      W acciones menores que pueden ser enlaces para mayor información o suscripción a servicios informativos periódicos, hasta la realización de trámites complejos como la obtención de certificados o el pago de obligaciones.<br /> <br />      S      E  .      L      Y      C      J  .      P      A      L      C      E  .      W      W      W<br /> <br /> W W W .E    C L   A P   .  J    C Y  L   .E    S  <br /> <br /> 25<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> 4. FORMULARIOS ELECTRÓNICOS Todos hemos rellenado alguna vez un formulario en papel. Los formularios en papel son famosos habitualmente por su dificultad para rellenarlos, y en el caso de formularios rellenos a mano, su dificultad para descifrarlos posteriormente. Los formularios electrónicos vienen a minimizar muchas de las desventajas de los que se presentan en papel. Es posible diseñar un formulario electrónico de forma que contenga información de ayuda para la persona que va a rellenarlo. Estos formularios electrónicos pueden contener campos de texto, listas desplegables, casillas para seleccionar entre varias opciones (una de ellas o varias), campos de texto largo donde escribir observaciones… Puesto que el formulario se rellena desde el propio ordenador, se evitan todos los posibles problemas de interpretación de los datos introducidos, como sucede con los formularios en papel rellenos a mano. Además, si la computadora está conectada a una red, los formularios electrónicos pueden ser cumplimentados y compartidos de la misma forma que se comparte cualquier otro tipo de documento, eliminando así por completo la necesidad de los formularios en papel. Actualmente existen muchas maneras de crear formularios electrónicos, por ejemplo, los propios programas ofimáticos tipo Office permiten la creación de esta herramienta. Son muy utilizados también los formularios en pdf, configurados a través de la aplicación Adobe Acrobat, pero es necesaria la versión Proffesional para poder editarlos, aunque no para rellenarlos. Los que nos interesan en este caso son los formularios creados con html, a través de las etiquetas que ya vimos en su correspondiente apartado. Vamos a profundizar un poco más en la utilidad y uso de cada una de ellas.<br /> <br /> FORMULARIOS CO N HTML Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y <input>. La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de elementos (botones y cuadros de texto). Ya vimos en el apartado 2 de este tema las etiquetas correspondientes a formularios, y sus atributos.<br /> <br /> 26<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> La mayoría de formularios utilizan sólo los atributos action y method. El atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador.<br /> <br /> W      S El atributo method establece la forma en la que se envian los datos del formulario al servidor.W      E  . Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos      L W valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los      Y formularios incluyen el atributo method="get" o el atributo method="post". .E        C Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más  C      J  .información que el método GET. En general, el método GET admite como máximo el envío deL   unos 500 bytes de información. La otra gran limitación del método GET es que no permite el      P A envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven      A en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientrasP        L que los datos enviados mediante POST no se pueden ver tan fácilmente. .  J        C  C      E  . Y       W L   La mayoría de los elementos se forman con la etiqueta <input>. El atributo type diferencia a. E   cada uno de los diez controles que se pueden crear con la etiqueta <input>.      W  S   El atributo name es el más importante en los campos del formulario. De hecho, si un campo no      W incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el ELEMENTOS DE FORMULARIO<br /> <br /> atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario. Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor para que procese la información y genere una respuesta adecuada. En el servidor, la aplicación que procesa los datos debe obtener en primer lugar toda la información introducida por el usuario. Para ello, utiliza el valor del atributo name para obtener los datos de cada control del formulario.<br /> <br /> W      S W      E  .      L W      Y .E        C  C El valor del atributo type es “text”.      J  . L        P A      A P        L .  J        C  C      E  .Se trata del elemento más utilizado en los formularios. Y       W Se puede controlar el tamaño con el atributo “size”, el número máximo de caracteres aL   . introducir con el atributo “maxlength”, el valor por defecto con “value” y si es editable o noE        W con “readonly”.  S        W CUADRO DE TEXTO<br /> <br /> Nombr e:<br /> <br /> <i nput t ype=" t ext " name=" nombr e" val ue=" " / ><br /> <br /> 27<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> CUADRO DE CONTRASEÑA<br /> <br /> El valor de type es “password”.<br /> <br /> Pass wor d: <i nput t ype=" passwor d" name=" pass" val ue=" " / ><br /> <br /> La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles. CHECKBOX<br /> <br /> El valor de type es “checkbox”.<br /> <br /> El i ge opci ones <i nput t ype=" checkbox" val ue=”1” / > Opci on 1 <i nput t ype=" checkbox" val ue=”2” / > Opci on 2 <i nput t ype=" checkbox" val ue=”3” / > Opci on 3<br /> <br /> Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes. Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo “checked”. RADIOBUTTON<br /> <br /> El atributo type es “radio”.<br /> <br /> 28<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> W      S W      E  .      L W      Y .E        C  C      J  . L        P Los controles de tipo radiobutton son similares a los controles de tipo checkbox, peroA presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se      A P        L utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones . relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se  J        C deselecciona la otra opción que estaba seleccionaba.  C      E  .El atributo “name” se emplea para indicar los radiobutton que están relacionados. Por loY  tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el navegadorL        W sabe que están relacionados y puede deseleccionar una opción del grupo de radiobutton. E        W cuando se seleccione otra opción.  S        W El i ge una opci ón:<br /> <br /> <i nput t ype=" r adi o" val ue=”op”/ > Opci on 1 <i nput t ype=" r adi o" val ue=”op”/ > Opci on 2 <i nput t ype=" r adi o" val ue=”op”/ > Opci on 3<br /> <br /> BOTÓN DE ENVÍO DE FORMULARIO<br /> <br /> El valor de type es “submit”.<br /> <br /> W      S W      E  .      L W El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre      Y este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se. E        C establece el atributo value, el navegador muestra el texto predefinido Enviar consulta.  C      J  . L        P A El valor de type es “reset”.      A P        L .  J        C  C      E  .Aunque su uso era muy popular hace unos años, la mayoría de formularios modernos ya noY       W utilizan este tipo de botón. Se trata de un botón especial que borra todos los datosL   . introducidos por el usuario y devuelve el formulario a su estado original. E        W  S        W <i nput t ype=" submi t " val ue=”Envi ar ”/ ><br /> <br /> BOTÓN DE RESETEO<br /> <br /> <i nput t ype=" r eset " val ue=”Bor r ar campos”/ ><br /> <br /> 29<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> FICHEROS ADJUNTOS<br /> <br /> El valor de type es “file”.<br /> <br /> <i nput t ype="f i l e" / ><br /> <br /> Los formularios también permiten adjuntar archivos para subirlos al servidor. El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botón que permite navegar por los directorios y archivos del ordenador del usuario. CAMPOS OCULTOS<br /> <br /> El valor de type es hidden. <i nput t ype=" hi dden" / ><br /> <br /> Los campos ocultos se emplean para añadir información oculta en el formulario. Los campos ocultos no se muestran por pantalla, de forma que el usuario desconoce que el formulario los incluye. Normalmente los campos ocultos se utilizan para incluir información que necesita el servidor pero que no es necesario o no es posible que la establezca el usuario. BOTÓN DE IMAGEN<br /> <br /> El valor de type es “image”.<br /> <br /> <i nput t ype=" i mage" s r c=”acept a. png” / ><br /> <br /> El aspecto de los botones de formulario se puede personalizar por completo, ya que incluso es posible utilizar una imagen como botón. El atributo src indica la URL de la imagen que debe mostrar el navegador en lugar del botón normal. Su principal ventaja es que permite personalizar por completo la estética de los botones y mostrarlos con un aspecto homogéneo en todos los navegadores. El principal inconveniente es que ralentiza la carga del formulario y que si se quiere modificar su aspecto, es necesario crear una nueva imagen. BOTÓN<br /> <br /> El valor de type es “button”.<br /> <br /> 30<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> <i nput t ype=" but t on" val ue=”Guar dar cambi os” / ><br /> <br /> Algunos formularios complejos necesitan botones más avanzados que los de enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estándar HTML/XHTML define un botón de tipo genérico.<br /> <br /> W      S W      E Este tipo de botones sólo son útiles si se utilizan  junto con el lenguaje de programación  .      L JavaScript. Si la página incluye código JavaScript, los botones de este tipo se pueden programarW para que realicen cualquier tarea compleja cuando se pulsa sobre ellos.      Y .E        C  C      J  . L        P A Este es el primer elemento que vemos que no utiliza etiqueta <input>      A P        L El área de texto utiliza la etiqueta <textarea> .  J        C  C      E  . Y       W L   . E        W  S        W ÁREA DE TEXTO<br /> <br /> Obser vaci ones: <br / ><br /> <br /> W      S W      E  . Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que es      L W mucho más cómodo de introducir que en un campo de texto normal.      Y Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura y. E        C altura. La anchura del área de texto se controla mediante el atributo cols, que indica las  C      J columnas o número de caracteres que se podrán escribir como máximo en cada fila. La altura  .del área de texto se controla mediante rows, que indica directamente las filas de texto queL        P A serán visibles.      A P        L .  J   Utiliza la etiqueta <select> para definir la lista y <option> para definir cada uno de los      C  C elementos. Hay diferentes tipos de listas desplegables: listas que solo muestran un valor a la      E  .vez y solo permiten seleccionar un valor, listas que muestra varios pero solo permiteY  seleccionar uno y por último listas que muestran y permiten seleccionar varios elementos.      W L   . La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista. Cada unaE        W de las opciones de la lista se define mediante una etiqueta <option>. El atributo value de cada  S   opción es obligatorio, ya que es el dato que se envía al servidor cuando el usuario envía el      W <t ext ar ea r ows=" 8" col s=" 40" ></ t ext ar ea><br /> <br /> LISTA DESPLEGABLE<br /> <br /> 31<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> formulario. Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo selected a la opción deseada.<br /> <br /> 32<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> W      S 5.1 ACCESIBILIDAD W      E  . El principal objetivo de la accesibilidad web es el de permitir a cualquier usuario,      L W independientemente del tipo de discapacidad que sufra, el acceso a los contenidos del sitio y      Y permitirle la navegación necesaria para realizar las acciones deseadas. .E        C Los sitios web accesibles no solamente facilitan el acceso de sus contenidos a los usuarios  C      J  .discapacitados, sino que también permiten ofrecer la misma funcionalidad con dispositivosL   muy limitados (dispositivos sin pantalla o con pantallas minúsculas, dispositivos sin teclado ni      P A ratón, etc.).      A P        L Las cuatro principales ventajas de diseñar un sitio web completamente accesible son las .  J   siguientes:      C  C      E  . Los sitios accesibles separan completamente diseño y contenido. Y  sitio accesible puede ser accedido por multitud de dispositivos diferentes sinL        W Unnecesidad de reescribir el código HTML. . E        W Los sitios accesibles son los únicos con una audiencia potencial global, ya que permiten S        W el acceso a todos los usuarios y a todos los dispositivos. 5. ACCESIBILIDAD, DISEÑO UNIVERSAL Y USABILIDAD<br /> <br /> Generalmente, los sitios accesibles son más fáciles de utilizar también para los usuarios sin discapacidades.<br /> <br /> W      S W      E  . La creación de sitios accesibles puede realizarse siguiendo las recomendaciones establecidas      L W por el W3C y que se recogen en el documento      Y (http://www.w3.org/WAI/intro/wcag.php) (WCAG). .E        C Las recomendaciones del WCAG 1.0 están formadas por 65 requisitos que un sitio web debe  C      J cumplir para considerarse accesible. Los requerimientos se agrupan en prioridades.  . L        P Los requisitos de prioridad 1 son de obligado cumplimiento, los de prioridad 2 sonA recomendables y los de prioridad 3 son deseables.      A P        L Si un sitio web cumple con todos los requisitos de prioridad 1, se considera que el sitio es.  J        C conforme al nivel A de accesibilidad. El nivel AA de accesibilidad está reservado para los sitios  C      E cumplan todos los requisitos de prioridad 1 y prioridad 2. Finalmente, los sitios que  .que Y  cumplen los 65 requisitos, son conformes al nivel AAA de accesibilidad.      W L   . E        W  S        W Web Content   Accessibility  Guidelines<br /> <br /> 33<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> 5.2. DISEÑO UNIVERSAL El objetivo del diseño universal es “simplificar la realización de las tareas cotidianas mediante la construcción de productos, servicios y  entornos más sencillos de usar  por  todas las personas y  sin esfuerzo alguno. El diseño universal, así  pues, beneficia a todas las personas de todas las edades y habilidades.” <br /> <br /> Consta de siete principios básicos que deben cumplir estos servicios y productos, entre ellos las páginas y aplicaciones web. Los siete principios y sus pautas para que se cumplan son: 1) Principio: Uso equiparable El diseño es útil y vendible a personas con diversas capacidades. Pautas para el Principio 1: <br /> <br /> Que proporcione las mismas maneras de uso para todos los usuarios: idénticas cuando es posible, equivalentes cuando no lo es.<br /> <br /> <br /> <br /> Que evite segregar o estigmatizar a cualquier usuario.<br /> <br /> <br /> <br /> Las características de privacidad, garantía y seguridad deben estar igualmente disponibles para todos los usuarios.<br /> <br /> <br /> <br /> Que el diseño sea atractivo para todos los usuarios.<br /> <br /> 2) Principio: Uso flexible El diseño se acomoda a un amplio rango de preferencias y habilidades individuales. Pautas para el Principio 2 <br /> <br /> Que ofrezca posibilidades de elección en los métodos de uso.<br /> <br /> <br /> <br /> Que pueda accederse y usarse tanto con la mano derecha como con la izquierda.<br /> <br /> <br /> <br /> Que facilite al usuario la exactitud y precisión.<br /> <br /> <br /> <br /> Que se adapte al paso o ritmo del usuario.<br /> <br /> 3) Principio: Simple e intuitivo El uso del diseño es fácil de entender, atendiendo a la experiencia, conocimientos, habilidades lingüísticas o grado de concentración actual del usuario. Pautas para el Principio 3 <br /> <br /> Que elimine la complejidad innecesaria.<br /> <br /> 34<br /> <br /> Promoción Interna de Técnico de Soporte Informático <br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> Que sea consistente con las expectativas e intuición del usuario.<br /> <br /> <br /> <br /> Que se acomode a un amplio rango de alfabetización y habilidades lingüísticas.<br /> <br /> <br /> <br /> Que dispense la información de manera consistente con su importancia.<br /> <br /> W      S W      E Que proporcione avisos eficaces y métodos de respuesta durante y tras la finalización  .      L de la tarea. W      Y 4) Principio: Información perceptible .E        C El diseño comunica de manera eficaz la información necesaria para el usuario, atendiendo  C a      J  .las condiciones ambientales o a las capacidades sensoriales del usuario. L        P Pautas para el Principio 4 A      A use diferentes modos para presentar de manera redundante la informaciónP        L Que . esencial (gráfica, verbal o táctilmente)  J        C Que proporcione contraste suficiente entre la información esencial y sus alrededores. C      E  . Y  Que amplíe la legibilidad de la información esencial.      W L   Que diferencie los elementos en formas que puedan ser descritas (por ejemplo, que. E        W haga fácil dar instrucciones o direcciones).  S        W Que proporcione compatibilidad con varias técnicas o dispositivos usados por personas <br /> <br /> <br /> <br />   <br /> <br /> <br /> <br /> con limitaciones sensoriales.<br /> <br /> W      S El diseño minimiza los riesgos y las consecuencias adversas de acciones involuntarias o W      E accidentales.  .      L W Pautas para el Principio 5      Y . Que disponga los elementos para minimizar los riesgos y errores: elementos másE        C usados, más accesibles; y los elementos peligrosos eliminados, aislados o tapados.  C      J  . Que proporcione advertencias sobre peligros y errores. L        P A Que proporcione características seguras de interrupción.      A P        L Que desaliente acciones inconscientes en tareas que requieren vigilancia. .  J        C  C 6) Principio: Que exija poco esfuerzo físico      E  .El diseño puede ser usado eficaz y confortablemente y con un mínimo de fatiga. Y       W L   Pautas para el Principio 6 . E        W Que permita que el usuario mantenga una posición corporal neutra.  S        W 5) Principio: Con tolerancia al error<br /> <br /> <br /> <br />   <br /> <br /> <br /> <br /> 35<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> <br /> <br /> Que utilice de manera razonable las fuerzas necesarias para operar.<br /> <br /> <br /> <br /> Que minimice las acciones repetitivas.<br /> <br /> <br /> <br /> Que minimice el esfuerzo físico continuado.<br /> <br /> 7) Principio: Tamaño y espacio para el acceso y uso Que proporcione un tamaño y espacio apropiados para el acceso, alcance, manipulación y uso, atendiendo al tamaño del cuerpo, la postura o la movilidad del usuario. Pautas para el Principio 7 <br /> <br /> Que proporcione una línea de visión clara hacia los elementos importantes tanto para un usuario sentado como de pie.<br /> <br /> <br /> <br /> Que el alcance de cualquier componente sea confortable para cualquier usuario sentado o de pie.<br /> <br /> <br /> <br /> Que se acomode a variaciones de tamaño de la mano o del agarre.<br /> <br /> <br /> <br /> Que proporcione el espacio necesario para el uso de ayudas técnicas o de asistencia personal.<br /> <br /> Fuente: Centro  para el  Diseño Universal  (NC  State University, The Center  for  Universal  Design, an initiative of  the College of Design) Traducción y adaptación: Fundación Sidar <br /> <br /> 5.3. USABILIDAD Según la Organización Internacional para la Estandarización (ISO) la usabilidad puede definirse de dos maneras: ISO/IEC 9126: “La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso” ISO/IEC 9241: “Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”<br /> <br /> La usabilidad implica preguntarse cosas como las siguientes, que pueden responderse realizando análisis de usuarios / visitantes y tareas al planificar un proyecto web:<br /> <br /> 36<br /> <br /> Promoción Interna de Técnico de Soporte Informático<br /> <br /> TEMA 20<br /> <br /> Técnico de Soporte informático<br /> <br /> ¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender? ¿Qué quieren o necesitan hacer los visitantes?<br /> <br /> W      S W      E ¿Cuál es el contexto en el que el visitante está trabajando?  .      L ¿Qué debe dejarse a la máquina? ¿Qué al usuario? W      Y .E   Otras consideraciones incluyen:      C  C      J ¿Pueden realizar fácilmente sus tareas previstas? Por ejemplo, ¿pueden realizar las  . tareas previstas a la velocidad esperada? L        P A ¿Cuánta preparación necesitan los visitantes?      A      L ¿Qué documentación u otro material de apoyo están disponible para ayudar alP   .  J   usuario? ¿Puede éste hallar las respuestas que buscan en estos medios?      C  C      E  . ¿Cuáles y cuántos errores cometen los usuarios cuando interactúan con el producto? Y       W ¿Puede el visitante recuperarse de los errores? ¿Qué ha de hacer para ello? ¿Ayuda elL   producto a recuperarse de los errores? Por ejemplo, ¿muestra el software mensajes de. E        W errores informativos y no amenazantes?  S        W ¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con ¿Cuál es la formación general de los usuarios?<br /> <br /> discapacidades? (Es decir, ¿se ha tenido en cuenta la accesibilidad?)<br /> <br /> W      S W      E  .      L W      Y Los en los que se basa la usabilidad son: .E        C facilidad con la que nuevos usuarios desarrollan una  C      J  . interacción efectiva con el sistema o producto. Está relacionada con la sintetización,L        P familiaridad, la generalización de los conocimientos previos y la consistencia. A      A relativa a la variedad de posibilidades con las que el usuario y el sistemaP        L pueden intercambiar información. También abarca la posibilidad de diálogo, la .  J   multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la      C optimización entre el usuario y el sistema.  C      E  . es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos.Y       W Está relacionada con la capacidad de observación del usuario, de recuperación deL   . información y de ajuste de la tarea al usuario. E        W  S        W Todos estos temas te permitirán, además, fidelizar visitas, es decir, hacer que tus visitantes vuelvan una y otra vez, puesto que al ponerles fácil la navegación por tu sitio mejorarás mucho la imagen de tu web.<br /> <br />  principios básicos<br /> <br /> Facilidad  de  Aprendizaje:<br /> <br /> Flexibilidad:<br /> <br /> Robustez:<br /> <br /> 37<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://idoc.tips/report/sop-inf-t20-final-pdf-free" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Report "Sop Inf t20 Final"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright &copy; 2024 IDOC.TIPS. All rights reserved. <div class="pull-right"> <span><a href="https://idoc.tips/about">About Us</a></span> | <span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> | <span><a href="https://idoc.tips/term">Terms of Service</a></span> | <span><a href="https://idoc.tips/copyright">Copyright</a></span> | <span><a href="https://idoc.tips/contact">Contact Us</a></span> | <span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span> </div> </div> </footer> <!-- Modal --> <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://idoc.tips/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177830117-1'); </script> <script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://idoc.tips/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function (event, ui) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script> <!-- cookie policy --> <div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a> </div> <script> function accept_IDOCTIPS_cookie_box() { document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/"; hide_IDOCTIPS_cookie_box(); } function hide_IDOCTIPS_cookie_box() { var cb = document.getElementById('IDOCTIPS_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var IDOCTIPS_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('IDOCTIPS_cookie_box_viewed'); if (IDOCTIPS_cookie_box_viewed) { hide_IDOCTIPS_cookie_box(); } })(); </script> <!-- end cookie policy --> </body> </html>