Diario IFCD0110 Castro Urdiales: 2014-06-22

viernes, 27 de junio de 2014

DIA DIECIOCHO 27/06/2014 PRUEBA DE VALIDACION

Resumiendo, hoy hubo prueba de validación, he acabado con algo de tiempo así que seguiré subiendo apuntes o algo pero estoy bastante agobiada. Bueno, básicamente las preguntas fiueron acerca de la teoría dada y, por último, el ejercicio, se basaba en hacer una página con la temática de una empresa, con su logo, los colores acordes, un anuncio, una marquesina con su eslogan un mapa de imagen con el plano y distintas áreas poligonales clicables que llevarían a distintas secciones de su página oficial, siendo la última encargada de enviar un mail a atención al cliente.Finalmente, un audio de fondo. El mío es éste, yo lo hice de nintendo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta name="Description" content="Página de nintendo">
<meta charset"utf-8" />
<title>NINTENDO</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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: #4745a6; }
.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-big-play-button { background: rgba(27,21,225,0.7) }
.vjs-default-skin .vjs-slider { background: rgba(27,21,225,0.2333333333333333) }
</style>
</head>
<body background="C:\Users\ETC5\Desktop\melani/wallpy.png" attachment="inherit">
<header>
<DIV ALIGN="center"><img src="C:\Users\ETC5\Desktop\melani/nintendo-logo.gif" width="800px" height="400px" alt="blog"></a></div>
<DIV ALIGN="center"><video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls autoplay preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="C:\Users\ETC5\Desktop\melani/mario anuncio.mp4" type='video/mp4'>
<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>
</header>
<p></P>
<DIV ALIGN="center"><marquee align="right" bgcolor="transparent" width="50%" scrolldelay="100" scrollamount="5" BEHAVIOR="alternate" loop="infinite"><FONT FACE="arial" COLOR="red" SIZE="10">Nintendo, too much fun</FONT>
</marquee></div>
<p>
<DIV ALIGN="center"><img style="border:0" src="C:\Users\ETC5\Desktop\melani/nintendo mapa.jpg" usemap="#nintendo"
alt="Prueba a hacer click">
<map name="nintendo">
<area shape="circle" coords="349,325,60" href="http://www.nintendo.es/" target="ventana1" alt="nintendo1">
<area shape="rectangle" coords="105,271,195,270,196,373,99,369" href="http://www.nintendo.es/Atencion-al-cliente/Atencion-al-consumidor-11593.html" target="ventana1" alt="nintendo2">
<area shape="poly" coords="546,385,624,339,682,396,639,493" href="mailto:contact@nintendo.es" alt="nintendo3">
</map></div>
</p>
<audio autoplay id="bgsound">
<source src="C:\Users\ETC5\Desktop\melani/mario musica.mp3"
type="audio/mp4">
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
<script>
document.getElementById('bgsound').volume=0.2;
</script>
<button type="button"
onclick="document.getElementById('bgsound').pause();">
Stop background sound
</button>

</body>
</html>

Éste es el examen íntegro

miércoles, 25 de junio de 2014

DIA DIECISIETE 25/06/2014

Hoy me he centrado primordialmente en la elaboración de una extensa explicación en el blog acerca de las etiquetas, el menú simple y el menú con pestañas desplegables, posteriormente junto con mis compañeras de grupo nos hemos puesto manos a la obra con el monográfico, aún está sin acabar pero tenemos bastante tiempo de margen para lo que se tarda en realidad, además, habiendo que explicarlo de forma breve y concisa, hay que acortar su extensión en la medida de lo posible.
Otros compañeros han organizado además la división de trabajo de la wiki, empezando a meter contenido informativo etc
En diseño gráfico hemos seguido con el trabajo que nos quedó pendiente el otro día mi compañera y yo, teníamos que analizar la maquetación de un par de páginas de un libro y, hoy tras acabarlo, hemos presentado todos el resultado. Posteriormente vimos un vídeo acerca de el diseño editorial para, finalmente, tener de trabajo pendiente el análisis de la maquetación de una página web. Personalmente apenas me dio tiempo a empezarla, así que el próximo día la terminaré. Este viernes tenemos prueba de validación, ya la última de esta unidad formativa, pasaremos el próximo día a la siguiente.
Mañana de nuevo no hay clase dado que es fiesta pero no siento la necesidad de repasar para la prueba, la parte mala es que esta vez tenemos un máximo de extensión de las respuestas, supongo que dada la extensión de mi otra prueba, así que tendré que esforzarme en sintetizar.

EJERCICIO ANALISIS DE MAQUETACION DE PAGINA WEB

Antes de comenzar este análisis, me gustaría nombrar la página a comentar:

http://construestilo.com/

Su contenido es de temática de arquitectura. Tiene una orientación vertical. Encontramos una estructura un tanto simple, con una imagen (dividida en distintas imágenes, variable y animada) central, un menú desplegable sobre ella así como acceso a redes sociales en su parte superior izquierda. Bajo la imagen de su cabecera, encontramos un anuncio y, tras el, un pequeño resumen de sus distintos artículos (clicables) que van cargando y apareciendo conforme bajamos. En su margen derecho hay un botón para ir arriba del todo que nos acompaña por toda la página y, por último, un anuncio en su parte inferior.

MENU SIMPLE Y MENU CON PESTAÑAS PARA EL BLOG

¿Qué es un menú?

Es una lista de pestañas que nos indica distintas secciones del blog.

¿Para qué sirve?

Es una forma ordenada y sencilla de presentar y encontrar las distintas entradas del blog

¿Cómo crear un menú simple?

Para poder crear un menú primero deberemos asignar etiquetas a las distintas entradas.

¿Qué es una etiqueta?

Una etiqueta es el nombre de una clasificación o grupo que se asigna a una entrada

¿Para qué sirve?

Nos ayuda a una mejor organización (junto con el menú) de nuestros distintos artículos, sin su ayuda, el menú no podría funcionar adecuadamente.

¿Cómo crear una etiqueta?

Para poder crear una etiqueta y asignarla a una entrada del blog, primero deberemos tener un artículo o entrada ya hecho.

Vamos a situarnos aquí.

Hacemos click entonces donde señala la flecha, es decir, en el nombre del blog.

Nos llevará a esta sección, que es la vista general

Estando aquí, haremos click en la siguiente sección de éste menú, que es "entradas"

Veremos esto:

Primero seleccionaremos la entrada o entradas que queremos que tengan etiqueta.

Nos saldrá este mensaje

En el hueco que tenemos escribiremos el nombre de ésta etiqueta y le damos a "aceptar".

Vamos ubicando entonces los artículos con las etiquetas que queramos darles para organizarlos bien. Recordar no colocar más de una etiqueta o no tendrá ningún sentido este orden ya que aparecerá el artículo en varias partes del menú.

Cuando tengamos todas las etiquetas que queremos, vamos a la pestaña de "diseño" que hemos visto en la segunda foto.

Ésta es la visualización de la estructura de nuestro blog.

Aquí de hacemos click a "Añadir un gadget", tras esto, nos saldrá una ventana con múltiples opciones a escoger. Nosotros estamos interesados en el de "Páginas"

Hacemos click para agregarlo y nos saldrá ésta ventana para que establezcamos las opciones deseadas. Hacemos click en "Añadir enlace externo"

Minimizamos la ventana haciendo click en la raya horizontal que está en la esquina superior derecha, al lado del cuadrado y vamos a una entrada de nuestro blog, dándole click en "ver", que estará visible dejando el cursor sobre el nombre de la entrada.

Una vez en dicho artículo, seleccionamos la etiqueta para que nos lleve a todos aquellos artículos que la tengan.

Copiamos el link que sale en la página y lo pegamos aquí,tras borrar el http:// que nos aparece en la barra de dirección web.

Posteriormente le damos a guardar enlace

Ya tendremos nuestra primera pestaña del menú, haremos entonces de la misma manera el resto hasta que tengamos todas las que queremos. Cuando hayamos finalizado, le haremos click a Guardar

Hacemos click a "guardar disposición" para que se guarden los cambios,y ya podemos recargar la blog para ver el resultado.

Dependiendo de la plantilla que tengamos en nuestro blog, nos aparecerá con una estética u otra. Este ejemplo lo he cogido de una compañera ya que, el mío lo enseñaré en el siguiente apartado

Menú con pestañas desplegables

Éste no funciona como el anterior, aquí ya debemos entrar en código HTML y olvidarnos de los gadgets, no obstante, las etiquetas sí que las necesitaremos tenerlas listas.

Si es el caso de que tenemos un menú como el anterior,deberemos quitar las páginas ya que si no, nos saldrá una visualización bastante extraña cuando lo modifiquemos.

Ésta es la visualización por defecto que tendrá, la coloco porque va a ser necesaria tenerla de referencia antes de modificar nada para no perdernos.

Lo primero es entrar en Plantilla | Edición de HTML y SIN expandir los artilugios busca esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Elimina lo que está en color rojo.
Es posible que tengas muchas partes como la que está en rojo, elimina todas las que encuentres.

Luego busca esta parte en la plantilla:

/* Tabs
----------------------------------------------- */

Y elimina todo lo que haya dentro de ello. Por ejemplo, en la plantilla Awesome Inc. eliminarías todo lo que está en color verde

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

Ya eliminado, en su lugar agrega lo siguiente:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Una vez hecho lo anterior podremos agregar cualquier menú y estos se verán como deben verse y las subpestañas podrás desplegarse sin problema.

Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3iDLVMe4jtleu8d24_5rfnjm6tkhi2tSW5WTMv7JpKZxOMHnrFUgNtpRIpqBd8InNBW-qf2dJVS-C-2NSwpLT79djTy74P2vHtmD6vyO8o9QwA-mcAyWkwdhTNnIn_jOQP2NfuSjkI7ow/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3iDLVMe4jtleu8d24_5rfnjm6tkhi2tSW5WTMv7JpKZxOMHnrFUgNtpRIpqBd8InNBW-qf2dJVS-C-2NSwpLT79djTy74P2vHtmD6vyO8o9QwA-mcAyWkwdhTNnIn_jOQP2NfuSjkI7ow/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrBSIyn-loYD-VzZ94hFRf_TcLu1X4wG3cx4rNBPabZbojegPz-cpEUiRoMpVucKNR2PFZB5kMQvm_CG5P3fLVWCnzj4pUgzQOhHCBAuyxxwXtOlBvcFpw_34il8toQOm9pA_1pM93C_0/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>


<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>
</li>

</ul>
</div>

Guarda los cambios y listo. En color verde puedes ver las áreas para cambiar los colores.

Por experiencia propia recomiendo que, si se quiere modificar quitando, agregando pestañas o cambiando los nombres de éstas, que, primero, se haga una copia de seguridad, que se guarde el html tal y como está para posteriormente actualizar el blog con éstos cambios y, visto cómo queda, guiarnos por ello antes de tocar nada.

Otro consejo es que para editar el HTML usemos un editor como notepad ++ ya que nos facilitará el trabajo para visualizarlo mejor (aún con todo, tiene su trabajo ya que no está tabulado y por ello podemos perdernos.

Antes de  puedes agregar más pestañas si lo deseas.
Si quisieras añadir otra pestaña simple, agrega una línea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:

<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Con esta variación del menú podemos agrupar más enlaces y categorías en poco espacio, y que además, al conservar el buscador dentro del menú hace que sea un menú práctico, compacto y útil.

Y aquí está mi código

<li class='top'><a class='top_link' href='http://melaniifcd0110castrourdiales.blogspot.com.es/'><span>Página principal</span></a>

</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Confección web</span></a>

<ul>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Apuntes%20UF1302'>Teoría</a></li>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Ejercicios%20UF1302'>Ejercicios</a></li>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Prueba%20de%20validaci%C3%B3n%20UF1302'>Prueba de validación</a></li>

</ul>

</li>

<ul>

<li><a href='URL del enlace'>Teoría</a></li>

<li><a href='URL del enlace'>Ejercicios</a></li>

<li><a href='URL del enlace'>Prueba de validación</a></li>

</ul>

</li>

<ul>

<li><a href='URL del enlace'>Teoría</a></li>

<li><a href='URL del enlace'>Ejercicios</a></li>

<li><a href='URL del enlace'>Prueba de validación</a></li>

</ul>

</li>

<ul>

<li><a href='URL del enlace'>Teoría</a></li>

<li><a href='URL del enlace'>Ejercicios</a></li>

<li><a href='URL del enlace'>Prueba de validación</a></li>

</ul>

</li>

<ul>

<li><a href='URL del enlace'>Teoría</a></li>

<li><a href='URL del enlace'>Ejercicios</a></li>

<li><a href='URL del enlace'>Prueba de validación</a></li>

</ul>

</li>

</ul>

</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Diseño gráfico</span></a>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Apuntes%20de%20dise%C3%B1o%20gr%C3%A1fico'>Teoría</a></li>

<li><a href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Ejercicios%20de%20dise%C3%B1o%20gr%C3%A1fico'>Ejercicios</a></li>

</ul>

</li>

<li class='top'><a class='top_link' href='http://melaniifcd0110castrourdiales.blogspot.com.es/search/label/Diario%20de%20clase'><span class='down'>Diario de clases</span></a>

</li>

<li>

</li>

</ul>

</div>

Está tabulado para facilitar su entendimiento, no obstante, lo subiré a drive.

Finalmente, he aquí el resultado tras un par de cambios en su estética:

martes, 24 de junio de 2014

MARQUESINAS

¿Qué son?

Las marquesinas son texto en movimiento. Ya funciona con ambos navegadores (hasta hace poco Netscape no lo implementaba, el 7 ya lo hace).

La etiqueta es <MARQUEE>, un texto a desplazar y su cierre </MARQUEE>. Sin atributos quedará:

<BODY>
<MARQUEE> Aquí pongo el texto</MARQUEE>
</BODY>

Aquí pongo el texto

Así vemos los que tiene por defecto y que son: ocupa todo el ancho del cuadro, tiene la altura de la línea de texto y va de derecha a izquierda.

Podemos poner varias frases si colocamos <P> o <BR> dentro.

<BODY>
<MARQUEE> Aquí pongo un texto <P>
Y aquí otro
</MARQUEE>
</BODY>

Aquí pongo el texto

Y aquí otro

Vamos a empezar a meter atributos y a cambiar un poco la cosa.

Empezamos con las medidas que son las viejas conocidas WIDTH y HEIGHT que toman valores en píxeles o en porcentajes de pantalla.

<BODY>
<MARQUEE WIDTH=70% HEIGHT=40> Aquí pongo el texto
</MARQUEE>
</BODY>

Que se verá con 70% de ancho (del cuadro azul que para los efectos es como si fuera la pantalla completa) y 40 px de alto.

Aquí pongo el texto

El color de fondo quedará curioso. Echamos mano del atributo BGCOLOR.

<BODY>
<MARQUEE BGCOLOR=#7070ff> Aquí pongo el texto
</MARQUEE>
</BODY>

Aquí pongo el texto

No funciona con imágenes como fondo.

No he conseguido alinear el texto que rodea al cuadro de marquesina con la vieja ALIGN, que toma valores de top, bottom, middle, left y right. Según todos lo manuales debería funcionar como lo hacían en la etiqueta <IMG> pero no me funciona con Explorer 6 y con Netscape 7 hace cosas raras.

El atributo BEHAVIOR es el que da más juego, su valor por defecto es scroll que significa que aparece por la derecha, se va a la izquierda y de forma continuada. Si le damos el valor slide y alternate tenemos:

<BODY>
<MARQUEE BEHAVIOR=slide> Aquí pongo el texto
</MARQUEE>
</BODY>

Aquí pongo el texto

Para verlo funcionar actualiza la página ya que al pararse y funcionar sólo una vez, no lo vemos.

<BODY>
<MARQUEE BEHAVIOR=alternate> Aquí pongo el texto
</MARQUEE>
</BODY>

Aquí pongo el texto

DIRECTION servirá para definir hacia donde mando el texto que, por defecto, va hacia la izquierda. Yo puedo mandarlo a la derecha así:

<BODY>
<MARQUEE DIRECTION=right> Aquí pongo el texto
</MARQUEE>
</BODY>

Aquí pongo el texto

O hacia arriba o abajo con down y up.

<BODY>
<MARQUEE HEIGHT=50 DIRECTION=up> Aquí pongo el texto
</MARQUEE>
</BODY>

Aquí pongo el texto

La velocidad de desplazamiento varía con SCROLLAMOUNT, que marca los saltos según el valor numérico; y SCROOLDELAY que determina el retraso en el movimiento en milisegundos. Veámoslo:

<BODY>
<MARQUEE SCROLLAMOUNT=40> Aquí pongo el texto
</MARQUEE>
</BODY>

Aquí pongo el texto

Mareante...

<BODY>
<MARQUEE SCROLLDELAY=1000> Aquí pongo el texto
</MARQUEE>
</BODY>

Aquí pongo el texto

Y este desespera (le he puesto 1000, que es un segundo).

El atributo LOOP (indefinido por defecto, como ya hemos visto), define el número de veces que vamos a ver moverse el texto.

<BODY>
<MARQUEE LOOP=2> Aquí pongo el texto
</MARQUEE>
</BODY>

Aquí pongo el texto

Tendremos que actualizar la página.

Los atributos HSPACE Y VSPACE los conocemos, definirían el espacio horizontal y vertical del texto fuera de la marquesina.

<BODY>
<MARQUEE BGCOLOR=yellow VSPACE=20> Aquí pongo el texto
</MARQUEE>
Otro texto.
</BODY>

Aquí pongo el textoOtro texto

Ni que decir tiene que podemos aplicar otras etiquetas como la de centrado, por ejemplo. Le pondremos color para que se distinga del fondo.

<BODY>
<CENTER>
<MARQUEE WIDTH=50% BGCOLOR=#ffff00> Aquí pongo el texto
</MARQUEE>
</CENTER>
</BODY>

Aquí pongo el texto

Mira esto que bonito que queda con la etiqueta <FONT>:

<BODY>
<CENTER>
<MARQUEE WIDTH=70% BGCOLOR=#ffff00>
<FONT FACE=arial COLOR=red SIZE=5>
Aquí pongo el texto
</FONT>
</MARQUEE>
</CENTER>
</BODY>

Aquí pongo el texto

También la podemos meter en una tabla (ya se verán más adelante).

Aquí pongo el texto

O meter la tabla en la marquesina:

Aquí pongo el texto

Y podremos poner imágenes en vez de texto.

DIA DIECISEIS 23/06/2014

Hoy por fin acabé el menú de pestañas y sub pestañas del blog, costó bastante porque el código que encontré de ejemplo no estaba tabulado y me perdí un poco, a parte que había etiquetas que no conocía y tuve que investigar y tener muchos errores antes de conseguirlo por fin.
Otra novedad del día fue que vino la chica que nos había dado la charla de prevención de riesgos laborales a testear la iluminación de cada puesto de trabajo a ver si era la correcta y, antes de irse, nos dio por escrito lo que nos había contado el otro día para que tengamos en cuenta la forma correcta de sentarnos, de nivelar la silla etc.
En diseño gráfico seguimos con teoría, empezamos concretamente la parte de maquetación.
Ya hemos comenzado a repartir las tareas del monográfico y, junto con dos compañeras, haremos la parte del blog, qué es, para qué sirve etc. De momento hemos empezado a desarrollar la información, para lo cual no estamos tardando mucho, supongo que el trabajo más tedioso será elaborar el powerpoint ya que deberá quedar estético etc.
Dado que hay fiestas en Castro, sólo tendremos clase tres días esta semana, mañana y el jueves no tenemos.

domingo, 22 de junio de 2014

DIA QUINCE 20/06/2014

Hoy hemos ido un poco más por libre, tras dar las marquesinas, luego algunos compañeros probaron a hacerlas con distintas variantes, yo, por mi parte me he puesto manos a la obra con un menú desplegable para el blog, me está llevando mucho trabajo y aún no he descubierto la forma de hacerlo correctamente, pero en ello sigo. Por lo demás, el tema de la wiki va avanzando por parte de los compañeros que se están encargando de la estructura.
Ya por el medio día nos reunimos todos en una asamblea para hablar de qué tal hemos funcionado esta semana tras el cambio de sitios y de más temas.

Diario IFCD0110 Castro Urdiales

menu desplegable

viernes, 27 de junio de 2014

DIA DIECIOCHO 27/06/2014 PRUEBA DE VALIDACION

miércoles, 25 de junio de 2014

DIA DIECISIETE 25/06/2014

EJERCICIO ANALISIS DE MAQUETACION DE PAGINA WEB

MENU SIMPLE Y MENU CON PESTAÑAS PARA EL BLOG

¿Qué es un menú?

¿Para qué sirve?

¿Cómo crear un menú simple?

Menú con pestañas desplegables

Y aquí está mi código

martes, 24 de junio de 2014

MARQUESINAS

¿Qué son?

DIA DIECISEIS 23/06/2014

domingo, 22 de junio de 2014

DIA QUINCE 20/06/2014

analytics