Mostrando entradas con la etiqueta paginas. Mostrar todas las entradas

07 junio 2014

[7] Como crear tu pagina web HTML5/CSS3 desde cero - Extras y mejoras

  6 comentarios
14:26


Publicaciones relacionadas: 

Hasta que por fin llegó el día del último tutorial, los abandoné estos 2 últimos días puesto que estaba trabajando en algunas mejoras que le hice a la pagina web con la que estamos trabajando. Podría decirse que me esmeré lo suficiente para traerles en este tutorial un contenido de calidad, y comentarles ademas, que mejoras se les pueden hacer muchas, infinidades, así que no te quedes con solo lo que hoy te daré, también, estaré dejando los archivos y recursos de la página listos para que los descarguen, y así trabajen de manera directa sobre el archivo que llevo yo en mi computador.

Antes de empezar a mostrar codigos, solo quiero comentar que este tutorial no se trata mas que de dar estilos extras a lo que ya llevamos de manera que luzca mucho mejor, eso es lo que queremos, ademas, tambien hablarles un poco sobre ciertas y nuevas etiquetas que trajo consigo el HTML5 y que serán aplicables en tu blog. Comenzamos

Elemento Dialog

La etiqueta <dialog> no es mas que un elemento que te permite mostrar una conversación entre dos individuos, en esta era de las redes sociales, como facebook, twitter, whatsapp o BBM puede llegar a ser muy útil y mucho mas divertido para los usuarios.

Codigo HTML (Ejemplo)

Leer completo

05 junio 2014

[6] Como crear tu pagina web HTML5/CSS3 desde cero - El pie de página

  1 comentario
14:51


Publicaciones relacionadas: 
Ya estamos casi finalizando la serie de tutoriales sobre como crear tu propia pagina web HTML5 y CSS3 de una manera muy sencilla, y llegamos al sexto y penúltimo tutorial; el pie de pagina, ultimo pero elemento no menos importante, pues puede ser muy útil si usas tu creatividad, el pie de pagina de una sitio web no debe ir muy recargado, solo debe contener información complementaria de dicho sitio, el usuario que visita un portal sabe que para obtener información sobre tu sitio como derechos de autor, incluso redes sociales o quien administra la pagina, se dirige hasta el pie de pagina sin rodeos, es por esto; que debemos mantener el estándar y no salirnos de los parámetros pues puede ser bastante incomodo para quien visualiza.

Añade el siguiente código entre las etiquetas <footer>...</footer> de tu pagina web


            <a href="#">Friki Bloggeo</a> &copy; Copyright 2014. Diseño y edición por <a href="#">Anthony Medina</a>

Y se debe visualizar de este modo

Leer completo

[5] Como crear tu pagina web HTML5/CSS3 desde cero - La barra lateral

  No hay comentarios
13:59


Publicaciones relacionadas: 
Continuamos con la serie de tutoriales y ya casi estamos en la recta final, este tutorial será bastante corto puesto a que ya hemos pasado la mayor parte, sin desacreditar a la barra lateral, también fundamental pues allí estarán ciertos elementos que son necesarios y que destacan en tu blog o pagina web.

Copia y pega el siguiente código entre las etiquetas <aside>...</aside> de tu pagina

             <div id="widget">
                 <h2>Iniciar sesión</h2>
                    <div class="wcontenido">
                     <form name="login" id="login">
                         <input type="text" name="user" value="Usuario" size="21"><br>
                         <input type="password" name="pass" value="Contraseña" size="21"><br>
                         <input type="button" name="button" value="Login">
                        </form>
                    </div> 

                 <h2>Disclaimer</h2>
                    <div class="wcontenido">
                     El contenido presente en este portal está protegido por una licencia de Creative Commons, el cual aprueba su uso, modificación y distribución avisando previamente al dueño del mismo y acreditando al final de la publicación.<a href="#">link</a> <span>hola</span>
                    </div> 
                    
                </div>

Hasta ahora se verá algo así

Leer completo

04 junio 2014

[4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido

  1 comentario
13:02


Publicaciones relacionadas: 
¡Enhorabuena! Hasta donde hemos llegado, es tiempo de una de las partes mas importantes dentro de un blog o pagina web, el contenido, la razón y el por que de que todos los usuarios visiten tu portal, es por esto que en esta parte tenemos que ser creativos, llamar la atención, jugar con colores, mostrar al usuario lo que quiere ver sin recargas ni rodeos. Para empezar, copia y pega el siguiente trozo de código dentro de las etiquetas
<div id="atitulo"><a href="#">Aqui debe ir el titulo de contenido a mostrar</a></div> <div id="ainfo">Publicado el dia <div class="fecha"><a href="#">20/10/2011</a></div> por <div class="autor"><a href="#">Anthony Medina</a></div> en <div class="ubicacion"><a href="#">San Felipe, Venezuela</a></div> </div> <img src="imagenes/Moviles_Doolphy_6151.png"/> <div id="acontenido"> <!-- Empieza publicacion --> Aqui ira el contenido el cual contendrá sus estilos propios, esto es un ejemplo de como se verá el <span>texto resaltado</span> y este es el ejemplo de como se verá un <a href="#">link</a>. <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6> <pre>Esto es un mensaje con pre</pre> <code>Esto es un mensaje con code</code> <pre contenteditable="true"><code>esto es un mensaje pre-code, mientras mas largo se hace menos cabe en la seccion por lo tanto debo darle estilos, ademas, esta caja contiene un atributo el cual permite editar su contenido a tu gusto</code></pre> <blockquote>Esta en una cita</blockquote> <table> <th>Titulo 1</th> <th>Titulo 2</th> <tr> <td>Dato 1</td> <td>Dato 2</td> </tr> <tr> <td>Dato 3</td> <td>Dato 4</td> </tr> </table> <!-- Termina Publicación --> </div>

Hasta ahora, que llevamos

Leer completo

03 junio 2014

[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú

  No hay comentarios
15:07


Publicaciones relacionadas: 

Continuando con la serie de tutoriales sobre como realizar una pagina web en lenguaje HTML5/CSS3, y una vez terminada la cabecera, continuamos con la segunda sección, una de las mas importantes pues será el que llevara a los usuarios a cada pagina dentro de tu blog o pagina web, un sitio web sin menú es como comerse un huevo cocido sin sal, es una expresión muy popular acá en mi país, hermanos. Pero en fin, les muestro la estructura del menú, el cual debe incluirse entre la etiqueta <nav>...</nav> del sitio

<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Blogs</a> <ul> <li><a href="#">Wordpress</a></li> <li><a href="#">Blogger</a></li> <li><a href="#">Joomla!</a></li> <li><a href="#">Blogia</a></li> </ul> </li> <li><a href="#">Programación</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">JAVA</a></li> <li><a href="#">C++</a></li> <li><a href="#">Python</a></li> <li><a href="#">VB.NET</a></li> </ul> </li> <li><a href="#">HTML/CSS</a></li> <li><a href="#">Generadores</a></li> <li><a href="#">Contacto</a></li> </ul>

Por los momentos se vería algo así

Leer completo

02 junio 2014

[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera

  5 comentarios
15:27


Publicación relacionada: [1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración

Continuando con la serie de tutoriales sobre como crear tu propia pagina HTML5/CSS3, hoy traigo el siguiente, la segunda parte en el que estaremos hablando de la cabecera de la pagina, después de ver el tutorial sobre la estructuración del sitio. Antes de comenzar, quiero mostrar quiero mostrar el código HTML y CSS de la sección de la pagina que nos compete en este tutorial, en este caso; la cabecera

/* Código CSS para la cabecera */

body header {
    display:block;
    background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
    width:88%;
    height:auto;
    margin:0 auto;
    padding-top:29px;
    padding-bottom:29px;
    font-size:48px;
    color:#FFF;
    text-align:center;
    border-radius:10px 10px 10px 10px;
    -webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
    -moz-border-radius:10px 10px 10px 10px; /* Firefox */
    -o-border-radius:10px 10px 10px 10px; /* Opera */
    -ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
 
<!-- Código HTML -->  }

...
        <header>
         Yo soy la cabecera
        </header>
...

Si te cuesta entender el código anterior, quizás; es necesario que le eches un vistazo al tutorial anterior. Pero, en fin, continuando con lo que deseamos hacer, indaguemos e imaginemos un poco ¿Que lleva la cabecera de una pagina web o un blog? No existen reglas que nos establezcan que poner o que no poner en una cabecera, sin embargo, siempre es recomendable no recargarla demasiado, en mi caso, yo no le pondría mas que el titulo, la descripción, un cuadro de búsqueda, y quizás, unos cuantos botones de suscripción a redes como facebook, twitter y las fuentes RSS. Agregamos los elementos antes mencionados con el siguiente código.

Leer completo

01 junio 2014

[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración

  No hay comentarios
19:28


HTML5 ha dado mucho de que hablar desde la fecha de su lanzamiento por las inmensas mejoras y novedades que este trajo consigo, tanto así, que ahora es mucho mas fácil para un nuevo "programador" aprender la codificación mas rápida, aunque los navegadores aceptan el uso de HTML5 hay algunas personas que prefieren usar el HTML antiguo para programar quizás por miedo a que algo salga mal por incompatibilidad, quizás si, quizás no, pero nunca esta de mas actualizarse. Cabe destacar que este tutorial lo  dividiré 7 en partes, La estructuración, la cabecera, el menú, el contenido, la barra lateral, el pie de pagina y extras. La verdad, no me quiero extender mucho en la introducción a este tutorial pues, ya en sí, es bastante largo. Solo me queda decirle que indica.

Estructuración inicial de la página

Antes de iniciar, me gustaría comentarle que este punto es un muy importante, pues significo la mas grande mejora que nos trajo la nueva versión de HTML pues nos hace mas fácil la vida otorgándoles nombres propios a las regiones que usamos usualmente en paginas web o blogs. El siguiente código es un pequeño ejemplo de como se estructuraba una pagina web en HTML versión antigua usando DIV con identificadores
<!DOCTYPE html>
<html lang="es">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Título de la página</title>
 </head>

 <body>

        <div id="header">
        </div>

        <div id="menu">
        </div>

        <div id="contenedor">

         <div id="contenido">
         </div>

         <div id="barralateral">
         </div>

         </div>

        <div id="piedepagina">
        </div> 

 </body>

</html>

Leer completo

29 mayo 2014

Crear tu propia versión móvil de tu página web o blog

  No hay comentarios
15:00


Los smartphones y tablets han venido ganando terreno alrededor de los últimos años en cuanto al uso de Internet móvil, para muchas personas es indispensable, y como no serlo, si existen millones de aplicaciones que te hacen la vida mucho mas fácil, desde conectarte a internet hasta realizar transacciones bancarias sin tener que ir al banco, por ejemplo. Por esta razón, muchas personas han optado por adquirir un dispositivo móvil que puedan llevar a cualquier lugar, valga la redundancia.

Anteriormente, realice una publicación sobre como ajustar tu blog o pagina web a la resolucion del dispositivo en el que se visualiza, muy útil herramienta que les ayudará a que los usuarios obtengan una mejor impresión de tu sitio o blog, no obstante; está publicación es muy parecida aunque con una pequeña o gran diferencia, depende de como lo quieras ver. La anterior publicación simplemente consiste en adaptar los estilos CSS al tamaño de la pantalla del dispositivo, esta se trata de crear dos hojas de estilos, y que el navegador aplique cada una de estas dependiendo de la resolución, reconociendo si la pagina se esta visualizando de un computador o de un movil. Ejemplo sencillo:

Así es como se vería este blog en computadores



Así es como se vería este blog en móviles

Leer completo

27 mayo 2014

Ajustar tu blog o pagina para que se adapte a la resolución del dispositivo en el que se visualiza

  No hay comentarios
20:41



Publicación relacionada: Crear tu propia versión móvil de tu página web o blog

Para un blogger o una persona que desea hacer un sitio web este tuto será fundamental, puesto a que; en plena era tecnológica, donde los llamados Smartphones, en primera instancia; han ganado un terreno enorme en cuanto a su porcentaje de adquisición, haciendo esto que mas personas opten por acceder a la web desde ellos, y este no es mas que un ejemplo entre tantos dispositivos y resoluciones que pueden existir, por ejemplo; tablets, iPods, TV's con acceso a internet, entre muchos.

Un webmaster no se puede dar el lujo de que su pagina web quizás se pueda distorsionar, particularmente a mi, la primera vez que me ocurrió, me sentí realmente incomodo, en vista de que no podía hacer nada, pasaba horas y horas preguntándome que hacer. Estaba en la universidad, pensaba en aquello, hacía deportes, pensaba en aquello, comiendo, pensaba en aquello y cuando se me mete algo en la cabeza, hasta no resolverlo, la mente no me deja de dar vueltas, espero que a ustedes les pase lo mismo, pues es el camino al éxito. Al momento en el que los usuarios ingresen a tu portal, notaran el cambio al comparar con otros portales que quizás no se adapten a las resoluciones, se sentirán satisfechos se saber que los tomas en cuenta, ademas; de que tengas conocimientos de que existe un mundo "multigadget" fuera de tu computador.

Leer completo

20 diciembre 2011

Como crear un servidor local (localhost) en tu computador

  11 comentarios
12:36

Tal vez, no parezca tan esencial este post para algunas persona, pero desde mi punto de vista como programador y desarrollador de sitios web, un localhost en el computador es de suma importancia para visualizar nuestro trabajo terminado sin tener la necesidad de subirlo a un servidor web externo para previsuarlizarlo o visualizarlo ya terminado el trabajo.

Uno de los software que he considerado mas importante entre las diferentes funciones que los software de aplicacion puede ejecutar, es el AppServer 2.6.0, programa fácil de manejar y controlar al momento de su instalación, aunque este en idioma Ingles. Este software viene dotado a su vez de MySQL para creación de bases de datos, esenciales para para ingeniar una retroalimentacion con los usuarios que visitan tu sitio y PHPMyAdmin, este ultimo que te ayuda a visualizar lo que esta almacenado en tu pagina siendo previamente introducido mediante campos de escritura.

Al final de esta entrada, les dejare el enlace de descargar gratuita desde Softonic. Por ahora mostraré paso a paso cada ventana del asistente de instalación para facilitarles el trabajo. Al momento de ejecutar el instalador, lo primero que será:


Para comenzar, es necesario hacer clic en el boton 'Next', el cual se accionara para mostrarnos los terminos y condiciones de licencia gratuita del programa, los cuales debemos aceptar para proseguir dicha instalacion. Al aceptarlos, seguimos con la instalacion, que nos mostrara la siguiente ventana donde debemos seleccionar la ruta donde el programa almacenara sus datos para ejecutar el servidor local.

Leer completo

24 marzo 2010

Como aumentar el trafico a tu Blog desde Facebook

  3 comentarios
0:04

Como ya conocemos, Facebook se ha convertido en la red social mas utilizada de forma mundial en estos días, el ranking de Alexa es de 2, lo que significa que es la segunda pagina web mas popular después del maravilloso Google. Tantos Bloggers están buscando la manera de aumentar cada vez el trafico de su blog mas y mas, y seguimos en la lucha. Yo para ayudarte un poquito mas te traigo lo que debes hacer para ir aumentando mas a travez de tu pagina en Facebook, lo cual no es indispensable para tener un blog, pero si importante para aumentar el numero de visitas.


A continuación, presentare unos pasos muy importantes que debes tomar en cuenta para aumentar el trafico de tu blog desde Facebook.




[1] Añadir un montón de amigos

Trata de buscar blogs que se relacionen o posean la misma temática que el tuyo, visita paginas de fans de cuyo blog, agrégalos como amigos, trata de conocerlo, charlar un poco sobre lo que quizás les gusta a los dos, háblale de tu blog, di cuan interesante es el contenido que allí publicas. Si el usuario es fan de todo esto, y le gusta tu contenido, de seguro también sera fan de tu blog y tu pagina. Lo mas importante es que no decaigas y sigas en la lucha, no te des por vencido, la primera vez siempre es difícil.




[2] Conectar a Facebook con Twitter

Como todos sabemos, twitter es el favorito del micro-blogging. Puedes unir twitter con Facebook para mejorar la productividad, ahora, cada vez que tu estado en twitter se actualize tambien pasara en Facebook y viceversa, por lo tanto no hay ninguna necesidad de actualizar individualmente cada estado de estas dos redes.

Para realizar esto, seguir el siguiente orden

♦ Entra en tu cuenta Facebook
♦ Ahora, Sigue esta dirección haciendo clic aquí
♦ Inicia sesion en tu cuenta Twitter desde Facebook
♦ Elija su configuracion preferida y Haga clic en Añadir Twitter
♦ No acceda a su cuenta Twitter
♦ Autorizar el acesso de Twitter para Facebook

Eso es todo, ahora, cada vez que se actulize cada una de las dos redes, tambien se actulizara la contraria!.

[3] Importar con notas de aplicacion el contenido de tu blog

La aplicacion de las notas es muy util en Blogger, las entradas y noticias que publicas en tu blog, se enviara automaticamente a cada uno de sus amigos en Facebook mediante el RSS de tu blog, para usar esto, sigue los siguiente pasos:

♦ Haz clic aqui para entrar
♦ Introduce la URL de tu blog o de tu Feed
♦ Marca la casilla para estar de acuerdo
Iniciar importacion.

NOTA: Para realizar esto, debes seguir el paso 4

Leer completo

02 febrero 2010

Redireccionar un Blog hacia otro con JavaScript

  1 comentario
18:35

Hoy, mi amigo Horacio, el creador de la plantilla "Old new for Blogger" se ha dado cuenta de que yo por unos momento redireccione mi blog anterior hasta este otro nuevo, los cuales tienen la misma tematica, me contacto por facabook diciendome esto

una consulta: ¿Cómo hiciste para que recursoswebmasters.com.ar redirija a frikibloggeo.blogspot.com?
Y yo con mucho gusto le respondo mediante este post y al mismo tiempo los ayudo a ustedes...

[1] Dirigete a la edicion HTML de tu plantilla... Busca la etiqueta <head>

[2] ahora, despues de la etiqueta que buscastes pega el siguiente pedazo de codigo.

<script language='Javascript'>
function redireccionar() {
setTimeout(&quot;location.href=&#39;
URL A LA QUE DESEAS REDIRECCIONAR&#39;&quot;, 80000);}
</script>

Debes usar http://

[3] Ahora seguimos, busca la etiqueta <body> y sutituyela por el siguiente codigo

Leer completo

Seis estilo de paginacion con CSS

  No hay comentarios
10:15


Hoy estuve navegando por los blogs de mis amigos, y me encontré una excelente herramienta en "Pazos Blogger", blog de Eduardo, si eres nuevo en el Bloggeo y quieres saber a que me refiero, primero deberías visitar la paginacion para paginas de blogger, allí te lo explica todo...

Si ese día que agregaste la paginación a Blogger, pero vistes ese color blanco y poco atractivo que no se ajustaba mucho al color de tu pagina, aquí te traigo la solución de manos de Eduardo.

A ver, tienes seis opciones para elegir... Solo debes agregar la paginación en Blogger, luego trasladar ese widget hasta debajo de la sección "Entradas del Blog", y luego, copiar alguno de estos seis códigos CSS justo antes de ]]></b:skin>

He aquí las URL donde puedes encontrar los Códigos

Nota: Las URL's a continuación fueron tomadas de la pagina de google sites de Eduardo con previo permisos

Leer completo

22 enero 2010

Crear paginas independiente en tu blog de Blogger

  4 comentarios
10:27

Algo que tal vez, tu y yo esperamos muchisimo tiempo, hasta que por fin blogger se digno a lanzarlo, se trata de crear paginas independientes en blogger, sin necesidad de entrar a paginas por las etiquetas... te mostrare que debes hacer.


Sigue los pasos como se muestran en la imagen



[1] Entra en blogger in draft, es la unica forma de hacer esto... Selecciona el blog que desees añadir la pagina , haz clic en Nueva entrada.

[2] Haz clic en editar paginas

Leer completo

07 enero 2010

Como colocar una página de inicio en wordpress

  1 comentario
1:30

Hola que tal a todos. En esta ocasión explicaré como colocar una pagina de inicio en wordpress(tanto wordpress.com como para blogs de wordpress.org), donde resulta mucho más sencillo y natural que ocurre con blogger.

El procedimiento para que una página sea de inicio será crear la nueva página, para posteriormente establercerla como de inicio. Los pasos para hacerlo serán los siguientes.

1. En primer lugar vamos a nuestro panel de administración de wordpress, elegimos la pestaña “Páginas” del menú, y elegimos crear nueva página.

Leer completo

23 diciembre 2009

Paginacion de paginas en Blogger

  9 comentarios
18:09

Tal vez algun dia habras observado un blog de Wordpress u otro servidor que tiene paginaciones automaticas y te preguntastes, "¿Por que blogger no tiene eso?", pues les tengo una excelente noticia, ya no lo haras mas por que ahora con tan solo un codigo podras hacerlo de un forma mas sencilla, cuando hablo de paginacion me refiero a esto:



Interesante ¿No lo crees?...


Ya no miraras con envidia a los otros blogs por no tener esto, y otra ventaja, es que podras quitarte de una vez por todas la molestia de los links que aparecen debajo de las post de blogger que dicen "Entradas antiguas y Pagina Principal", con esto podras organizar tu blogger y de una vez hacer que se vea mucho mas bonito, aqui les dejo el link chicos espero que lo difruten


Este codigo aparecen los botones de "Anterior", "Siguientes", "Ultima pagina", "Primera pagina" y una cantidad de tres botones numericos, si quieres saber como hacer para añadir mas numeros solo dejame un comentario.


Aqui el codigo.


Lo primero que debes hacer es crear en la zonas de Widgets uno nuevo tipo HTML/JavaScript, copias el codigo, lo guardas y luego desplazas el wigdet hasta la zona debajo de donde dice "Entradas de Blog", de otro modo, te aparecera en la zona de widgets...

Leer completo

22 diciembre 2009

Nieve que se acumula al final de la página

  No hay comentarios
1:46

En una entrada anterior habíamos visto como conseguir un efecto de nieve en el blog mediante el uso de la etiqueta "marquee" y poco después veíamos como incluir el efecto nieve usando un script.

En esta ocasión vamos a ver de nuevo como incluir nieve en el blog mediante el uso de un script. El script irá incluido directamente en la plantilla y lo he "marcado" para que, una vez pasadas las fiestas, sea fácil su localización para retirarlo.

Este script consigue un efecto muy lindo, ya que los copos que van cayendo quedan acumulados al final de la página y mientras unos caen, los del pie de la página se van deshaciendo poco a poco...
Además si movemos el ratón por la pagina, los copos cambian de dirección como movidos por un ligero viento.

Antes de decidir si vais a usarlo o no,
podéis ver una demostración online en un blog donde también e incluido el script para copiar.

Lo único que hemos de hacer para
conseguir el efecto nieve, es copiar el script y colocarlo en el código de nuestra plantilla antes de </head>




<!-- Comienzo del script para nieve -->
<script type="text/javascript">
//<![CDATA[

/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------

Initializes after body onload() by default (via addEventHandler() call at bottom.)
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;

*/

var snowStorm = null;

function SnowStorm() {

// --- PROPERTIES ---

this.flakesMax = 150; // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '&bull;'; // &bull; = bullet, &middot; is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

// --- less-used bits ---

this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range
this.zIndex = 0; // CSS stacking order applied to each snowflake

// --- End of user section ---

// jslint global declarations
/*global window, document, navigator, clearInterval, setInterval */

var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.addEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.attachEvent('on'+evtName,evtHandler);
});

var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.removeEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.detachEvent('on'+evtName,evtHandler);
});

function rnd(n,min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random()*n)+min;
}

function plusMinus(n) {
return (parseInt(rnd(2),10)==1?n*-1:n);
}

var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;

var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var flakeTypes = 6;
var fixedForEverything = false;
var opacitySupported = (function(){
try {
document.createElement('div').style.opacity = '0.5';
} catch (e) {
return false;
}
return true;
})();
var docFrag = document.createDocumentFragment();
if (s.flakeLeftOffset === null) {
s.flakeLeftOffset = 0;
}
if (s.flakeRightOffset === null) {
s.flakeRightOffset = 0;
}

this.meltFrameCount = 20;
this.meltFrames = [];
for (var i=0; i<this.meltFrameCount; i++) {
this.meltFrames.push(1-(i/this.meltFrameCount));
}

this.randomizeWind = function() {
vRndX = plusMinus(rnd(s.vMaxX,0.2));
vRndY = rnd(s.vMaxY,0.2);
if (this.flakes) {
for (var i=0; i<this.flakes.length; i++) {
if (this.flakes[i].active) {
this.flakes[i].setVelocities();
}
}
}
};

this.scrollHandler = function() {
// "attach" snowflakes to bottom of window if no absolute bottom value was given
scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 scroll fix
}
if (!fixedForEverything && !s.flakeBottom && s.flakes) {
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active === 0) {
s.flakes[i].stick();
}
}
}
};

this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
}
screenX2 = parseInt(screenX/2,10);
};

this.resizeHandlerAlt = function() {
screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
screenX2 = parseInt(screenX/2,10);
};

this.freeze = function() {
// pause animation
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i=s.timers.length; i--;) {
clearInterval(s.timers[i]);
}
};

this.resume = function() {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
};

this.toggleSnow = function() {
if (!s.flakes.length) {
// first run
s.start();
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
} else {
s.stop();
s.freeze();
}
}
};

this.stop = function() {
this.freeze();
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
removeEvent(window,'scroll',s.scrollHandler);
removeEvent(window,'resize',s.resizeHandler);
if (!isOldIE) {
removeEvent(window,'blur',s.freeze);
removeEvent(window,'focus',s.resume);
}
};

this.show = function() {
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
};

this.SnowFlake = function(parent,type,x,y) {
var s = this;
var storm = parent;
this.type = type;
this.x = x||parseInt(rnd(screenX-20),10);
this.y = (!isNaN(y)?y:-rnd(screenY)-12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
this.vAmp = this.vAmpTypes[this.type];
this.melting = false;
this.meltFrameCount = storm.meltFrameCount;
this.meltFrames = storm.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10+(this.type/5)*10);
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);

this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
// safety check
return false;
}
s.o.style.left = s.x+'px';
s.o.style.top = s.y+'px';
};

this.stick = function() {
if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom+'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};

this.vCheck = function() {
if (s.vX>=0 && s.vX<0.2) {
s.vX = 0.2;
} else if (s.vX<0 && s.vX>-0.2) {
s.vX = -0.2;
}
if (s.vY>=0 && s.vY<0.2) {
s.vY = 0.2;
}
};

this.move = function() {
var vX = s.vX*windOffset;
s.x += vX;
s.y += (s.vY*s.vAmp);
if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
s.x = 0;
} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
s.x = screenX-storm.flakeWidth-1; // flakeWidth;
}
s.refresh();
var yDiff = screenY+scrollY-s.y;
if (yDiff<storm.flakeHeight) {
s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
// ~1/1000 chance of melting mid-air, with each frame
s.melting = true;
s.melt();
// only incrementally melt one frame
// s.melting = false;
}
if (storm.useTwinkleEffect) {
if (!s.twinkleFrame) {
if (Math.random()>0.9) {
s.twinkleFrame = parseInt(Math.random()*20,10);
}
} else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};

this.animate = function() {
// main animation loop
// move, check status, die etc.
s.move();
};

this.setVelocities = function() {
s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
};

this.setOpacity = function(o,opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};

this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.meltFrame++;
s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
} else {
s.recycle();
}
}
};

this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything?'fixed':'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o,1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize+'px';
s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};

this.recycle(); // set up x/y coords etc.
this.refresh();

};

this.snow = function() {
var active = 0;
var used = 0;
var waiting = 0;
var flake = null;
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active === 0) {
used++;
} else {
waiting++;
}
if (s.flakes[i].melting) {
s.flakes[i].melt();
}
}
if (active<s.flakesMaxActive) {
flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
if (flake.active === 0) {
flake.melting = true;
}
}
};

this.mouseMove = function(e) {
if (!s.followMouse) {
return true;
}
var x = parseInt(e.clientX,10);
if (x<screenX2) {
windOffset = -windMultiplier+(x/screenX2*windMultiplier);
} else {
x -= screenX2;
windOffset = (x/screenX2)*windMultiplier;
}
};

this.createSnow = function(limit,allowInactive) {
for (var i=0; i<limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
if (allowInactive || i>s.flakesMaxActive) {
s.flakes[s.flakes.length-1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};

this.timerInit = function() {
s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
};

this.init = function() {
s.randomizeWind();
s.createSnow(s.flakesMax); // create initial batch
addEvent(window,'resize',s.resizeHandler);
addEvent(window,'scroll',s.scrollHandler);
if (!isOldIE) {
addEvent(window,'blur',s.freeze);
addEvent(window,'focus',s.resume);
}
s.resizeHandler();
s.scrollHandler();
if (s.followMouse) {
addEvent(document,'mousemove',s.mouseMove);
}
s.animationInterval = Math.max(20,s.animationInterval);
s.timerInit();
};

var didInit = false;

this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
// already loaded and running
return true;
}
if (typeof s.targetElement == 'string') {
var targetID = s.targetElement;
s.targetElement = document.getElementById(targetID);
if (!s.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
}
}
if (!s.targetElement) {
s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
}
if (s.targetElement != document.documentElement && s.targetElement != document.body) {
s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
}
s.resizeHandler(); // get bounding box elements
s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
fixedForEverything = s.usePositionFixed;
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
};

function doStart() {
s.start(true);
}

if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);
window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}

}

snowStorm = new SnowStorm();
//]]>
</script>
<!-- Fin del script para nieve -->



Notas:
[1] He respetado los créditos al autor original: Schillmania, pienso que no sería pedir demasiado hicieseis lo mismo todos y no borraseis esa parte en el script...

[2] Una cosa a tener en cuenta, es que el efecto nieve también será visible en la parte de Diseño de nuestro blog, esto es normal y además he comprobado que no da ningún problema, aunque si en algún caso eso sucediese bastaría retirar el script.

[3] Para retirar el script una vez no queramos usarlo, nos fijaremos en las anotaciones que he puesto al comienzo y al final y que he destacado en color rojo en el código y borramos todo desde la primera anotación a la última, ambas incluidas.

[4] Hay algunos cambios que podemos hacer, aunque yo personalmente lo dejaría como est... cabe destacar que podemos aumentar la cantidad de copos de nieve en esta línea del script:

this.flakesMax = 150;

Leer completo

25 agosto 2009

Musica dentro de tu pagina

  No hay comentarios
16:04

Explicamos el codigo Javascript para colocar la musica en tu blog o pagina...


debes colocarlo en el codigo HTML de la pagina entre las estiquetas <Head> </Head>

<script>
<!--
var musicsrc="URL DEL ARCHIVO DE SONIDO" if (navigator.appName=="Microsoft Internet Explorer") document.write
('<bgsound src='+'"'+musicsrc+'"'+'
loop="infinite">') else document.write
('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20"
height="20" autostart="true"
loop="true">')
//-->
</script>

Solo puede configurarse lo remarcado en rojo, el archivo puede ser mp3, wmv u otro archivo que soporte windows media, el codigo solo funciona con internet explorer...

Leer completo

21 agosto 2009

Colocar otra pagina web en tu blog con Frames

  No hay comentarios
12:29

Una maravillosa herramienta muy buena para colocar contenidos de otras webs que quieras tener en tu pagina web... este es el codigo HTML...


Solo debes modificar la URL que esta dentro del codigo y colocar la web que quieres que aparezca en la tuya

Leer completo