Implementación de una oficina de aprendizaje virtual mediante metaversos, proporcionando a la comunidad educativa programaciones de aula con integración de videojuegos con web3D.
Les comparto unos tip's sobre imágenes .swf
Para subir imagenes flash al blog debemos realizar los siguientes pasos:
1.- Subir la imagen flash a un servidor de alojamiento de este tipo de imagenes.
1.1.- ingresar a xooimagen.com/fr/
1.2.- Ppresionamos el botón examinar y elegimos la imagen flash que queremos subir, luego digitamos el código que se visualiza en la imágen y presionamos envoyer.
1.3- Copiamos el link de la imagen en el servidor y lo pegamos en la barra de direcciones del navegador y presionamos intro.
1.4.- Clicamos en la opción telecharger.
2.- Ingresar al blog, y en el lugar que queremos insertar la imagen flash pegamos el siguiente código html.
<center><iframe frameborder="0" height="200" scrolling="auto" src="url de la imagen flash" width="200"></iframe></center>
3.- Finalmente donde dice url de la imagen flash pegamos la url que copiamos de nuestra imagen flash en el servidor xooimage y listo.
Ahora veamos cómo poner la portada en el blog,
Primero entramos en Diseño | Edición de HTMl y buscamos esta etiqueta:
<body>
Si usan una plantilla del Diseñador de Plantillas de Blogger entonces busquen esta línea:
<body expr:class='"loading" + data:blog.mobileClass'>
Justo debajo de cualquiera de una de ellas agreguen lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body {margin:0; padding:0; overflow:hidden;}
.entrar, #navbar-iframe, .navbar {display:none;}
.BlogOculto {z-index:-100;} #Intro {z-index:5000;}
#Intro {text-align:center;
background:#000; /* Color de fondo de la pantalla */
position:absolute;
width:100%;
height:100%;
overflow-x:hidden;
}
p.btnEntrar a {
font-size: 16px; /* Tamaño de la letra del botón */
font-style: italic;
font-weight: bold;
text-decoration: none;
color: #1C1C1C; /* Color de la letra del botón */
background: #ccc; /* Color de fondo del botón */
padding: 6px;
border: 1px solid #2E2E2E; /* Color del borde del botón */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
p.btnEntrar a:hover {position:relative; top:1px; left:1px;}
body#layout #Intro {display:none !important;}
</style>
<div id='Intro'>
<div style='margin-top:200px;'>
<!-- Inicio del contenido del intro -->
<img src='URL de la imagen'/>
<p class='btnEntrar'><a href="javascript:void(0);" onClick="document.getElementById('BlogContenedor').className = 'quitarIntro', document.getElementById('Intro').className = 'entrar', document.getElementById('ElementosAudio').innerHTML = '', document.body.style.overflow='auto' ">Entrar</a></p>
<div id='ElementosAudio'>
<iframe frameborder='0' height='0' src='http://www.youtube.com/v/XXXXXXX?&autoplay=1&loop=1' width='0'/>
</div>
<!-- Fin del contenido del intro -->
</div>
</div>
</b:if>
<div class='BlogOculto' id='BlogContenedor'>
<style type='text/css'>
body {margin:0; padding:0; overflow:hidden;}
.entrar, #navbar-iframe, .navbar {display:none;}
.BlogOculto {z-index:-100;} #Intro {z-index:5000;}
#Intro {text-align:center;
background:#000; /* Color de fondo de la pantalla */
position:absolute;
width:100%;
height:100%;
overflow-x:hidden;
}
p.btnEntrar a {
font-size: 16px; /* Tamaño de la letra del botón */
font-style: italic;
font-weight: bold;
text-decoration: none;
color: #1C1C1C; /* Color de la letra del botón */
background: #ccc; /* Color de fondo del botón */
padding: 6px;
border: 1px solid #2E2E2E; /* Color del borde del botón */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
p.btnEntrar a:hover {position:relative; top:1px; left:1px;}
body#layout #Intro {display:none !important;}
</style>
<div id='Intro'>
<div style='margin-top:200px;'>
<!-- Inicio del contenido del intro -->
<img src='URL de la imagen'/>
<p class='btnEntrar'><a href="javascript:void(0);" onClick="document.getElementById('BlogContenedor').className = 'quitarIntro', document.getElementById('Intro').className = 'entrar', document.getElementById('ElementosAudio').innerHTML = '', document.body.style.overflow='auto' ">Entrar</a></p>
<div id='ElementosAudio'>
<iframe frameborder='0' height='0' src='http://www.youtube.com/v/XXXXXXX?&autoplay=1&loop=1' width='0'/>
</div>
<!-- Fin del contenido del intro -->
</div>
</div>
</b:if>
<div class='BlogOculto' id='BlogContenedor'>
Y luego busquen la etiqueta </body> y arriba de ella agreguen esto:
</div>
Es todo, ahora sólo vamos a personalizarlo.
En el primer código que hemos agregado están señalados en color verde algunos aspectos como el color que tendrá el intro, el tamaño de letra del botón, color del botón, etc.
Luego, en donde dice URL de la imagen pueden poner la URL de la imagen del logotipo de su blog, alguna imagen de bienvenida o cualquier otra imagen. El texto del botón 'Entrar' puede cambiarse por cualquier otro.
Cualquier elemento que quiera agregarse al intro debe ir antes de donde dice Fin del contenido del intro o después de Inicio del contenido del intro. Regularmente los intros no tienen muchos elementos por cuestión de presentación, así que entre menos cosas tenga mejor.
En donde dice margin-top:200px es la distancia que tendrán los elementos del intro respecto a la parte superior de la pantalla, puede modificarse por otro valor.
Yo le he puesto una música de fondo utilizando un video de YouTube sólo que le he puesto en ceros los valores de alto y ancho para que el reproductor sea invisible. Si desean poner también una música de fondo entonces cambia las XXXXXXX por la ID del video que quieran poner.
Si no desean poner audio, ni tampoco un archivo en flash puedes eliminar el código gris o dejarlo como está.
