Mostrar imagen de día, tarde o noche con PHP

Quiero compartir un codigo que desarrollé para que lo usen en sus páginas webs: mediante PHP una imagen de día, tarde o noche se mostrará de acuerdo al horario que corresponda.

Les dejo el Código:

Código completo !

<?php

$hora = date("H"); /* <-- H = Hora de 00 horas a 23 horas por default en PHP, entonces sabiendo esto seguimos abajo*/

if($hora < 11){
$file = ('http://tcc.tutv.com.uy/weatherSubrayado/images/Weather/tiempo_sol_small.png');
$mensaje = "Buenos Dias";
}
else if($hora < 18 ){
$file = ('http://tiempovenezuela.com/assets/images/weather_yr/3.png');
$mensaje = "Buenas Tardes";
}
else{
$file = ('http://www.cuandopasa.com/pic/n/000/000/n0000000130zgk.jpg');
$mensaje = "Buenas Noches";
}
?>
<html>
<body>
<?=$mensaje?>
<img src="<?=$file?>";
</body>
</html>

Explico un poco:

Si la variable $hora es menor que 11hrs, entonces que imprima la imagen de dia  dentro del body en :

<?=$mensaje?>

Y también que me imprima su respectiva imagen dentro del body en:

<img src="<?=$file?>";

El resto es similar, sólo que va a cambiar la imagen.

Las imágenes que cambian son:

  • dia.jpg
  • tarde.jpg
  • noche.jpg

Como sabemos, la hora de PHP se basa en la hora de nuestros hosting o servidor. A mí me marca la hora así:

  • a las 11pm(abarca desde las 12pm a la 1pm) –> imagen de dia(dia.jpg)
  • a las 6pm –> imagen de tarde(noche.jpg)
  • a las 12an –> imagen de mañana(mañana.jpg)
NOTA:
– Necesitarán 3 imágenes.

– Si no les carga las imágenes es porque ya están vencidas, puede cambiar la ubicación de las imágenes.Por ejemplo:

$file = ('http://www.nuevaubicacion.com/dia.jpg');

Espero les haya gustado !

Colocar un Video de YouTube como fondo de tu Web con jquery.tubular.js

En esta ocación quiero compartir un Plugin de jQuery que encontre navegando por la web, este plugin se llama Tubular.
Este plugin coloca un video de youtube cualquiera que elijas como Fondo de tu Página Web, obteniendo asi un diseño de tu Web impresionante.

Tubular Plugin a su ves nos da la opción de colocar sus controles para el video, para poder detenerlo, pausarlo o silenciar el audio.

Comencemos:

Primero:
Descargamos el Plugin Tubular.
Segundo:
Dentro de Nuestra etiquetas <head> </head>, colocamos o llamamos los archivos que estan dentro de la carpeta js del archivo RAR que bajamos (yo solo use esa carpeta el resto no lo use, si ustedes desean lo peuden usar). Entonces llamamos los archivos asi:

<head>
<script src=»js/jquery-1.7.1.min.js» type=»text/javascript»></script>
<script src=»js/swfobject.js» type=»text/javascript»></script>
<script src=»js/jquery.tubular.js» type=»text/javascript»></script>
<script src=»js/mission-control.js» type=»text/javascript»></script>
</head>
Tercero:
Creamos las siguientes capas o DIVS dentro de nuestras etiquetas <body> </body> de la siguiente manera:

<body>

<div id=»wrapper»>

<p id=»video-controls»><span class=»azulita»>Controles:</span> <a class=»videoPaused» href=»» id=»videoPause»>Pausar / Reproducir</a> |
<a href=»» id=»videoMute»>Sonar / Silenciar</a> |
<a href=»» id=»videoStop»>Detener Video</a></p>
<div id=»contenido»>
<p>Bienvenidos a esta demo !</p>
<p>El Plugin <a href=»http://www.seanmccambridge.com/tubular/» target=»_blank»>Tubular</a> de jQuery me hace pensar decir que: jQuery es impresionante y no tiene limites.</p>
<p>VIDEO: Go Let it Out – Oasis</p>
</div>

</div>

</body>
Cuarto:
Creamos nuestra Hoja de estilos CSS, para los nombres o id de las capas o divs correspondientes:

<style type=»text/css»>

#video-controls {
color: #FFF;
background-color: #F06;
font-family: «Trebuchet MS», Arial, Helvetica, sans-serif;
text-align: center;
position: absolute;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
left: 19px;
top: 40px;
}

#video-controls a:link {color: #FFF; text-decoration:none;}
#video-controls a:visited {color: #FFF; text-decoration:none;}
#video-controls a:hover {color: #FFF; text-decoration:none;}
#video-controls a:active {color: #FFF; text-decoration:none;}
.azulita {
color: #039;
font-weight: bold;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
}
#contenido {
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
color: #FFF;
position: absolute;
left: 23px;
top: 118px;
width: 622px;
background-image: url(img/bg-texto.png);
background-repeat: repeat;
padding: 15px;
}
a:link {
color: #F06;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F06;
}
a:hover {
text-decoration: underline;
color: #F06;
}
a:active {
text-decoration: none;
color: #F06;
}
</style>

 

Quinto:
Abrimos nuestro archivo mission-control.js que vino dentro del archivo RAR que descargamos de la página del Plugin, y en la 2da linea donde dice:

$().ready(function() {
$(‘body’).tubular(‘AzNZaIYce-U‘,’wrapper’);

AzNZaIYce-U <— este es el ID del video de youtube que vamos a reproducir.

Por ejemplo:

Si tenemos el siguiente video:

http://www.youtube.com/watch?v=AzNZaIYce-U

la ID seria lo que esta despues de v=AzNZaIYce-U o lo que esta en negrita.

Y listo con eso ya tenemos finalizado todo y listo para usar !

Aca les dejo un demo:

DEMO
NOTA:
– En la página del plugin revisen bien los archivos por si no encuentran alguno, sean observadores.
– El video por defecto Carga sin sonido, el cual lo podemos activar con el boton Sonar/Silenciar.
Espero les haya gustado.

Hacer compatible Audio HTML5 con todos los navegadores


Como les prometi, En esta ocación les mostrare como hacer compatible el audio de HTML5 con varios de los Navegadores de Internet.

El post anterior donde mostre como insertar audio con HTML 5:

https://tecnato.com/insertar-audio-con-html5/

Comenzamos:

Vamos a utilizar Javascript, pero para ahorrarnos tiempo y tener mas productividad utilizaremos el plugin audio.js

Descargamos el plugin con todos sus archivos, entonces:

– Primero: Agregamos dentro de nuestras etiquetas <head></head>el archivo audio.min.js que viene dentro del archivo que descargamos

– Segundo: Creamos nuestra funcion con su variable(es obligatoria pero siempre la misma)es sencilla y si no tienes conocimiento de Javascript pues solo copia lo que esta dentro de <head></head>

<head>
<script src=»js_t_otros/audio.min.js»></script>

<script>
audiojs.events.ready(function(){
var as = audiojs.createAll();
});
</script>

</head>

 

– Tercero: Ya tenemos configurado todo para que corra nuestro audio, entonces insertamos dentro de <body></body> el audio que queremos reproducir.

La Canción es Oasis – Stop Crying Your Heart Out

<audio src=»http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.mp3″ preload=»auto»></audio>

Listo eso es todo, ahora nuestro audio correra sin ningun problema con otros exploradores.

Aca pueden ver en que navegadores y como trabaja:

  • Mobile Safari (iOS 3+)
  • Android (2.2+, w/Flash)
  • Safari (4+)
  • Chrome (7+)
  • Firefox (3+, w/ Flash)
  • Opera (10+, w/ Flash)
  • IE (6, 7, 8, w/ Flash)

 

DEMO

Plugin: http://kolber.github.com/audiojs/   <– En su Página Web Hay muchas opciones de este interesante plugin, también encontraran documentación y muchas cosas interesantes !

 NOTA: Recuerden que solo deben usar los archivos de la carpeta  /audiojs que viene dentro del archivo RAR que bajan de la pagina del Plugin.

Espero les haya gustado, y ojala que así sea, para seguir subiendo mas tutos =)

Cheers !

Insertar Audio con HTML5

Insertar Audio con HTML5
Bueno para los que aun desconocen, les comento que la ultima version de HTML, nos permite agregar audio y tambien vídeo.
En esta oportunidad les xplicare como insertar audio con la etiqueta llamada audio. 

Su estructura es sencilla y es la siguiente:

<audio></audio> <– dentro de estas tags ira nuestros archivos de sonido

Por Ejemplo:

Quiero reproducir la canción: Oasis – Stop Crying Your Heart Out (esta en formato MP3)
entonces escribimos asi:

<audio id=»reproductor» controls preload>
<source src=»http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.mp3″ type=»audio/mp3″ />
</audio>

Previa de como quedaria en Google Crohme 16.0, el cual uso yo:

Explico lo que hemos colocado:
– id = Este nombre (en nuestro caso id=»reproductor») sirve para aplicarle css, classes, etc ( es decir CSS3, Javascript,
Eventos etc).
– controls = Esta propiedad la escribimos para que nos aparesca los controles (play, pause, etc).
– preload: Carga una cantidad del archivo en el buffer, antes de ser reproducido.
– source src = Acá le indicamos la ubicación de nuestro Archivo

NOTA: En mi caso el archivo de audio que voy a reproducir esta en la carpeta mp3. Entonces escribo asi:

<source src=”mp3/http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.mp3″ type=”audio/mp3″ />

Tu lo puedes poner en la carpeta que quieras !
y si quieres agregar otro archivo mas, escribe asi:

<source src=”mp3/audio1.mp3″ type=”audio/mp3″ />

<source src=”mp3/audio2.mp3″ type=”audio/mp3″ />

<source src=”mp3/audio3.mp3″ type=”audio/mp3″ />

 

Puedes usar la cantidad que gustes !

type = Aca Tenemos que indicarle el formato del archivo que quiero reproducir. En mi caso el archivo que quiero reproducir es un MP3, entonces escribo esto:

type=»audio/mp3»

Eso es todo ya tenemos nuestro reproductor creado !

Tambien podemos agregar: autoplay

– autoplay = Reproduce el archivo apenas ingresamos a nuestra pagina.

Para agregar autoplay solo escribimos asi:

<audio id=»reproductor» controls  preload autoplay>
<source src=»http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.mp3″ type=»audio/mp3″ />
</audio>

COMPATIBILIDAD CON LOS NAVEGADORES:

HTML5 solo es soportado por navegadores como:

– Google Crohme (Recomiendo la ultima version actualizada) – Descargar
– Mozilla Firefox (Recomiendo la ultima version actualizada) – Descargar
– Internet Explorer 9 a mas (Recomiendo la ultima version actualizada) – Descargar

Pero no te desanimes, para hacer compatible HTML5 con todos nuestros navegadores podemos usar Javascript =).

Lo explicare detalladamente en otro post, por ahora les recomiendo ACTUALIZAR A LAS ULTIMAS VERSIONESUSAR SOLO CROHME O MOZILLA pero eso si en sus ultimas versiones ! las cuales son Gratuitas. (Yo use google Crohme 16.0 ,   para  este post)

OJO: recuerden que demora en cargar un poco ya que estamos usando la propiedad preload.

DEMO (Recuerda la compatibilidad con los navegadores)

 

EL CODIGO COMPLETO, DEL DEMO Y EL CUAL A MI ME FUNCIONA LO TIENES ACA:

<strong>Cancion : Oasis - Stop Crying Your Heart Out On</strong>
<br/>
<audio id="reproductor" controls reload>
  <source src=http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.mp3" type="audio/mp3" />
</audio>

 

Pasenla bien !

Primer Borrador CSS4


La W3C publica el primer borrador de la tecnología que sucederá al actual CSS3.

Aun no existe un navegador que soporte esta tecnología CSS4, pero la W3C ya esta trabajando en la próxima versión de este importante lenguaje para maquetación de Páginas Webs

Aquellos desarrolladores interesados pueden acceder al primer borrador de CSS4 desde aca: www.w3.org.