Paloma López: Sitio Escuela

De Casiopea

Sitio Escuela

Página principal del Sitio de la Escuela


Mapa General del Sitio de la Escuela

























Sección Escuela


Sección Amereida


Sección Alumnos


Sección Carreras


Sección Postgrados


Sección Mundo


Sección Travesías

Las Travesías son algo característico de la escuela. Sería recomendable situarlas al inicio del sitio con mayor importancia y con un logo llamativo que invite a la gente que visita el sitio a participar de la comunidad y que sea un llamado a ingresar a la escuela.


Ubicación de la sección Travesías en la página principal del sitio de la escuela















Foro Escuela

Una de las cosas que ayudarían a mejorar el sitio de la escuela sería un foro en donde participen los alumnos, exalumnos y profesores de la escuela y que entreguen información y respuestas a las principales dudas de aquellos estudiantes de enseñanza media que estén pensando en entrar en la escuela, o los estudiantes del extranjero que quieran saber sobre la escuela desde un punto más directo.


Ubicación de la sección Foro Escuela en la página principal del sitio de la escuela















Actividades PUCV

Otro ámbito interesante que se podría destacar son la actividades de la Casa Central que sean de interés para la escuela, como ferias de diseño independiente, ciclos de cine arte, exposiciones de arte, fotosgrafía, etc. Esto ayudaría a unirnos un poco más a lo que es la Casa Central, ya que muchas veces dejamos pasar este tipo de actividades y no por desinterés, sino por desinformación; bien es sabido que rara vez llegan a la escuela avisos de estas actividades, lo que crearía un incentivo en el público de la escuela a ser parte de lo que es la Universidad.


Ubicación de la sección Actividades PUCV en la página principal del sitio de la escuela

















Portafolio Alumnos

Esta sección se crearía con el fin de mostrar a la gente que ingresa al sitio el trabajo de los alumnos de la escuela, por medio de fotos y descripciones de los proyectos.



Proyecto a Diseñar: Portafolio Escuela

¿Qué es un Portafolio?

"Un portafolios es la colección de evidencias de todo tipo que permiten al docente y al alumno reflexionar sobre el proceso de aprendizaje,es una forma de evaluar principalmente los procesos y al alumno le sirve para autoregular su aprendizaje y al profesor para tomar decisiones respecto al mismo proceso." (Fuente: Wikipedia)

"Un portafolio es un registro del aprendizaje que se concentra en el trabajo del alumno y su reflexión sobre esa tarea. Mediante un esfuerzo cooperativo entre el alumno y el personal docente se reúne un material que es indicativo del progreso hacia los resultados esenciales" (National Education Association, 1993)


Características Principales

1. Esta sección estará presente en la página principal del sitio de la escuela, en un espacio que conduzca al sitio mismo del Portafolio.


2. Será de uso propio de los alumnos de la escuela, que tendrán una cuenta para subir sus trabajos realizados en los años de la escuela, por medio de fotos con una leve descripción del argumento de los trabajos.


3. Al mismo tiempo dentro del menú habrá un buscador que permita a las personas que no son de la escuela y que ingresan al sitio, encontrar los portafolios por año de taller, por cursos y por personas.


4. En la página de cada alumno que tenga portafolio, habrán las siguientes categorías:


Datos Personales:

nombre

edad

autobiografía

Contenidos:

taller

construcción

presentación

+ (asignaturas que el alumno inscriba)

proyectos personales


5. Junto con cada foto que el alumno suba a su portafolio deberá haber una pequeña reseña del trabajo expuesto, tales como el argumento, el tiempo que tomó realizarlo, las herramientas que se utilizaron y si hubo más participantes en él o no.


Navegación de un Usuario No Registrado


Mapa de Navegación

MAPA DE NAVEGACION.jpg



Wireframe

Wireframe de Inicio

WIREFRAME1.png


Wireframe de Búsqueda por Usuario

WIREFRAME2.png


Wireframe Portafolio Usuario

WIREFRAME3.png

Mapa de Divs

MAPA DE DIVS.jpg




Personas y Escenarios

Persona 1: Usuario

La persona "usuario" es el alumno de la escuela que ingresa al sitio para subir los archivos fotográficos de sus trabajos realizados en clases. Esta persona tiene una cuenta registrada en la wiki con la que ingresa también al sitio Portafolio. También ingresa a los portafolios de sus compañeros o de otros usuarios, revisa las etiquetas, etiqueta su propio trabajo, etc.

Persona 2: Alumno

La persona "alumno" es el alumno de la escuela que ingresa sin necesidad de estar registrado, o de haber ingresado a su cuenta (en el caso de estarlo), al sitio Portafolio, para ver los trabajos de los usuarios ya sea por etiqueta o por un nombre específico.

Persona 3: Universitario Nacional

La persona "universitario" es la persona que estudia en otra universidad y que desea informarse sobre el trabajo que se realiza en la escuela, ya sea para comparar el trabajo que se hace en las mismas carreras en otras universidades o por mera curiosidad.

Persona 4: Universitario Internacional

La persona "universitario internacional" es la persona que estudia en una universidad en el extranjero y que busca en internet cómo son las trabajos de sus pares que también estudian arquitectura o diseño en nuestra escuela. También puede ingresar al sitio portafolio por querer matricularse en la escuela como parte de un intercambio estudiantil.


Persona 5: Estudiante

La persona "estudiante" corresponde a la persona que cursa educación básica o media y desea informarse sobre el trabajo de los alumnos de la escuela. Ya sea por interés en el diseño, en la arquitectura, o por el deseo de ingresar en un futura a la escuela.


Primer Avance de Código HTML


<body>

<form id="form1" name="form1" method="post" action="">

<label for="select"></label>

<div align="center"><img src="WIREFRAME1.png" width="765" height="307" /></div>

</form>

<form id="form2" name="form2" method="post" action="">

<div align="center">

<label for="textfield"></label>

<input type="text" name="textfield" id="textfield" />

<select name="wireframe2" id="wireframe2">

<option value=" ">Por Persona</option>

<option>Por Etiqueta</option>

</select>

<input type="submit" name="Buscador" id="Buscador" value="Buscador" />

</div>

</form>

</body>

</html>

Protocolo de Pruebas con Usuarios

Inicio del Protocolo de Pruebas con Usuarios

PRUEBA1.png


Muestra de Tareas a realizar

PRUEBAA2.png


Primera Tarea y Escenario

PRUEBA3.png


Segunda Tarea y Escenario

PRUEBA4.png


Tercera Tarea y Escenario

PRUEBAA5.png


Cuarta Tarea y Escenario

PRUEBA6.png

Avance en la Navegación

Avance en el Buscador del sitio Portafolio


<html>
<head>
<title>Portafolio e[a.d]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table width="726" height="273" border="0" align="center" cellpadding="0" cellspacing="1" id="Table_01">
	<tr>
	  <td width="272" height="26"> </td>
		<td width="450" align="right" valign="top" nowrap><form name="form1" method="post" action="http://158.251.6.6:443/cas/login?service=http%3A//wiki.ead.pucv.cl/index.php?title=Especial%3AEntrar&returnto=Casiopea">
		  <p>
	      <input type="submit" name="OK" id="OK" value="Ingresar usuario y Contraseña"></p>
		  <p><a href="http://personas.ead.pucv.cl/usuarios/signup">Registrarse</a>		  <a href="http://personas.ead.pucv.cl/usuarios/recuperacionDatos">Recuperar Contraseña</a> </p>
</form></td>
	</tr>
	<tr>
		<td height="156" colspan="2"><a href="home.html"><img src="images/PORTAFOLIO1.jpg" width="724" height="154" border="0" align="top"></a></td>
	</tr>
	<tr>
		<td height="26" colspan="2" align="center" valign="top">
        
		  <form name="form1" method="post" action="procurador.html">
		  <label for="textfield"></label>
	      <input name="textfield" type="text" id="textfield">
	      <label for="select"></label>
	      <select name="select">
	        <option selected>Por Persona</option>
	        <option>Por Etiqueta</option>
          </select>
	      <input type="submit" name="OK2" id="OK2" value="OK">
          <form/>
	    </p>
	    <p>No encontrando, por favor intenta nuevamente!</p>
	    <p> </p></td>
  </tr>
	<tr>
		<td colspan="2"> </td>
        
	</tr>
</table>

<!-- End Save for Web Slices -->
</body>
</html>


Avance en la página principal de un Usuario de Portafolio 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>Free CSS template by ChocoTemplates.com</title>
		<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
		<!--[if IE 6]>
			<link rel="stylesheet" href="css/ie6-style.css" type="text/css" media="all" />
		<![endif]-->
		<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="js/fns.js" type="text/javascript"></script>
	    <style type="text/css">
<!--
.Estilo1 {
	font-size: 24px
}
.Estilo4 {font-size: 36px}
.Estilo5 {font-size: 30px}
.Estilo6 {
	font-size: 14px
}
.Estilo7 {
	font-size: 16px;
}
-->
        </style>
</head>
	<body>
		<!-- Page -->
		<div id="page">
			<!-- Header -->
			<div id="header">
				<!-- Navigation -->
				<div id="navigation">
					<ul>
					    <li class="active"><a href="#">home</a></li>
					    <li><a href="#">portAfolio</a></li>
				      <li class="last"><a href="#">contacto</a></li>
					</ul>
			  </div>
				<!-- / Navigation -->
				<h1><a href="#">Portafolio.ead</a></h1>
				<div class="description">
				  <p class="Estilo1"> </p>
				  <p class="Estilo4">Paloma </p>
				  <p class="Estilo5">lÓpez</p>
				</div>
		  </div>
			<!-- / Header -->
			<!-- Slideshow -->
			<div id="slideshow">
				<div class="bg">
					<div class="cnt">
						<!-- Big Image -->
						<div class="big-image">
							<img src="css/images/img1.jpg" alt="" />
						</div>
						<!-- / Big Image -->
						<!-- Slider -->
						<div id="slider">
							<div class="buttons">
								<span class="prev">prev</span>
								<span class="next">next</span>
							</div>
							<div class="holder">
								<div class="content">
									<ul>
									    <li class="fragment"><a href="#"><img src="css/images/img3.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img4.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img5.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img6.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img3.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img4.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img5.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img6.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img3.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img4.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img5.jpg" alt="" /></a></li>
									    <li class="fragment"><a href="#"><img src="css/images/img6.jpg" alt="" /></a></li>
									</ul>
								</div>
							</div>
						</div>
						<!-- / Slider -->
					</div>
				</div>
			</div>
			<!-- / Slideshow -->
			<!-- Content -->
			<div id="content">
				<div class="cl"> </div>
				<div class="left-col separator">
					<h2>Sobre la Observación</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eleifend congue augue nec viverra. Curabitur a mi pellentesque erat laoreet sodales. Cras tempus lorem quis erat interdum cursus. Sed <a href="#">sollicitudin</a> euismod tellus, vitae convallis velit viverra eget. Donec consequat metus nec odio ultricies lacinia. Mauris rutrum auctor augue, quis ultrices quam pellentesque ut.</p>
					<p>Praesent urna risus, fermentum eget euismod eu, placerat id felis. In venenatis sapien et mauris dictum sodales ac et mi. Ut pulvinar, metus facilisis sodales <a href="#">pellentesque</a>, arcu felis tempor ligula, eget dignissim dolor purus ut ante. Sed et risus non velit ornare condimentum ac eget risus.</p>
				</div>
				<div class="right-col">
					<h2 class="Estilo6"> </h2>
					<h2 class="Estilo7">Etiquetas</h2>
				  <p>Praesent urna risus, fermentum eget euismod eu, placerat id felis. In venenatis sapien et mauris dictum sodales ac et mi. Ut pulvinar, metus facilisis sodales <a href="#">pellentesque</a>, arcu felis tempor ligula, eget dignissim dolor purus ut ante. Sed et risus non velit ornare condimentum ac eget risus.<br /><a href="#">learn more</a></p>
					<h2> </h2>
			  </div>
				<div class="cl"> </div>
			</div>
			<!-- / Content -->
			<!-- Footer -->
			<div id="footer">
				<p> </p>
		  </div>
			<!-- / Footer -->
		</div>
		<!-- / Page -->
	</body>
</html>


Primera Prueba de Usuarios


Corrección Prueba de Usuarios

Luego de la prueba de Usuarios se corrigieron diversos problemas existentes en la usabilidad del sitio Portafolio, dentro de los que estaban:

- Indicador en el buscador

- Pestaña de contacto

- Rehacer la forma de etiquetar las fotografías

- Colocar la cantidad de cada etiqueta

- Crear un perfil para cada usuario

- Cambiar la barra de navegación, hacerla más amigable e indicar lo justo y necesario

- Hacer íconos para indicar las opciones de edición de un archivo

- Crear una pestaña para editar el perfil

- Cambiar la posición de la descripción de la imagen para abajo de la misma

- Eliminar el título "Etiquetas" de la barra derecha

- Decidir si las etiquetas van ordenadas alfabéticamente o por cantidad


Ingreso al Sitio Portafolio

1PU.png

Resultados de Búsquea

2PU.png

Vista del Portafolio de un alumna

3PU.png

Selección de una imagen del portafolio de una alumna

4PU.png

Vista del Portafolio propio al ingresar a la cuenta

5PU.png

Etiquetar una foto del Portafolio

6PU.png

Editar el perfil propio

7PU.png

Subir un archivo al portafolio propio

8PU.png