Diario IFCD0110 Castro Urdiales: 2014-08-24

jueves, 28 de agosto de 2014

MF0950_2/UF1303 5ª Prueba de validación tipo Test. Css.

5ª PRUEBA DE VALIDACIÓN "TIPO TEST CSS"

miércoles, 27 de agosto de 2014

MF0950_2/UF1303 4ª prueba de validación. Css "Jeddit"

4ªPRUEBA DE VALIDACIÓN "ALMANSA".

La prueba se basa en crear y diseñar una página con todo css partiendo todos y de un mismo tema y de las mismas imágenes (teniéndolas que modificar).
Esta es mi primera prueba de validación de la unidad 1303:

MF0950_2/UF1303 Ejercicio css. "Jeddit"

EJERCICIO CSS "ESCUELA TALLER"

MF0950_2/UF1302 3ª prueba de validación. "Dream Weaver"

3ª PRUEBA DE VALIDACIÓN. "PASTELERIA CREATIVE"

MF0950_2/UF1302 Otra página web. "Dream Weaver"

OTRA PÁGINA. "COLA CAO"

Hemos empezado a utilizar este programa para crear páginas web con el código HTML.
Es mucho más sencillo que el programa Nogepad++ ya que no hace falta "picar" tanto código.

MF0950_2/UF1302 Informe de validación de accesibilidad web.

Estimados Sres. de Barceló Viajes:

Nuria Alonso Castillo alumna de la Escuela Taller de Castro-Urdiales de diseño y confección de páginas web le place informar que:

Tras realizar el día 01 de julio de 2014 un examen de validación según la Norma UNE 139803:2012 de prioridad 2.0 A de su página web www.barceloviajes.com he encontrado los siguientes aspectos a validar con la ley :

Inexistente un mecanismo para que el usuario pueda solicitar cambios de contexto, como aparece en la línea 960.
Las etiquetas no poseen controles, como aparece en la línea 1018.
ID no son únicos en un documento, como se puede observar en la línea 394
No describe el propósito del enlace del contenido <a>, como se encuentra en la línea 356.

Sin otro particular, espero que les haya sido de de utilidad.

Un saludo,

Firmado

Nuria Alonso Castillo

MF0950_2/UF1302 2ª prueba de validacion. "Marquesinas y mapa"

2ª PRUEBA DE VALIDACIÓN. "PRIMARK"

MARQUESINA

La etiqueta <MARQUEE> se utiliza para hacer una animación sencilla de un texto o una imagen en movimiento:
<marquee "bgcolor="#CC6633" width="100%" height="45" scrolldelay="100" scrollamount="5" direction="down" loop="infinite">El texto en movimiento o etiqueta foto
</marquee>

BGCOLOR: Como ya esta explicado anteriormente es para poner el color de fondo, en este caso de la etiqueta <marquee>

SCROLLAMOUNT: Es el tiempo que tiene que pasar para cada cambio de posición, cuanto mayor sea el valor más tardara la marquesina en moverse.

SCROLLAMOUNT: Es la cantidad de pixels que tienen que desplazarse cada vez que se mueve, cuanto más valor mayor sera la velocidad de la animación.

DIRECTION: Hacia que dirección se quiere que valla la animación dentro de la marquesina (down, up).

LOOP: Por defecto se desplazara sin detenerse, INFINITE, pero se puede asignar un valor como "5", que esto quiere decir que se desplazara 5 veces y luego se detendrá.

<!DOCTYPE html>
<html lang="es">

<head>
<meta 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: #CC0033; }
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { background-color: FF3300 }
.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-big-play-button { background: rgba(122,153,3,0.7) }
.vjs-default-skin .vjs-slider { background: rgba(122,153,3,0.2333333333333333) }
.vjs-default-skin .vjs-control-bar { font-size: 71% }
</style>

</head>

<body bgcolor="#0099FF">

<header>
<center>
<p><h1><b><u><h1><font color="CC0033"> PRIMARK</font></h1></b></u></h1></p>
<p><h1><b><font color="006600">¡¡ La vida es un festival !!</font></b></h1></p>

<marquee bgcolor="006600" width="80%" scrolldelay="5" behavior="alternate"><b>¡No te pierdas las últimas novedades</b>

<br />
<center><img src="C:\Users\ETC12\Desktop\mono\primark logo.jpg"></center>
</marquee>

</center>
<p></p>
</header>

<header>

<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\ETC12\Downloads\Presentación Campaña Primark.mp4" preload="auto" type='video/mp4'>
<p class="vjs-no-js">
</video>
</center>

<header>

<audio autoplay id="bgsound">
<source src="C:\Users\ETC12\Desktop\Bailando.mp3" type="audio/mp3">
</audio>
<script>
document.getElementById('bgsound').volume=0.2;
</script>
</header>

<br />

<center>

<img src="C:\Users\ETC12\Desktop\mono\mapa primark.jpg" usemap="#mapa de imágenes" alt="pincha">
<map name="mapa de imágenes">
<area shape="circle" coords="404,271,75" target="_blank" href="http://www.primark.com/es/novedades" alt="pagina primark">
<area shape="rect" coords="15,7,268,97" target="_blank" href="http://www.primark.com/es/customer-service/contact-us" alt="contactenos">
<area shape="poly" coords="377,5,268,181,475,172" href="mailto:nacifcd0110@gmail.com" alt="mail to">
</map>
</center>

</body>

</HTML>

martes, 26 de agosto de 2014

MD0950_2/UF1302 Formatos de Audio y Video.

VIDEO:

<video width="320" height="240" controls>
<source src="C:\Users\ETC12\Downloads\Rather Be - Clean Bandit feat Jess Glynne Lyrics.mp4" type="video/mp4">
</video> : Se pone la ruta de un video de youtube que mas te guste (primero hay que cambiarle el formato a mp4 con el clip converter para poder descargarlo).

<iframe width="560" height="315" src="\\ESCUELATALLER\Users\Escuela Taller\Videos\campanilla.mp4" frameborder="0" allowfullscreen></iframe> : Luego lo he vinculado con el iframe otro video.

AUDIO:

<audio controls>
<source src="C:\Users\ETC12\Downloads\Con las ganas- Zahara.mp3" type="audio/ogg">
</audio> : Cogemos una canción que nos guste y le ponemos la ruta en "source".

VIDEO CONFIGURADO CON COLORES:

<head>

<style type="text/css">
.vjs-default-skin { color: #66FF00; }
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { background-color: #009999 }
.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-big-play-button { background: rgba(122,153,3,0.7) }
.vjs-default-skin .vjs-slider { background: rgba(122,153,3,0.2333333333333333) }
.vjs-default-skin .vjs-control-bar { font-size: 71% }
</style> : Este código le ponemos en el cabecero, modificando los códigos de los colores.

</head>

<body>

<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\ETC12\Downloads\Enrique Iglesias - Loco ft. Romeo Santos.mp4" type='video/mp4'>
<p class="vjs-no-js">
</video> : Este parte del código va dentro de body y en "source" escribimos la ruta de la canción que hayamos escogido.

</body>

<!DOCTYPE html>
<html lang="es">
<head>

<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: #66FF00; }
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { background-color: #009999 }
.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-big-play-button { background: rgba(122,153,3,0.7) }
.vjs-default-skin .vjs-slider { background: rgba(122,153,3,0.2333333333333333) }
.vjs-default-skin .vjs-control-bar { font-size: 71% }
</style>

</head>

<body bgcolor="990066">

<video width="320" height="240" controls>
<source src="C:\Users\ETC12\Downloads\Rather Be - Clean Bandit feat Jess Glynne Lyrics.mp4" type="video/mp4">
</video>

<iframe width="560" height="315" src="\\ESCUELATALLER\Users\Escuela Taller\Videos\campanilla.mp4" frameborder="0" allowfullscreen></iframe>

<audio controls>
<source src="C:\Users\ETC12\Downloads\Con las ganas- Zahara.mp3" type="audio/ogg">
</audio>

<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\ETC12\Downloads\Enrique Iglesias - Loco ft. Romeo Santos.mp4" type='video/mp4'>
<p class="vjs-no-js">
</video>

</body>
</HTML>

MF0950_2/UF1302 Otra página. "Mapa de imágenes"

OTRA PÁGINA. "MAPA DE IMÁGENES"

<!DOCTYPE html>
<html lang="es">
<head>

<meta charset="utf-8" />
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<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: #66FF00; }
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { background-color: #009999 }
.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-big-play-button { background: rgba(122,153,3,0.7) }
.vjs-default-skin .vjs-slider { background: rgba(122,153,3,0.2333333333333333) }
.vjs-default-skin .vjs-control-bar { font-size: 71% }
</style>

</head>
<body bgcolor="990066">
<a name="arriba"></a>
<p><h1><b><u><h1>PRUEBA DE VALIDACIÓN</h1></b></u></h1></p>

<marquee bgcolor="#FF9900" width="50%" scrolldelay="13" scrollamount="5px" direction="right" loop="infinite"><b><h1>..Página web de nuria..</h1></b>
<img src="C:\Users\ETC12\Desktop\mono\bichito.png">
</marquee>

<p>
<img src="C:\Users\ETC12\Desktop\mono\menu.jpg" usemap="#mapa de imágenes"
alt="pincha">
<map name="mapa de imágenes">
<area shape="circle" coords="83,75,75" target=blog4 href="http://ornelaifcd0110castrourdiales.blogspot.com.es/" alt="bolso y manoletinas prueba 1">
<area shape="circle" coords="286,73,73" target=blog4 href="http://itziarifcd0110castrourdiales.blogspot.com.es/" alt="bolso y manoletinas prueba 2">
<area shape="circle" coords="460,73,73" target=blog4 href="http://omarifcdo0110castrourdiales.blogspot.com.es/" alt="bolso y manoletinas prueba 3">
<area shape="circle" coords="660,73,73" target=blog4 href="http://ymsifcd0110castrourdiales.blogspot.com.es/" alt="bolso y manoletinas prueba 4">
</map>
</p>

<a href="http://ifcd0110castrourdiales.blogspot.com.es/"><img src="C:\Users\ETC12\Desktop\mono\blog4.jpg" width="400px" height="400px" alt="error">

<ol>
<li><a href="http://ornelaifcd0110castrourdiales.blogspot.com.es/" target="blog4" title="pincha"rel="prefetch">ornela</a></li>
<br />
<li><a href="http://itziarifcd0110castrourdiales.blogspot.com.es/" target="blog4" title="pincha"rel="prefetch">itzi</a></li>
<br />
<li><a href="http://omarifcdo0110castrourdiales.blogspot.com.es/" target="blog4" title="pincha"rel="prefetch">omar</a></li>
<br />
<li><a href="http://ymsifcd0110castrourdiales.blogspot.com.es/" target="blog4" title="pincha"rel="prefetch">yasmin</a></li>

</ol>

<center>
<IFRAME NAME="blog4" SRC="http://ifcd0110castrourdiales.blogspot.com.es/" HEIGHt="500px" WIDTH="500px" ALIGN="middle" FRAMEBORDER="80PX" SCROLLING="YES" MARGINWIDTH="100PX" MARGINHEIGHT="100PX">
</IFRAME>
</center>
<center>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="anterior" onClick="history.back()">
<INPUT TYPE="button" NAME="Boton" VALUE="siguiente" onClick="history.forward()">
</FORM>
</center>
<div style="position:fixed;right:0;top:0;"><a href="#arriba"><img src="C:\Users\ETC12\Desktop\mono\pocoyoquintas.png" width="250" height="300" /></div>

<video width="320" height="240" controls>
<source src="C:\Users\ETC12\Downloads\Rather Be - Clean Bandit feat Jess Glynne Lyrics.mp4" type="video/mp4">
</video>

<iframe width="560" height="315" src="\\ESCUELATALLER\Users\Escuela Taller\Videos\campanilla.mp4" frameborder="0" allowfullscreen></iframe>

<audio controls>
<source src="C:\Users\ETC12\Downloads\Con las ganas- Zahara.mp3" type="audio/ogg">
</audio>

<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\ETC12\Downloads\Enrique Iglesias - Loco ft. Romeo Santos.mp4" type='video/mp4'>
<p class="vjs-no-js">
</video>

</body>
</HTML>

FM0950-2/UF1303 Etiquetas Span y Div.

¿QUÉ SON LAS ETIQUETAS DIV Y SPAN?
Las etiquetas <span> y <div> son aquellas que nos permiten contener algún elemento más dentro de ellas, es decir, actúan como contenedores, por lo que a simple vista no se ven. Al ser contenedores se abren y se cierran las etiquetas, <div></div> y <span> </span>, sin embargo, a pesar de que son contenedores tienen funciones muy distintas.

La diferencia varia en la función que tienen, ya que mientras la etiqueta span trabaja sólo como contenedor de línea, la etiqueta div trabaja como contenedor de bloque.

Las etiquetas span se utilizan para dar propiedad a trozos de texto de un párrafo por ejemplo, quedando así:

<p>Estamos aprendiendo a utilizar la <span class="resaltado">etiqueta span</span> de Html en este tutorial tan majo.</p>

Se usa para dar propiedades a un bloque entero como por ejemplo a un menú y no tener que andar uno por uno, por ejemplo:

<div class="menu">
   <ul>
      <li>enlace 1</li>
      <li>enlace 2</li>
      <li>enlace 3</li>
   </ul>
</div>

MF0950_2/UF1302 1ª Prueba de validación. "Iframe y Ancla"

1ª PRUEBA DE VALIDACIÓN "BLOG"

<!DOCTYPE html>

<head>

<!---

function mensaje() {

alert("¡prueba!");

}

// --->

</SCRIPT>

</head>

<p><h1><b><u><h1>PRUEBA DE VALIDACIÓN</h1></b></u></h1></p>

<ol>

<li><a href="http://ornelaifcd0110castrourdiales.blogspot.com.es/" target="blog4" title="pincha"rel="prefetch">ornela</a></li>

<br />

<br />

<br />

<li><a href="http://ymsifcd0110castrourdiales.blogspot.com.es/" target="blog4" title="pincha"rel="prefetch">yasmin</a></li>

</ol>

</IFRAME>

</center>

<FORM>

</FORM>

</center>

</body>

</HTML>

MENU

jueves, 28 de agosto de 2014

miércoles, 27 de agosto de 2014

martes, 26 de agosto de 2014

La diferencia varia en la función que tienen, ya que mientras la etiqueta span trabaja sólo como contenedor de línea, la etiqueta div trabaja como contenedor de bloque.