HiperTextosMagazine

5 efectes senzills i útils amb Mootools

Pestanyes lliscants (Sliding Tabs)

Enllaços:
Autor | Demo

Finestres de Llum (LightWindows)

Enllaços:
Autor | Demo

Altres opcions:
Sibaa

Acordions (Accordion)

Enllaços: Autor | Demo

Altres opcions:
Original Mootools
Jourmoly
Chrisesler

Remarcador (Highlighter)

Enllaços: Autor | Demo

Globus Informatius (Tooltips)

Enllaços: Autor | Demo

Etiquetes de comentaris: Frameworks, Javascript, Mootools

Icone universal per a blocs

Per celebrar el nadal i l'entrada del any, Hipertextos ha decidit respondre a la crida iniciada a principis del 2008 per dos reconeguts programadors web a nivell internacional, en la que incitaven a la comunitat Open Source a dissenyar un icone universal per als blogs.

Podeu trobar la nostra humil proposta a:

http://theblogicon.blogspot.com

Us convidem a tots els bloggers a utilitzar-lo de manera totalment lliure i a estendre'n el seu ús entre tota la comunitat.

Etiquetes de comentaris: Blogger, Gràfics, Projectes

Templates de Blogger d'HiperTextos

Presentem la nova col·lecció de plantilles per a Bloggers d'HiperTextos: més d'una desena de dissenys exclusius llestos per a utilitzar sobre la plataforma Blogger.

Etiquetes de comentaris: Blogger, CSS, Projectes, Templates

iBlock Template 1.0: plantilla de Blogger optimitzada per a iPhone i iPod Touch

Aquest estiu hem treballat de valent per portar als usuaris de Blogger i de l'iPhone o el seu germà petit, l'iPod Touch, una versió millorada de l'iBlock Template, la plantilla per als blocaires més "cool" del moment. La nova versió incorpora 5 temes diferents realitzats en CSS sobre una única plantilla de Blogger.

Amb l'ús de CSS externs es pot aconseguir de manera senzilla un doble disseny intel·ligent per als nostres blocs. D'aquesta manera el disseny s'adapta si el nostre bloc es visualitza en el navegador Safari de l'iPhone a l'aspecte típic d'una sola columna, mentre que, en un navegador d'escriptori (Explorer, Firefox o Safari), el disseny CSS que s'aplica és la del típic bloc amb cos i sidebar a la dreta.

Etiquetes de comentaris: Blogger, CSS, iPhone, Templates

Google Api Feed

Des de que Google va obrir als programadors web l'API de la seves aplicacions més populars (des del cercador a Picasa, tot passant per Blogger, Google Calendar i altres serveis web), que aquesta s'ha convertit en una eina bàsica de treball per a molts dissenyadors i programadors web que han deixat de trencar-se el cap creant complexes aplicacions i scripts per a passar a utilitzar solucions que Google distribueix gratuitament.

Una de le més populars eines de Google Code (directori on Google publica la seva API de manera oberta) és la Google API Feed: bàsicament, un framework javascript per a integrar fonts RSS externes en les nostres pàgines i personalitzar-ne l'aspecte mitjançant CSS.

El funcionament de la API és senzill, només necessiteu un codi que us donara Google en aquest enllaç: http://code.google.com/apis/ajaxfeeds/key.html i que haureu d'integrar en el "head" de la vostra web.

Seguidament, haureu de invocar el javascript en el "head" de la manera següent:

<script type="text/javascript">
      
      google.load("feeds", "1");

      function initialize() {
        var feedControl = new google.feeds.FeedControl();

        feedControl.addFeed("FEED", "TITLE");

        feedControl.addFeed("FEED", "TITLE");

        feedControl.draw(
          document.getElementById("feedControl"),
          {
            drawMode : google.feeds.FeedControl.DRAW_MODE_LINEAR
  });
      }
      google.setOnLoadCallback(initialize);

    </script>

Recordeu de substituir els camps FEED i TITLE per la ruta RSS i el títol de la Font RSS. Podeu afegir fonts RSS, afegint línies iguals a les indicades.

Finalment, allà on volgueu que aparegui, simplement enganxeu-hi el següent:

<div id="feedControl"><img class="loading" src="http://hipertextos.googlepages.com/loading.gif" style="width:24px;" /></div>

Podreu personalitzar l'aspecte dels resultats mostrats a través de CSS, seguint l'estructura següent:

/* ---------------------------------------------------
   RSS Google API  
------------------------------------------------------ */
#feedControl {

  }
#feedControl .gfc-resultsRoot {

}
#feedControl .gf-snippet {


}
#feedControl .gf-author {

}
#feedControl .gf-spacer {

}
#feedControl .gf-relativePublishedDate {

}
#feedControl .gfc-results {

}
#feedControl .gfc-result {

}
#feedControl .gfc-title {

}
#feedControl .gf-title {


}
#feedControl a:hover {

}
#feedControl a:visited {

}
#feedControl img.loading {

}
#fontsRSS {

}
#fontsRSS p {

}
#fontsRSS li {

}
#fontsRSS a:hover {

}

Etiquetes de comentaris: CSS, Frameworks, Google API, Javascript

Mootools: una altre framework javascript per a dissenyadors web

Mootools és un framework javascript, o dit d'una altra manera, una llibreria d'efectes visuals mitjançant javascript per a invocar a través de comandaments relativamente senzills.

És similar a la combinació de Prototype i Script.aculo.us, que ja vam ressenyar anteriorment.

Les avantatges sobre el framework de Prototype són bàsicament la possibilitat des de la pàgina de Mootools de crear una llibreria específica per a la nostra pàgina web que carregui només els efectes que seran utilitzats, de tal manera que es pot reduir de manera important el temps de càrrega de la pàgina, obviant tots els elements del framework que no necessitarem.

El funcionament és semblant al de la resta de frameworks analitzats anteriorment i es basa en una invoació general al javascript entre els codis "head" de la nostra pàgina similar al següent:

<script type="text/JavaScript" src="path/to/mootools-release-1.11.js"></script>

Per a més informació, demos i tutorials, visiteu la seva pàgina web oficial: www.mootools.net.

Etiquetes de comentaris: Frameworks, Javascript

iBlock Template versió 0.1: plantilla de Blogger per a l'iPhone

L'arribada de l'iPhoned'Apple (i del seu germà petit, l'Ipod Touch) ha marcat un abans i un després en la navegació per Internet a través de dispositius mòbils. Un altre cop, Apple ha tornat a marcar una fita històrica en l'àmbit de les tecnologies de la comunicació, amb un revolucionari aparell tàctil que aporta una nova experiència inimaginable fins ara en la navegació per Internet a través del telèfon.

En poc més d'un any, l'iPhone ha esdevingut la primera plataforma mòbil més usada per a la navegació per Internet i ha obtingut la quarta posició en el rànking de totes les plataformes de navegació, per darrera només de Windows, Mac i Linux.

Moltes empreses, han reaccionat a aquesta nova situació, adaptant les seves pàgines web a la nova plataforma amb dissenys específics per atraure els usuaris de l'iPhone i de l'iPod Touch als seus dominis.

Des de HiperTextos, conscients de la importància d'estar a sempre pendents de les noves tendències de la Internet 2.0, hem treballat de valent per a poder oferir als nostres clients i col·laboradors, la possibilitat d'adaptar de manera senzilla les seves pàgines webs amb dissenys específics per a l'iPhone i la resta de navegadors mòbils que ben aviat seguiran el camí obert per Apple durant el 2007.

Fruit d'aquest treball, hem volgut obsequiar a la comunitat de bloggers i d'internautes amb una plantilla gratuita per a Blogger que podeu descarregar des del següent enllaç: iBlock Template.

Per a més informació sobre els serveis d'HiperTextos sobre la plataforma iPhone i iPod Touch, no dubteu en contactar amb nosaltres.

Etiquetes de comentaris: Blogger, CSS, El Millor del Mes, iPhone, Portfoli, Projectes, Templates

Lightbox 2.0

Lightbox 2.0 és la versió millorada d'una popular llibreria d'efectes Javascript basada en Prototype i Scriptaculous que ens permet crear espectaculars "slideshow" de manera senzilla.

Per emprar-la només ens cal invocar els Javascipt següents:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Després, afegir la fulla d'estil oportuna:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

I, finalment col·locar l'enllaç en aquell punt de la pàgina on desitgem que aparegui:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="my caption">image #1</a>

Etiquetes de comentaris: Javascript, Prototype

script.aculo.us: llibreria d'efectes AJAX sobre Prototype

script.aculo.us és una llibreria Javascript que permet l'ús de controls AJAX, drag 'n drop, i altres efectes visuals en una pàgina web. Construïda sobre el framework de Prototype, script.aculo.us és la més completa llibreria centrada javascript en efectes gràfics. La gran avantatge de script.aculo.us radica en la seva senzillesa d'ús i la seva relativa facilitat d'aprenentatge, ja que no requereix de coneixements massa específics de javascript. Tot això converteix aquesta llibreria en una fantàstica eina de treball especialment indicada a dissenyadors, ja que permet ampliar les possibilitats del llenguatge web fins a límits que ara estaven reservats als programadors més solvents.

Etiquetes de comentaris: Javascript, Prototype

Prototype: FrameWork Javascript

Prototype és un framework basat en Javascript que s'orienta al desenvolupament senzill i dinàmic d'aplicacions web. És una eina que implementa les tècniques AJAX i és combinable amb altres llibreries i frameworks existents.

Utilitzar-lo és tant senzill com invocar la llibreria Javascript mitjançant un fragment de codi en el head de la pàgina.

<script type="text/JavaScript" src="path/to/prototype.js"></script>

Apartir d'aquí, podeu començar a aplicar les diferents funcionalitats que suporta la llibreria. A la versió castellana de la Viquipèdia disposeu d'una bona aproximació a les diferents funcions de Prototype.

Etiquetes de comentaris: Frameworks, Javascript, Prototype