web-petit

Ubuntu Maverick Meerkat est disponible depuis hier, jeudi 2 septembre. Compte tenu du fait que Gnome 3 n’est pas présent dans cette version puisque la sortie de Gnome 3 a été repoussé à mars 2011, aucune révolution n’est à noter dans dans Ubuntu 10.10.

Côté look, je trouve les mises à jours des thèmes Ambiance et Radiance de très bonne qualité. Les icônes choisies sont agréables.

Pour les nouveautés logicielles que j’ai essayées :

• Shotwell remplace F-Spot. Je ne suis pas vraiment adepte de ce genre d’outils. Je n’ai utilisé que très peu F-Spot, je crois que j’utiliserai autant Shotwell c’est-à-dire quasiment jamais. C’est juste pour voir de quoi il s’agit.
• Mise à jour d’Evolution vers la version 2.30. J’avais déjà fait la mise à jour sur Lucid et c’est vraiment plus agréable que les versions précédentes.
• Mise à jour de Gwibber pour prendre en charge le nouveau système d’authentificaton de nos amis Twitter qui avaient été piraté il y a quelques temps de cela.

Quelques captures d’écran réalisées avec Marverick Meerkat installé sur une clé usb…

---

---

Wikileaks pose problème non seulement aux gouvernements, notamment l’administration américaine mais aussi à certaines ONG. Faisons un petit retour arrière en expliquant ce qu’est Wikileaks et profitons-en pour rappeler quelques faits.

Qu’est-ce que Wikileaks ?

Fondé par Julian Assange (« ancien » hacker), Wikileaks est un site Web d’information qui se présente sous la forme d’un Wiki (il est propulsé par MediaWiki). Son but est de publier toute information et document jugés confidentiels par les états. Beaucoup de personnes y participent : des dissidents chinois, iraniens mais aussi des personnes travaillant pour des gouvernements et de grandes entreprises. Ah oui au fait, en anglais leaks signifie fuites.

Quelques faits récents…

• Wikileaks a récemment publié des informations sur les actions des forces armées américaines et autres présentes en Afghanistan.
• Le site d’information a également publié des documents relatifs au procès de Marc Dutroux.

Mais en quoi Wikileaks peut poser problème ?

Il en tentant de penser qu’enfin un site nous dévoile tous les petits secrets des états et comme la plupart des personnes qui aiment le libre (par le libertinage, le libre ! ) je suis assez ravi de savoir qu’il y a un caillou dans les bottes de certains gouvernements.

Mais, parce qu’il y a un mais, les informations publiées sur Wikileaks peuvent ou pourraient se révéler dangereuses pour des informateurs ou toute autre personne dans les noms pourraient apparaître dans ces documents ou qui seraient reconnaissables de par le lieu ou autre description. Bien entendu Wikileaks s’en défend et affirme faire le nécessaire pour protéger les personnes avant de publier ces informations. Mais de l’autre côté le gouvernement américain avait déclaré que les premiers documents publiés par Wikileaks à propos de la guerre en Afghanistan mettait en péril la vie de personnes.

Il ne s’agit pas ici de dire que le gouvernement américain dit vrai. Mais il faut mettre tout de même ne pas être en admiration béate devant Wikileaks juste parce qu’on a une certaine affection pour celui qui joue rôle de poil à gratter des grands de ce monde.

D’autant plus que le fondateur du site est actuellement sous le coup d’un procès pour viol en Suède. Je vois déjà arriver ceux qui adorent la théorie du complot… Et je m’en réjouis.

Tout ça pour vous dire : réfléchissez un peu, ne vous laissez pas dicter votre pensée par les médias, des articles de presse ou de blog aussi bien écrits soit-ils .

Vous avez trouvé une police de la mort-qui-tue-deux-fois sur un site de ouf-malade et vous voulez l’installer sur Ubuntu pour l’utiliser avec votre thème, vos documents OpenOffice et autres applications ?
Ne vous inquiétez c’est tout à fait possible !

Deux solutions se présentent à vous. L’installer rien que pour votre session car vous êtes un sale égoïste (ou bien il n’y a qu’une session sur votre système) ou l’installer pour tout le monde vous êtes généreux.

La solution de l’égoïste

On copie la police dans le dossier /home/utilisateur/.fonts/. Si .fonts n’existe pas on le crée.

cp mapolice2lamortquitue.ttf /home/utilisateur/.fonts/mapolice2lamortquitue.ttf

La solution du généreux

On copie la police dans le dossier /usr/share/fonts/. Pour ce faire, il faut avoir les droits root. On peut utiliser le bon vieux sudo.

sudo cp mapolice2lamortquitue.ttf /usr/share/fonts/mapolice2lamortquitue.ttf

Attention il faudra relancer l’application que l’on veut utiliser pour qu’elle puisse recharger la liste des polices de caractères à dispositions.

Voici quelques sites où vous pouvez trouver des polices sous différentes licences :

• Font Squirrel
• dafont.com
• 1001 fonts

Voilà c’est tout pour ce tuto, et n’oubliez surtout pas : BI-DOU-ILLEZ !

Tout comme ses prédécesseurs HTML 5 est un langage de balisage c’est à dire qu’on utilise des balises qui ont des valeurs sémantiques pour annoncer des éléments. Une balise est délimitée par des chevrons ouvrants (‹) et fermants (›).

<balise>

Les balises peuvent être simples ou doubles (=paires), dans ce cas la deuxième commencera par un slash /.

<balise>

<balise></balise>

Voici une page HTML 5 vide.

<!DOCTYPE html>
<html lang="fr"> 

  <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Titre</title>

  </head>

  <body>

    <!-- Ici il y aura le contenu de votre page. -->

  </body>

<html>

Le type de document (DOCTYPE)

Ceux qui ont travaillé avec les doctype d’autres versions de HTML ou de XHTML que HTML 5 savent combien cette déclaration est simple. Il ne faut pas se le cacher, la plupart d’entre nous étaient incapables de déclarer de tête un document en XHTML 1.0 Strict par exemple. Voyez vous-même :

DOCTYPE HTML 5

<!DOCTYPE html>

DOCTYPE HTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

L’élement html

<html lang="fr"></html>

‹html› indique au navigateur l’endroit où votre document HTML commence et ‹/html› l’endroit où il se temine. L’attribut lang permet de spécifier la langue du document HTML mais il n’est pas obligatoire. L’attribut lang peut être appliqué sur tous les autres éléments HTML.

L’élement head

<head></head>

L’élément head contient tous les en-têtes envoyés au navigateur comme :

• Le type de contenu de la page :

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

• Le titre de la page :

  <title>Titre</title>

De nombreuses autres informations peuvent être spécifiées dans l’élément head, ce sera l’objet d’autres chapitres.

L’élément body

<body></body>

L’élément body constitue le corps de votre page HTML. On y trouvera à l’intérieur tout le contenu affiché à l’utilisateur.

Les commentaires

<!-- Ceci est un commentaire -->

Les commentaires permettent d’ajouter de l’information à un morceau de code. Cette information ne sera visible que dans le code source de la page. En aucun cas il ne sera affiché au visiteur de la page HTML.

Conseil : Même si on l’oublie vite quand on est penché sur son code, il est important d’y intégrer des commentaires un tant soit peu. Non seulement cela pourrait servir si quelqu’un d’autre doit lire votre code mais vous pourrez également vous repérez dans votre code 6 mois, 1 an, 5 ans… plus tard.

OOo4Kids est une suite bureautique basée sur OpenOffice destinée aux enfants entre 7 et 12 ans. C’est l’association EducOOo.org qui édite cette suite. Voici une vidéo de présentation du projet :

OOo4Kids est disponible en treize langues dont le français. Le site du projet : OOo4Kids.org/p>

L’ élément HTML input permet de saisir les informations des internautes.
La saisie peut se faire sous forme de cases à cocher, de zones de texte, de boutons radio,…
Il est utilisé avec l’élément form pour la création des formulaires, et la récupération des données.

<form>
<p><label for="radio-1">Rouge : </label><input id="radio-1" type="radio" name="choix" /></p>
<p><label for="radio-2">Jaune : </label><input id="radio-2" type="radio" name="choix" /></p>
<p><label for="radio-3">Orange : </label><input id="radio-3" type="radio" name="choix" /></p>
</form>

Attributs

Attribut : type

Détermine le type de la balise input :

• text : champs texte (textbox).
• password : champs de mot de passe.
• radio : liste de déroulante.
• checkbox : case à cocher.
• button : bouton.
• submit : bouton d’envoi du formulaire.
• image : champ image, envoie le formulaire.

<form>
  <p>
    <label for="name-7">Name : </label><input id="name-7" name="name-7" type="text" lang="en" />
  </p>
</form>

Attribut : tabindex

Permet de spécifier l’ordre de tabulation des éléments input, celui qui possède le plus petit chiffre sera tabulé en premier.

<form>
  <p>
    <label for="surname">Nom : </label><input id="surname" name="surname" tabindex="1" type="text" />
  </p>
  <p>
    <label for="name">Prénom : </label><input id="name" name="name" tabindex="2" type="text" />
  </p>
</form>

Attribut : alt & src

alt et src sont utilisés pour les input de type image.

• alt est utilisé qu’avec un élément input de type image, il permet de mettre un texte alternatif lors d’un problème de chargement de l’image.
• src permet de spécifier l’adresse de l’image à afficher.

<form>
  <p>
    <label for="image-2">Envoyer : </label><input id="image-2" name="image-2" type="image"  alt="Twitter" src="http://www.web-petit.com/wp-content/themes/wp-v2/images/twitter.png" />
  </p>
</form>

Attribut : checked

Permet de présélectionner un élément.

<form>
  <p>
    <label for="radio-4">Rouge : </label><input id="radio-4" value="red" type="checkbox" />
  </p>
  <p>
    <label for="radio-4-1">Vert : </label><input id="radio-4-1" value="green" type="checkbox" />
  </p>
 <p>
    <label for="radio-4-2">Jaune : </label><input id="radio-4-2" value="yellow" type="checkbox" checked="checked" />
 </p>
</form>

Attribut : disabled

Permet de désactiver l’élément input.

<form>
  <p>
    <label for="name-1">Nom : </label><input id="name-1" name="name-1" type="text" disabled="disabled" />
  </p>
</form>

Attribut : maxlength

Permet de spécifier la longuer maximale d’une chaîne de caractères dans un input de type text ou password.

<form>
  <p>
    <label for="name-2">Nom : </label><input id="name-2" name="name-2" type="text" maxlength="5" />
  </p>
</form>

Attribut : value

Spécifie la valeur par défaut à afficher.

<form>
  <p>
    <label for="name-3">Nom : </label><input id="name-3" name="name-3" type="text" value="Dupont" />
  </p>
</form>

Attribut : name

Spécifie le nom de l’élément input.

<form>
  <p>
    <label for="name-4">Nom : </label><input id="name-4" name="name-4" type="text" />
  </p>
</form>

Attribut : class

Permet de spécifier la classe CSS à utiliser sur l’élément input.

<form>
  <p>
    <label for="name-5">Nom : </label><input id="name-5" name="name-5" type="text" class="text-example" />
  </p>
</form>

.text-example {
  background:#faa;
  border:1px solid #48f;
}

Attribut : id

Permet de spécifier l’identifiant CSS à utiliser sur l’élément input.

<form>
  <p>
    <label for="name-6">Nom : </label><input id="name-6" name="name-6" type="text" class="text-example" />
  </p>
</form>

#text-example {
  background:#afa;
  border:1px solid #f55;
}

Attribut : title

Permet de mettre une infobulle sur l’élément input.

<form>
  <p>
    <label for="image">Envoyer : </label><input id="image" name="image" type="image"  alt="Twitter" title="Twitter" src="http://www.web-petit.com/wp-content/themes/wp-v2/images/twitter.png" />
  </p>
</form>

Attribut : dir

Permet de spécifier le sens d’écriture de l’élément input. Elle prend 2 valeurs :

• ltr : Left To Right : de gauche à droite(valeur par défaut).
• rtl : Right To Left : de droite à gauche.

<form>
  <p>
    <label for="name-7-bis">Nom : </label><input id="name-7-bis" name="name-7-bis" type="text" dir="rtl" />
  </p>
</form>

Attribut : style

Permet d’appliquer un style au formulaire directement dans le html, sans avoir besoin d’une feuille de style.

<form>
  <p>
    <label for="name-8">Nom : </label><input id="name-8" name="name-8" type="text" style="background:yellow;border:1px solid orange;" />
  </p>
</form>

Attribut : lang

Permet de spécifier la langue à l’intérieur de l’élément input.

<form>
  <p>
    <label for="name-9">Name : </label><input id="name-9" name="name-9" type="text" lang="en" />
  </p>
</form>

H.264 est un format vidéo géré par le consortium Mpeg-LA qui avait déclaré que la licence de diffusion gratuite de vidéos sous ce format serait gratuit jusqu’en 2015. Devant le VP8 et plus largement le format WebM que soutient Google, Mozilla ou encore Opera est lui un format ouvert. Devant cette concurrence devant laquelle une licence payante aurait du mal à se démocratiser sans géant du Web, le Mpeg-LA a annoncé que la licence serait gratuite Ad vitam æternam.

Le seul hic dans toute cette histoire c’est que cela ne concerne que les diffusions gratuites de vidéos ce que fait Youtube, Dailymotion et consorts. Donc pour les consoles de salon, les boxes, les consoles de jeux et autres il faudra passer à la caisse.

On peut donc dire qu’il y a du mieux du côté du H.264 même si peut mieux faire.

Google via son service de messagerie lance les appels téléphoniques. Bon ben quand on a dit ça je crois qu’on a tout dit néanmoins puisqu’il faut faire des articles un temps soit peu dignes de ce nom on peut ajouter que pour le moment cette fonctionnalité n’est vraiment disponible que pour les américains. On peut passer des appels depuis notre vieux continent mais puisque seuls les internautes américains et canadiens peuvent recharger leur compte on ne peut pas vraiment dire que c’est opérationnel de notre côté de l’Atlantique. Et voici les tarifs sensiblement semblables à ceux de Skype :

L’ élément HTML form permet de créer des formulaires.
Il peut contenir des éléments input, des cases à cocher, des boutons radio, menus,…
On peut rajouter l’élément label afin de pointer directement vers son élément input.

<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-1">Nom : </label>
    <input id="nom-1" type="text" name="nom-1" />
  </p>
  <p>
    <label for="prenom-1">Prénom : </label>
    <input id="prenom-1" type="text" name="prenom-1" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

Attributs

Attribut : action

Spécifie l’adresse de destination du formulaire.

<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-1">Nom : </label>
    <input id="nom-1" type="text" name="nom-1" />
  </p>
  <p>
    <label for="prenom-1">Prénom : </label>
    <input id="prenom-1" type="text" name="prenom-1" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

Attribut : method

Indique la forme d’envoi des réponses, 2 valeurs possibles :
- Post : correspond à un envoi de données stockées dans le corps de la requête
- Get : correspond à un envoi des données codées dans l’URL, et séparées de l’adresse du script par un point d’interrogation .

<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-2">Nom : </label>
    <input id="nom-2" type="text" name="nom-2" />
  </p>
  <p>
    <label for="prenom-2">Prénom : </label>
    <input id="prenom-2" type="text" name="prenom-2" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

Attribut : enctype

Permet de définir le type de fichier à envoyer.
Il peut prendre 3 valeurs :
- application/x-www-form-urlencoded : valeur par défaut, tout les caractères sont encodés avant d’être envoyés.
- multipart/form-data : pas d’encodage, à utilisé lors d’upload de fichier.
- text/plain : les espaces sont remplacés par des + , mais il n’y pas d’encodage special

<form action="" method="get" enctype="text/plain">
  <h6>Identité</h6>
  <p>
    <label for="nom-3">Nom : </label>
    <input id="nom-3" type="text" name="nom-3" />
  </p>
  <p>
    <label for="prenom-3">Prénom : </label>
    <input id="prenom-3" type="text" name="prenom-3" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

Attribut : class

Permet de spécifier la classe css à utiliser sur le formulaire.

<form action="" method="get" class="formulaire">
  <h6>Identité</h6>
  <p>
    <label for="nom-4">Nom : </label>
    <input id="nom-4" type="text" name="nom-4" />
  </p>
  <p>
    <label for="prenom-4">Prénom : </label>
    <input id="prenom-4" type="text" name="prenom-4" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

.formulaire{
background-color:chocolate;
padding:5px;
}

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur le formulaire.

<form action="" method="get" id="formulaire">
  <h6>Identité</h6>
  <p>
    <label for="nom-5">Nom : </label>
    <input id="nom-5" type="text" name="nom-5" />
  </p>
  <p>
    <label for="prenom-5">Prénom : </label>
    <input id="prenom-5" type="text" name="prenom-5" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

#formulaire{
background-color:yellow;
padding:5px;
}

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

<form action="" method="get" dir="rtl">
  <h6>Identité</h6>
  <p>
    <label for="nom-6">اسم : </label>
    <input id="nom-6" type="text" name="nom-6" />
  </p>
  <p>
    <input type="submit" value="تقدم" />
  </p>
</form>

Attribut : style

Permet d’appliquer un style au formulaire directement dans le html, sans avoir besoin d’une feuille de style.

<form action="" method="get" style="background:#ffaaaa;padding:5px;">
  <h6>Identité</h6>
  <p>
    <label for="nom-7">Nom : </label>
    <input id="nom-7" type="text" name="nom-7" />
  </p>
  <p>
    <label for="prenom-7">Prénom : </label>
    <input id="prenom-7" type="text" name="prenom-7" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

Attribut : lang

Permet de spécifier la langue à l’intérieur du formulaire.

<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-8">Surname : </label>
    <input id="nom-8" type="text" name="nom-8" />
  </p>
  <p>
    <label for="prenom-8">Name : </label>
    <input id="prenom-8" type="text" name="prenom-8" />
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>

Pour ceux qui comme moi pensent que la Programmation Orientée Objet est l’avenir du genre humain indispensable en programmation et notamment en PHP, voici un article sur comment se connecter à MySQL avec PDO.

PDO peut être utilisé en lieu et place des fonctions MySQL de PHP (mysql_connect, mysql_ query, etc…) mais aussi à la place de MySQLI. PDO contrairement à ces deux-là n’est pas exclusif à MySQL et vous permettra de vous adapter plus facilement à un autre type de SGBD

D’abord il faut savoir savoir que PDO signifie PHP Data Objects et comme vous l’aurez deviné puisqu’il s’agit de MySQL, cela sert à établir une connexion à une base de données et à interagir avec elle. PDO est une extension PHP et la classe utilisée se nomme PDO. Je sais trop compliqué comme nom.

On peut se connecter à plusieurs types de SGBD comme Microsoft SQL Server (blasphème je sais ), Oracle, PostGreSQL…. Et surtout celui qui nous intéresse : MySQL.

Connexion à la base de données

$host = "localhost";
$dsn = "mysql:host=".$host.";dbname=".$nom_base_de_donnees;
$user = "user";
$pass = "password";
$connection = new PDO($dsn, $user, $pass);
// Si la base de données est en UTF-8.
$this->exec("SET NAMES 'utf8'");

Méthode query : récupérer des données.

$query = $connection->query("SELECT id, name FROM users");
// En renseignant PDO::FETCH_OBJ, les données récupérées seront retournées dans un objet.
while ($user = $query->fetch(PDO::FETCH_OBJ)) {
  echo "L'utilisateur n°".$user->id." s'appelle ".$user->name;
}

Méthode exec : exécuter une requête SQL.

$connection->exec("INSERT INTO users (id, name) VALUES (45, 'toto45')");
$connection->exec("DELETE FROM users WHERE id = 1");

Voilà c’est tout pour ce tuto, et n’oubliez surtout pas : BI-DOU-ILLEZ !