Hoy hemos seguido con los vídeos y audios, viendo las distintas variables en las etiquetas, posteriormente hemos tenido una reunión de equipo para empezar a establecer los temas de los que hablaremos mañana en la asamblea. Hemos empezado a trabajar en la idea de la wiki que haremos entre todos, ayer la propuso una compañera y se dividieron las tareas para el trabajo de investigación, empezamos también a usar el calendario de google y ya estamos todos sincronizados para recibir las fechas nuevas al mismo tiempo.
En diseño gráfico ya hemos acabado con la teoría referente a la tipografía, hemos visto un vídeo y hemos presentado cada uno (tras la pertinente investigación y desarrollo del ejercicio) información acerca de varios tipos de letras. Hemos visto además una página para descargarnos distintas tipografías y cómo introducirlas en las herramientas de trabajo, cosa que supongo será útil cuando pasemos a algo práctico. La verdad estoy muy contenta con el desarrollo de las clases y lo bien que nos complementamos y organizamos los compañeros, hay muy buen ambiente de trabajo, estoy muy contenta de estar aquí.
jueves, 19 de junio de 2014
TRACKING Y KERNING EN TIPOGRAFÍA
El tracking (o track) ajusta el espacio que existe entre los caracteres, abriendo los cuerpos más pequeños y cerrando los mas grandes. Esta característica es aplicable a un grupo de caracteres (o a un texto) en general. Es decir, no es aplicable a caracteres individuales o a parejas de caracteres. Regula el espacio de forma proporcional.
Como es previsible, los ajustes y variaciones en el track afectan de forma directa a la estética y visibilidad de los textos. Como norma general podríamos decir que cuanto más grande es el cuerpo tipográfico empleado, más reducido debe ser el track. Esto es… más apretados deben estar los caracteres. Por el contrario, una disminución en el track en cuerpos pequeños disminuye considerablemente su legibilidad.
Los programas de autoedición más comunes emplean técnicas no estándar para el manejo del track. Por ejemplo, Adobe Indesign suele aumentar el track de manera porcentual al cuerpo empleado. QuarkXpress e incluso Microsoft Word emplean otros sistemas para el manejo del tracking.
El kerning alude al ajuste particularizado de espacio que existe entre dos caracteres para una determinada fuente. Se da por hecho que nos referimos siempre a tipografías de ancho variable, es decir, no monoespaciadas. Es un concepto que se aplica exclusivamente a pares de caracteres y no tiene por lo tanto sentido hablar de un kerning aplicado a un párrafo, texto o frase. Mediante el ajuste del kerning se consigue una apariencia más agradable a la vista. Las letras están diseñadas para estar visualmente equilibradas, pero no tienen el mismo espaciado.
En tipografía, el kerning normalmente se expresa cono un valor que debe ser añadido al espacio natural existente entre dos caracteres. Este valor puede ser tanto negativo (-80: los caracteres se acercan) como es el caso del par de caracteres AV en la fuente Helvética de Adobe, como positivo (30: los caracteres se alejan) como es el caso del par de caracteres ry en la misma fuente de ejemplo. Generalmente el kerning es positivo en el empleo de caracteres acentuados. Ejemplos típicos de pares de caracteres con kernng negativo: AV, AY, PA y AT. Los sistemas de autoedición profesionales contemplan esta serie de combinaciones, creando una tabla de kerning que contempla cada una de estas posibles parejas.
TIPOGRAFIA FRANKLIN GOTHIC
Diseñada por Morris F. Benton para la American Type Founders Company, es una de las tipografías sin serifa más populares y una de las más usadas dentro del estilo grotesco, en la familia tipográfica denominada como "palo seco".
Su nombre se lo debe a Benjamin Franklin, presidente de los Estados Unidos. Los robustos caracteres le dan al texto una apariencia moderna y sólida. Esta tipografía se modificó alargando la altura de la “x” y condensando los caracteres mejorando la legibilidad y economizando el espacio.
Morris F. Benton
Su nombre se lo debe a Benjamin Franklin, presidente de los Estados Unidos. Los robustos caracteres le dan al texto una apariencia moderna y sólida. Esta tipografía se modificó alargando la altura de la “x” y condensando los caracteres mejorando la legibilidad y economizando el espacio.
Este tipo de letra ha sido muy utilizado en titulares de periódicos y, a día de hoy, se sigue usando en los medios.
Esta tipografía tiene grosor super bold.
Morris F. Benton
ATRIBUTOS DE LA ETIQUETA ![]()
A la etiqueta <IMG> se le pueden añadir varios atributos para controlar la manera en que un navegador administra una imagen. Estos atributos son los siguientes:
| width="x" Permite al navegador predeterminar el ancho, en pixles, que tendrá tu imagen. | |
| height="x" Junto con el atributo width, el navegador puede preparar el espacio necesario para tu imagen antes de que se muestre. | |
| border="x" Para añadir o eliminar un borde, donde la x será un valor numérico. | |
| align="xxx" Puedes alinear una imagen horizontal y/o verticalmente en una página usando este atributo. | |
| alt="descripción_de_la_imagen" El atributo alt te permite describir la imagen para los navegadores de sólo texto, así como etiquetar la imagen antes de que se cargue en una página. | |
| hspace="x" horizontal space, se usa para añadir espacio vacío, con un valor numérico, en la coordenada horizontal de una imagen. | |
| vspace="x" vertical space, controla el espacio de la imagen en las coordenadas verticales. |
Vamos a ver más profundamente cada uno de estos atributos.
Esto es debido al tamaño que ocupa la imagen descargada del servidor. Normalmente, se suelen poner imágenes de pequeño tamaño (30 kb por ejemplo) que al pulsas sobre ellas aparece una imagen mucho mayor (digamos, 150 kb). Para hacer la imagen primera, la pequeña, NO hay que usar los valores width y height. Si intentamos hacer una imagen de 150 kb más pequeña usando los valores width y height, seguirá ocupando 150 kb. En vez de eso, hay que reducirla de tamaño usando programas como Adobe Photoshop, con la utilidad de cambiar el tamaño de imagen. Para los usuarios de FrontPage, también pueden hacer estos 2 pasos: primero redimensionar la imagen y hacerla más pequeña, y segundo pulsar sobre el botón "Nuevo Muestreo" en la barra de herramientas Imagen.
En resumidas cuentas, aquí tienes ejemplos de estos atributos usados de forma adecuada:
Para ver el ancho y alto exactos de tu imagen, míralos con tu programa de imágenes (en el capítulo "Herramientas para gráficos del Web"). Otro método es abrir las imágenes con Explorer 5.0, en el cual las imágenes aparecerán en las "Propiedades" tras pulsar con el botón derecho sobre ella, o con Netscape en el cual las dimensiones aparecen en la barra de título del programa.
Mientras que la alineación horizontal se hace con los valores de left y right, la alineación más empleada, también puedes usar el atributo align para alinear una imagen verticalmente.
Como estándar, los navegadores soportan estos tres valores:
Para aquellos casos individuales donde no estén disponibles los gráficos (si se usan navegadores de sólo texto con imposibilidad de mostrar imágenes, recursos limitados de Internet, o aquellas personas que navegan por la web con la opción de mostrar gráficos desconectada, el atributoalt ofrece una estupenda forma de escribir una visión natural de lo que es la imagen.
WIDTH y HEIGHT
Dos consejos básicos para el uso de estas etiquetas:- Pon siempre los atributos width y height en tu etiqueta IMG. Esto ayuda al navegador a administrar los datos de imágenes a lo largo de la página.
- Nunca uses valores imprecisos de width y height en tu imagen. Estos valores deben ser siempre exactos, o harás que el navegador muestre imágenes distorsionadas en la pantalla.
Esto es debido al tamaño que ocupa la imagen descargada del servidor. Normalmente, se suelen poner imágenes de pequeño tamaño (30 kb por ejemplo) que al pulsas sobre ellas aparece una imagen mucho mayor (digamos, 150 kb). Para hacer la imagen primera, la pequeña, NO hay que usar los valores width y height. Si intentamos hacer una imagen de 150 kb más pequeña usando los valores width y height, seguirá ocupando 150 kb. En vez de eso, hay que reducirla de tamaño usando programas como Adobe Photoshop, con la utilidad de cambiar el tamaño de imagen. Para los usuarios de FrontPage, también pueden hacer estos 2 pasos: primero redimensionar la imagen y hacerla más pequeña, y segundo pulsar sobre el botón "Nuevo Muestreo" en la barra de herramientas Imagen.
En resumidas cuentas, aquí tienes ejemplos de estos atributos usados de forma adecuada:
| Usando píxeles:
<IMG SRC="maxilogo.gif" WIDTH="160" HEIGHT="32">
<IMG SRC="maxilogo.gif" WIDTH="100" HEIGHT="32">
| |
| En porcentajeEs muy poco utilizado, y solo vale para casos muy concretos, por ejemplo, para hacer líneas horizontales con imágenes. Aquí tienes un ejemplo con la imagen anterior, pero distorsionada:
<IMG SRC="maxilogo.gif" WIDTH="80%" HEIGHT="32">
|
 NOTACuando diseñes tus gráficos, deberías de darles el tamaño adecuado para la web. Puedes aprender cómo hacer esto en el capítulo "Creando gráficos profesionales para el web". |
Bordes de imagen
Los bordes alrededor de las imágenes están predeterminados en los navegadores, especialmente si la imagen está enlazada con otra imagen o un archivo. Si no está enlazada, lo predeterminado es que no tenga borde. Los bordes pueden quedar totalmente antiestéticos según el diseño de la página.
Para asegurarte de que tus gráficos nunca muestren bordes, hay que usar el valor 0 en el atributo border=
<IMG SRC="maxilogo.gif" WIDTH="160" HEIGHT="32" BORDER="0">
Esto dirá a los navegadores que no muestren ningún tipo de borde alrededor de tu imagen, especialmente útil para aquellos navegadores antiguos que muestren bordes alrededor de las imágenes de forma predeterminada.
Aquí tienes unos ejemplos de sustituir el 0 por otro valor numérico en este atributo:
<IMG SRC="cambiar.jpg" BORDER=1>
<IMG SRC="cambiar.jpg" BORDER=2>
<IMG SRC="cambiar.jpg" BORDER=3>
Alineación
Hay muchas maneras de alinear una imagen dentro de la página. Horizontalmente, está predeterminada la alineación a la izquierda para una imagen y cualquier otro tipo de objeto solitario. Puedes usar el valor de alineación left (útil en casos en el que el texto rodea a la imagen, por ejemplo), o el valor right. Ejemplos:
<IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0" ALIGN="LEFT">
<IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0" ALIGN="RIGHT">
| NOTADebes usar otro método para centrar las imágenes, por ejemplo, la etiqueta DIV (mira el tema de las hojas de estilo), o centrando el párrafo: <P ALIGN="center"><IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0"></P> |
Mientras que la alineación horizontal se hace con los valores de left y right, la alineación más empleada, también puedes usar el atributo align para alinear una imagen verticalmente.
Como estándar, los navegadores soportan estos tres valores:
| top Este coloca la imagen en la parte más superior de la línea de texto (valor por defecto) | |
| middle La imagen ahora estará alineada con el centro de la línea de texto | |
| bottom Con este valor, la imagen será alineada con la parte inferior de la línea de texto |
Hay otros valores específicos de los navegadores, por ejemplo texttop (en la parte de arriba del texto más alto o imagen que esté en la línea de textp), absmiddle (alinea la imagen con la mitad más absoluta del texto o imagen que le rodee), baseline (igual que bottom) y absbottom (el cual alinea la parte de abajo de la imagen con la parte más baja de la imagen o texto que le rodee).
Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="TOP"> está alineada.
Esta imagen está alineada
está alineada
Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="MIDDLE"> está alineada.
Esta imagen está alineada
está alineada
Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="BOTTOM"> está alineada.
Esta imagen está alineada
está alineada
Estos valores son útiles algunas veces, pero no muy usados. De hecho, el alineamiento vertical de las imágenes usando el atributo align está reservado a situaciones en las que se requiere alineación precisa. En el HTML 4.0, tales alineamientos se hacen mejor con tablas o, sobre todo, hojas de estilo.
El atributo ALT
Este importante atributo te permite colocar una descripción a las imágenes. Por ejemplo:
<IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0" ALIGN="RIGHT" ALT="Dibujo de una bandera">
Para aquellos casos individuales donde no estén disponibles los gráficos (si se usan navegadores de sólo texto con imposibilidad de mostrar imágenes, recursos limitados de Internet, o aquellas personas que navegan por la web con la opción de mostrar gráficos desconectada, el atributoalt ofrece una estupenda forma de escribir una visión natural de lo que es la imagen.
El descripción de alt aparecerá en otras dos circunstancias. Una es un página en la que se cargan los gráficos. La descripción se mostrará antes de que se cargue el archivo asociado. Esta es una manera muy interesante de mantener informados a los navegantes de lo que posteriormente verán. Las descripciones definidas con este atributo también aparecen cuando el puntero del ratón pasa por encima de la imagen (pruébalo en el ejemplo de la bandera anterior). Esta información visual extra puede ser interesante para un diseño web.
Deberías usar este atributo con una única excepción: cuando una imagen tiene un único píxel en alguna de sus dimensiones usada para corregir algunas colocaciones en el diseño del web. En este caso, el atributo alt puede ser dejado en blanco o simplemente eliminado. Muchos desarrolladores de webs prefieren dejar este atributo en su lugar pero sin ninguna información entre las comillas.
<IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0" ALIGN="RIGHT" ALT="">
Espaciado horizontal y vertical
Los valores para hspace y vspace son numéricos. Para que podamos ver bien el efecto, vamos a usar unos valores muy altos para estos atributos.
Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera">
Una bandera
Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera" HSPACE="20">
Una bandera
Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera" VSPACE="20">
Una bandera
El uso de estos 2 atributos es particularmente útil cuando se coloca texto alrededor de las imágenes. Esto se llama texto envolvente dinámico, o imágenes flotantes. Tienes algo más de esta técnica en la próxima sección.
DIA TRECE 18/06/2014
Hoy hemos visto un documental acerca de los inicios de google, bastante interesante a mi parecer, hemos comenzado con la teoría acerca de las etiquetas de vídeo y audio para, posteriormente probar distintas formas de insertar dichos elementos en una página web.
En diseño seguimos con la teoría pertinente a la tipografía, profundizando aún más en conocimientos y, posteriormente y tras un vídeo acerca de qué es la tipografía, nos juntamos por grupos para recortar de distintas revistas, colocar en un folio y explicar todas las variantes nuevas aprendidas. Personalmente le he puesto cierto empeño en una idea que me surgió tras la teoría y el ejercicio propuesto sobre las etiquetas de vídeo y audio, que posteriormente subiré al blog.
En diseño seguimos con la teoría pertinente a la tipografía, profundizando aún más en conocimientos y, posteriormente y tras un vídeo acerca de qué es la tipografía, nos juntamos por grupos para recortar de distintas revistas, colocar en un folio y explicar todas las variantes nuevas aprendidas. Personalmente le he puesto cierto empeño en una idea que me surgió tras la teoría y el ejercicio propuesto sobre las etiquetas de vídeo y audio, que posteriormente subiré al blog.
EJERCICIO ETIQUETAS VIDEO Y AUDIO
En esta ocasión no me he limitado a hacer el ejercicio que se pedía y lo he hecho de forma más amplia, no obstante, por falta de tiempo no he añadido más páginas, aunque me hubiera gustado.
Mi idea ha sido crear una página como la del frame, algo modificada por supuesto dado la temática. Ésta sería la principal:
<!DOCTYPE html>
<html lang="es">
<header>
<meta name= Description" content="Prueba de menu musical">
<meta charset"utf-8" />
<title>Página de música</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</header>
<body link="blue" alink="blue" vlink="blue" background="C:\Users\ETC5\Pictures/musica.jpg">
<a name="arriba"></a>
<DIV ALIGN="center"><FONT FACE="verdana" SIZE=5 COLOR="#2E9AFE"></DIV>
<p></p>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/musicaaa.jpg" width="500px" height="300px" alt="blog"></a></div>
<h2>MENU</h2>
<ol>
<li><a href="C:\Users\ETC5\Desktop\melani/pagina musica 1.html" target="ventana1" title="música de Lordi">Lordi</a></li>
<li><a href="C:\Users\ETC5\Desktop\melani/pagina musica 3.html" target="ventana1" title="música y anime">Música y anime</a></li>
</ol>
<DIV ALIGN="center"><iframe src="http://www.mp3xd.com/" width="900" height="500" frameborder="1" name="ventana1"> </iframe></DIV> </ br>
<p></p>
<DIV ALIGN=center><img src="C:\Users\ETC5\Desktop\melani/adios.gif" width="600px" height="500px" alt="sandia"></div>
<DIV ALIGN=center><a href="javascript:history.go(-1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u ewwsefesetwtery- copia.png"width="54px" height="57px"></a></DIV>
<DIV ALIGN=center><a href="javascript:history.go(1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u.png" width="54px" height="57px"></a></DIV>
<div style="position:fixed;right:0;top:0;"><a href="#arriba"><img src="C:\Users\ETC5\Desktop\melani/clave.gif" width="200" height="145" /></div>
</body>
</html>
En este caso, he puesto un fondo diferente, con imagen y temática musical, creando en esencia una página de dicha temática.
Me encargué, además de crear yo misma la imagen que nos da la bienvenida a partir de la combinación de la imagen colorida de su fondo y las letras de bienvenida, aplicando la correspondiente transparencia, etc.
La clave de sol de la parte superior nos llevará a la parte superior de la página, acompañándonos constantemente.
Me encargué además de cambiar los colores de las letras y el menú en sí para que fuese más acorde y, en el menú aparecen los links correspondientes a las nuevas páginas que creé para complementar esta..
Para finalizar, puse una imagen animada como despedida así como las flechas para ir adelante o atrás en las páginas del frame.
Ésta es la primera página que asocié dentro del frame:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="Videos y canciones de Lordi">
<meta charset"utf-8" />
<title>Lordi</title>
<link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.6/video.js"></script>
<style type="text/css">
.vjs-default-skin { color: #ff0000; }
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { background-color: #ff0000 }
.vjs-default-skin .vjs-control-bar { font-size: 89% }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body link="red" alink="red" vlink="red" background="C:\Users\ETC5\Desktop\melani/fondo oscuro.jpg">
<a name="arriba"></a>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/lordiweb.jpg" width="800px" height="400px" alt="blog"></a></div>
<p></p>
<p><font face="univers" size="6" color="red"> <b>BITE IT LIKE A BULLDOG</b></font></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/NiQ3i5MwWrg?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe></p>
<p><font face="univers" size="6" color="red"> <b>THIS IS HEAVY METAL</b></font></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/CB8FcRv5YJo?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe>
<p></p>
<p><font face="univers" size="6" color="red"> <b>THE RIFT</b></font></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jFwbrHAyuaw?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe>
<p></p>
<p><font face="univers" size="6" color="red"> <b>DEVIL IS A LOOSER</b></font></p>
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
<source src="C:\Users\ETC5\Desktop\melani/Lordi Devil Is A Loser.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<div align=center><a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/lord.png"/></a></div>
</body>
</html>
Siguiendo la temática musical, la asocié a un grupo, con su respectivo logo e imagen. En su parte superior estaría la imagen del grupo, centrada gracias a un atributo de imagen para centrarla. Su fondo es completamente diferente al anterior,de nuevo por una imagen que he colocado. En su contenido, hay distintos vídeos adquiridos directamente de youtube, por lo tanto, se podrán ver incluso desde otro pc. Estos vídeos han sido colocados por iframes en cada uno.
Estos códigos se pueden obtener clicando en compartir, posteriormente en insertar, copiando el código que aparece pero,además, añadiéndole https: antes de las dos barras de su enlace, ya que sin ello, no es funcional.
Como últimos detalles, he adecuado el color de las letras al igual que antes a la estética de la página y, para finalizar, una imagen centrada con el logo del grupo y fondo transparente que, al clicar, lleva a la parte superior de la página. Los párrafos nuevos de la parte de head son los pertinentes al reproductor de música que he puesto en último lugar, ya que aquí estoy indicando su estilo, colores etc. El vídeo me lo he tenido que descargar para que pudiese funcionar, ya que directamente de youtube no servía.
El lugar donde pude adquirir este reproductor es http://www.videojs.com/
Éste sería el otro html relacionado con la primera página:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="Videos y canciones de Lordi">
<meta charset"utf-8" />
<title>MUSICA Y ANIME</title>
</head>
<body link="brown" alink="brown" vlink="brown" background="C:\Users\ETC5\Desktop\melani/back.jpg">
<a name="arriba"></a>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/anime.jpg" width="800px" height="400px" alt="blog"></a></div>
<p></p>
<p><font face="univers" size="6" color="brown"> <b>NIGHTMARE</b></font></p>
<video src="C:\Users\ETC5\Desktop\melani/MDS HAPPY HALLOWEEN MEP.mp4" width="600" heigth="600" controls> </video>
<p><font face="univers" size="6" color="brown"> <b>ROCK AND ROLL</b></font></p>
<video src="C:\Users\ETC5\Desktop\melani/MDS Rock N Roll MEP.mp4" width="600" heigth="600" controls> </video>
<p></p>
<p><font face="univers" size="6" color="brown"> <b>TORADORA OPENING</b></font></p>
<audio src="C:\Users\ETC5\Desktop\melani/Toradora Opening.mp3" width="600" heigth="600" controls> </audio>
<p></p>
<div align=center><a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/chica guitarra.jpg"/></a></div>
</body>
</html>
Ésta, aún con distinta estética a la anterior, sigue la misma estructura, la diferencia es que los vídeos están subidos con la etiqueta de video, y no de frame.
<video src="C:\Users\ETC5\Desktop\melani/MDS HAPPY HALLOWEEN MEP.mp4" width="600" heigth="600" controls> </video>
el src indica la ubicación del archivo, así como su nombre y extensión, dado que, para que funcionase he tenido que descargarlo en el pc, el link de youtube aquí no es funcional, al menos con el código así. Posteriormente especifiqué sus medidas, añadí la palabra "controls", la cual especifica al navegador que muestre los controles propios del video y, posteriormente,cerré la etiqueta.
Coloqué dos vídeos y un audio, con este código:
<audio src="C:\Users\ETC5\Desktop\melani/Toradora Opening.mp3" width="600" heigth="600" controls> </audio>
Los atributos son exactamente iguales, salvo la etiqueta de audio. también tuve que descargar dicho archivo para poder establecer la ruta de la ubicación de su carpeta
Mi idea ha sido crear una página como la del frame, algo modificada por supuesto dado la temática. Ésta sería la principal:
<!DOCTYPE html>
<html lang="es">
<header>
<meta name= Description" content="Prueba de menu musical">
<meta charset"utf-8" />
<title>Página de música</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</header>
<body link="blue" alink="blue" vlink="blue" background="C:\Users\ETC5\Pictures/musica.jpg">
<a name="arriba"></a>
<DIV ALIGN="center"><FONT FACE="verdana" SIZE=5 COLOR="#2E9AFE"></DIV>
<p></p>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/musicaaa.jpg" width="500px" height="300px" alt="blog"></a></div>
<h2>MENU</h2>
<ol>
<li><a href="C:\Users\ETC5\Desktop\melani/pagina musica 1.html" target="ventana1" title="música de Lordi">Lordi</a></li>
<li><a href="C:\Users\ETC5\Desktop\melani/pagina musica 3.html" target="ventana1" title="música y anime">Música y anime</a></li>
</ol>
<DIV ALIGN="center"><iframe src="http://www.mp3xd.com/" width="900" height="500" frameborder="1" name="ventana1"> </iframe></DIV> </ br>
<p></p>
<DIV ALIGN=center><img src="C:\Users\ETC5\Desktop\melani/adios.gif" width="600px" height="500px" alt="sandia"></div>
<DIV ALIGN=center><a href="javascript:history.go(-1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u ewwsefesetwtery- copia.png"width="54px" height="57px"></a></DIV>
<DIV ALIGN=center><a href="javascript:history.go(1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u.png" width="54px" height="57px"></a></DIV>
<div style="position:fixed;right:0;top:0;"><a href="#arriba"><img src="C:\Users\ETC5\Desktop\melani/clave.gif" width="200" height="145" /></div>
</body>
</html>
En este caso, he puesto un fondo diferente, con imagen y temática musical, creando en esencia una página de dicha temática.
Me encargué, además de crear yo misma la imagen que nos da la bienvenida a partir de la combinación de la imagen colorida de su fondo y las letras de bienvenida, aplicando la correspondiente transparencia, etc.
La clave de sol de la parte superior nos llevará a la parte superior de la página, acompañándonos constantemente.
Me encargué además de cambiar los colores de las letras y el menú en sí para que fuese más acorde y, en el menú aparecen los links correspondientes a las nuevas páginas que creé para complementar esta..
Para finalizar, puse una imagen animada como despedida así como las flechas para ir adelante o atrás en las páginas del frame.
Ésta es la primera página que asocié dentro del frame:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="Videos y canciones de Lordi">
<meta charset"utf-8" />
<title>Lordi</title>
<link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.6/video.js"></script>
<style type="text/css">
.vjs-default-skin { color: #ff0000; }
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { background-color: #ff0000 }
.vjs-default-skin .vjs-control-bar { font-size: 89% }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body link="red" alink="red" vlink="red" background="C:\Users\ETC5\Desktop\melani/fondo oscuro.jpg">
<a name="arriba"></a>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/lordiweb.jpg" width="800px" height="400px" alt="blog"></a></div>
<p></p>
<p><font face="univers" size="6" color="red"> <b>BITE IT LIKE A BULLDOG</b></font></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/NiQ3i5MwWrg?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe></p>
<p><font face="univers" size="6" color="red"> <b>THIS IS HEAVY METAL</b></font></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/CB8FcRv5YJo?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe>
<p></p>
<p><font face="univers" size="6" color="red"> <b>THE RIFT</b></font></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jFwbrHAyuaw?list=PLo6r4EtyVLYfRsASvEGHBQgAg2yrnMc04" frameborder="0" allowfullscreen></iframe>
<p></p>
<p><font face="univers" size="6" color="red"> <b>DEVIL IS A LOOSER</b></font></p>
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
<source src="C:\Users\ETC5\Desktop\melani/Lordi Devil Is A Loser.mp4" type='video/mp4'>
<source src="MY_VIDEO.webm" type='video/webm'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<div align=center><a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/lord.png"/></a></div>
</body>
</html>
Siguiendo la temática musical, la asocié a un grupo, con su respectivo logo e imagen. En su parte superior estaría la imagen del grupo, centrada gracias a un atributo de imagen para centrarla. Su fondo es completamente diferente al anterior,de nuevo por una imagen que he colocado. En su contenido, hay distintos vídeos adquiridos directamente de youtube, por lo tanto, se podrán ver incluso desde otro pc. Estos vídeos han sido colocados por iframes en cada uno.
Estos códigos se pueden obtener clicando en compartir, posteriormente en insertar, copiando el código que aparece pero,además, añadiéndole https: antes de las dos barras de su enlace, ya que sin ello, no es funcional.
Como últimos detalles, he adecuado el color de las letras al igual que antes a la estética de la página y, para finalizar, una imagen centrada con el logo del grupo y fondo transparente que, al clicar, lleva a la parte superior de la página. Los párrafos nuevos de la parte de head son los pertinentes al reproductor de música que he puesto en último lugar, ya que aquí estoy indicando su estilo, colores etc. El vídeo me lo he tenido que descargar para que pudiese funcionar, ya que directamente de youtube no servía.
El lugar donde pude adquirir este reproductor es http://www.videojs.com/
Éste sería el otro html relacionado con la primera página:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="Videos y canciones de Lordi">
<meta charset"utf-8" />
<title>MUSICA Y ANIME</title>
</head>
<body link="brown" alink="brown" vlink="brown" background="C:\Users\ETC5\Desktop\melani/back.jpg">
<a name="arriba"></a>
<div align=center><img src="C:\Users\ETC5\Desktop\melani/anime.jpg" width="800px" height="400px" alt="blog"></a></div>
<p></p>
<p><font face="univers" size="6" color="brown"> <b>NIGHTMARE</b></font></p>
<video src="C:\Users\ETC5\Desktop\melani/MDS HAPPY HALLOWEEN MEP.mp4" width="600" heigth="600" controls> </video>
<p><font face="univers" size="6" color="brown"> <b>ROCK AND ROLL</b></font></p>
<video src="C:\Users\ETC5\Desktop\melani/MDS Rock N Roll MEP.mp4" width="600" heigth="600" controls> </video>
<p></p>
<p><font face="univers" size="6" color="brown"> <b>TORADORA OPENING</b></font></p>
<audio src="C:\Users\ETC5\Desktop\melani/Toradora Opening.mp3" width="600" heigth="600" controls> </audio>
<p></p>
<div align=center><a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/chica guitarra.jpg"/></a></div>
</body>
</html>
Ésta, aún con distinta estética a la anterior, sigue la misma estructura, la diferencia es que los vídeos están subidos con la etiqueta de video, y no de frame.
<video src="C:\Users\ETC5\Desktop\melani/MDS HAPPY HALLOWEEN MEP.mp4" width="600" heigth="600" controls> </video>
el src indica la ubicación del archivo, así como su nombre y extensión, dado que, para que funcionase he tenido que descargarlo en el pc, el link de youtube aquí no es funcional, al menos con el código así. Posteriormente especifiqué sus medidas, añadí la palabra "controls", la cual especifica al navegador que muestre los controles propios del video y, posteriormente,cerré la etiqueta.
Coloqué dos vídeos y un audio, con este código:
<audio src="C:\Users\ETC5\Desktop\melani/Toradora Opening.mp3" width="600" heigth="600" controls> </audio>
Los atributos son exactamente iguales, salvo la etiqueta de audio. también tuve que descargar dicho archivo para poder establecer la ruta de la ubicación de su carpeta
martes, 17 de junio de 2014
EJERCICIO DE MAPA DE IMAGEN
<!DOCTYPE html>
<html lang="es">
<head>
<meta name= Description" content="p⨩na para la prueba de conocimientos">
<meta charset"utf-8" />
<title>UF1303</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body link="white" alink="blue" vlink="violet" background="C:\Users\ETC5\Desktop\melani/8337793.png">
<a name="arriba"></a>
<DIV ALIGN="center"><FONT FACE="verdana" SIZE=5 COLOR="#ba55d3">
<B>
<I><U><h1> BIENVENIDOS </h1></B></I></U></FONT>
</DIV>
<p></p>
<div align=center><a href="http://ifcd0110castrourdiales.blogspot.com.es/"> <img src="C:\Users\ETC5\Desktop\melani/pic27.gif" width="284px" height="177px" alt="blog"></a></div>
<p>
<img style="border:0" src="C:\Users\ETC5\Desktop\melani/Sin nombre.jpg" usemap="#fish"
alt="Los peces te llevarán a distintas paginas de interes">
<map name="fish">
<area shape="circle" coords="98,91,60" href="http://peces.anipedia.net/" target="ventana1" alt="fish 1.">
<area shape="circle" coords="276,78,60" href="http://nationalgeographic.es/animales/peces/bancosdepeces/imagen/atunes" target="ventana1" alt="fish 2.">
<area shape="circle" coords="492,72,60" href="http://es.wikipedia.org/wiki/Pisces" target="ventana1" alt="fish 3.">
<area shape="circle" coords="695,75,60" href="https://www.google.es/search?q=peces&espv=2&source=lnms&tbm=isch&sa=X&ei=5v2fU_SiMoGc0AXKu4DIBQ&ved=0CAYQ_AUoAQ&biw=1600&bih=756" target="ventana1" alt="fish 4.">
</map>
</p>
<DIV ALIGN=left><img src="C:\Users\ETC5\Desktop\melani/gatos y perros png (10).png" alt="sandia"></div>
<h2>MENU</h2>
<ol>
<li><a href="http://www.yupiyupi.com" target="ventana1" title="fotos de animalitos">Yupi Yupi</a></li>
<li><a href="http://www.cuantogato.com" target="ventana1" title="Fotos de gatos">Cuanto gato</a></li>
<li><a href="https://es-la.facebook.com/FotosDeAnimalesLindosYTiernos" target="ventana1" title="animales tiernos de facebook">Perfil animales tiernos</a></li>
<li><a href="http://www.oletusjuegos.es/juegos-pintar-animalitos-tiernos.htm" target="ventana1" title="juego">Pinta animalitos</a></li>
</ol>
<DIV ALIGN="center"><iframe src="http://danii-gabii.blogspot.com.es/p/cositas-kawaii.html" width="900" height="500" frameborder="1" name="ventana1"> </iframe></DIV> </ br>
<p></p>
<DIV ALIGN=center><img src="C:\Users\ETC5\Desktop\melani/Frutita 1.png" alt="sandia"></div>
<DIV ALIGN=center><a href="javascript:history.go(-1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u ewwsefesetwtery- copia.png"width="54px" height="57px"></a></DIV>
<DIV ALIGN=center><a href="javascript:history.go(1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u.png" width="54px" height="57px"></a></DIV>
<div style="position:fixed;right:0;top:0;"><a href="#arriba"><img src="C:\Users\ETC5\Desktop\melani/gatos y perros png (3).png" width="129" height="145" /></div>
</body>
</html>
La parte seleccionada es la nueva que añadí hoy al código y la pertinente a un mapa de imagen el cual, mediante una imagen con varios peces, haciendo click en cada uno, lleva a distintas páginas cada uno y todos visualizados en el frame de la parte inferior.
<html lang="es">
<head>
<meta name= Description" content="p⨩na para la prueba de conocimientos">
<meta charset"utf-8" />
<title>UF1303</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body link="white" alink="blue" vlink="violet" background="C:\Users\ETC5\Desktop\melani/8337793.png">
<a name="arriba"></a>
<DIV ALIGN="center"><FONT FACE="verdana" SIZE=5 COLOR="#ba55d3">
<B>
<I><U><h1> BIENVENIDOS </h1></B></I></U></FONT>
</DIV>
<p></p>
<div align=center><a href="http://ifcd0110castrourdiales.blogspot.com.es/"> <img src="C:\Users\ETC5\Desktop\melani/pic27.gif" width="284px" height="177px" alt="blog"></a></div>
<p>
<img style="border:0" src="C:\Users\ETC5\Desktop\melani/Sin nombre.jpg" usemap="#fish"
alt="Los peces te llevarán a distintas paginas de interes">
<map name="fish">
<area shape="circle" coords="98,91,60" href="http://peces.anipedia.net/" target="ventana1" alt="fish 1.">
<area shape="circle" coords="276,78,60" href="http://nationalgeographic.es/animales/peces/bancosdepeces/imagen/atunes" target="ventana1" alt="fish 2.">
<area shape="circle" coords="492,72,60" href="http://es.wikipedia.org/wiki/Pisces" target="ventana1" alt="fish 3.">
<area shape="circle" coords="695,75,60" href="https://www.google.es/search?q=peces&espv=2&source=lnms&tbm=isch&sa=X&ei=5v2fU_SiMoGc0AXKu4DIBQ&ved=0CAYQ_AUoAQ&biw=1600&bih=756" target="ventana1" alt="fish 4.">
</map>
</p>
<DIV ALIGN=left><img src="C:\Users\ETC5\Desktop\melani/gatos y perros png (10).png" alt="sandia"></div>
<h2>MENU</h2>
<ol>
<li><a href="http://www.yupiyupi.com" target="ventana1" title="fotos de animalitos">Yupi Yupi</a></li>
<li><a href="http://www.cuantogato.com" target="ventana1" title="Fotos de gatos">Cuanto gato</a></li>
<li><a href="https://es-la.facebook.com/FotosDeAnimalesLindosYTiernos" target="ventana1" title="animales tiernos de facebook">Perfil animales tiernos</a></li>
<li><a href="http://www.oletusjuegos.es/juegos-pintar-animalitos-tiernos.htm" target="ventana1" title="juego">Pinta animalitos</a></li>
</ol>
<DIV ALIGN="center"><iframe src="http://danii-gabii.blogspot.com.es/p/cositas-kawaii.html" width="900" height="500" frameborder="1" name="ventana1"> </iframe></DIV> </ br>
<p></p>
<DIV ALIGN=center><img src="C:\Users\ETC5\Desktop\melani/Frutita 1.png" alt="sandia"></div>
<DIV ALIGN=center><a href="javascript:history.go(-1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u ewwsefesetwtery- copia.png"width="54px" height="57px"></a></DIV>
<DIV ALIGN=center><a href="javascript:history.go(1)"><img src="C:\Users\ETC5\Desktop\melani/flecha_png_2_by_aguuseditiions-d4nqj4u.png" width="54px" height="57px"></a></DIV>
<div style="position:fixed;right:0;top:0;"><a href="#arriba"><img src="C:\Users\ETC5\Desktop\melani/gatos y perros png (3).png" width="129" height="145" /></div>
</body>
</html>
La parte seleccionada es la nueva que añadí hoy al código y la pertinente a un mapa de imagen el cual, mediante una imagen con varios peces, haciendo click en cada uno, lleva a distintas páginas cada uno y todos visualizados en el frame de la parte inferior.
TIPOGRAFIA
¿Qué es?
El tipo o diseño de letra, es decir, cómo dibujamos un tipo de letra, la técnica de reproducir la comunicación de manera impresa. El origen de la tipografía es la escritura misma, donde ha habido escritura, ha habido tipografía.
Hay varios bloques
- Tipo:
- Fuente o estilo
- Familia o conjunto de diferencias tipográficas
Se distinguen dos grandes grupos
- Con serifa (o terminación)
- Sin serifa (sin terminación)
Más ejemplos
Variables tipográficas
- Forma
- Minúsculas
- Versalitas (fusión entre mayúsculas y minúsculas. Caracteres en mayúscula con tamaño en minúscula)
- Grosor
- Redonda o regular (cuando escribimos normal)
- Super negra (superbold)
- Fina (fine)
- Super fina (super fine)
- Orientación
- Regular (tal cual, sin tocarla)
- Proporción
- Condensada (aplastada)
- Expandida (estirada)
.jpg)
- Tamaño (se mide en pt o puntos)
Cuerpo del texto: se organiza a través de la cuadrícula
A cada columna escrita se le llama columna de texto
A cada columna escrita se le llama columna de texto.
Espaciado de texto: hueco que queda entre palabras
Espaciado de texto: hueco que queda entre palabras
A poco espaciado, poca legibilidad. La diferencia entre el espaciado del manuscrito y el realizado a máquina, es que el del manuscrito no es exacto.
Interlineado: espacio entre líneas
Poco interlineado se traduce en mala legibilidad
Alineado del texto:
Todos estos tipos menos el justificado tienen ríos en sus líneas.
El alineado a la izquierda es adecuado para textos largos, el alineado a la derecha y el centrado al contrario que éste, son para textos muy cortos. El centrado para títulos, versos, se recomienda uso mínimo.
El alineado justificado es apto para libros, el más equilibrado, pensado para textos largos
DIA DOCE 17/6/2014
Hoy ha sido un día bastante creativo y experimental ya que hemos visto algunas herramientas del gimp, hemos aprendido a aplicar transparencia a las imágenes y hemos probado a ver qué hacían distintas herramientas para que vayamos familiarizándonos con el programa. Es algo más fácil de usar que photoshop.
Aprendimos cómo ver las coordenadas en las imágenes para, junto con los nuevamente aprendidos mapas (así como sus distintas formas y variantes) aprender a elaborar una imagen que, haciendo click en distintas partes de la misma, lleven a una página u otra.
Tras esto, elaboramos un menú a base de una imagen modificada en el cual pusimos vinculadas cuatro páginas web diferentes dependiendo de la parte de la imagen a la cual se hiciese click.
Hemos visto también los distintos formatos de imagen y las diferencias entre los mismos.
En diseño gráfico, y siguiendo con la tipografía, aprendimos más teoría para, posteriormente, salir a explicar el trabajo de ayer ya completado con los nuevos conocimientos. Tras esto, seleccionamos individualmente un logotipo que tuviese letras y analizamos su tipografía.
Aprendimos cómo ver las coordenadas en las imágenes para, junto con los nuevamente aprendidos mapas (así como sus distintas formas y variantes) aprender a elaborar una imagen que, haciendo click en distintas partes de la misma, lleven a una página u otra.
Tras esto, elaboramos un menú a base de una imagen modificada en el cual pusimos vinculadas cuatro páginas web diferentes dependiendo de la parte de la imagen a la cual se hiciese click.
Hemos visto también los distintos formatos de imagen y las diferencias entre los mismos.
En diseño gráfico, y siguiendo con la tipografía, aprendimos más teoría para, posteriormente, salir a explicar el trabajo de ayer ya completado con los nuevos conocimientos. Tras esto, seleccionamos individualmente un logotipo que tuviese letras y analizamos su tipografía.
DIA ONCE 16/06/2014
Hoy hemos estado viendo los distintos atributos de las imágenes, jugueteando un poco a la ora de modificarlos para colocarlas en distintos lugares etc, hemos empezado a ver las transparencias en las imágenes y nos hemos descargado el gimp. En diseño gráfico comenzamos a ver las tipografías y luego nos pusimos por grupos para recortar y pegar distintas letras especificando si tenían serifa o no.
Logotipo, análisis de tipografía
Ahora procederé a analizar la tipografía del logotipo de Nintendo:
Respecto a su tipo de letra, puedo afirmar claramente que es sin serifa dado que no posee terminaciones en ninguna de sus letras.
Vemos que en su nombre, la primera letra es mayúscula y el resto minúscula, respetando así la ortografía. Su proporción sería regular, su grosor negrita y, su familia tipográfica sería palo seco. Su orientación sería regular
Suscribirse a:
Entradas (Atom)