sábado, 14 de abril de 2018

Cambiar imagen según el día de la semana

Hoy os traigo como cambiar imagen o texto para que semuestre diferente cada día de la semana.
Podemos utilizarlo para mostrar que día es hoy, que aunque parezca obvio, ay veces que no sabemos en qué día estamos.




El código es muy parecido al que vimos en el post de "Mensaje según la hora del dia" comenzamos:



  1.        var a = new Date ();
  2.        var dia = a.getDay();
  3.      if(dia == 0) document.write("Domingo");
  4.      if(dia == 1) document.write("Lunes");
  5.      if(dia == 2) document.write("Martes");
  6.      if(dia == 3) document.write("Miercoles");
  7.      if(dia == 4) document.write("Jueves");
  8.      if(dia == 5) document.write("Viernes");
  9.      if(dia == 6) document.write("Sabado");


Se vería así:


Evidentemente, a esto luego habría que darle estilos css para personalizarlo.

y si queremos que se muestren imágenes en lugar de texto, el código quedaría de la siguiente manera:



  1.       var a = new Date ();
  2.       var dia = a.getDay();
  3.      if(dia == 0) document.write("<img src='aqui_la_imagen_del_domingo.gif'/>");
  4.      if(dia == 1) document.write("<img src='aqui_la_imagen_del_lunes.gif'/>");
  5.      if(dia == 2) document.write("<img src='aqui_la_imagen_del_martes.gif'/>");
  6.      if(dia == 3) document.write("<img src='aqui_la_imagen_del_miercoles'/>");
  7.      if(dia == 4) document.write("<img src='aqui_la_imagen_del_jueves'/>");
  8.      if(dia == 5) document.write("<img src='aqui_la_imagen_del_viernes'/>");
  9.      if(dia == 6) document.write("<img src='aqui_la_imagen_del_sabado'/>");





Tendríamos que cambiar  "aqui_la_imagen_del_XXXX" por la url de la imagen que queramos mostrar, como veis se puede modificar el código a vuestras necesidades.




Espero que os haya sido útil, si tenéis dudas consultar.



Un saludo.

viernes, 13 de abril de 2018

Cambiar mensaje según la hora del día con javascript

Hoy os voy a enseñar a hacer algo que quedará visualmente bien en la web, saludar al visitante de diferente manera según la hora del día.

Si viene por la mañana: buenos días

Por la tarde: buenas tardes


Y por la noche: buenas noches.

El código es muy sencillo y no tiene mayor complicación.Digamos que queremos saludar con el texto "Buenos días" de 4:00  a 14:00, con el texto "Buenas Tardes" de 14:00 a 20:00 y con el texto "Buenas Noches" de 20:00 a 4:00, lo haríamos colocando el siguiente código:

  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 3){document.write("Buenas Noches")};
  4. if(hora >= 4 && hora<= 14){document.write("Buenos D&iacute;as")};
  5. if(hora >= 15 && hora<= 19){document.write("Buenas Tardes")};
  6. if(hora >= 20 && hora<= 24){document.write("Buenas Noches")};



Cambiaremos las horas a nuestro gusto para adaptar el saludo a nuestras necesidades.
El código se veía así:


Teniendo en cuenta que este código podríamos utilizarlo entre otros usos para poner el horario de atención al público y decirle al visitante si estamos abierto o cerrado.
El código quedaría de la siguiente manera:


  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 9){document.write("Cerrado")};
  4. if(hora >= 10 && hora<= 14){document.write("Abierto")};
  5. if(hora >= 15 && hora<= 16){document.write("Cerrado")};
  6. if(hora >= 17 && hora<= 20){document.write("Abierto")};
  7. if(hora >= 21 && hora<= 24){document.write("Cerrado")}; 


Y se veía así:



Pudiendo poner imagen en lugar de texto modificando lo siguiente:



  1. var a = new Date();
  2. var hora = a.getHours();
  3. if(hora >= 1 && hora<= 9){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};
  4. if(hora >= 10 && hora<= 14){document.write("<img border='0' src='aqui_la_imagen_abierto.png' width='XXX' height='xxx'/>")};
  5. if(hora >= 15 && hora<= 16){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};
  6. if(hora >= 17 && hora<= 20){document.write("<img border='0' src='aqui_la_imagen_abierto.png' width='XXX' height='xxx'/>")};
  7. if(hora >= 21 && hora<= 24){document.write("<img border='0' src='aqui_la_imagen_cerrado.png' width='XXX' height='xxx'/>")};

Y como podéis ver, modificando el código podemos utilizarlo para muchas otras cosas.



Espero que os haya sido útil, cualquier duda consultar.


Un saludo.

martes, 10 de abril de 2018

Crear un enlace a un punto de nuestra web

Hoy vamos a ver como poner enlaces internos o externos que nos lleven a un punto en concreto de la web, esto puede ser muy útil cuando queremos llevar al lector de nuestra web a un punto exacto y no tenga que estar buscando por toda la página, pues cuanto mas fácil se lo pongamos al lector mejor será su experiencia en nuestra web.


Es muy útil cuando tenemos mucho texto y queremos indicar al visitante un punto en concreto de la pagina, con el ancla lo llevaremos directamente.

Para conseguir este efecto es muy simple lo que tenemos que hacer, pondremos el atributo "id" al elemento  donde queramos enlazar, supongamos que queremos llevar al visitante a un contenedor "div" seria esto:


  1. <div>Aquí lo que queramos enseñar>/div>

Tendriamos que añadir al div el atributo id, quedando así:


  1. <div id="aquielid">Aquí lo que queramos enseñar>/div>


y para llamarlo crearemos un enlace que puede ser de varias formas:

poniendo toda la url del sitio y al final ponerle "#aquielid"



  1. ejemplo: http://blog.joason.com/2018/04/crear-un-enlace-un-punto-de-nuestra-web.html#aquielid


  2. ejemplo practico: <a href="http://blog.joason.com/2018/04/crear-un-enlace-un-punto-de-nuestra-web.html#aquielid">aquielmensaje</a>


Si lo vamos ha hacer internamente, otra forma seria solo poner en el enlace "#aquielid"


  1. ejemplo: #aquielid

  2. ejemplo practico:  <a href="#aquielid">aquielmensaje</a>


Recordar que este ultimo enlace solo funcionará si lo estamos haciendo dentro de nuestra web, para hacer anclas hacia otras web´s tendremos que utilizar el enlace completo.






Esto ha sido todo, espero que os sea útil, cualquier duda consultarla.

Un saludo.

miércoles, 4 de abril de 2018

Al pasar el ratón la imagen se agranda

Hoy os traigo un efecto visual que al pasar el ratón por encima de una imagen, está se hace más grande.




El código es muy sencillo, lo haríamos de la siguiente manera:


  1. <img src="aquí la url de la imagen" onmouseover="this.width=x0;this.height=x0;" onmouseout="this.width=x1;this.height=x1;" width="x2" height="x2" alt="agrandar imagen al pasar el ratón" /> 

Pondremos el ancho(width) y el alto(height) de la imagen a nuestro gusto, modificaremos los siguientes parámetros:

x0 = pondremos los px de imagen, tanto ancho como alto, este será el tamaño de imagen cuando esté el ratón encima.

x1 = pondremos los px de la imagen para cuando salgamos con el ratón fuera de la imagen.

x2 = pondremos los px de la imagen que se mostrará en primer lugar.



Y se veía así(Lo he exagerado para que se aprecie bien el cambio):



agrandar imagen al pasar el raton




Espero que os sea de utilidad, si tenéis dudas, consultar.


Un saludo.

martes, 3 de abril de 2018

Modificar el tamaño de la papelera

Hoy os voy a enseñar a cambiar el tamaño de la papelera, pues windows suele utilizar por defecto mucho espacio, y si tenemos un disco duro de poca capacidad, pues nos interesa ganarle unos pocos megas.
Hay que saber que si eliminamos algo de mayor tamaño que el que tiene la papelera, nos lo eliminará directamente, nos avisará previamente de ello antes de eliminarlo.
Daremos click derecho sobre el icono de la papelera



Iremos a propiedades y se nos abrirá el menú de propiedades de la papelera




En este menú, como podéis ver, podemos configurar el tamaño individual de la papelera en cada disco duro que tengamos instalado, introduciremos el tamaño que deseemos reservar para la papelera de reciclaje en MB.



Como podéis ver, en este mismo menú, podemos configurar también el aviso de confirmación de eliminación, si queremos que lo muestre o no y también podemos (mucho cuidado con esto) inhabilitar la papelera para que los archivos se elimine definitivamente, con ello ganaremos espacio, solo podría ser aconsejable esto ultimo, si disponemos de un disco duro muy pequeño.



Espero que os sea de utilidad, si tenéis dudas, consultar.


Un saludo.

lunes, 2 de abril de 2018

Cambiar imagen al pasar el ratón

Hoy os cuento como hacer un efecto visual que puede quedar muy bien en nuestra página web, se trata de cambiar la imagen al pasar el ratón por encima de ella.
Este efecto lo podemos hacer para llamar la atención del visitante. 



El código es muy sencillo, lo haremos de la siguiente manera:


  1. <img alt="Cambiar imagen al pasar el raton" height="XX" width="XX" onmouseout="this.src='aquí la imagen1';" onmouseover="this.src='aquí la imagen 2';" src="aquí la imagen1" />

Y se vería así (pasa el ratón por la imagen):

Cambiar imagen al pasar el raton






Espero que os sea de utilidad.

Un saludo.

sábado, 31 de marzo de 2018

Solucionar error "el archivo esta dañado o tiene un formato desconocido" con WinRAR

Después de descargarme varios archivos y encontrarme con mas de un 80% de archivos supuesta mente corruptos, empieza uno a mosquearse, preguntándome que está pasando últimamente con el ordenador.
Al intentar abrirlos, botón derecho y Abrir,


siempre el mismo mensaje de error "El archivo tiene un formato desconocido o esta dañado"




Pues bien, la solución a este error es muy sencilla de resolver, consiste simplemente en actualizar nuestro WinRAR, lo podeis descargar desde su web oficial


Espero que os haya sido de utilidad, cualquier duda preguntar.


Un saludo.

domingo, 25 de marzo de 2018

Botón de compartir en facebook para nuestra web

En las entradas anteriores os he mostrados diferentes botones de compartir, hoy nos toca uno de los posibles mas famosos, estoy hablando de Facebook.

El código para compartir en esta red social también es muy sencillo:


  1. https://www.facebook.com/sharer/sharer.php?u=(url_de_la_página)


El enlace en html quedaría de la siguiente manera:


  1. <a href="http://www.facebook.com/share.php?u=(url_de_la_página)">Compartir</a>


y se veria asi:

Compartir

para ponerle imagen, el código seria el siguiente:



  1. <a href="http://www.facebook.com/share.php?u='(URL_DE_LA_PÁGINA)"><img border="0" src="(url_de_la_imagen)" width="25px" height="25px"></a>


y quedaría así:





Espero que os sea de utilidad, cualquier duda, consultar.

Un saludo.

sábado, 24 de marzo de 2018

Botón de compartir en Line para nuestra web

Hoy traigo un nuevo botón de compartir, no nos podíamos olvidar de otro servicio de mensajería, que aunque no se tan popular, cuenta también con millones de usuarios, estoy hablando de Line.


El código es muy sencillo y fácil de configurar:

seria este:


  1. line://msg/text/(aquí el texto)%20(aquí la url)

en html se pondría de la siguiente manera:

Enlace con texto:


  1. <a href="line://msg/text/(aquí el texto)%20(aquí la url)">Compartir</a>

Se vería así:


Enlace con imagen:


  1. <a href="line://msg/text/(aquí el texto)%20(aquí la url)"><img border="0" 
  2. src="RutaImagenline.png" width="50" height="50"></a>

Con imagen se vería:




Espero que os sea de utilidad, ante cualquier duda, preguntar.


Un saludo.

miércoles, 21 de marzo de 2018

Linterna para hacer deporte running light

Hoy os muestro una pequeña aplicación para android que puede llegar a sur muy útil si nos encontramos haciendo deporte o cualquier actividad y se nos echa la noche encima


Su interfaz es muy simple e intuitiva , se muestra la pantalla de inicio en la cual para iniciar la luz parpadeante solo debemos de tocar la pantalla


Una vez iniciada comenzará los destellos intercambiando luz blanca



Con luz roja, tengo previsto ponerle unos ajustes para poder cambiar el color secundario y velocidad de destello a gusto del usuario.


Para parar la luz intermitente solo debemos de volver a tocar la pantalla.

Es totalmente gratuita y solo esta disponible y sin virus en Play Store

para descargar de móvil capturar el código o hacer clic sobre él

Espero que os guste, cualquier mejora que consideréis , pues comentarlo.


Un saludo.

martes, 20 de marzo de 2018

Poner botón de Atrás o Adelante en tu web

Os traigo como poner un botón para ir a atrás o adelante en vuestra web, puede ser muy útil para facilitar la navegación por la página al visitante y no tenga que usar el botón del propio navegador

El código a poner es muy sencillo:

Para retroceder= 

  1. <a href="javascript:window.history.go(-1)">Atrás</a>


Para ir a delante=

  1.  <a href="javascript:window.history.go(1)">Adelante</a>


este último solo funcionará siempre y cuando el navegador haya retrocedido anteriormente, so no, no tendrá historial para poder ejecutarlo




Espero que os sea útil.

Un saludo.

Botón compartir en Twitter para nuestra web

Hoy os voy a mostrar como poner un botón de compartir nuestra web en Twitter sin utilizar su código, con ello evitaremos el retraso que puede conllevar a la hora de cargar la página, pues aunque sea poco, todo va sumando:







el código  tenemos que hacerlo de la siguiente manera:


  1. https://twitter.com/intent/tweet?url=(aquí la url)&text=(aquí el titulo de la web) ó

  2. https://twitter.com/intent/tweet?text=(aquí el titulo de la web)&url=(aquí la url)


Prueba el código




Espero que os sea de utilidad.


Un saldo.

lunes, 19 de marzo de 2018

Texto de ayuda en un campo de texto

Vamos a ver como se pone un texto de ayuda en un  <input> o campo de texto, para facilitar al usuario:

es muy sencillo, solo tenemos que añadir  placeholder="" a nuestro campo de texto, quedando de la siguiente manera:


  1. <input name="" type="text" id="" placeholder="Aquí la ayuda" />


y el resultado seria como este:



Espero que os sea útil.

Un saludo.

domingo, 18 de marzo de 2018

Poner el botón compartir con Telegram en nuestra web

Hoy en día la gran procedencia de las visitas es a través de dispositivos móviles, la mayoría de páginas tienen para poder compartirse a través de redes sociales y whatsapp, dejando a un lado a unos de los importantes en cuanto usuarios, me estoy refiriendo a Telegram




El código lo he probado y he de decir que al igual que pasa con el whatsapp, no funciona en todos los navegadores, por suerte, si funciona en la mayoría de los navegadores y mas utilizados.

El código seria el siguiente:


  1. tg:msg_url?url=http://blog.joason.com/2018/03/poner-el-boton-de-compartir-en-telegram.html&text=Poner el botón  compartir con Telegram en nuestra web



 Este código para ponerlo con texto, quedaría de la siguiente manera:



  1. <a href="tg:msg_url?url=http://blog.joason.com/2018/03/poner-el-boton-de-compartir-en-telegram.html&text=Poner el botón  compartir con Telegram en nuestra web">Compartir en Telegram</a>


y se vería así:




Tambien lo podemos poner con una imagen, siendo el siguiente código:



  1. <a href="tg:msg_url?url=http://blog.joason.com/2018/03/poner-el-boton-de-compartir-en-telegram.html&text=Poner el botón  compartir con Telegram en nuestra web"><img src="https://1.bp.blogspot.com/-Hb3LTF8Oi8U/Wq6A8XgGcFI/AAAAAAAAAMw/3LyU1ab-oL06vRDM_xokkEOJfUxWginYgCLcBGAs/s1600/poner_boton_compartir_con_telegram_en_nuetra_web.png" width="40" height="40"/></a>


Y se vería así:

 




y si queremos rizar el rizo, podemos hacer las dos a la vez, imagen y texto con el siguiente código:


  1. <a href="tg:msg_url?url=http://blog.joason.com/2018/03/poner-el-boton-de-compartir-en-telegram.html&text=Poner el botón  compartir con Telegram en nuestra web"><img src="https://1.bp.blogspot.com/-Hb3LTF8Oi8U/Wq6A8XgGcFI/AAAAAAAAAMw/3LyU1ab-oL06vRDM_xokkEOJfUxWginYgCLcBGAs/s1600/poner_boton_compartir_con_telegram_en_nuetra_web.png" width="120" height="120"/>Comparte</a>




viéndose así:




Espero que os sea de utilidad, cualquier duda, consultar.



Un saludo.

lunes, 12 de marzo de 2018

Calculadora hidratos de carbono PRO

Como ya os anuncié en la entrada anterior, hemos actualizado la calculadora de hidratos de carbono, tanto en logo, como imagen y funcionalidad, hoy os traigo una nueva versión de la calculadora, PRO


Como veis el logo es de color diferente a la básica, esta ademas de hacer todas las funciones de la otra



Tiene la función de calculo de HC por cada 100 y un selector "Seleccionar Alimentos" con una lista con mas de 200 productos para facilitar el cálculo


Esta aplicación la puedes descargar del Play Store invitándome a un café.
O capturando el siguiente código:

Cualquier duda, consultarla.

Un saludo



Esta aplicación solo está disponible en Play Store, descargándola de otro Store, no garantizo que esté libre de virus

martes, 6 de marzo de 2018

Nueva Calculadora de hidratos de carbono

Por fin ayer pude subir la calculadora de hidratos de carbono al play Store, está totalmente renovada, nuevo diseño,nuevo logo

https://play.google.com/store/apps/details?id=com.joason.calculadorahc




 y nuevas funciones.

https://play.google.com/store/apps/details?id=com.joason.calculadorahc 

Con mensajes de ayuda

https://play.google.com/store/apps/details?id=com.joason.calculadorahc 

Totalmente rediseñada


https://play.google.com/store/apps/details?id=com.joason.calculadorahc



La podéis descargar ya desde el Play Store o captura el siguiente código:

https://play.google.com/store/apps/details?id=com.joason.calculadorahc
Cualquier duda o cuestion, preguntar.


Saludos..

martes, 27 de febrero de 2018

Calculadora de hidratos de carbono

Ya tenemos lista la nueva calculadora de hidratos de carbono, estamos trabajando para subirla lo antes posible el Play Store, con más funciones y nuevo diseño. Os iremos informando





Un saludo.