Visitez notre nouveau projet: Wibe7 TV

Archive pour la catégorie 'Code'

Shadowbox, une alternative à lightbox

écrit par Dominic Martineau le février 1, 2008

Shadowbox est un “media viewer”. Comme lightbox, il vous permet de regarder des images sans changer de page. En plus des images, il vous permet de jouer des objets flash, et des vidéos (mov, wmv, avi, etc).

Il ne suffit que d’inclure la libraire javascript de Shadowbox et d’ajouter l’attribut rel=”shadowbox” à une balise <a>, et le tour est joué.

<a href="myimage.jpg" rel="shadowbox">My Image</a>

Catégorie: Javascript, Code, Outils | 1 commentaire

Parodie de script.aculo.us

écrit par Dominic Martineau le janvier 14, 2008

Dojo a fait une petite parodie de la page d’accueil de Script.aculo.us: dojo.moj.oe!

C’est de bonne guerre :)

dojomojo.png

Catégorie: Javascript, Outils, Divers | 1 commentaire

Microsoft et le marché mondial

écrit par Jean-Michel Lacroix le décembre 18, 2007

Je suis présentement en train de regarder les différentes avenues pour les Widgets, autant les services en ligne (Netvibes, iGoogle) que ceux sur desktop (Apple Dashboard, Yahoo! Widgets).

Tout se passait plutôt bien jusqu’à ce que je rencontre sur ma checklist “vérifier Windows Live”. Impossible d’ajouter un gagdet en passant par Live.com. Je décide donc de passer par la gallerie de gadgets de Live.com, je me trouve un beau petit gagdet et je l’ajoute à mon Live.com. Je suis ensuite redirigé sur Live.com et j’ai ce message de bienvenue:

Sorry, you can’t add this gadget or feed to Live.com. The personalized Live.com page isn’t available in your market.

N’est on pas à l’ère du marché mondial où il n’y a plus de frontières? Pourquoi est-ce que leur service ne supporte pas mon marché? Mon “marché” dans mon compte passeport est setté à “English Canada” et je suis incapable de le changer dans leur passeport. “Too bad” pour les “gadgets” de Microsoft, ils sont rayés de ma checklist.

Cet effort de gagdets online de Microsoft ne peut que se solder par un échec si ils continuent sur cette lancée ridicule.

Catégorie: Web, Code, Outils | Aucun commentaire

Preview de HTML 5

écrit par Dominic Martineau le décembre 8, 2007

HTML 5 introduira une tonne de nouveaux éléments.

Structure

Normalement, la structure d’un site comprend une entête, un pied de page, une navigation et des colonnes. Sous HTML4, il est nécessaire d’utiliser l’élément div pour représenter ces blocs.

<body>
<div id=”header”>…</div>
<div id=”menu”>…</div>
<div id=”content”>…</div>
<div id=”sidebar”>…</div>
<div id=”footer”>…</div>
</body>

HTML5 a adressé ce problème en créant les nouveaux éléments suivants:

<body>
<header>…</header>
<nav>…</nav>
<article>
<section>…</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>

Vidéo et Audio

Depuis l’avènement des sites comme Youtube, Metacafe, MySpace et Revver, les “players” vidéo et audio sont de plus en plus répandus. Présentement, ils sont tous conçus en flash puisque cette technologie est “embedable” facilement et permet de designer les players aux couleurs de son site.

Afin qu’il soit encore plus facile d’embeder une vidéo ou de l’audio, HTML5 introduira les éléments <video> et <audio>, ainsi qu’un API DOM pour contrôler le playback.

<video src=”video.mov” controls poster=”poster.jpg” width=”320″ height=”240″ autoplay></video>

L’attribut controls est un boolean qui indique si l’UI par défaut doit être montré ou non.

L’attribut poster est utilisé pour déterminer l’image qui sera affichée avant le démarrage du vidéo.

Pour les développeurs qui aimeraient créer leur propre UI, il est possible de créer ses propres boutons et d’utiliser un API en DOM très simple.

<video id=”video” src=”video.mov” poster=”poster.jpg” width=”320″ height=”240″></video>
<script type=”text/javascript”>
var video = document.getElementById(’video’);
</script>

<button onclick=”video.play()”>Play</button>
<button onclick=”video.pause()”>Pause</button>

Références

Catégorie: HTML, Code | Aucun commentaire

Ruby on Rails 2.0

écrit par Dominic Martineau le décembre 8, 2007

Ruby on Rails 2.0 est maintenant sorti. Cette release contient plusieurs nouvelles fonctionnalités, une tonne de fixes et l’amélioration de certaines fonctionnalités:

  • Action pack: Multiview
  • Action pack: HTTP Loving
  • Active Record: Fixtures 50-100% plus rapide
  • Active Record: serialization en JSON
  • ActiveResource: comme ActiveRecord mais pour les ressources
  • etc

Catégorie: Ruby, Code | Aucun commentaire

Combien d’éléments HTML pouvez-vous nommer en 5 minutes?

écrit par Dominic Martineau le décembre 1, 2007

Just Say Hi a un petit quiz intéressant: Nommer les plus des balises HTML 4 en 5 minutes. Ça peut paraître facile, mais quand on voit le temps défiler, ça ajoute du stress :)

49

Le pire, c’est que j’en ai oublié des très courantes comme frame, iframe, span, select et option. :)

Postez votre résultat en commentaire et ne trichez pas :P

Catégorie: HTML, Code, Divers | 1 commentaire

Prototype 1.6.0 et Scriptaculous 1.8.0 disponible!

écrit par Dominic Martineau le novembre 8, 2007

La nouvelle version de Prototype apporte quelques améliorations majeures et naturellement, quelques corrections d’anomalies et de l’optimisation de performance. Voici les changements principaux:

  • Ajax transport objects are now automatically wrapped in an Ajax.Response object.
  • Ajax.Response includes support for accessing JSON response bodies as JavaScript objects via the responseJSON property.
  • The class API now includes full support for inheritance and superclass method calls. (See Mislav’s tutorial for more info.)
  • Class objects now have an addMethods method for adding instance methods after creation.
  • Elements can be created easily with the new Element(…) syntax.
  • Element#insert provides a unified API to DOM element and HTML fragment insertion.
  • Element#select is an alias for getElementsBySelector and is now the preferred way to find elements by class name.
  • Element#wrap lets you easily wrap an element inside another element in place.
  • Enumerable methods on Array are now backed by native Array#forEach implementations when possible.
  • Enumerable now has aliases for equivalent JavaScript 1.6 Array methods, and support for JavaScript 1.6’s context parameter for automatic callback binding.
  • Enumerable#grep now calls the match method on its first argument, so you can use it to e.g. filter an array of DOM nodes by CSS selector.
  • Event objects are now automatically extended with instance methods, so you can write e.g. event.stop() instead of Event.stop(event).
  • Prototype’s event API now supports firing DOM-based custom events with Element#fire.
  • The new dom:loaded custom event fires when the entire document has loaded and is ready for manipulation.
  • Function#curry allows for partial application of function arguments.
  • Function#wrap facilitates simple aspect-oriented programming and provides the basis for Prototype’s superclass method call mechanism.
  • Function#delay delays invocation of the function by the given number of seconds.
  • Function#defer schedules the function to run as soon as the interpreter is idle.
  • The Hash API has changed, and you must now use Hash#get and Hash#set instead of directly accessing properties on Hash instances.
  • String#interpolate is a shortcut for instantiating a Template from the string and calling evaluate on it.
  • Object properties can now be used in template replacement strings.

Pour les changements complet, voir le CHANGELOG et les notes des releases 1.6.0_rc0 et 1.6.0_rc1.

Quant à lui, Scriptaculous contient les nouveautés suivantes:

  • Complete rewrite of the in-place editing controls.
  • Full CSS inheritance support for Effect.Morph.
  • Support for tweening between two values of an element property or method call with Effect.Tween.
  • A new sound API for playing interface sound effect MP3s.
  • Numerous bug fixes and performance improvements.

Source: http://prototypejs.org/2007/11/7/prototype-1-6-0-script-aculo-us-1-8-0-…

Catégorie: Javascript, Code | Aucun commentaire