Archivo de la etiqueta: html

Modificación del scroll HTML

Posted on por
Responder

En determinadas ocasiones nos veremos en la necesidad de modificar estéticamente el scroll que por defecto nos presentan los navegadores cuando incluimos uno en nuestro código HTML/CSS. Existen diversas maneras de hacer esto y muchos scripts para ello, pero personalmente, tras probar varios he dado con uno que me parece muy versátil y fácil de utilizar y quería compartirlo con vosotros. Se trata de ypSimpleScroll


Aquí tenéis el código fuente original: http://www.youngpup.net/projects/ypSimpleScroll/

Pero he de decir que existe una modificación de este script de Aaron Boodman que para mi gusto lo mejora aún más y lo hace compatible con todos los navegadores (que yo haya testeado) y con mac. En el siguiente blog está el script modificado así como una detallada explicación de su uso: http://meddle.dzygn.com/esp/weblog/modificacion.scroller/

Básicamente. Tras descargar los archivos de la web de Boodman:
http://meddle.dzygn.com/v3/js/_aaron_scroller_mtv.rar

  1. Enlazas a los estilos css (totalmente personalizables).
    <link rel=»stylesheet» type=»text/css» href=»scroller.css»>
  2. Enlazas a los 3 archivos Javascript que hay que descargar.
    <script type=»text/javascript» src=»dom-drag.js»></script>
    <script type=»text/javascript» src=»ypSimpleScrollC.js»></script>
    <script type=»text/javascript» src=»scroller.js»></script>
  3. Inicias el script con la llamada a la función JS.
    <script type="text/javascript">
    instantiateScroller(0, "scroll0", 7, 0, 300, 150, 150);
    </script>

Muy útil, de verdad.

Si conocéis algún otro no dudéis en postearlo.

Google Fonts

Posted on por
1

Google Font

A todos los programadores web nos ha pasado alguna vez que un cliente nos solicita una web con un diseño que él mismo nos facilita, o quizás una agencia (no muy acostumbrada a diseño web) o simplemente nos pide una tipografía concreta.

Esto podía suponer un problema a la hora de realizar la programación del site (si descartamos de inicio el utilizar imágenes para representar las fuentes conflictivas) ya que muchas de esas fuentes no son universalmente compatibles.

Existen muchas fuentes propias del sistema operativo (Windows, Linux, Mac, etc…) y otras incompatibles con ellos. Esto daba lugar a que el usuario no pudiese ver correctamente la web o que tuviese que instalar las fuentes en su sistema operativo para ello. Un engorro…

Pues bien, Google una vez más sale al rescate de los programadores web con Google Fonts (actualmente en estado beta) con una librería de fuentes disponible online que incluye una API que nos permitirá incluir diversos tipos de fuentes no estándar en nuestras webs. Además el uso es muy muy sencillo.

Sólo hemos de añadir una cabecera al código de nuestra página e incluir en los css el estilo asociado. Por ejemplo para incluir la fuente «Tangerine»:

Encabezado HTML

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

Estilos CSS

body {
font-family: ‘Tangerine’, serif;
}

¡Y listo!
¡Gracias Google!