-->
Mostrando entradas con la etiqueta Html. Mostrar todas las entradas
Mostrando entradas con la etiqueta Html. Mostrar todas las entradas

Cómo redirigir a los usuarios móviles de tu web

Redirigir a los usuarios móviles a una web específica

Tras recibir varias peticiones sobre cómo redirigir a los usuarios móviles de tu web a una determinada página he decidido escribir este pequeño tutorial donde mostraré una de las maneras más sencillas.

¿QUÉ ENTENDEMOS POR REDIRECCIÓN MÓVIL?

Mejor explicar la redirección móvil con un ejemplo: Imaginad que alguien desde un dispositivo móvil visita nuestra página web, como ésta no está preparada no se mostrará bien por lo que optamos por mostrarle una web especialmente diseñada para dispositivos móviles.

EJEMPLO PRÁCTICO DE REDIRECCIÓN MÓVIL

En el ejemplo veremos un sencillo código que deberá incluirse en la sección <head> de nuestra página lo que permite que pueda ser reconocido por primera vez y redirigir todos los usuarios móviles rápidamente.

<script type="text/javascript">
if (screen.width<800) {
window.location="http://www.tudominio.com/mobile/";
}
</script>
Lo que hace este código es detectar el ancho del dispositivo que abre nuestra página web, si éste es inferior a 800 píxeles entiende que el dispositivo es móvil y redirige al usuario a la carpeta "http://www.tudominio.com/mobile/"

RECOMENDACIÓN PARA LA REDIRECCIÓN MÓVIL

El método que mostramos en este artículo es muy sencillo y rápido de implementar aunque no es de mi agrado si lo que queremos es mostrar correctamente nuestra página web en todos los dispositivos, si lo que queremos conseguir es precisamente eso yo personalmente recomiendo diseñar nuestra página web utilizando el llamado Responsive design.

Si te ha gustado el artículo sobre cómo redirigir a los usuarios móviles de tu web puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha

Etiquetas:

Añadir iconos redes sociales que giran en blogger

Cómo añadir iconos redes sociales que giran en blogger

En este artículo voy a explicar cómo añadir iconos de redes sociales que giran en nuestro blog en dos posiciones diferentes de nuestro blog.

Si realizas todos los pasos de este tutorial, los iconos de redes sociales quedarían de la siguiente manera en tu blog:


A continuación os muestro los pasos a seguir para añadir iconos redes sociales que giran en blogger:
  1. Añadir los estilos a la plantilla: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

    Busca el siguiente texto ]]></b:skin> y justo andes de él añade el siguiente código:

    /* ICONOS REDES SOCIALES DE TUTORIALES Y OPINIONES*/
    #social-iconos {
    width:100%;
    height:50px;
    margin-bottom:10px; display:block;
    clear:both;
    }
    .social-icons{display:table}
    .social-icons ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    text-align:right;
    padding:5px 5px 0 0
    }
    .social-icons ul {
    padding:0;
    float:right;
    margin-bottom:0;
    }
    .social-icons li.social_icon {
    background:none !important;
    padding-left:0 !important;
    display:inline;
    float:left;
    margin-left:6px;
    }
    .social-icons li:hover {
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(-360deg);
    }

  2. Añadir los iconos de redes sociales en la CABECERA del Blog: Debes dirigirte a la sección "Plantilla" de tu blog y pulsar el botón "Editar HTML".

    Busca SIN expandir artilugios el siguiente texto:
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> y pega antes de él el siguiente código:

    <div class='social-icons' id='social-iconos'>
    <ul>
    <li class='social_icon'><a href='http://facebook.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/facebook-32x32.png'/></a></li>
    <li class='social_icon'><a href='https://twitter.com/Nombre_Usuario'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/twitter-32x32.png'/></a></li>
    <li class='social_icon'><a href='https://plus.google.com/ID_Usuario/about'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/google-32x32.png'/></a></li>
    <li class='social_icon'><a href='http://Nombre_de_tu_blog.com/feeds/posts/default'><img border='0' src='http://www.characterscounter.com/img/iconos-sociales/rss-32x32.png'/></a></li>
    </ul>
    </div>
    IMPORTANTE: Debes cambiar el texto que aparece en rojo por tus datos.

  3. Añadir los iconos de redes sociales COMO GADGET del Blog: Deberás dirigirte a la sección "Diseño" y pulsar la opción "Añadir un gadget".

    De la lista de gadgets disponibles, deberás seleccionar el "HTML/Javascript" y pegar en su interior el código del punto anterior.

Artículos que te pueden interesar

Añadir gadget redes sociales en blogger.
Cómo proteger las imágenes de tu blogger.
Cómo etiquetar entradas de blogger.
Etiquetas: ,

Crear índice de contenido en Blogger

Crear índice de contenido en Blogger

Muchos bloggers quieren incluir en sus blogs un índice de contenidos desde el cual se pueda acceder a todas las entradas que ha escrito. A continuación os muestro la manera de crear un índice de contenidos para vuestro Blooger cuyo autor original es Bismillah, Alhamdulillah.

Las ventajas del método que a continuación os presento son las siguientes:
  • Es muy sencillo de implementar, basta con copiar el código que a continuación os muestro en el código html de una entrada.
  • Este índice de contenidos se actualiza automáticamente por lo que una vez creado podemos olvidarnos de él.

Pasos a seguir para la creación del índice de contenidos

  1. Crear una entrada nueva.
  2. Pinchar sobre el botón HTML de la entrada.
  3. Escribir el siguiente código:
    4. <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
    <script src="http://tutorialesyopiniones.blogspot.com.es/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
  4. Sustituir http://tutorialesyopiniones.blogspot.com.es por la URL de vuestro blog
  5. Ejemplo de funcionamiento del índice de contenidos
Etiquetas:

Agrandar imagen al pasar el ratón por encima

Agrandar imagen al pasar el ratón por encima

En este artículo vamos a ver cómo agrandar una imagen al pasar por encima el ratón simulando la acción de un zoom.

Ejemplo: Agrandar imagen al pasar el ratón por encima para Blogger

En primer lugar deberemos personalizar la plantilla que utilizamos en blogger, para ello deberéis dirigiros a la sección Plantilla y a continuación pulsar el botón Edición de HTML.

En la ventana que se abre y que muestra el código de nuestra plantilla  deberéis localizar el siguiente código:
]]></b:skin>
Justo antes del código anterior deberéis pegar el siguiente código que se encarga de definir la nueva clase thumbnail:
.thumbnail {position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 50; }
.thumbnail span{
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px double gray;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}
.thumbnail span img{ border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 10px; }

Cuando queramos utilizar el efecto zoom sobre una imagen en alguno de nuestros post, esto es lo que deberemos escribir:
<a class="thumbnail" href="#thumb"><img src="URL de la imagen" width="100px" height="80px" border="0" /><span><img src="URL de la imagen" /><br />Pie de foto</span></a>

Por último deberás personalizar el código anterior para que se adapte a las propiedades de la imagen que quieres mostrar:
  • Cambiar URL de la imagen
  • Modificar height
  • Modificar width
  • Personalizar texto del pie

Resultado de agrandar foto al pasar el ratón por encima


Ejemplo
Etiquetas:

Como utilizar Google Fonts

Tutorial: Como utilizar Google Fonts en nuestra página web

Gracias a Google Fonts los desarrolladores web podemos utilizar en nuestros desarrollos fuentes diferentes a las estándar de una manera rápida y sencilla consiguiendo dar un toque diferentes a nuestras páginas web y todo sin tener que subir los archivos de las fuentes a nuestro hosting.

Para utilizar Google Fonts en nuestra página web deberemos visitar el catálogo de fuentes disponibles, seleccionar la que más nos gusta y utilizar el siguiente código en la sección <head> de nuestra página web.

Sintaxis de Google Fonts

<link href="http://fonts.googleapis.com/css?family=Font+Name" rel="stylesheet" type="text/css"></link>
Donde deberemos sustituir donde pone Font+Name por el nombre de la fuente que queremos utilizar.

Ejemplo de utilización de la fuente Offside:

<link href="http://fonts.googleapis.com/css?family=Offside" rel="stylesheet" type="text/css"></link>

Artículos que te pueden interesar

Etiquetas:

Como crear un localizador con HTML5

Tutorial HTML: Como crear un localizador con HTML5

En el  tutorial de hoy vamos a explicar como crear un localizador con HTML5, pero antes vamos a explicar qué es HTML5.

¿Qué es HTML5?

HTML5 es la quinta revisión importante del lenguaje HTML. En esta últimaa versión se incluyen nuevas características para ayudar a los autores de aplicaciones Web, se introducen nuevos elementos basados ​​en la investigación sobre las prácticas de autor vigentes y se ha prestado especial atención a la definición de criterios claros de conformidad para los agentes de usuario en un esfuerzo por mejorar la interoperabilidad.

¿Cómo crear un localizador con HTML5?

Aunque HTML5 solo es soportado por las últimas versiones de Chrome y Firefox, la gran potencia de desarrollo que permite junto con las nuevas funcionalidades de la API de Google Maps permiten ajustar casi al milímetro la posición actual del internauta, por esta razón me he decidido a escribir un tutorial sobre la creación de un localizador con HTML5.

Ejemplo: Crear localizador con HTML5

En primer lugar crearemos la función para que el navegador obtenga las coordenadas:

<script language="javascript">
function obtener_localizacion() {
   if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(coordenadas);
   }else{
      alert('Tu navegador no soporta la API de geolocalizacion');
   }
}

En segundo lugar creamos la función javaScript llamada coordenadas que utiliza la API Google Maps para que muestre los resultados obtenidos en la función obtnener_localizacion sobre el mapa:

function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var mapa = document.getElementById("mapa");
mapa.src = "http://maps.google.com/maps/api/staticmap?center="+ latitud + "," + longitud + "&zoom=15&size=400x400&markers=color:green|label:A|" + latitud + "," + longitud + "&sensor=false";
}
</script>

Ahora simplemente lo que necesitamos será un botón para activar la función javaScript y una imagen llamada 'mapa' donde llamaremos al mapa de Google, a través de 'mapa.src' de la función anterior:

<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
<p><img id="mapa" src=""></p>

Y de esta manera se crea un localizador con HTML5.

También te puede interesar saber como dibujar rutas en Google maps y como calcular la distancia entre dos puntos con PHP.
Etiquetas: ,
Suscribirse a: Entradas (Atom)