Chapitre 1

Exemple 1-1. Fragment HTML
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>

Exemple 1-2. Liste à puces
<ul>
    <li>Pizza</li>
    <li>Beer</li>
    <li>Dogs</li>
</ul>

Exemple 1-3. Un véritable document HTML
<html>
    <head>
        <title>My Awesome Page</title>
    </head>
    <body>
        <h1>Hi there!</h1>
        <p>Thanks for visiting my web page.</p>
        <p>I hope you like it.</p>
        <ul>
            <li>Pizza</li>
            <li>Beer</li>
            <li>Dogs</li>
        </ul>
    </body>
</html>

Exemple 1-4. Une règle CSS simple
body { color: red; }

Exemple 1-5. Quelques déclarations CSS courantes
body {
    color: red;
    background-color: #808080;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    font-family: Arial;}

Exemple 1-6. Lien vers une feuille de styles CSS
<html>
    <head>
        <title>My Awesome Page</title>
        <link rel="stylesheet" href="screen.css" type="text/css" />
    </head>
    <body>
        <h1 class="loud">Hi there!</h1>
        <p id="highlight">Thanks for visiting my web page.</p> 
       <p>I hope you like it.</p>
        <ul>
            <li class="loud">Pizza</li>
            <li>Beer</li>
            <li>Dogs</li>
        </ul>
    </body>
</html>

Exemple 1-7. Une feuille de styles simple
body {
    font-size: 12px;
    font-weight: bold;
    font-family: Arial;}

a { font-style: italic; }
h1 a { font-style: italic; }

.loud { font-style: italic; }
#highlight { background-color: yellow; }

Exemple 1-9. Gestionnaire OnClick simple
<html>
    <head>
        <title>My Awesome Page</title>
        <script type="text/javascript" charset="utf-8">
              function sayHello() {
                  document.getElementById('foo').innerHTML = 'Hi there!';
              }
          </script>
      </head>
    <body>
        <h1 id="foo" onclick ="sayHello()">Click me!</h1>
    </body>
</html>

Exemple 1-10. Gestionnaire OnClick jQuery
<html>
    <head>
        <title>My Awesome Page</title>
        <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript" charset="utf-8">
            function sayHello() {
                $('#foo').text('Hi there!');
              }
        </script>
    </head>
    <body>
        <h1 id="foo" onclick="sayHello()">Click me!</h1>
    </body>
</html>

Chapitre 2

Exemple 2-1. Le document HTML que nous allons mettre en forme
<html>
<head>
    <link rel="stylesheet" href="screen.css" type="text/css" />
    <title>Jonathan Stark</title>
</head>
<body>
<div id="container">
    <div id="header">
        <h1><a href="./">Jonathan Stark</a></h1>
        <div id="utility">
            <ul>
                <li><a href="about.html">About</a></li>
                <li><a href="blog.html">Blog</a></li>
            </ul>
        </div>
        <div id="nav">
            <ul>
                <li><a href="consulting-clinic.html">Consulting Clinic</a></li>
                <li><a href="on-call.html">On Call</a></li>
                <li><a href="development.html">Development</a></li>
            </ul>
        </div>
    </div>
    <div id="content">
        <h2>About</h2>
        <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour.
         ...
        </p>
    </div>
    <div id="sidebar">
      <img alt="Manga Portrait of Jonathan Stark"
            src="images/manga.png">
      <p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p>
    </div>
    <div id="footer">
        <ul>
            <li><a href="services.html">Services</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="blog.html">Blog</a></li>
        </ul>
        <p class="subtle">Jonathan Stark Consulting, Inc.</p>
    </div>
</div>
</body>
</html>

Exemple 2-2. Définition de quelques styles généraux pour tout le site sur l’élément HTML body

body {
    background-color: #ddd; /* Couleur d'arrière-plan */
    color: #222; /* Couleur de premier plan utilisée pour le texte */
    font-family: Helvetica;
    font-size: 14px;
    margin: 0; /* Marges extérieures à l'élément body */
    padding: 0; /* Remplissage intérieur de l'élément body */
}

#header h1 {
    margin: 0;
    padding: 0;
}

#header h1 a {
    background-color: #ccc;
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
}

#header ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#header ul li a {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    color: #222222;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: -1px;
    padding: 12px 10px;
    text-decoration: none;
}

#content, #sidebar {
    padding: 10px;
}

#footer {
    display: none;
}

#header h1 a {
    text-shadow: 0px 1px 0px #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
}

#header ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
}

#header ul li:last-child a {
    -webkit-border-bottom-left-radius: 8px;    -webkit-border-bottom-right-radius: 8px;
}

#header ul.hide {
    display: none;
}

#header div.leftButton {
    position: absolute;
    top: 7px;
    left: 6px;
    height: 30px;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
    line-height: 28px;
    border-width: 0 8px 0 8px;
    -webkit-border-image: url(images/button.png) 0 8 0 8; 
}

#header div.pressed {
    -webkit-border-image: url(images/button_clicked.png) 0 8 0 8;
}

if (window.innerWidth && window.innerWidth <= 480) {
     $(document).ready(function(){
         $('#header ul').addClass('hide');
         $('#header').append('<div class="leftButton"
        onclick="toggleMenu()">Menu</div>');
     });
    function toggleMenu() {
        $('#header ul').toggleClass('hide'); 
        $('#header .leftButton').toggleClass('pressed');
     }}

Chapitre 3

Exemple 3-1. Ce code HTML simple de structure se placera au devant de toutes les autres pages du site
<html>
<head>
    <title>Jonathan Stark</title>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <link rel="stylesheet" href="iphone.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="iphone.js"></script></head>
<body>
    <div id="header"><h1>Jonathan Stark</h1></div>
    <div id="container"></div></body></html>

Exemple 3-3. Ce fragment de JavaScript dans iphone.js convertit les liens de la page en requêtes Ajax
$(document).ready(function(){
        loadPage();
});
function loadPage(url) {
     if (url == undefined) {
        $('#container').load('index.html #header ul', hijackLinks);
        } else {
        $('#container').load(url + ' #content', hijackLinks); 
    }
}
function hijackLinks() {
      $('#container a').click(function(e){
          e.preventDefault();  
           loadPage(e.target.href); 
     });
}

Exemple 3-4. Ajout d’un indicateur de progression à la page
$(document).ready(function(){
    loadPage();
});
function loadPage(url) {
    $('body').append('<div id="progress">Loading...</div>'); 
    if (url == undefined) {
        $('#container').load('index.html #header ul', hijackLinks);
    } else {
        $('#container').load(url + ' #content', hijackLinks);
    }}
function hijackLinks() {
    $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
    $('#progress').remove(); 
}

Exemple 3-5. Règles CSS ajoutées à iphone.css pour mettre en forme l’indicateur de progression
#progress {
    -webkit-border-radius: 10px;
    background-color: rgba(0,0,0,.7);
    color: white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    left: 60px;
    line-height: 80px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 120px;
    width: 200px;
}

Exemple 3-6. Utilisation du titre h2 de la page cible comme titre de la barre d’outils
function hijackLinks() {
    $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
    var title = $('h2').html() || 'Hello!';
    $('h1').html(title);
    $('h2').remove();
    $('#progress').remove();
}

Exemple 3-7. Ajout de trois points de suspension au texte trop long pour son conteneur
#header h1 {
    color: #222;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    text-shadow: 0px 1px 0px #fff;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Exemple 3-8. Il est judicieux de revenir en haut de la page lorsqu’un utilisateur navigue vers une nouvelle page
function loadPage(url) {
    $('body').append('<div id="progress">Loading...</div>');
    scrollTo(0,0);
    if (url == undefined) {
        $('#container').load('index.html #header ul', hijackLinks);
    } else {
        $('#container').load(url + ' #content', hijackLinks);
    }}

Exemple 3-9. Vous pouvez permettre aux pages externes de se charger normalement en vérifiant le nom de domaine de l’URL
function hijackLinks() {
    $('#container a').click(function(e){
        var url = e.target.href;
        if (url.match(/jonathanstark.com/)) {
            e.preventDefault();
            loadPage(url);
        }
    });
    var title = $('h2').html() || 'Hello!';
    $('h1').html(title);
    $('h2').remove();
    $('#progress').remove();
}

Exemple 3-10. Exemple JavaScript existant, étendu pour la prise en charge du bouton de retour
var hist = [];
  var startUrl = 'index.html';
  $(document).ready(function(){
      loadPage(startUrl);
});
function loadPage(url) {
    $('body').append('<div id="progress">Loading...</div>');
      scrollTo(0,0);
    if (url == startUrl) {
          var element = ' #header ul';
    } else {
        var element = ' #content';
    }
    $('#container').load(url + element, function(){
          var title = $('h2').html() || 'Hello!';
        $('h1').html(title);
        $('h2').remove();
        $('.leftButton').remove();
          hist.unshift({'url':url, 'title':title});
          if (hist.length > 1) {
              $('#header').append('<div class="leftButton">'+hist[1].title+'</div>');
              $('#header .leftButton').click(function(){
                  var thisPage = hist.shift();
                  var previousPage = hist.shift();
                loadPage(previousPage.url);
            });
        }
        $('#container a').click(function(e){
              var url = e.target.href;
            if (url.match(/jonathanstark.com/)) {
                  e.preventDefault();
                loadPage(url);
            }
        });
        $('#progress').remove();
    });
}

Exemple 3-11. Ajoutez le code suivant à iphone.css pour embellir le bouton de retour avec une image de bordure
#header div.leftButton {
    font-weight: bold;
    text-align: center;
    line-height: 28px;
    color: white;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
    position: absolute;
    top: 7px;
    left: 6px;
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-width: 0 8px 0 14px;
    -webkit-border-image: url(images/back_button.png) 0 8 0 14;

Exemple 3-12. Ajoutez ces lignes à iphone.css pour supprimer la mise en surbrillance de Mobile Safari
#header div.leftButton {
    font-weight: bold;
    text-align: center;
    line-height: 28px;
    color: white;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
    position: absolute;
    top: 7px;
    left: 6px;
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-width: 0 8px 0 14px;
    -webkit-border-image: url(images/back_button.png) 0 8 0 14;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Exemple 3-13. Ajoutez les lignes suivantes à iphone.css pour donner l’impression que le bouton Précédent est enfoncé quand l’utilisateur tape dessus
#header div.leftButton.clicked {
    -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
}

Chapitre 4

Exemple 4-1. Code HTML pour les panneaux Home et About dans index.html
<html>
    <head>
        <title>Kilo</title>
    </head>
    <body>
        <div id="accueil">
           <div class="toolbar">
                  <h1>Kilo</h1>
            </div>
            <ul class="edgetoedge">
                  <li class="arrow"><a href="#apropos">A propos </a></li>
            </ul>
        </div>
        <div id="apropos">
            <div class="toolbar">
                <h1>A propos</h1>
                <a class="button back" href="#">Retour</a>
            </div>
         <div>
                <p>Kilo vous permet d'accéder facilement à votre journal alimentaire.</p>
            </div>
        </div>
    </body>
</html>

Exemple 4-2. Ajoutez ces lignes à l’en-tête de votre document pour activer jQTouch
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
    var jQT = $.jQTouch({
        icon: 'kilo.png',
        statusBar: 'black'
    });
</script>

Exemple 4-3. Le code HTML pour le panneau Dates
<div id="dates">
    <div class="toolbar">
        <h1>Dates</h1>
        <a class="button back" href="#">Retour</a>
    </div>
    <ul class="edgetoedge">
        <li class="arrow"><a id="0" href="#date">Aujourd'hui</a></li>
        <li class="arrow"><a id="1" href="#date">Hier</a></li>
        <li class="arrow"><a id="2" href="#date">2 jours avant</a></li>
        <li class="arrow"><a id="3" href="#date">3 jours avant </a></li>
        <li class="arrow"><a id="4" href="#date">4 jours avant </a></li>
        <li class="arrow"><a id="5" href="#date">5 jours avant </a></li>
    </ul>
</div>

Exemple 4-4. Le code HTML pour le panneau Date
<div id="date">
    <div class="toolbar">
        <h1>Date</h1>
        <a class="button back" href="#">Retour</a>
        <a class="button slideup" href="#creerEntree">+</a>
    </div>
    <ul class="edgetoedge">
        <li id="entreeModele" class="entree" style="display:none">
            <span class="nom">Nom</span>
            <span class="calories">000</span>
            <span class="effacer">Effacer</span>
        </li>
    </ul>
</div>

Exemple 4-5. Le code HTML du panneau Nouvelle entrée<div id="creerEntree">
    <div class="toolbar">
        <h1>Nouvelle entrée</h1>
        <a class="button cancel" href="#">Annuler</a>
    </div>
    <form method="post">
        <ul>
            <li><input type="text" placeholder="Aliment" name="aliment" id="aliment" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
            <li><input type="submit" class="submit" name="action" value="Enregistrer" /></li>
        </ul>
    </form>
</div>

Exemple 4-6. Le code HTML pour le panneau Réglages
<div id="reglages">
    <div class="toolbar">
        <h1>Réglages</h1>
        <a class="button cancel" href="#">Annuler</a>
    </div>    <form method="post">
        <ul>
            <li><input placeholder="Age" type="text" name="age" id="age" /></li>
            <li><input placeholder="Poids" type="text" name="poids" id="poids" /></li>
            <li><input placeholder="Budget" type="text" name="budget" id="budget" /></li>
            <li><input type="submit" class="submit" name="action" value="Enregistrer" /></li>
        </ul>
    </form>
</div>

Exemple 4-7. Listing HTML complet pour l’interface utilisateur à cinq panneaux
<html>
    <head>
        <title>Kilo</title>
        <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
        <link type="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
        <script type="text/javascript" src="jqtouch/jquery.js"></script>
        <script type="text/javascript" src="jqtouch/jqtouch.js"></script>
        <script type="text/javascript">            var jQT = $.jQTouch({
                icon: 'kilo.png',
                statusBar: 'black'
            });
        </script>
    </head>
    <body>
        <div id="accueil">
            <div class="toolbar">
                <h1>Kilo</h1>
                <a class="button flip" href="#reglages">Reglages</a>
            </div>
            <ul class="edgetoedge">
                <li class="arrow"><a href="#dates">Dates</a></li>
                <li class="arrow"><a href="#apropos">A propos</a></li>
            </ul>
        </div>
        <div id="about">
            <div class="toolbar">
                <h1>A propos</h1>
                <a class="button back" href="#">Retour</a>
            </div>
            <div>
                <p> Kilo vous permet d'accéder facilement à votre journal alimentaire.</</p>
            </div>
        </div>
        <div id="dates">
            <div class="toolbar">
                <h1>Dates</h1>
                <a class="button back" href="#">Retour</a>
            </div>
            <ul class="edgetoedge">
                <li class="arrow"><a id="0" href="#date">Aujourd'hui</a></li>
                <li class="arrow"><a id="1" href="#date">Hier</a></li>
                <li class="arrow"><a id="2" href="#date">2 jours avant</a></li>
                <li class="arrow"><a id="3" href="#date">3 jours avant </a></li>
                <li class="arrow"><a id="4" href="#date">4 jours avant </a></li>
                <li class="arrow"><a id="5" href="#date">5 jours avant </a></li>
            </ul>
        </div>
        <div id="date">
            <div class="toolbar">
                <h1>Date</h1>
                <a class="button back" href="#">Retour</a>
                <a class="button slideup" href="#creerEntree">+</a>
            </div>
            <ul class="edgetoedge">
                <li id="entreeModele" class="entry" style="display:none">
                    <span class="nom">Nom</span>
                    <span class="calories">000</span>
                    <span class="effacer">Effacer</span>
                </li>
            </ul>
        </div>
        <div id="creerEntree">
            <div class="toolbar">
                <h1>Nouvelle entrée</h1>
                <a class="button cancel" href="#">Annuler</a>
            </div>
            <form method="post">
                <ul>
                    <li><input type="text" placeholder="Aliment" name="aliment" id="aliment" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
                    <li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
                    <li><input type="submit" class="submit" name="action" value="Enregistrer" /></li>
                </ul>
            </form>
        </div>
        <div id="reglages">
            <div class="toolbar">
                <h1>Réglages</h1>
                <a class="button cancel" href="#">Annuler</a>
            </div>
            <form method="post">
                <ul>
                    <li><input placeholder="Age" type="text" name="age" id="age" /></li>
                    <li><input placeholder="Poids" type="text" name="poids" id="poids" /></li>
                    <li><input placeholder="Budget" type="text" name="budget" id="budget" /></li>
                    <li><input type="submit" class="submit" name="action" value="Enregistrer" /></li>
                </ul>
            </form>
        </div>
    </body>
</html>

Chapiter 5

Exemple 5-1. Listing JavaScript complet pour l’interaction avec la base de données Kilo
var jQT = $.jQTouch({
    icon: 'kilo.png',
    statusBar: 'black'});
var db;$(document).ready(function(){
    $('#creerEntree form').submit(creerEntree);
    $('#reglages form').submit(saveSettings);
    $('#reglages').bind('pageAnimationStart', loadSettings);
    $('#dates li a').click(function(){
        var dayOffset = this.id;
        var date = new Date();
        date.setDate(date.getDate() - dayOffset);
        sessionStorage.currentDate = date.getMonth() + 1 + '/' +
                                     date.getDate() + '/' +
                                     date.getFullYear();
        refreshEntries();
    });
    var shortName = 'Kilo';
    var version = '1.0';
    var displayName = 'Kilo';
    var maxSize = 65536;
    db = openDatabase(shortName, version, displayName, maxSize);
    db.transaction(
        function(transaction) {
            transaction.executeSql(
                'CREATE TABLE IF NOT EXISTS entries ' +
                ' (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
                ' date DATE NOT NULL, aliment TEXT NOT NULL, ' +
                ' calories INTEGER NOT NULL);'
            );
        }
    );
});
function loadSettings() {
    $('#age').val(localStorage.age);
    $('#budget').val(localStorage.budget);
    $('#poids').val(localStorage.poids);
}
function saveSettings() {
    localStorage.age = $('#age').val();
    localStorage.budget = $('#budget').val();
    localStorage.poids = $('#poids').val();
    jQT.goBack();
    return false;

}
function createEntry() {
    var date = sessionStorage.currentDate;
    var calories = $('#calories').val();
    var aliment = $('#aliment').val();
    db.transaction(
        function(transaction) {
            transaction.executeSql(
                'INSERT INTO entries (date, calories, aliment) VALUES (?, ?, ?);', [date, calories, aliment],
                function(){
                    refreshEntries();
                    jQT.goBack();
                },
                errorHandler
            );
        }
    );
    return false;
}
function refreshEntries() {
    var currentDate = sessionStorage.currentDate;
    $('#date h1').text(currentDate);
    $('#date ul li:gt(0)').remove();
    db.transaction(
        function(transaction) {
            transaction.executeSql(
                'SELECT * FROM entries WHERE date = ? ORDER BY aliment;', [currentDate],
                function (transaction, result) {
                    for (var i=0; i < result.rows.length; i++) {
                    var row = result.rows.item(i);
                    var newEntryRow = $('#entreeModele').clone();
                    newEntryRow.removeAttr('id');
                    newEntryRow.removeAttr('style');
                    newEntryRow.data('entryId', row.id);
                    newEntryRow.appendTo('#date ul');
                    newEntryRow.find('.nom').text(row.aliment);
                    newEntryRow.find('.calories').text(row.calories);
                    newEntryRow.find('.effacer').click(function(){
                        var clickedEntry = $(this).parent();
                        var clickedEntryId = clickedEntry.data('entryId');
                        deleteEntryById(clickedEntryId);
                        clickedEntry.slideUp();
                        });
                    }
                },
                errorHandler
            );
        }
    );
}
function deleteEntryById(id) {
    db.transaction(
        function(transaction) {
            transaction.executeSql('DELETE FROM entries WHERE id=?;', [id], null, errorHandler);
        }
    );
}
function errorHandler(transaction, error) {
    alert('Oops. Error was '+error.message+' (Code '+error.code+')');
    return true;
}