Para comenzar con HTML5

Me estoy iniciando con la programación en HTML5 y para ello me está siendo muy útil el blog HTML5fácil, es muy útil.

También destacar a uno de sus colaboradores, Dxvtuts, cuyos tutoriales puedes seguir en su canal de Youtube.

Desplazamiento dentro de una misma página (Smooth Page Scrolling)

Con unas simples lineas de código en y usando JQuery podemos desarrollar una función que nos permita realizar un desplazamiento suave y animado dentro de una misma página.

Cuando queremos desplazarnos dentro de una misma página existe una forma de hacerlo con etiquetas HTML pero que producen un efecto muy brusco, en cambio con estas simples lineas de código podremos hacer ese scroll suave y controlar su velocidad, a cualquier elemento de nuestra página, ya sea a un DIV, SPAN, IMG, etc... a cualquier etiqueta a la que le añadamos un ID para identificarlo.

Antes de explicar el código, pongo un enlace a un ejemplo de uso de desplazamiento suave en página.

Código para realizarlo:

 1- cargar la librería jquery, en la cabecera de la página.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2.  Escribir las siguientes funciones ntre las etiquetas <script></script>
2.1 -

function moveTo(pos,velocidad){ $('html, body').animate({scrollTop: pos}, velocidad);}

Esta función es para moverse a una determinada posición de la página expresada en pixels que le pasamos a la función con el parámetro 'pos' ( pos=0 nos moveremos al inicio de la página),el parametro 'velocidad' indicará la velocidad a la que haremos el desplazamiento, a menor valor irá más rápido. También podemos usar las palabras "slow"(lento) o "fast"(rápido).

2.2-

function position(elem){var offset = $('#'+elem).offset();return(offset.top);}

Función que  devuelve la posición de cualquier elemento de nuestra página, para ello hay que darle un valor ID al elemento al crearlo. Por ejemplo

3. Asociar la función 'moveTo()' al eveto 'onclick'  funciones dentro de la etiqueta que deseemos.

<div id="inicio">

<h2 onclick="moveTo(position('abajo'),1000)">Haz click para ir al elemento de la página llamado "abajo"</h2>

Nótese que como no conocemos la posición en pixel del elemento al que nos queremos desplazar y que es necesario en la función 'moveTo(pos,velocidad)' lo que hacemos es pasarle al parametro 'pos' la función 'position(elem)' que calculará la posición en pixels del elemento que le pasemos como argunmento.

4. Ir al inicio de la página.

<div id="abajo">

<h2  onclick="moveTo(0,300);">Haz click para ir al inicio de la página rápido</h2>
<h2  onclick="moveTo(0,3000);">Haz click para ir al inicio de la página Lento</h2></div>

Con este poco código podemos hacer un efecto bastante elegante de desplazamiento a elementos de nuestra web, espero que sea útil.

Feliz Año 2012 para todos. Espero que este año sea algo mejor que el que dejamos atrás y que se cumplan todos nuestros/vuestros deseos. Y si no puede ser, al menos que tengamos salud, que eso sí es importante.

Feliz Navidad desde Fliis con música.

Ocultar iconos de editar en tu blog de Blogger

A mi me molesta mucho que aparezcan los iconos de edición en mi blog de blogger. Sí, ya sé que sólo salen si estás "logueado" y sólo los puedes ver tú, los demás usuarios no los ven. Pero me sigue molestando, yo prefiero verlo exactamente igual que lo ve cualquier lector, y si quiero editar mi diseño, pulso el botón "Diseño".

Así que buscando en la ayuda de blogger, veo un tema en el foro que trata sobre esto mismo.

El enlace al foro es "Ocultar iconos editar"

Aquí encuentro una respuesta que me ha servido, Mejor solución para ocultar iconos.

Se trata de añadir el siguiente código en la plantilla de sus blogs (Escritorio > Diseño > Edición HTML) y justo antes de agregar esto:

<style type='text/css'>

.quickedit{display:none;}

</style>

Y problema resuelto :)

El nuevo Blogger!

Acabo de activar el nuevo blogger y estoy gratamente sorprendido.
Es mucho mejor y más intuitivo.
Voy a empezar a usar mucho más mi blog.