.Exercicio 1. Crear logotipos nunha imaxe:
VACUNO
- IMAXE ORIXINAL:
- IMAXE MODIFICADA:
Logo
Tecnoloxías da información e da comunicación
martes, 21 de abril de 2015
lunes, 20 de abril de 2015
Práctica 17.2: GIMP_SELECCIÓNS E CAPAS
Exercicio 1. Crear unha nova imaxe a partir da combinación doutras:
- IMAXE ORIXINAL:
- IMAXE MODIFICADA:MI MR. POTATO
viernes, 17 de abril de 2015
Práctica 17.1:GIMP_A PRIMERA IMAXE
Con esta entrada dou comezo ás prácticas dedicadas a "GIMP", un programa de edición de imaxes dixitais en forma de mapa de bits, tanto de debuxos como de fotografías.
Práctica guiada. Un marco de foto:
ACUEDUCTO
- IMAXE ORIXINAL:
- IMAXE MODIFICADA:
Exercicio 1. Máis exemplos de marcos para fotos:
MANS
- IMAXE ORIXINAL:
FLOR
- IMAXE ORIXINAL:
Exercicio 2. Editar imaxes con filtros:
MANS
- IMAXE ORIXINAL:
- IMAXE MODIFICADA:
FLOR
- IMAXE ORIXINAL:
- IMAXE MODIFICADA:
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.
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.
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:
<META name="keywords" content="Museo del Traje">
-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ó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í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>© Ministerio de Educació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.
|
Suscribirse a:
Entradas (Atom)