Qyy

Convertir des entités XHTML en Unicode avec PHP

2010-10-26T11:00:00.001+02:00

Après quelques recherches, je n'ai pas réussi à trouver de script satisfaisant pour convertir les entités déclaré dans la DTD XHTML Transitional en entités Unicode.

C'est très étrange : dans chaque script, chacun y vas de sa petite liste d'entités, et même si je n'ai aucune idée d'où ces listes peuvent bien sortir, elles sont systématiquement incomplètes !

Pourtant, ce n'est pas comme si cette liste était si compliqué à trouver : il suffit de regarder la Définition de Type de Document dont l'url se trouve dans la déclaration DOCTYPE de tout bon document XHTML Transitional.

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

Et au tout début du document, ligne 24, se trouve les références vers les déclarations des entités :

<!ENTITY % HTMLlat1 PUBLIC
"-//W3C//ENTITIES Latin 1 for XHTML//EN"
"xhtml-lat1.ent">
%HTMLlat1;
<!ENTITY % HTMLsymbol PUBLIC
"-//W3C//ENTITIES Symbols for XHTML//EN"
"xhtml-symbol.ent">
%HTMLsymbol;
<!ENTITY % HTMLspecial PUBLIC
"-//W3C//ENTITIES Special for XHTML//EN"
"xhtml-special.ent">
%HTMLspecial;

En partant de là, il nous suffit donc d'aller chercher les trois fichiers contenant la totalité des entités déclarés :

La fonction PHP

J'ai donc rédigé cette fonction PHP qui prend en compte toutes les entités déclarés pour leurs substitutions en Unicode :

<?php
/**
* Convertit toutes les entités déclarées dans la DTD XHTML Transitional en
* entités Unicode. Si c'est pas triste de devoir en arriver là...<br/>
* Section DTD :
* <code>
*
*
* <!ENTITY % HTMLlat1 PUBLIC
* "-//W3C//ENTITIES Latin 1 for XHTML//EN"
* "xhtml-lat1.ent">
* %HTMLlat1;
*
* <!ENTITY % HTMLsymbol PUBLIC
* "-//W3C//ENTITIES Symbols for XHTML//EN"
* "xhtml-symbol.ent">
* %HTMLsymbol;
*
* <!ENTITY % HTMLspecial PUBLIC
* "-//W3C//ENTITIES Special for XHTML//EN"
* "xhtml-special.ent">
* %HTMLspecial;
* </code>
* @author G. Qyy, <code[at]qyy.fr>
* @copyright Copyright (c) 2010 G. Qyy
* @license http://www.cecill.info/licences/Licence_CeCILL-B_V1-fr.html
* @link http://blog.qyy.fr/2010/10/convertir-des-entites-xhtml-en-unicode.html
* @link http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
* @link http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent
* @link http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent
* @link http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent
* @param string $chaine <p>
* Une chaine contenant des entités déclarées dans la DTD XHTML Transitional
* </p>
* @return string La chaine fournit dont les entités déclarées dans la DTD
* XHTML Transitional ont été convertis en entités Unicode.
*/
function ConvertieEntiteVersUnicode($chaine)
{
$unicode = array(
'"','&','<','>',''','Œ','œ','Š',
'š','Ÿ','ˆ','˜',' ',' ',' ',
'‌','‍','‎','‏','–','—','‘',
'’','‚','“','”','„','†','‡',
'‰','‹','›','€',' ','¡','¢',
'£','¤','¥','¦','§','¨','©','ª',
'«','¬','','®','¯','°','±','²',
'³','´','µ','¶','·','¸','¹','º',
'»','¼','½','¾','¿','À','Á','Â',
'Ã','Ä','Å','Æ','Ç','È','É','Ê',
'Ë','Ì','Í','Î','Ï','Ð','Ñ','Ò',
'Ó','Ô','Õ','Ö','×','Ø','Ù','Ú',
'Û','Ü','Ý','Þ','ß','à','á','â',
'ã','ä','å','æ','ç','è','é','ê',
'ë','ì','í','î','ï','ð','ñ','ò',
'ó','ô','õ','ö','÷','ø','ù','ú',
'û','ü','ý','þ','ÿ','ƒ','Α','Β',
'Γ','Δ','Ε','Ζ','Η','Θ','Ι','Κ',
'Λ','Μ','Ν','Ξ','Ο','Π','Ρ','Σ',
'Τ','Υ','Φ','Χ','Ψ','Ω','α','β',
'γ','δ','ε','ζ','η','θ','ι','κ',
'λ','μ','ν','ξ','ο','π','ρ','ς',
'σ','τ','υ','φ','χ','ψ','ω','ϑ',
'ϒ','ϖ','•','…','′','″','‾',
'⁄','℘','ℑ','ℜ','™','ℵ','←',
'↑','→','↓','↔','↵','⇐','⇑',
'⇒','⇓','⇔','∀','∂','∃','∅',
'∇','∈','∉','∋','∏','∑','−',
'∗','√','∝','∞','∠','∧','∨',
'∩','∪','∫','∴','∼','≅','≈',
'≠','≡','≤','≥','⊂','⊃','⊄',
'⊆','⊇','⊕','⊗','⊥','⋅','⌈',
'⌉','⌊','⌋','〈','〉','◊','♠',
'♣','♥','♦'
);
$entite = array(
'"','&','<','>',''','&OElig;','&oelig;','&Scaron;',
'&scaron;','&Yuml;','&circ;','&tilde;','&ensp;','&emsp;',' ',
'&zwnj;','&zwj;','&lrm;','&rlm;','–','—','‘','’',
'&sbquo;','“','”','&bdquo;','&dagger;','&Dagger;','&permil;',
'&lsaquo;','&rsaquo;','€',' ','¡','¢','£',
'¤','¥','¦','§','¨','©','ª',
'«','¬','','®','¯','°','±','²',
'³','´','µ','¶','·','¸','¹',
'º','»','¼','½','¾','¿','À',
'Á','Â','Ã','Ä','Å','Æ','Ç',
'È','É','Ê','Ë','Ì','Í','Î',
'Ï','Ð','Ñ','Ò','Ó','Ô','Õ',
'Ö','×','Ø','Ù','Ú','Û','Ü',
'Ý','Þ','ß','à','á','â','ã',
'ä','å','æ','ç','è','é','ê',
'ë','ì','í','î','ï','ð','ñ',
'ò','ó','ô','õ','ö','÷','ø',
'ù','ú','û','ü','ý','þ','ÿ',
'&fnof;','Α','Β','Γ','Δ','Ε','Ζ',
'Η','Θ','Ι','Κ','Λ','Μ','Ν','Ξ',
'Ο','Π','Ρ','Σ','Τ','Υ','Φ','Χ',
'Ψ','Ω','α','β','γ','δ','ε',
'ζ','η','θ','ι','κ','λ','μ','ν',
'ξ','ο','π','ρ','&sigmaf;','σ','τ',
'υ','φ','χ','ψ','ω','&thetasym;','&upsih;',
'ϖ','•','…','′','″','&oline;','&frasl;',
'&weierp;','&image;','&real;','™','&alefsym;','←','↑',
'→','↓','↔','&crarr;','⇐','&uArr;','⇒','&dArr;',
'⇔','∀','∂','∃','∅','∇','∈',
'∉','&ni;','∏','∑','−','&lowast;','√','&prop;',
'∞','&ang;','&and;','&or;','∩','∪','∫','&there4;',
'&sim;','&cong;','≈','≠','&equiv;','≤','≥','⊂','⊃',
'&nsub;','&sube;','&supe;','&oplus;','&otimes;','&perp;','⋅',
'&lceil;','&rceil;','&lfloor;','&rfloor;','&lang;','&rang;','&loz;',
'&spades;','&clubs;','&hearts;','&diams;'
);
$chaine = str_replace($entite, $unicode, $chaine);
return $chaine;
}
?>

Droit d'auteur / propriété intellectuelle :

Sauf mention contraire cet article et son contenu sont régis par les conditions suivantes :

Tout contenu tiers est régi par les conditions des ayants droit.

Tout autre contenu ou ressource est soumis à l'acceptation du contrat Creative Commons by-nc-nd (Paternité - Pas d'Utilisation Commerciale - Pas de Modification).

Tout autre code source est soumis à l'acceptation du Contrat de Licence de Logiciel Libre CeCILL-B

En cas de non acceptation de tout ou partie des conditions (incluant celles des contenus tiers), le contenu de cet article reste la propriété morale et patrimoniale de son auteur, et tout usage non autorisé par écrit est explicitement proscrit.

HTTP Status Codes

2010-10-07T06:27:00.025+02:00

Les codes de retour HTTP sont des indications très précieuses envoyées par le serveur pour informer sur la manière dont la requête a été traitée.

Par exemple, si un navigateur web demande à un serveur HTTP de lui fournir le fichier "http://le.serveur.invalid/index.html" :

si le fichier existe et que l'utilisateur a le droit d'accéder à cette ressource, le serveur renverra le fichier au navigateur web avec le code retour "200: OK" (Requête traitée avec succès),
si l'utilisateur n'a pas le droit d'effectuer cette requête, le serveur renverra un code "401: Unauthorized" (Une autorisation est nécessaire pour accéder à la ressource). Pour ce qui est du fichier, soit une page préconfigurée au niveau du serveur sera renvoyée, soit rien du tout, laissant alors le logiciel ayant émis la requête (comme un navigateur web) informe l'utilisateur du problème,
si la requête de l'utilisateur est légitime et que le fichier n'existe pas, un code "404: Not Found" (Ressource non trouvé) sera renvoyé, avec le même processus pour le fichier que décrit dans le point précédant.

Et tout ceci ne sont que des exemples car il existe plusieurs dizaine de codes de retour HTTP.

Attention : Le comportement que je décris ci-dessus n'est pas forcément le comportement par défaut de tous les serveurs web :

En effet, dans certains cas, le serveur commence par vérifier si le fichier existe ou non, et renvoie un code "404: Not Found" s'il n'existe pas, avant même se soucier si l'utilisateur a le droit d'effectuer la requête.

C'est à mon sens un comportement qu'il faut corriger systématiquement lors de la mise en place d'un serveur web : Pourquoi un utilisateur serait-il informé de l'existence d'une ressource qu'il n'a même pas le droit de requérir ?

Astuce : Tout ces codes de retour sont à deux chiffres, préfixés d'un troisième informant sur la nature du retour. Il y a cinq préfixes de retour, ce qui permet de savoir rapidement à quel type de retour on a à faire, même si on ne connait pas le code en particulier :

1xx : Information
2xx : Succès
3xx : Redirection
4xx : Erreur du client
5xx : Erreur du serveur

A la base cette information est destinée surtout aux applicatifs qui effectuent les requêtes, et non aux utilisateurs qui les utilisent.

Il est cependant aisé de les consulter :

En capturant le trafic :
- à l'aide d'un proxy comme Fiddler,
- sous Firefox, avec un plugin comme Live Http Headers,
- ...
En consultant ce que le navigateur reçoit :
- à l'aide de l'onglet réseau du plugin Firebug de Firefox
- à l'aide de l'onglet "Ressources" des "Outils de développement" de Google Chrome
- ...
etc.

Maintenant, venons-en au cœur du problème qui me préoccupe :

De nombreux développeurs web ne se soucient pas du tout de ces codes retour, et ne vont pas hésiter à fournir une information à l'utilisateur, et une information contraire à l'applicatif !

Prenons le cas de Joomla! :

Si vous tentez de vous identifier sur la partie administrateur, et que votre paire identifiant/mot de passe est refusée, vous serez bien évidement gratifié d'un message du genre :

"L'identifiant et le mot de passe ne correspondent pas"

Malheureusement, si vous regardez le code retour, l'application ne se gène pas pour renvoyer un magnifique "200: OK" (Requête traitée avec succès) en lieu et place d'un nécessaire "401: Unauthorized" (Une autorisation est nécessaire pour accéder à la ressource) !

Pire, même si ce n'est pas le cas de Joomla!, dans le cas de ressources inexistantes (par exemple "index.php?id=4" alors qu'aucune ressource "id=4" n'existe) de nombreuses applications web n'hésitent pas à renvoyer un message du type "La page que vous recherchez n'existe pas" avec un code "200: OK" alors qu'un "404: Not Found" (Ressource non trouvé) serait bien plus indiqué !

D'accord, "index.php" existe, mais si "index.php?id=4" n'est pas capable de renvoyer une ressource, alors c'est qu'aucune ressource avec cette URI n'existe, le code de statut devrait donc être un "404: Not Found".

De la même manière, si "id" n'accepte que des entiers, "index.php?id=toto" se doit de retourner un code "400: Bad Request" (La syntaxe de la requête est erronée)...

De plus, ceci est extrêmement simple à mettre en place : tous les langages prévus pour négocier avec le protocole HTTP implémentent le nécessaire pour retourner les bons codes.

En PHP par exemple, c'est avec la fonction header que l'on peut effectuer cette opération :

<?php
header("Status: 404 Not Found");
?>

Pourquoi se soucierait-on de donner une information correcte au logiciel qui effectue la requête ?

Simplement parce que cette information peut servir :

J'ai vu des gens ajouter leurs pages d'erreur dans le "robot.txt" pour qu'elles ne soient plus référencées sur Google, alors qu'un code de retour signifiant une erreur aurait permis au robot de tout de suite comprendre qu'il n'y avait rien d'intéressant...

J'ai vu des gens chercher à parser avec JavaScript un message d'erreur textuel amoureusement forgé côté serveur pour vérifier si leur requête Ajax s'était correctement déroulée, alors qu'il leur aurait été tellement plus simple de renvoyer les codes de retour correspondant aux erreurs pour connaître la nature du problème et informer directement l'utilisateur pertinemment...

Et j'ai vu de nombreuses autres horreurs, mais dans tous les cas, la logique et l'intelligence, ne dictent-elles pas à elles seules de ne pas renvoyer un code retour de succès quand quelque chose a visiblement mal tourné ?

Droit d'auteur / propriété intellectuelle :

Cet article et son contenu sont régis par les conditions suivantes :

Tout contenu tiers est régi par les conditions des ayants droit.

Tout autre contenu ou ressource est soumis à l'acceptation du contrat Creative Commons by-nc-nd (Paternité - Pas d'Utilisation Commerciale - Pas de Modification).

Image Resizer XP / Vista / Seven

2010-10-01T16:00:00.028+02:00

Image Resizer est un PowerToy Windows XP extrêmement pratique :

Il permet en effet de redimensionner les images depuis le shell Windows, d'un simple click droit sur un fichier image dans l'explorateur.

Malheureusement pour beaucoups, il n'y a pas eu d'équivalent pour Windows Vista tout de suite.

C'est cependant une affaire réglé depuis un certain temps, car un généreux développeur met à disposition un clone compatible avec Vista et Seven de cet outil indispensable.

Et pour ne rien gâcher au plaisir cette application est bien entendu libre et gratuite, soumise à l'Eclipse Public License V1.0 (informations sur Wikipedia).

Au delà de simplement redimensionner vos images, cet outils fantastique vous permettra de les optimiser pour le web très efficacement : c'est en effet le seul logiciel à ma connaissance capable d'avoir un gain aussi significatif en poids sur une image JPEG enregistré avec l'export web de Photoshop avec aussi peut de perte (quasiment aucune la plupart du temps).

Il faut quand même être vigilant dans le cas des images PNG, notaement celles enregistrés avec Paint.NET : elles ont tendances à prendre un tout petit peut de poids

Comme il est de plus capable d'opérer sur une arborescence complète si on l'enclenche depuis un répertoire, je trouve très pratique de lui donner une zone carré de dimensions maximum et de ne pas lui permette d'agrandir les images.

Ainsi, toutes les images dépassant cette zone en hauteur et/ou cette largeur seront rétrécis et optimisés, toutes les autres étant simplement optimisés.

Exemple : Optimiser un lot de photos pour une galerie web

Etape 1 :

Sélectionner les images a optimiser (ou le répertoire les contenants), puis faire un click droit sur la sélection, et choisir "Resize Picture" dans le menu.

Figure 1 : Illustration de l'étape 1

Etape 2 :

Clicker sur le bouton "Advanced >>"

Figure 2 : Illustration de l'étape 2

Etape 4 :

Choisir l'option "Custom" et remplir avec "800" et "800" les deux boites de texte,
cocher "Make pictures smaller but no larger",
Cocher "Resize the original picture (don't crate copies)"

Figure 3 : Illustration de l'étape 3

Et voilà, il ne reste plus qu'à clicker sur "OK" !

Droit d'auteur / propriété intellectuelle :

Cet article et son contenu sont régis par les conditions suivantes :

Tout contenu tiers est régi par les conditions des ayants droits.

Tout autre contenu ou ressource est soumis à l'acceptation du contrat Creative Commons by-nc-nd.

Coloration syntaxique Apache 1.3 dans Notepad++

2010-09-24T09:08:00.005+02:00

Notepad++ est un éditeur de texte libre et gratuit très léger et performant : il s'ouvre quasiment instantanément même sur des machines modestes et fournit de nombreuses fonctionnalités comme la gestion des onglets, la réouverture automatique des fichiers, l'affichage simultané de deux fenêtres de texte, les macros, la coloration syntaxique pour de nombreux langages, la surveillance de la modification des fichiers ouvert dans Notepad++ par d'autre logiciels, une implémentation shell permettant d'ouvrir n'importe quel fichier à partir du menu contextuel (click droit) de l'explorateur, la possibilité de faire des rechercher/remplacer dans des répertoire complet et toute leur arborescence, avec ou sans regex, avec ou sans mode étendu (\n, \r , etc.)...

Bref, un outil indispensable à tout informaticien, car même ceux qui, comme moi affectionnent le confort de lourds IDE tel que Netbean ou Visual Studio, il est toujours intéressant d'avoir une alternative à un logiciel qui vous fera patienter 30 seconde lors de son lancement pour faire une modification qui en prendra 2.

Voici comment obtenir une coloration syntaxique pour les fichiers de configuration Apache 1.3 qui n'est pas nativement implémenté dans Notepad++ 5.6.8.

Bien qu'optimisé pour Apache 1.3, cette coloration syntaxique rend aussi plus confortable les fichiers de configurations d'Apache 2

Pour commencer :

Dans Notpad++ :

Ouvrir le panneau "Langage utilisateur",
cliquer sur le bouton "Nouveau..." et remplir "httpd.conf 1.3" dans le champ "Name :" de la fenêtre "Create New Language..." puis appuyer sur le bouton "OK",
s'assurer que la liste déroulante "Langage" est bien sur "httpd.conf 1.3".

Astuce : En ce qui concerne la police, il faut toujours mettre une police à pas fixe pour le code. Par défaut, la police "Fixedsys" est utilisé ici.

Info : Pour les commentaires, la police "Verdana" à été choisie pour faciliter la lisibilité.

Dans l'onglet "Bloc & défaut"

Dans "Style par défaut", choisir un gris foncé comme couleur de premier plan et la police "Fixedsys" dans "Famille".

Dans "Définition de bloc ouvrant" et "Définition de bloc fermant" choisir du bleu comme couleur de premier plans et la police "Fixedsys" dans "Famille"

Remplir le champ texte de "Définition de bloc ouvrant" avec :

<Limit <LimitExcept <Location <LocationMatch <VirtualHost <IfDefine <IfModule <Files <FilesMatch <Directory <DirectoryMatch <location

Remplir le champ texte de "Définition de bloc fermant" avec :

</Limit </LimitExcept </Location </LocationMatch </VirtualHost </IfDefine </IfModule </Files </FilesMatch </Directory </DirectoryMatch </location

Dans l'onglet "Mots clés"

"1er Groupe" :

Couleur de premier plan bleu foncé,
police "Fixedsys" dans "Famille",
cocher "Souligné",

Remplir le champ texte avec :

AcceptFilter AcceptMutex AccessConfig AccessFileName Action AddAlt AddAltByEncoding AddAltByType AddCharset AddDefaultCharset AddDescription AddEncoding AddHandler AddIcon AddIconByEncoding AddIconByType AddLanguage AddModule AddModuleInfo AddType AgentLog Alias AliasMatch AllowCONNECT AllowOverride Anonymous Anonymous_Authoritative Anonymous_LogEmail Anonymous_MustGiveEmail Anonymous_NoUserID Anonymous_VerifyEmail AuthAuthoritative AuthDBAuthoritative AuthDBGroupFile AuthDBMAuthoritative AuthDBMGroupFile AuthDBMGroupFile AuthDBUserFile AuthDBMUserFile AuthDigestFile AuthGroupFile AuthName AuthType AuthUserFile BindAddress BrowserMatch BrowserMatchNoCase BS2000Account CacheDefaultExpire CacheDirLength CacheDirLevels CacheForceCompletion CacheGcInterval CacheLastModifiedFactor CacheMaxExpire CacheRoot CacheSize CheckSpelling ClearModuleList ContentDigest CookieExpires CookieTracking CoreDumpDirectory CustomLog DefaultIcon DefaultLanguage DefaultType DirectoryIndex DocumentRoot EBCDICConvert EBCDICConvertByType EBCDICKludge ErrorDocument ErrorLog Example ExpiresActive ExpiresByType ExpiresDefault ExtendedStatus FancyIndexing ForceType ForensicLog Group Header HeaderName HostNameLookups IdentityCheck ImapBase ImapDefault ImapMenu Include IndexIgnore IndexOptions IndexOrderDefault ISAPIReadAheadBuffer ISAPILogNotSupported ISAPIAppendLogToErrors ISAPIAppendLogToQuery KeepAlive KeepAliveTimeout LanguagePriority LimitRequestBody LimitRequestFields LimitRequestFieldsize LimitRequestLine Listen ListenBacklog LoadFile LoadModule LockFile LogFormat LogLevel MaxClients MaxKeepAliveRequests MaxRequestsPerChild MaxSpareServers MetaDir MetaFiles MetaSuffix MimeMagicFile MinSpareServers MMapFile NameVirtualHost NoCache Options order PassEnv PidFile Port ProxyBlock ProxyDomain ProxyPass ProxyPassReverse ProxyReceiveBufferSize ProxyRemote ProxyRequests ProxyVia ReadmeName Redirect RedirectMatch RedirectPermanent RedirectTemp RefererIgnore RefererLog RemoveEncoding RemoveHandler RemoveType require ResourceConfig RewriteBase RewriteCond RewriteEngine RewriteLock RewriteLog RewriteLogLevel RewriteMap RewriteOptions RewriteRule RLimitCPU RLimitMEM RLimitNPROC Satisfy ScoreBoardFile Script ScriptAlias ScriptAliasMatch ScriptInterpreterSource ScriptLog ScriptLogBuffer ScriptLogLength SendBufferSize ServerAdmin ServerAlias ServerName ServerPath ServerRoot ServerSignature ServerTokens ServerType SetEnv SetEnvIf SetEnvIfNoCase SetHandler StartServers ThreadsPerChild TimeOut TransferLog TypesConfig UnsetEnv UseCanonicalName User UserDir VirtualDocumentRoot VirtualDocumentRootIP VirtualScriptAlias VirtualScriptAliasIP XBitHack Timeout Allow Deny Order HostnameLookups MIMEMagicFile CookieLog SSLEngine SSLCertificateFile SSLCertificateKeyFile SSLLog SSLLogLevel SSLRandomSeed SSLMutex SSLSessionCacheTimeout SSLSessionCache SSLPassPhraseDialog

"2è Groupe" :

Couleur de premier plan bleu-vert,
police "Fixedsys" dans "Famille".

Remplir le champ texte avec :

CacheNegotiatedDocs SSLRequireSSL

"3è Groupe" :

Couleur de premier plan bleu clair,
police "Fixedsys" dans "Famille".

Remplir le champ texte avec :

Off On None on off none error warn info trace debug builtin deny,allow allow,deny Mutual-failure all valid-user Basic All Indexes Includes FollowSymLinks ExecCGI MultiViews

"4è Groupe" :

Couleur de premier plan bleu-vert foncé,
police "Fixedsys" dans "Famille",
cocher "Souligné",

Remplir le champ texte avec :

from user group startup connect

Dans l'onglet "Commentaire & Nombre" :

"Commentaire sur une ligne" :

Couleur de premier plan vert,
police "Verdana" dans "Famille",
cocher "Traiter comme un symbole",
remplir le champ texte avec le caractère : "#" (dièse).

"Nombre" :

Couleur de premier plan rouge.

Dans l'onglet "Opérateurs" :

Passer le caractère ">" de la liste des "Symboles disponibles" à la liste des "Opérateurs activés",
prendre le même bleu que pour les blocs en couleur de premier plan,
police "Fixedsys" dans "Famille",
cocher "Enable escape character :" et rentrer le caractère : "\" (back-slash).

"Délimiteur 1" :

"Borne ouvrante :" : """ (double guillemet),
"Borne fermante :" : """ (double guillemet),
Couleur de premier plan mauve,
police "Fixedsys" dans "Famille".

Ressources :

Nomenclature

Voici le contexte dans lequel à été testé la réalisation des étapes ci-dessus :

Ordinateur (Asus EeePc 1000H)
- Intel Atom 1,6 GHz,
- 2 Gio RAM,
- Windows Vista 32 bits.
Logiciel utilisé
- Notepad++ 5.6.8 version française.
Fichier de test utilisé
- "httpd.conf" par défaut de la version Apache 1.3 implémenté dans OpenBSD 4.5.

Droit d'auteur / propriété intellectuelle :

Cet article et son contenu sont régis par les conditions suivantes :

Tout contenu tiers est régi par les conditions des ayants droits.

Tout autre contenu ou ressource est soumis à l'acceptation du contrat Creative Commons by-nc-nd.

Une photo panoramique 360° Flash avec une boule de Noël

2010-09-21T15:44:00.015+02:00

Voici comment réaliser un panoramique 360° avec une seul photo, une boule de Noël, Photoshop et Flash CS4.

L'exemple présenté au long de cet article est délibérément de mauvaise qualité afin d'éviter toute identification de lieux, de biens ou de personnes.

Panoramique 360° Flash réalisé avec une boule de Noël

Etape 1 : La photo

Prendre une boule de Noël miroir dans le meilleur état possible (non tinté de préférence) et la suspendre par un fil au centre de la pièce.

Astuce : Plus elle sera grosse, meilleur sera la qualité du résultat.

Astuce : La meilleur hauteur semble être à un tiers de la hauteur plafond sol en partant du plafond pour avoir un maximum de détail sur la pièce. Expérimenter différentes hauteurs le cas échéants.

Prendre en photos la boule de Noël en respectant les consignes suivantes :

Positionner l'objectif exactement en dessous de la boule de Noël,
Prendre la photo le plus près possible de la boule de Noël,
Garder une netteté maximum de la boule de Noël et de ses reflets,
La boule de Noël ne doit pas être coupé, et se trouver intégralement sur la photo.

Astuce : Un objectif avec un mode macro est préférable. De plus, il peut être nécessaire de tester différentes tailles de boules en fonction du rapprochement que permet l'objectif.

Figure 1 : Photos d'une boule de Noël de piètre qualité (petite, abîmé, bleu...) réalisé avec un capteur CMOS 5 mégas pixels bas de gamme intégré à un téléphone portable.

Etape 2 : Retouche

A l'aide d'un logiciel de retouche d'image recadrer la photo en carré de telle sorte que la boule s’inscrive parfaitement dedans (c.f. Figure 2).

Figure 2 : La boule de Noël recadrée.

Par la suite effectuer une contraction de l'image vers de centre (c.f. Figure 3) :

A l'aide de Photoshop :
- Menu "Filtre" > "Déformation" > "Contraction..."
- Valeur : "100%"

Figure 3 : La fenêtre de paramètres "Contraction" de Photoshop.

Continuer avec une conversion polaire en rectangle (c.f. Figure 4) :

A l'aide de Photoshop :
- Menu "Filtre" > "Déformation" > "Coordonnées polaires..."
- Radio button "Polaire en rectangulaire"

Figure 4 : La fenêtre de paramètres "Coordonnées polaires" de Photoshop.

Finir avec une rotation de l'image à 180°, puis l'enregistrer en temps que "img.jpg".

Figure 5 : Le résultat final "img.jpg".

Astuce : En divisant par deux la hauteur de l'image sans en changer la largeur, le visuel sera plus probant à l'œuil. Cependant, il est préférable de conserver le fichier en l'état pour la suite des opérations.

Etape 3 : Le viewer

Suivez l'excellent tutoriel de Grafikart pour la création d'un viewer panoramique Flash à l'aide de Papervision3D :

Tutoriel vidéo Flash : Papervision, panorama 360° - Grafikart

Tutoriel vidéo : Papervision, panorama 360°
envoyé par Grafikart. - Regardez plus de vidéo vie pratique.

Attention : Il est important de noter l'encadré stipulant que le contenu des tutoriels de Grafikart ainsi que toutes les ressources fournies le sont en Creative Commons by-nc-nd. L'auteur interdit donc explicitement l'usage des ressources qu'il fournit (code sources, etc...) sur un site à visé commerciale (nc) ainsi la personnalisation du code pour l'adapter à ses propres besoins (nd).

il suffi d'utiliser l'image précédemment généré ("img.jpg") avec le viewer pour observer le résultat final.

Astuce : Il est possible de jouer avec la hauteur du visuel et de l'image qu'il contiens ainsi que l'angle limite en hauteur pour obtenir un résultat plus probant en se dispensant de l'étape de contraction de l'image vers le centre (c.f. Figure 6).

Figure 6 : Test de modification du fichier "img.jpg".

Etape 4 : Réflexion

Tout ceci ne consiste qu'en une suite d'essais rapide, comme pistes de réflexions. Il est donc nécessaire de pousser l'étude du sujet au delà de ce simple survol pour avoir un résultat plus pertinent.

L'idéal serait de pouvoir prendre la photo de dessus, mais il faudrait trouver une solution pour que le preneur de vue et/ou le dispositif ne masque pas trop le champs. Il est cependant certain que de meilleur résultats serait obtenu avec un miroir "sphéroïde" légèrement oblong, car il permettrait de descendre la prise de vue à hauteur d'yeux pour un résultat plus réaliste.

De prochains articles seront peut-êtres écrit sur le sujet, notamment sur la question du viewer, dont la création d'une version original en licence libre est à l'ordre du jour.

Etape 5 : Sources d'inspirations / Aller plus loin

Nomenclature

Voici le contexte dans lequel à été testé la réalisation des étapes ci-dessus :

APN
- HTC Hero.
Ordinateur
- Core I7,
- 8 Gio RAM,
- Windows Seven 64 bits.
Logiciels utilisés
- Photoshop CS4 64 bits version française,
- Flash CS4 version française

Droit d'auteur / propriété intellectuelle :

Cet article et son contenu sont régis par les conditions suivantes :

Tout contenu tiers est régi par les conditions des ayants droits.

Tout autre contenu ou ressource est soumis à l'acceptation du contrat Creative Commons by-nc-nd.