Andrea Suárez: enero 2015

martes, 27 de enero de 2015

Práctica 5: CREAR UNHA PÁXINA WEB CON TEXTOS, IMAXES E VÍNCULOS

Exercicio 1: Mellorar o aspecto con novos atributos.

O primero paso foi darlle formato ao texto de Antonio Machado para que tivera a estructura dun poema.

Exercicio 2: Insertar unha imaxe.

No seguinte paso engadín unha foto dun olmo para ilustrar o poema e facer máis vistosa a páxina.

Exercicio 3:Vínculos absolutos, relativos e internos.

Para rematar, introducín varios enlaces para que os usuarios interesados, poidan acceder a información adicional sobre o autor.

Práctica 4: COMEZAR A PROGRAMAR EN HTML

Exercicio 1: Realizar a primeira páxina web.

Puxenlle de título: "Estoy empezando", e escribín nela: "No está mal para ser la primera".

Como a anterior quedou demasiado sinxela, modifiqueina añadíndolle un encabezado en cor vermella, cambia a posición do primero párrafo e introducín un novo en cor verde.

Exercicio 2: Dar formato a un texto.

A continuación dinlle formato ao artigo de Alejandro Valero: "Linux para os estudiantes".

Púxenlle cor aos encabezados, estructureino en distintos párrafos, introducín algún saltos de línea, xustiquei os tres primeiros párrafos e, por último, estructurei outros tres párrafos como elementos dunha listaxe.

lunes, 26 de enero de 2015

Práctica 3: ANÁLISE DO CÓDIGO HTML DE PÁXINAS WEB

Exercicio 1: Ver o código fontes. Identificar etiquetas.

-Código fonte en Internet Explorer:

-Código fonte en Mozilla Firefox:

<body>
 
<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>
</body>

Exercicio 2: Modificar o código fonte. Visualización dos cambios.

Práctica 2: ANÁLISE DA ACCESIBILIDADE DE PÁXINAS WEB

Exercicio 1: Análise do icono de accesibilidade.

Accesibilidade	Xunta.es	Accesible.es	W3C.es
Logotipo de accesibilidade	Fácil de apreciar, xa que aparece acompañado do nome da páxina en letras maiúsculas.	A simple vista, non hai un logotipo que encabece a páxina.	Dun tamaño bastante grande, destacado sobre un fondo azul e composto simplemente polas inicias da páxina, o logotipo é moi visible.
Etiquetas Alt nas imaxes e nos enlaces	Conta con abundantes enlaces que dan acceso ás diferentes seccións da páxina, e algunha imaxe complementaria.	Non presenta ningunha imaxe, pero si enlaces que están ligados ás etiquetas do marxe esquerdo.	Predominan os enlaces ás múltiples entradas e categorías. Ausencia de imaxes
Texto descriptivo nos enlaces	Teñén un breve título descripitivo.	Non hai descripción nos enlaces.	Só os enlaces das diferentes seccións da páxina teñen texto descriptivo.

Exercicio 2: Test de accesibilidade.

Sitio web	Error 1	Error 2	Error 3	Error 4
idae.es	Perceptible 5
divinity.es	Perceptible 22	Operable 27	Comprensible 1	Robusto 45

jueves, 15 de enero de 2015

Práctica 1: ANÁLISE DE DESEÑO DE PÁXINAS WEBS

Exercicio 1: Análise do prediseño de páxinas web.

PREDISEÑO	VEVO.COM
Obxectivo	Vevo é unha plataforma de videos musicais. Nela os usuarios poden ver e compartir os seus videoclips oficiais dos seus artistas favoritos ou enterarse das últimas novidades e extreos musicais a nivel mundial.
Público	Está dirixida para tódolos usuarios grazas ao seu servizo gratuito e de fácil acceso, a través do cal os usuarios poden enterarse da actualidade musical, tan só navegando pola súa páxina principal.
Contido	O seu contido é moi amplo. Está formado pola selección dos videoclips máis destacados e clasificados segundo outras categorías, dos resultados do buscador e dos shows dos artistas máis aclamados.
Directrices	Na cabeceira da páxina principal hai un buscador, unha páxina que dá acceso a un menú de videoclips, outra a shows musicais e no marxe dereito a opción de crear unha conta na web. Xusto debaixo da cabeceira aparecen os carteis dos últimos extreos da semana e ocupando o espacio restante da páxina esatópase unha ampla selección ordenada dos videos máis destacados aos menos destacados da temporada.

Exercicio 2: Análise de elementos gráficos e topográficos.

Elementos gráficos e tipográficos	VEVO.COM
Tipo de letra	Emprega unha letra en formato negrita, de cor negra en maiúscula e de tamaño encabezado para os títulos dos vídeos e as pestañas da cabeceira. As descripcións dos videos están escritas nunha letra estándar, de tamaño normal, en minúscula e en cor negra. Sen embargo, as opcións do buscador están en cor branca, en tamaño subencabezado e en negrita
Aspecto	As imaxes e os tumblr dos videoclips, xunto co seu título e descripción correspondentes sitúanse sobre un fondo branco, mentres que os resultados do buscador aparecen en cor branca sobre un fondo escuro e algo transparente. Emprega un azul claro intenso para resaltar os enlaces marcados.

Exercicio 3: Análise dos elementos imaxe.

ELEMENTOS DE IMAXE	VEVO.COM
Presenza de diseño	Ten un diseño moi sencillo caracterizado prácticamente por elementos multimedia que axudan a que os usuarios comprendan a mensaxe dunha maneira máis simple e clara.
Uso de cores	A páxina destaca pola sua simplicidade de cores. Todólos elementos tanto de texto como de imaxes sitúanse sobre un fondo branco, e cores básicas para mostrar o texto (negro e azul), exceptuando a ventá dos resultados das búsquedas que etán nun fondo escuro e en letra blanca.
Uso de ilustracións, imaxes e iconos	Básicamente cómponse de imaxes e tumbrl que para anunciar os videoclips adquire máis importancia que o texto.
Composición de fotos e texto	Tódolos carteles dos videoclips colgados na páxina van acompañados dun título e unha breve descripción que só aportan información adicional e non tan importante coma as imaxes.

Exercicio 4: Análise de elementos funcionais.

ELEMENTOS FUNCIONALES	VEVO.COM
Buscador	Conta cun buscador onde se poden buscar os videoclips segundo á categoria que pertencen para concretar a búsqueda.
Tamaño de letra e alto contraste	Vevo non dispón dunha opción específica de cambio de tamaño de texto ou alto contraste, o seu diseño non pode ser modifica polo público.
Personalización de contidos e idiomas	Só ten a opción de rexistrarse para que os usuarios poidan crear as súas propias listas de reproducción cos seus videos favoritos e compartilos cos seus amigos. Existen varios países que adquiriron a súa propia versión de vevo.
Fontes RSS, mapa da web	Vevo non ofrece estas posibilidades.
Favoritos, páxina de inicio e newsletter	Para escoller os teus videos preferidos é necesario rexistrarse na páxina. Outra das súas utilidades é a de poder inscribirse para estar sempre enterado das últimas tendencias musicais recibindo cada certo tempo dita información por correo.
Compra on-line	Obtén os seus ingresos mediante a emisión de publicidade antes dos videos, vendendo entradas online para concertos e ofrecendo a opción de descargar os videos accedendo directamente ao servizo de iTunes.

RESUMEN	VEVO.COM
Conclusiones	Vevo é un espacio web dedicado a ofrecer entretemento musical mediante o mellor e máis accesible servizo. Caracterizado por un diseño moi sencillo que resulta máis funcional.

Andrea Suárez

Logo