Práctica 5: Crear una página web con texto, imagen y vínculos.

El ejercicio uno consistía en ponerle texto a una página web:

En el ejercicio dos había que ponerle imágenes:

El ejercicio tres trataba de añadirle un enlace:

Concurso Euroscola!

Comienza la competición de euroscola. Consta de dos fases:

Fase inicial:

Esta fase durará del 19 de enero al 20 de marzo.
La fase inicial estará compuesta por las siguientes tareas:

• Lectura de las ediciones on line del periódico “Euroscolos 2015”, visionado dematerial audiovisual, seguimiento en las redes sociales de Euroscola de los temas del Concurso y realización de una prueba objetiva (test).El periódico Euroscolos 2015 estará disponible en la web de Euroscola, a través de la cual todos los equipos participantes tendrán acceso al mismo material.
  Para el seguimiento de los equipos en las redes sociales de Euroscola, bastará con que participen en una de las existentes, dado que la misma información se publicará en Facebook y Twitter.
  Los contenidos expuestos en el periódico Euroscolos 2015, así como sus enlaces y el material audiovisual en el integrado serán evaluados al final de esta fase con unaprueba objetiva (test).

• Preparación de la(s) actividad(es) para la Fase Final: Inicio de la planificación y labores de comunicación necesarias para realizar las actividades de la fase final. En esa fase los equipos deberán crear un blog en el que reflejen las actividades realizadas en relación con los temas del Concurso.

Fase final:

Esta fase durará del 24 de marzo al 14 de abril.

La fase final estará compuesta por las siguientes tareas:

• Crear un blog en el que se exponga la iniciativa desarrollada por cada equipo. Puede utilizarse cualquier plataforma de uso libre (sin coste) que permita crear y alojar blogs, como por ejemplo: WordPress, Blogger, Livejournal, Xanga, Edublogs, o cualquier otra plataforma tecnológica seleccionada por los equipos bajo la orientación del profesor que lidere el equipo y/o con la colaboración del profesor de tecnología del centro escolar.
• Contemplar un plan de promoción y difusión de la iniciativa: De acuerdo con la actividad que se seleccione, cada equipo deberá idear cómo hacer para llegar al máximo público posible.
• Ponerse en contacto con los centros Europe Direct de la zona para comunicar la iniciativa/las actividades que se pretenden realizar, teniendo siempre en cuenta las posibilidades reales de apoyo y difusión de las que disponga cada uno de esos centros de información europea.En la web de Euroscola, los equipos dispondrán de una lista actualizada con los datos de contacto de todos los puntos de información Europe Direct existentes en España.

• Ejecutar las actividades/iniciativas propuestas en relación con proyectos de cooperación al desarrollo y de sensibilización de la comunidad educativa, así como demostrar que han sido realizadas, a través de fotos, vídeos, enlaces, etc.

En el caso de presentar al Concurso proyectos solidarios en los que ya estuviera implicado el centro escolar, es necesario cumplir los siguientes requisitos:

• El proyecto ha de ser puesto en marcha en el periodo de este Concurso.
• El equipo de Euroscola debe estar involucrado directamente en el proyecto aportando nuevas propuestas de ampliación/mejora del proyecto solidario en el que ya esté implicado el centro escolar.
• Desarrollar el blog en el marco de este Concurso. Trabajar en el centro escolar el debate propuesto en este Concurso, es decir, el reto de la cooperación por un mundo futuro más justo, más estable y sostenible para la humanidad, así como el conocimiento de los programas europeos de cooperación al desarrollo y las estrategias europeas de lucha contra la pobreza dentro y fuera de la UE

Práctica 4: Empezar a programar en HTML

Este es el ejercicio 1, que consiste en realizar una página web:

Este es el ejercicio 2, que consiste en ponerle texto a la página web:

Práctica 3: Análisis del código HTML de páginas web.

Ejercicio 1:

Internet explorer:

<META name="keywords" content="Museo del Traje"> 


<META http-equiv="Content-Style-Type" CONTENT="text/css">





Mozilla firefox:


 
<div id="h1text"><h1>Museo del Traje</h1></div>
<div id="loguito"><img src="images/loguito.jpg" alt="Museo del Traje" width="25" height="26" /></div>

<div class="mainBox">
<div class="minwidth">
<div class="layout">
<div class="container">
<div class="mainFrame">

<div class="enlaces"> | <a href='index.jsp?id=9&ruta=1'>contacto</a> | <a href="webmap.jsp">mapa web</a></div>

<div id="boxTop"><a href="http://www.mcu.es" target="_top"><img src="images/escudo.gif" alt="Ministerio de Educaci&oacute;n, Cultura y Deporte" width="320" height="60" /></a><a href="index.jsp" target="_top"><img src="images/logo.jpg" alt="Museo del Traje" width="260" height="60" /></a></div>

<div id="boxNav">
<div id="boxSearch">
  <form id="Search" method="post" action="index.jsp">
    <label for="textfield"></label>
    
      <input name="buscar_cadena" type="text" class="input" id="buscar_cadena" accesskey="1" tabindex="1" value="" size="22" />
    
    <label for="Submit"></label>
    <input type="submit" class="button" name="Buscar" value="Buscar" accesskey="2" tabindex="2" id="Submit" />
  </form>   
 </div>
</div>

<div id="boxMenu">

<div class="nivel0">INFORMACIÓN</div>
<div class="nivel1"><a href="index.jsp?id=11&ruta=2" target="_top">visita</a></div>
<div class="nivel1"><a href="index.jsp?id=12&ruta=2" target="_top">atención al visitante</a></div>
<div class="nivel1"><a href="index.jsp?id=13&ruta=2" target="_top">accesibilidad</a></div>
<div class="nivel1"><a href="index.jsp?id=14&ruta=2" target="_top">comunicación y prensa</a></div>
<div class="nivel0">EXPOSICIÓN</div>
<div class="nivel1"><a href="index.jsp?id=15&ruta=3" target="_top">visita virtual</a></div>
<div class="nivel1"><a href="index.jsp?id=16&ruta=3" target="_top">exposiciones temporales</a></div>
<div class="nivel1"><a href="index.jsp?id=316&ruta=3" target="_top">novedades</a></div>
<div class="nivel0">ACTIVIDADES</div>
<div class="nivel1"><a href="index.jsp?id=28&ruta=7" target="_top">agenda</a></div>
<div class="nivel1"><a href="index.jsp?id=77&ruta=7" target="_top">programación</a></div>
<div class="nivel1"><a href="index.jsp?id=81&ruta=7" target="_top">boletín digital</a></div>
<div class="nivel0">MUSEO</div>
<div class="nivel1"><a href="index.jsp?id=21&ruta=5" target="_top">historia</a></div>
<div class="nivel1"><a href="index.jsp?id=22&ruta=5" target="_top">club museo a mano</a></div>
<div class="nivel1"><a href="index.jsp?id=23&ruta=5" target="_top">quiénes somos</a></div>
<div class="nivel1"><a href="index.jsp?id=415&ruta=5" target="_top">el museo en cifras</a></div>
<div class="nivel0">INVESTIGACIÓN</div>
<div class="nivel1"><a href="index.jsp?id=24&ruta=6" target="_top">biblioteca</a></div>
<div class="nivel1"><a href="index.jsp?id=25&ruta=6" target="_top">publicaciones</a></div>
<div class="nivel0">COLECCIONES</div>
<div class="nivel1"><a href="index.jsp?id=17&ruta=4" target="_top">galería</a></div>
<div class="nivel1"><a href="index.jsp?id=18&ruta=4" target="_top">catálogo</a></div>
<div class="nivel1"><a href="index.jsp?id=19&ruta=4" target="_top">últimos ingresos </a></div>
<div class="nivel1"><a href="index.jsp?id=20&ruta=4" target="_top">el museo fuera del museo</a></div>



<br style="clear:both;" />
<br style="clear:both;" />
</div>

<div id="boxBanner">

<!--Inicio-->
<div class="tipTitulo">
<div class="tipBarra">
<div><a href="index.jsp?lang=esp">Bienvenido</a> | <a href="index.jsp?lang=eng">Welcome</a></div>
</div></div>
<!--Inicio-->

 </div>
</div>

 

<div id="boxCont">
<div class="contFoto">



</div>

<div class="contTexto">

<div id="contPortada">
<a href="index.jsp?id=818&ruta=3,316"><img src="http://museodeltraje.mcu.es/fotos/portada/Portada57.jpg" alt="Museo del Traje" width="260" /></a><br/><br/><a href="index.jsp?id=818&ruta=3,316"> </a>

</div>
<div id="contAvisos">
<div id="contAviso_no_imagen"><div class="avizquierda"><a href="index.jsp?id=77&ruta=7"><!--br--><img src="http://museodeltraje.mcu.es/fotos/portada/avisos/avisos-portada-Invierno2015.jpg" alt="Museo del Traje" width="224" height="71" /></a></div></div><div id="contAviso_no_imagen"><div class="avizquierda"><a href="index.jsp?id=807&ruta=3,316"><!--br--><img src="http://museodeltraje.mcu.es/fotos/portada/avisos/avisos-portada-balenciaga.jpg" alt="Museo del Traje" width="224" height="71" /></a></div></div><div id="contAviso_no_imagen"><div class="avizquierda"><a href="index.jsp?id=68&ruta=7,77,188"><!--br--><img src="http://museodeltraje.mcu.es/fotos/portada/avisos/avisos-portada-exodus-conf.jpg" alt="Museo del Traje" width="224" height="71" /></a></div></div><div id="contAviso_no_imagen"><div class="avizquierda"><a href="index.jsp?id=828&ruta=3,16,170,795"><!--br--><img src="http://museodeltraje.mcu.es/fotos/portada/avisos/avisos-portada-exodus.jpg" alt="Museo del Traje" width="224" height="71" /></a></div></div>

<br />






</div>

<br style="clear:both;" />

<div id="pie">

<div class="derecha"> | <a href='index.jsp?id=254&ruta=1'>acerca de</a> | <a href='index.jsp?id=255&ruta=1'>nota legal</a> | <a href='index.jsp?id=256&ruta=1'>accesibilidad WAI</a> | <a href='index.jsp?id=29&ruta=1'>AMIGOS DEL MUSEO</a> | <a href='index.jsp?id=27&ruta=1'>enlaces</a></div>
</div>
<div class="izquierdaCopy">
  <!--
  <a href="http://www.mcu.es/museos/musica2006/" target="_blank" title="abrir enlace externo en ventana nueva"><img src="images/musica2006.jpg" alt="Fiesta Europea de la Música" width="99" height="40" border="0"><br>
   <font color="#000000">Fiesta Europea de la Música en los Museos</font> </a-->   <!--a href="http://www.mcu.es/museos/Dia_museos2006/index.html" target="_blank"><span style="  color:#000000;text-decoration:none;font-size:100%;font-weight:bold;">D&iacute;a Internacional de los Museos</span></a><br>
    <a href="http://www.mcu.es/museos/Noche_museos2006/index.html" target="_blank" ><span style="color:#000000;text-decoration:none;font-size:100%;font-weight:bold;"> 
    La Noche de los Museos</span></a>
    -->
    <br>&copy; Ministerio de Educaci&oacute;n, Cultura y Deporte</div>
  <div id="wai">
   
      <a href="http://www.facebook.com/pages/Museo-del-Traje-Madrid/357948369351" target="_blank" title="Este enlace se abre en ventana nueva"><img src="images/face.gif" alt="Facebook"/></a>
      
      <a alt="Este enlace se abre en ventana nueva" target="_blank" title="Twitter" href="http://twitter.com/#!/MuseodelTraje"><img alt="Twitter" src="images/twitter.gif"></a>
      
      <a href="/rss/MT-RSS.xml" target="_blank" title="Se abre en otra ventana" alt="Se abre en otra ventana"><img src="images/RSS.gif" alt="Titulares RSS disponibles"/></a>
      
      
    <a href="http://www.tripadvisor.es/Attraction_Review-g187514-d500563-Reviews-Museum_of_Costume-Madrid.html" target="_blank" title="Se abre en otra ventana" alt="Se abre en otra ventana"><img src="images/TripAdvisor.gif" alt="Museo del Traje"/></a>
   
   
   <span>
        <a href="http://www.w3.org/WAI/WCAG1AA-Conformance" target="_blank" title="Se abre en otra ventana" alt="Se abre en otra ventana"><img src="images/dobleA.jpg" alt="Logo WAI Doble AA" width="60" height="22" /></a>
      </span>
  </div>
</div>

</div>
</div>
</div>
</div>
</div>

Ejercicio 2:

Práctica 2: Análisis de la accesibilidad de las páginas web.

Ejercicio 1:

Tras analizar las páginas www.xunta.es y www.mitele.es., puedo decir que los iconos de las páginas tienen mucho que ver con la página en sí, con lo que podemos decir que son iconos significativos. La página web de mitele.es tiene una especie de "play" dentro de un bocadillo, lo que hace idónea la página para ver vídeos. La página de xunta.es es como un caliz con un bola y una corona encima y varias cruces alrededor las cuales simbolizan la unión de Galicia.

Las dos páginas web cumplen perfectamente los criterios de accesibilidad ya que está ordenado y se puede acceder con mucha facilidad.

Ejercicio 2:

En este ejercicio analicé la página www.idae.es. Cumple el criterio de accesibilidad AA pero tiene 5 errores en la primera pauta del test de accesibilidad, que sea perceptible.

Práctica 1: Análisis del diseño de una página web.

Ejercicio 1:

Prediseño	apple.es
1.  Objetivo	Apple es una página web en la cual la empresa muestra sus diversos productos.
2. Público	La sencillez de la página permite su uso a todo tipo tipo de público, no obstante, tienes que saber lo que son sus productos para comprender mejor la intención de la web.
3. Contenidos	La página web está formada por distintas pestañas, en las cuales aparecen los distintos productos de su empresa.
4. Directrices	Tiene un encabezado en el cual puedes encontrar los diversos artículos que tienen en su tienda. También tiene una barra para buscar.

Ejercicio 2:

Elementos gráficos y tipográficos	Apple.es
Tipo de letra	Apple utiliza un tipo de letra estándar, de tamaño normal. Los enlaces que aparecen en la parte de abajo de la página presentan un tamaño de letra más pequeño, no obstante, en la misma fuente.
Aspecto	El aspecto de la pagina es sencillo. Presenta unas letras negras sobre un fondo blanco.

Ejercicios 3 y 4: 

Elementos de la imagen	Apple.es
Presencia del diseño	Apple presenta un aspecto sencillo y tecnológico. Es como si la simplicidad de la página transmitiese un aire innovador, tranquilo y tecnológico, resaltando la clase que se le da a la empresa.
Uso de colores	El uso de los colores es escaso.
Uso de multimedia	Apple presenta archivos multimedia, como fotos de sus articulos, propaganda llamativa, etc.
Fotos y textos	Predominan las imágenes en las distintas secciones que la página presenta.
Disposición de buscador	La página cuenta con un buscador para facilitar el manejo y la búsqueda en la dicha página. Este se encuentra en la parte alta del margen izquierdo.
Cambio del tamaño de la letra	Tiene mayoritariamente el mismo tamaño de letra, exceptuando los distintos títulos, que tiene un tamaño superior para resaltar su importancia.
Personalizar contenidos, cambiar de idioma	No permite personalizar la página ni cambiar el idioma.
Fuente RSS, mapa web	No tiene estas características, sólo permite visitar la página.
Engadir a favoritos	La página web permite añadirla a favoritos.
Compra on-line	En el margen derecho tiene una sección de “compra ahora” lo cual permite hacer la tarea de comprar on-line.

Conclusión:

Apple.es es una página web en la cual puedes comprar productos apple on-line y obtener informaciones sobre las diversas secciones que ofrece esta empresa.