Il existe de nombreuses solutions sur le net pour compenser avec jQuery l'absence d'attribut CSS quand on n'utilise pas de tableau, mais toutes celles que j'ai trouvé on un bug dans certaines conditions : position: absolute risque de faire sortir le texte du cadre, margin-top fait descendre aussi le conteneur parent, problème avec le padding dans certaines configurations css, …

D'où pastel-vAlign, que j'ai testé dans de très nombreuses situations.

Le code du plugin jQuery

    $.fn.vAlign = function() {
        return this.each(function(i){
            $(this).children().wrapAll('<div class="pastel-vAlign" style="position:relative; margin: 0; padding: 0;"></div>');
            var jWrap = $(this).children('div.pastel-vAlign');
            var ph = $(this).innerHeight();
            var dh = jWrap.height();
            var mh = Math.round((ph - dh) / 2);
            jWrap.css('top', mh);
        });
    };

Utilisation

$('#element').vAlign();


#element doit avoir la hauteur de la zone dans laquelle on veut centrer l'élément enfant qui est dedans. L'élément enfant, lui, ne doit pas avoir de hauteur définie.


Donc le css doit être du type :

#element {height: 100px}

et pas "#element * {height: 100px}" par exemple

Demo

Voir la démo de pastel-vAlign

Créer une appli pour smartphones compatible pour toutes les plateformes, sans avoir à apprendre le langage spécifique pour l'OS, c'est le rêve du développeur…

Mais ça devient de plus en plus possible pour des petites applications simples grâce aux nombreux frameworks disponibles. Ces applis sont développées avec des langages destinés au web (de plus en plus, html5 et javascript), mais fonctionnent offline.

Ces applications n'auront jamais la puissance d'une application native et les performances seront toujours en deçà, mais ça peut être très pratique dans de nombreuses situations.

J'ai sélectionné 3 frameworks qui sont, je pense, les plus aboutis aujourd'hui.

Tableau comparatif

PhoneGap

Tableau des fonctionnalités des smartphones actuellement pris en charge :

rouge : pas possible pour cet appareil
jaune : en cours de dévelloppement
vert : fonctionnel

Source : http://wiki.phonegap.com/Roadmap

PhoneGap a été "conçu pour disparaître". En effet les APIs de PhonePap sont identiques aux API de HTML5 qui ne sont pas forcément encore implémentées dans les navigateurs mobiles.

Les applications ressemblent un peu à des pages web et PhoneGap est un peu apparenté à un navigateur.

Le projet jQuery Mobile sera compatible avec PhoneGap, ce qui permettra d'utiliser la puissance de jQuery en plus.

Titanium (Appcelerator)

Fonctionnalités supportées : géolocation, accelérometre, vibration, son (enregistrement et playback), camera, SQLite, multitouch, copier/coller, téléphone, fichiers locaux incluant les contacts et les photos.

Les applis faites avec Titanium sont compilées pour l'OS de destination. Elles paraissent donc plus natives que celles développées avec PhoneGap et sont moins gourmandes en ressources.

Contrairement à PhoneGap, Titanium expose directement les API natives du smartphone en JavaScript. Il faut donc s’attendre à des différences plus importantes entre les différentes plateformes, PhoneGap proposant des API plus génériques et communes à l’ensemble des plateformes. Mais dans tous les cas il y a autant de projets que de cibles techniques.

Rhodes (Rhomobile)

Tableau des fonctionnalités des smartphones actuellement pris en charge :

A la différence de ces derniers le navigateur local est utilisé et c’est le code Ruby ou Java (et non JavaScript) qui permet d’accéder aux fonctionnalités natives de l’appareil.

Ce sont de vraies applications natives ayant donc accès aux fonctionnalités telles le GPS, PIM contacts et camera.

Conclusion

Le choix du framework dépendra entre autres :

• de vos habitudes de programmation (javascript pour PhoneGap et Titanium, Ruby pour Rhodes)
• de l'importance d'avoir une application qui paraisse native (pour PhoneGap, ce n'est pas le cas)
• des OS que vous voulez toucher (par ex, Windows mobile n'est pas encore géré par PhoneGap et Titanium)

Je n'ai pas parlé de Sencha Touch (HTML5, CSS3 et JS) qui est très prometteur aussi, car il ne permet pas de faire une application native : ça reste une application web. Par contre, il peut être utiliser en tant que framework javascript dans une appli PhoneGap ou Titanium par exemple.

Pour une appli nécessitant des ressources importantes comme la 3D, le framework ne sera pas adapté.

Sources

• surgeworksmobile.com
  
• infoworld.com
  
• mashable.com
  
• stackoverflow.com
  
• jonathanstark.com
  
• blog.ippon.fr
  
• tag4.us
  

Principe

Ce script permet d'intégrer dans votre site internet un moteur de recherche de noms de domaine libres ou pas.

Réalisé en ajax, il évite de recharger la page à chaque recherche.

Affichage du whois pour les noms de domaines non disponibles.

Possibilité de rechercher jusqu'à 35 extensions à la fois, dont les françaises. Ces extensions sont définies dans le fichier whois-server-list.php, donc vous pouvez en modifier la liste.

Le script est gratuit, et libre à vous de vous le customiser. N'hésitez pas à poster ici vos éventuelles contributions.

Exemple d'intégration

whois.pastel.pro et www.pastel.pro

Téléchargement

Pastel Whois version 1.2

Utilisation

Téléchargez, décompressez et uploadez sur votre serveur.

Le fichier index.php est utilisable directement pour comprendre le fonctionnement.

N'hésitez pas à poster pour me demander ce que vous ne comprenez pas.

Comment afficher une vidéo sur une page internet en combinant les technologies HTML5 avec la balise <video> et flash pour les navigateurs non compatibles ?

Avec un code HTML qui affiche les liens vers 3 formats de fichiers vidéo dans cet ordre :

1. HTML5 MP4
2. HTML5 WebM
3. HTML5 OGG
4. Flash MP4 (pas besoin de FLV depuis la version 9 rev 3 de flash)

Le navigateur sautera le format qu'il ne connait pas jusqu'à trouver celui qu'il sait lire.

Un script javascript permettra d'afficher les boutons de contrôle (plein écran, …).

Méthode :

1. Encoder la video dans ces 3 formats : MP4, WebM (VP8) et Theora (Ogg/Ogv) avec le logiciel gratuit et open source mirovideoconverter (mac et windows).
2. Faire une capture de la vidéo au format png, de la même taille que la vidéo.
3. Télécharger le script gratuit et open source videojs et le décompresser.
4. Éditer le fichier demo.html pour remplacer les fichiers "oceans-clip" par vos liens (attentions à changer .ogg par .ogv) et adaptez les "width" et "height" à ceux de votre vidéo.
5. Charger les vidéos sur un serveur performant comme amazon s3 par ex.

Démo

Sources

Expliquent très bien le fonctionnement et donnent des détails qui peuvent être utiles – Anglais :

• camendesign.com
• webmonkey.com
  

Voir la démo

Télécharger

Le script jQuery permet :

• de conserver le style du hover (ici fond bleu dégradé) une fois qu'on a pris le focus, même si la souris n'est plus au-dessus et de la libérer quand on perd le focus
• d'effacer la valeur "Chercher …" quand on prend le focus, et de le réafficher si l'utilisateur a laissé le champ vide

Source remaniée

L'attribut css position: fixed n'est pas connus de tous les navigateurs (notamment les smartphones et IE6).

Donc si l'on souhaite positionner un élément en fixed seulement sur les navigateurs compatibles, il faudra les détecter.

Voici un script, qui oublie des navigateurs, mais où on est sûr que si on met en fixed le navigateur saura l'interpréter :

function badBrowser(){
    if($.browser.msie && parseInt($.browser.version) >= 7){ return false;} //IE >= 7
    if($.browser.opera && ($.browser.version *10) >= 98 && !(navigator.userAgent.match(/Opera Mini/i))) { return false;} //Opera >= 9.8
    if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
    var ffversion=new Number(RegExp.$1);
    if (ffversion >= 3) { return false;}} //Firefox >= 3.0
    if ($.browser.safari && $.browser.version.split('.')[0] >= "530" && !(navigator.userAgent.match(/Mobile/i))){return false;} // Safari >= 4 ou Google Chrome >= 4
    return true;
};

if (!(badBrowser()))
        $("#footer").css({
            position: "fixed",
            bottom: 0,
            left: 0
        });

  Transformez n'importe quelle balise HTML en bouton, comme celui-ci :   

Fonctionne avec toutes les balises HTML, en sachant que les balises <button>, <a> et <input type="submit"> sont transformées en <span>, puis est appliqué un javascript permettant de reproduire l'action de la balise.

Télécharger Pastel Button v1.1

Attention : pour activer le hack CSS3 sur IE qui permet d'avoir les ombrages et les coins arrondis, il faut éditer le fichier javascript et adapter la variable pastelButtonAbsolutePath.

Chargement du plugin

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

<script type="text/javascript" src="pastelbutton.min.js"></script>

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="pastelbutton.css" />

Utilisations par l'exemple

<button class="pastelButton">Mon bouton de test 1</button>
<span class="pastelButton">Mon bouton de test 2</span>
<a href="monlien.html" class="pastelButton">Mon bouton de test 3</a>
<form action="macible.php"><input type="submit" class="pastelButton" value="Mon bouton de test 4" /></form>

<script type="text/javascript">
    jQuery('.pastelButton').pastelButton();
</script>


Embellir avec CSS

Augmenter la hauteur du bouton

.pastelButton {
    height: 100px;
}

Aligner le bouton au milieu

.pastelButton {

    margin: auto;

    width: 200px; /* largeur à  adapter en fonction du texte */

}

Changer la couleur de fond et ajouter une image

.pastelButton {

    background-color: #80D9F9; /* En attendant le chargement de pastelButton : doit être plus foncé que  .pastelButton .level1 */

}

.pastelButton .level1 { 

    background-color: #85DFFF;

}

.pastelButton .level2 {

    background: url("monimage.png") no-repeat scroll 8px 8px;

}

Modifier la police

.pastelButton * {

    font-size: 16px;

    font-weight: bold;

}

Démo

Voir le site pastel.pro

Cette fonction permet de précharger des images dans le cache du navigateur (pour un rollover par exemple) :

function preloadImages() {
    var preloaded = new Array();
    for (var i = 0; i < arguments.length; i++){
        preloaded[i] = document.createElement('img');
        preloaded[i].setAttribute('src',arguments[i]);
    };
};


Utilisation :

preloadImages(
    "images/a.jpg",
    "images/b.jpg",
    "images/c.jpg",
    "images/d.jpg",
    "images/e.jpg"
);


Pour charger un fichier css spécifique à un fichier ajax chargé par exemple dans une floatbox (boîte modale), comme l'en-tête a déjà été envoyée, il faut rajouter le lien vers ce fichier css dans l'en-tête existante.

Code à ajouter dans le fichier html ou php appelé en ajax

<script type="text/javascript">
    if (!($('#ajaxCss').length)) { // vérifie s'il a déjà été chargé
        $("head").append("<link>");
        $("head").children(":last").attr({
          id:   "ajaxCss",
          rel:  "stylesheet",
          type: "text/css",
          href: "./votre-fichier.css"
        });
    }
</script>

Pour attendre la fin du chargement du fichier css pour afficher le contenu du fichier ajax

Incluez votre code html dans une balise :

<div id="ajaxMainFrame" style="visibility: hidden;"></div>


Et rajoutez dans le fichier css :

#ajaxMainFrame {
    visibility : visible !important;
}


Pastel Shadow est un plugin jquery permettant d'afficher un ombrage des textes sur internet explorer (version < 9 car cette propriété est enfin intégrée), similaire à l'ombrage text-shadow css3.

Principe de fonctionnement

lorsqu'on applique le plugin à un élément (ex : <span>mon texte</span>), si on est sur IE < v9 on clone ce texte et on affiche son clone dessous, dans une position décalée et de façon floue (propriété DXImageTransform.Microsoft.Blur) ; pour les autres navigateurs, on ne fait qu'ajouter la propriété text-shadow à cet élément.

Utilisation

<html><body>
    <p class="pastelShadow">mon texte ombré</p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="PastelShadow.js"></script>
    
    <script type="text/javascript">
        jQuery(window).ready(function(){
            jQuery(".pastelShadow").PastelShadow(
                {
                    x: 3,
                    y: 3,
                    blur: 5,
                    color: "#333"
                }
            );
        });
    </script>
</html></body>

Exemple

Téléchargement

Télécharger le plugin PastelShadow.js

Compatibilité

Tous les navigateurs sauf Safari version < 2, Opera version < 9.4 et Firefox version < 3.0