colegio de bachilleres plantel 14 milpa alta …...colegio de bachilleres plantel 14 milpa alta...
TRANSCRIPT
COLEGIO DE BACHILLERES PLANTEL 14 MILPA ALTA
“FIDENCIO VILLANUEVA ROJAS”
Guía de estudio para presentar el examen de recuperación de:
Programación de Páginas Web
Clave 640
Nombre del alumno:
___________________________________________
Matrícula
Contenido BLOQUE 1. PROTOTIPADO DEL PROYECTO ......................................................................................... 4
Requerimientos del cliente ............................................................................................................. 4
1. Entrevista ................................................................................................................................ 4
2. Cuestionario ............................................................................................................................ 5
3. Observación ............................................................................................................................ 5
4. Documentación ....................................................................................................................... 5
Prototipado del proyecto ................................................................................................................ 6
1. Bocetos ................................................................................................................................ 6
2. Maquetas ............................................................................................................................. 7
Ejercicios de bloque 1 ..................................................................................................................... 8
BLOQUE 2. DESARROLLO DEL SITIO WEB DINÁMICO ......................................................................... 9
Diseño de Páginas Web (HTML5) .................................................................................................... 9
1. Etiquetas Básicas ..................................................................................................................... 9
Encabezado H1 .................................................................................................................................. 10
Encabezado H3 .......................................................................................................................... 10
Un encabezado H2 ........................................................................................................................ 10
2. Vínculos internos y externos ................................................................................................. 11
3. Etiquetas Media .................................................................................................................... 13
4. Etiquetas de Formulario ........................................................................................................ 13
Diseño de la Base de Datos (MySQL) ............................................................................................ 16
Sentencias SQL .......................................................................................................................... 16
Programación de las Páginas Web Dinámicas (PHP) ..................................................................... 16
Ejercicios de bloque 2 ................................................................................................................... 17
BLOQUE 3. IMPLEMENTACIÓN DEL SITIO WEB DINÁMICO .............................................................. 18
Alojamiento ................................................................................................................................... 18
1. Servidores de alojamiento .................................................................................................... 18
2. Transferencia de archivos ..................................................................................................... 18
3. Dominio ................................................................................................................................. 19
Pruebas de Navegación ................................................................................................................. 19
1. Accesibilidad ......................................................................................................................... 19
2. Usabilidad .............................................................................................................................. 19
Ejercicios de bloque 3 ................................................................................................................... 20
Trabajos citados ................................................................................................................................ 21
BLOQUE 1. PROTOTIPADO DEL PROYECTO
PROPÓSITO: El estudiante será capaz de elaborar el prototipo de un sitio web dinámico, considerando las necesidades del cliente; para proponer una solución informática a un requerimiento solicitado.
Requerimientos del cliente A continuación, sugiero una estrategia de cómo aplicar técnicas dentro de un proceso ordenado y que aproveche al máximo cada técnica. Esto evitará que los analistas con poca experiencia caigamos en un error muy común, que es el de pasar demasiado pronto a las entrevistas, lo cual es un desperdicio de tiempo.
Los pasos de la estrategia sugerida son:
1. Aprender todo lo que se pueda de los documentos, formularios, informes y archivos existentes. Es sorprendente lo que se puede aprender de un sistema sin necesidad de quitarle tiempo a la gente.
2. De ser posible, se observará el sistema en acción. No se plantearán preguntas. Tan sólo se observará y se tomarán notas o dibujos. Conviene asegurarse de que las personas observadas saben que no se les está evaluando. En caso contrario, harán su trabajo de manera más eficaz que lo normal.
3. Diseñar y distribuir cuestionarios para aclarar cuestiones que no se comprenden bien. Será también buen momento para solicitar opiniones sobre los problemas y las limitaciones. Los cuestionarios requieren que los usuarios inviertan una parte de su tiempo. Pero son ellos los que pueden elegir cuándo les viene mejor hacerlo.
4. Realizar entrevistas (o sesiones de trabajo en grupo, como JAD). Como ya se ha recogido una base de requerimientos iniciales en los pasos anteriores, se pueden utilizar las entrevistas para verificar y aclarar las cuestiones y los problemas de mayor dificultad. En este punto se pueden llegar a aplicar algunas de las otras técnicas cómo Escenarios, Tormenta de ideas, Puntos de Vista, ETHICS y Desarrollo de Prototipos.
5. Se verifican los requerimientos a través del uso de técnicas como Entrevistas, Observación y orientados a Puntos de Vista.
6. Esta estrategia no es intocable. Aunque habría que desarrollar una estrategia de investigación de hechos para todas las fases pertinentes del desarrollo de sistemas, cada proyecto tiene sus propias particularidades. A veces, la observación o los cuestionarios pueden no ser apropiados. Pero debería mantenerse la idea de recabar siempre todos los hechos que sea posible antes de concertar entrevistas.
1. Entrevista La entrevista es de gran utilidad para obtener información cualitativa como opiniones, o descripciones subjetivas de actividades. Es una técnica muy utilizada, y requiere una mayor preparación y experiencia por parte del analista. La entrevista se puede definir como un “intento sistemático de recoger información de otra persona” a través de una comunicación interpersonal
que se lleva a cabo por medio de una conversación estructurada. Debe quedar claro que no basta con hacer preguntas para obtener toda la información necesaria. Es muy importante la forma en que se plantea la conversación y la relación que se establece en la entrevista. (Guerra, 2017)
Estos son algunos de los aspectos más importantes a tener en cuenta al realizar entrevistas:
Preparación. Es necesario documentarse e investigar la situación de la organización analizando los documentos disponibles, de tal forma que la entrevista se enfoque en aquellos aspectos que están solamente en la mente del entrevistado y que no son accesibles por otros medios como la observación o el análisis de documentos.
Entrevistar al personal adecuado. La mayoría de los analistas adoptan un enfoque top-‐down, comenzando a entrevistar a directivos para que brinden un panorama general de hacia donde deberían ir las cosas, y terminando por hablar con los empleados que aportan detalles importantes de la operación.
Duración. Una entrevista debería durar a lo sumo un par de horas.
Formato. Se recomienda utilizar preguntas abiertas, donde los entrevistados puedan elaborar y dar detalles, más allá de simplemente responder “si” o “no”.
2. Cuestionario El uso de cuestionarios permite a los analistas reunir información proveniente de un grupo grande de personas. El empleo de formatos estandarizados para las preguntas puede proporcionar datos más confiables que otras técnicas; por otra parte, su amplia distribución asegura el anonimato de los encuestados, situación que puede conducir a respuestas más honestas. (Guerra, 2017)
El inconveniente es que la respuesta puede ser limitada, ya que es posible que no tenga mucha importancia para los encuestados llenar el cuestionario. Es recomendable conseguir apoyo de la alta dirección para solicitar a las personas de la organización que contesten el cuestionario.
Al igual que con las entrevistas, se debe seleccionar a los encuestados.
El analista debe asegurar que el conocimiento y experiencia de éstos califiquen para dar respuestas a las preguntas.
3. Observación Por medio de esta técnica el analista obtiene información de primera mano sobre la forma en que se efectúan las actividades. Este método permite observar la forma en que se llevan a cabo los procesos y, por otro, verificar que realmente se sigan todos los pasos especificados. Como sabemos, en muchos casos los procesos son una cosa en papel y otra muy diferente en la práctica. Los observadores experimentados saben qué buscar y cómo evaluar la relevancia de lo que observan. (Guerra, 2017)
4. Documentación Varios tipos de documentación, como manuales y reportes, pueden proporcionar al analista información valiosa con respecto a las organizaciones y a sus operaciones. La documentación difícilmente refleja la forma en que realmente se desarrollan las actividades, o donde se encuentra
el poder de la toma de decisiones. Sin embargo, puede ser de gran importancia para introducir al analista al dominio de operación y el vocabulario que utiliza. (Guerra, 2017)
Prototipado del proyecto Los prototipos suelen consistir en versiones reducidas, demos o conjuntos de pantallas (que no son totalmente operativos) de la aplicación pedida. Esta técnica es particularmente útil cuando: (Guerra, 2017)
• El área de la aplicación no está bien definida (posiblemente por ser algo muy novedoso). • El costo del rechazo de la aplicación por los usuarios es muy alto. • Es necesario evaluar previamente el impacto del sistema en los usuarios y en la
organización.
Los prototipos de sistema permiten a los usuarios experimentar para ver cómo éste ayuda a su trabajo. Fomentan el desarrollo de ideas que desembocan en requerimientos. Además de permitir a los usuarios mejorar las especificaciones de requerimientos, el desarrollo de un prototipo tiene otras ventajas:
1. Al demostrar las funciones del sistema se identifican las discrepancias entre los desarrolladores y los usuarios.
2. Durante el desarrollo del prototipo, el personal del desarrollo de software puede darse cuenta de que los requerimientos son inconsistentes y/o están incompletos.
3. Aunque limitado, se dispone rápidamente de un sistema que funciona y demuestra la factibilidad y usabilidad de la aplicación a administrar.
4. El prototipo se utiliza como base para escribir la especificación para la producción.
En general, el uso de esta técnica es un medio que permite solventar objeciones del usuario del tipo: “No sé exactamente lo que quiero, pero lo sabré cuando lo vea”. Por lo general, la construcción de prototipos incrementa los costos en las etapas iniciales de un proyecto, pero esto se recupera en etapas posteriores gracias al mejor entendimiento de los requerimientos por parte de los desarrolladores. En algunos casos también se utiliza como un medio para formalizar la aceptación previa del cliente de los requisitos del proyecto.
1. Bocetos Para que la idea sobre un sitio web se materialice en un diseño hay un paso imprescindible: bocetar. El boceto, layout, o mock up es una representación visual simplificada de los elementos visuales que contendrá la página o sistema web y tiene dos objetivos bien definidos: Ser el punto de partida para discutir ideas en proyectos grupales. (Thüer, 2017)
Mostrarle al cliente de forma aproximada qué elementos verá en la página web. Tradicionalmente el primer boceto de una página suele hacerse a mano.
Debe reunir tres características:
• Ser rápido, para plasmar las ideas tan pronto como sea posible. • Ser desechable, porque será discutido, revisado y rehecho varias veces. • Ser específico, para solucionar aquellos aspectos complejos de la interacción.
Ilustración 1. Ejemplo de boceto digital
2. Maquetas Una plantilla (maqueta) HTML se utiliza como base para crear varias páginas con un diseño similar pero con distinto contenido. Un administrador de la web puede diseñar las plantillas propias de su sitio web y luego distribuirlas entre los contribuyentes para que las utilicen en el diseño de páginas HTML. De esta forma se asegura cierta uniformidad en las páginas de un sitio web.
Ejercicios de bloque 1 Se porpone el siguiente proyecto:
“Desarrollar una página web de una veterinaria local, en la cual el veterinario desea mostrar información de dónde se encuentra su clínica, qué servicios ofrece, horarios, formas de pago, información de interés para el público que visita el sitio.”
Con base en el proyecto que se propone llevar a cabo las siguientes actividades
1. Aplica una de las técnicas de obtención y registro de información, a partir del proyecto planteado.
2. Elabora un mapa de navegación. 3. Elabora al menos dos bocetos de las página propuesta. 4. Elabora al menos una maquetas de las página propuesta.
BLOQUE 2. DESARROLLO DEL SITIO WEB DINÁMICO
PROPÓSITO: El estudiante será capaz de desarrollar un sitio web dinámico con conectividad a una base de datos; para presentar una solución informática a las necesidades del cliente.
Diseño de Páginas Web (HTML5) 1. Etiquetas Básicas Etiquetas de formato de texto
Salida Etiquetas requeridas
El texto en negritas. El <B>texto</B> en negritas.
El texto en itálicas. El <I>texto</I> en itálicas.
El texto en formato teletipo. El <TT>texto</TT> en formato teletipo.
El texto en 2 tamaños más grandes y en rojo. El tamaño puede ser un valor absoluto en el rango 1..7.
El <FONT SIZE = +2 COLOR = "RED"> texto </FONT> en 2 tamaños más grandes y en rojo. El tamaño puede ser ...
Utilizar la dirección de e-‐mail
[email protected] para contactarme.
Utilizar la dirección de e-mail <ADDRESS> [email protected] </ADDRESS> para contactarme.
Etiquetas de encabezamientos
Salida Etiquetas requeridas
Encabezado H1 <H1>Encabezado H1<\H1>
Encabezado H3 <H3>Encabezado H3<\H3>
Encabezado H6 <H6>Encabezado H6<\H6>
Las etiquetas de encabezado generan automáticamente un fin de línea.
Salida Etiquetas requeridas
Justo antes del encabezado.
Un encabezado H2 Justo después del encabezado.
Justo antes del encabezado. <H2>Un encabezado H2<\H2> Justo después del encabezado.
Párrafos, fin de línea y comentarios
Salida Etiquetas requeridas
Última oración del párrafo.
Primera oración del nuevo párrafo.
Última oración ... <P> Primera oració del ...
Una oración sobre otra.
Una oración <BR> sobre otra.
Observar que estas etiquetas no son bilaterales.
Los comentarios dentro de un archivo HTML se delimitan del siguiente modo:
<!-‐-‐Este texto no será analizado por el visualizador-‐-‐>
Un ejemplo de página WEB
El siguiente ejemplo es el contenido del archivo eje2.htm en el directorio corriente:
2. Vínculos internos y externos Vínculos internos
La creación de enlaces internos dentro de una pagina web nos permite realizar saltos dentro de una misma pagina a diferentes lugares de la mismsma pagina. Es una técnica útil si creamos paginas muy largas y simplemente innecesarias para paginas cortas.
Para crear un enlace de este tipo es necesario dos componentes, que para aclararnos los vamos a nombrar de la siguiente forma:
El enlace: Sería el link, lo que aparecerá en la página para que el usuario haga clic. Sería el enlace de origen propiamente dicho.
El ancla: Además se requiere una marca, para saber dónde se dirige el enlace. Es el destino donde nos llevará el navegador al pulsar el link. Le llamamos ancla porque nos permite anclar a esa posición otros enlaces.
Ambos elementos se crean con la misma etiqueta A, tanto el enlace como el ancla. Solo que usaremos distintos atributos dentro de esa etiqueta.
a) Lo primero será colocar nuestro enlace origen. Este enlace de origen es el que el usuario podrá hacer clic.
Ojo al símbolo "#": es él quien especifica al navegador que el enlace apunta a una sección en particular, a un punto interno dentro de la misma página.
b) En segundo lugar, hay que generar un enlace en el destino, al que hemos llamado "ancla". Este enlace no llevará contenido, puesto que no queremos que nadie lo pulse, sino que nos sirva de ancla. Tampoco llevará el atributo "href", porque no tiene que apuntar a ningún
<a href="#abajo">Ir abajo</a>
lugar, sino que le apuntarán a él. Para poder distinguirlo de otros posibles enlaces realizados dentro de la misma página a cada ancla se le asigna un nombre por medio del atributo "name". En este caso, la etiqueta que escribiremos será ésta:
Vínculos externos
Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio. Generalmente nuestro sitio web estará en un dominio determinado, tipo example.com. Los enlaces remotos son los que van a páginas que estarían en otro dominio diferente.
Este tipo de enlaces es muy común y no representa ninguna dificultad. Simplemente colocamos en el atributo HREF de nuestra etiqueta A la URL o dirección de la página con la que queremos enlazar. Será algo parecido a esto.
Sólo cabe destacar que todos las direcciones web (URLs) empiezan por http://, o https:// en el caso que la página de destino se sirva mediante un servidor seguro. Este tipo de rutas que comienzan por "http" también se conocen como "rutas absolutas". Cuando enlazas con páginas que están en otros dominios necesitas usar necesariamente rutas absolutas.
Enlaces a direcciones de correo
Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje de correo electrónico dirigido a una dirección de mail determinada. Estos enlaces son muy habituales en las páginas web y resultan la manera más rápida de ofrecer al visitante una vía para el contacto con el propietario de la página.
Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el atributo href del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace.
Enlaces con archivos
Este no es un tipo de enlace propiamente dicho, pero lo señalamos aquí porque son un tipo de enlaces muy habitual y que presenta alguna complicación para el usuario novato.
El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos, con la única particularidad de que en vez de estar dirigidos hacia una página web está dirigido hacia un archivo de otro tipo.
Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el mismo directorio que la página se escribiría un enlace así.
<a name="abajo"></a>
<a href="http://www.guiarte.com">ir a guiarte.com</a>
<a href="mailto:[email protected]">[email protected]</a>
Si pinchamos un enlace de este tipo nuestro navegador descargará el fichero, haciendo la pregunta típica de "Qué queremos hacer con el archivo. Abrirlo o guardarlo en disco".
3. Etiquetas Media Imágenes
Sonido
Video
4. Etiquetas de Formulario Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrónico.
Los formularios son definidos por medio de las etiquetas FORM y su cierre. Entre estas dos etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta etiqueta FORM debemos especificar algunos atributos:
action: define el tipo de acción a llevar a cabo con el formulario, existen dos posibilidades:
• El formulario es enviado a una dirección de correo electrónico • El formulario es enviado a un programa o script que procesa su contenido
method: Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son post y get. A efectos prácticos y, salvo que se os diga lo contrario, daremos siempre el valor post.
<a href="mi_fichero.zip">Descarga mi_fichero.zip</a>
<img src="mi_archivo.png" alt="Descripción de esta maravillosa imagen">
<audio src="/test/audio.ogg">
<p>Tu navegador no implementa el elemento audio.</p>
</audio>
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Tu navegador no implementa el elemento <code>video</code>.
</video>
Las cajas de texto son colocadas por medio de la etiqueta INPUT. Dentro de esta etiqueta hemos de especificar el valor de dos atributos: type y name, size, maxlength y value.
size: define el tamaño de la caja de texto, en número de caracteres visibles.
maxlength: indica el tamaño máximo del texto, en número de caracteres, que puede ser escrito en el campo.
value: en algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestión.
Ejemplo
Hay determinados casos en los que podemos desear esconder el texto escrito en el campo INPUT, por medio asteriscos, de manera que aporte una cierta confidencialidad
Si deseamos poner a la disposición de usuario un campo de texto donde pueda escribir cómodamente sobre un espacio compuesto de varias líneas, hemos de invocar una nueva etiqueta: TEXTAREA y su cierre correspondiente.
rows: define el número de líneas del campo de texto.
cols: define el número de columnas del campo de texto.
La etiqueta queda por tanto de esta forma:
<form action="respuesta.html" method="post">
etiquetas de formulario
</form>
<input type="text" name="nombre" size="50" maxlength="120" value="valor predefinido en la caja de texto">
<input type="password" name="nombre">
<textarea name="comentario" rows="10" cols="40">Escribe tu comentario....</textarea>
Ejemplo:
Opciones
Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una (o varias) de las múltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta SELECT, con su respectivo cierre:
Existe otra alternativa para plantear una elección, en este caso, obligamos al internauta a elegir únicamente una de las opciones que se le proponen.
Radio button
La etiqueta empleada en este caso es INPUT en la cual tendremos el atributo type ha de tomar el valor radio. Veamos un ejemplo:
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
Checkbox
Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuestión. La sintaxis utilizada es muy similar a las vistas anteriormente:
Diseño de la Base de Datos (MySQL) Sentencias SQL Tutorial básico MySQL
http://www.fcca.umich.mx/descargas/apuntes/Academia%20de%20Informatica/Base%20de%20Datos%20%20I%20%20%20%20G.A.G.C/TUTORIAL%20B%C3%81SICO%20MySQL.pdf
Programación de las Páginas Web Dinámicas (PHP) Tutorial básico de PHP y MySQL
<input type="radio" name="estacion" value="1">Primavera
<br>
<input type="radio" name="estacion" value="2" checked>Verano
<br>
<input type="radio" name="estacion" value="3">Otoño
<br>
<input type="radio" name="estacion" value="4">Invierno
<input type="checkbox" name="gusto1" value=”1”>Música
<input type="checkbox" name="gusto2" value=”2”>Lectura
<input type="checkbox" name="gusto3" value=”3”>Bailar
http://realpv.hol.es/PHP%20y%20MySQL%20mascotas.pdf
Ejercicios de bloque 2 Elaborar una base de datos, en la cual se almacenen los datos del usuario de la pagina de la veterinaria, los datos que se solicitan son:
• Nombre (caja de texto) • Apellido paterno (caja de texto) • Apellido materno (caja de texto) • Correo (caja de texto) • Fecha de nacimiento (caja de texto) • Dirección (caja de texto) • Información soicitada: cita médica, vacunas, compra de mascotas, compra de accesorios,
otro (lista de opciones) • Género: masculino femenino (radio button) • Tipo de información que le interesaría recibir mas adelante: Avisos, recordatorios de citas
médicas, recordatorio de vacunas, eventos próximos, otros (checkbox)
BLOQUE 3. IMPLEMENTACIÓN DEL SITIO WEB DINÁMICO
PROPÓSITO: El estudiante será capaz de implementar un sitio web; realizando pruebas de funcionamiento; para visualizar la solución informática en línea.
Alojamiento 1. Servidores de alojamiento Hosting significa Alojamiento u Hospedaje. La información alojada está contenida en servidores que deben contar a su alrededor con una infraestructura tanto técnica como humana, que permita que la información que contiene el servidor esté segura, y que esté disponible para los usuarios que la necesitan en las condiciones que defina la empresa propietaria de esa información. (Espacio PyME.com, 2004)
Por ejemplo, si el servidor contiene la página web corporativa de una empresa, éste ha de estar conectado a la red Internet y debe contar con las medios que garanticen que los servicios están disponibles 24x7 para los usuarios de Internet. Si se trata de una aplicación de negocio a la que deben acceder los trabajadores de una empresa, este servidor debe estar conectado a un punto común al que accedan los usuarios de la red corporativa de que se trate, para garantizar que estos accedan a los recursos corporativos cuando lo necesiten.
2. Transferencia de archivos El funcionamiento es sencillo. Una persona desde su ordenador invoca un programa cliente FTP para conectar con otro ordenador, que a su vez tiene instalado el programa servidor FTP. Una vez establecida la conexión y debidamente autenticado el usuario con su contraseña, se pueden empezar a intercambiar archivos de todo tipo. (cursosasir, 2010)
3. Dominio Un dominio es una dirección en internet. Para visitar un sitio web, a través del navegador tecleamos dicha dirección, por ejemplo: www.google.com. El conjunto de caracteres que compone dicha dirección sirve para identificar ese sitio concreto en la red, o lo que es lo mismo la máquina o grupo de máquinas en las que se aloja (hosting) el sitio web. (anetcom, 2004)
La característica mas importante es que el dominio es único, lo cual evita que dos o mas sitios web tengan la misma dirección.
Pruebas de Navegación 1. Accesibilidad La accesibilidad Web se refiere a la capacidad de acceso a la Web y a sus contenidos por todas las personas independientemente de la discapacidad (física o técnica) que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales). (agesic, 2000)
Realizar un diseño accesible va a permitir que una mayor cantidad de personas puedan percibir, entender, navegar e interactuar de forma efectiva con la Web, así como crear y aportar contenido.
El propósito 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.
Para ver las puebas revisar el documento: http://agesic.gub.uy/innovaportal/file/549/1/Capitulo_3_Accesibilidad_v1_0.pdf
2. Usabilidad Un test de usabilidad consiste simplemente en mirar cómo alguien navega por tu página web mientras que describen lo que están pensando. (González, 2015)
Normalmente debes pedirles que realicen algunas tareas, como realizar una compra, llegar a un lugar concreto de tu tienda o únicamente observar con qué problema se encuentra, como una navegación confusa o instrucciones poco claras.
Este tipo de pruebas no se realizan para recoger opiniones sobre tu página, puesto que es un grupo muy reducido de personas y su opinión no sería representativa de una mayoría. El objetivo de estos análisis es observar los pasos que siguen para llegar de un punto a otro. Esto es muy
importante puesto que lo que las personas dicen que hacen es muy diferente a lo que realmente hacen.
Para una web de tamaño pequeño o mediano una prueba de unas cinco personas es más que suficiente para sacar datos útiles y mejorar la experiencia de todas tus visitas. Si tuvieras un proyecto más ambicioso o más grande, entonces puedes invertir un poco de presupuesto para tener un análisis de mayor profundidad.
Para empezar busca un grupo de conocidos y siéntate a su lado para tomar notas mientras navegan por tu página tratando de realizar una serie de tareas. También puedes realizar una llamada por Skype o un Hangout de Google para que te compartan su pantalla.
Debes calcular unos 15 minutos por cada persona. Es la regla básica: 5 usuarios por 15 minutos cada uno.
Siempre se recomienda realizar tests con usuarios que pertenezcan a tu grupo objetivo (ya sea por edad, intereses o cualquier otro criterio).
Cada prueba que realices debe tener un objetivo. No aporta nada tener a personas dando vueltas por tu web haciendo clic de manera aleatoria. Concéntrate en unas cuantas prioridades.
Ejercicios de bloque 3 Realice pruebas de accesibilidad y usabilidad en su sitio web, y presente evidencias
Trabajos citados cursosasir. (2010). Funcionalidad del servicio de transferencia de archivos.
agesic. (2000). Capítulo III Accesibilidad Web . (agesic, Ed.) Perú: agesic.
anetcom. (2004). Los dominios en internet. (S. Filmac Centre, Ed.) anetcom.
Espacio PyME.com. (2004). HOSTING. http://www.cambrasabadell.org/Att/files/doc804_1_27_04012005094829.pdf .
González, G. (2015). ¿Tests de usabilidad? Cuando tus visitas pueden darte la clave del diseño de tu web. Obtenido de JIMDO: https://es.jimdo.com/2015/02/03/tests-‐de-‐usabilidad-‐cuando-‐tus-‐visitas-‐pueden-‐darte-‐la-‐clave-‐del-‐dise%C3%B1o-‐de-‐tu-‐web/
Guerra, C. A. (2017). Software Guru. Obtenido de Software Guru-‐Requerimientos: https://sg.com.mx/revista/17/obtencion-‐requerimientos-‐tecnicas-‐y-‐estrategia#.WU2cgGiGOUk
Thüer, S. (12 de Junio de 2017). Bocetos y prototipos de diseño web con Balsamiq MockUps. (S. Thüer, Productor) Recuperado el 15 de Junio de 2017, de Blog de Thuer: https://thuer.com.ar/blog/2009/bocetos-‐diseno-‐web-‐balsamiq-‐mockups