tfe - tfeserver homepage

Danger du CSS Reset

Catégorie Astuce - posté le 02/07/08 22:20:38

Il existe de très nombreux scripts pour remettre à zéro les propriété par défaut des navigateurs. 

Comme beaucoup de monde l'idée de partir sur une base vierge est très agréable, car nous ne devons plus nous soucier des valeurs par défaut des différents navigateurs (marges, paddings, tailles de police, etc...). Cependant il faut faire attention à certains scripts qui peuvent nuire à l'affichage de votre page:

Par exemple, le script de meyerweb.com:
  • le script ne redéfinit par l'ensemble des balises, comme par exemple la balise <input>. On pourrait donc penser que l'ensemble du site a une taille de police fixe, ce qui n'est pas le cas.
  • Autre gros problème: la définition de paramètres incorrects pour certaines balises. Par exemple, définir le "font-size" de la balise <font> empêche son bon fonctionnement. Certes cette balise est dépreciée, mais si vous possédez de vieux modules l'utilisant, vous empechez leur bon fonctionnement.

0 commentaire(s) programmation css html xhtml firefox IE

Contraire d'une requête SQL

Catégorie Programmation - posté le 27/06/08 14:28:02

Prenons une table toute simple:
create table matable (id serial, nombre varchar NULL);

Insérons-y 3 lignes:
insert into matable (nombre) VALUES (0);
insert into matable (nombre) VALUES (1);
insert into matable;

Maintenant sélectionnons les lignes ayant un nombre=1 (1 résultat)
select id,nombre from matable where nombre=1;

Pour inverser la requête donc: (1 résultat)
select id,nombre from matable where nombre!=1;
Nous remarquons que la ligne ayant un nombre=NULL n'a pas été sélectionnée...
La fonction SQL coalesce nous permet de palier a ce problème de manière simple: cette fonction selectionne le premier element non null d une liste:
select coalesce(nombre,-1) from matable nous retourne l'ensemble des nombre, remplaçant les NULL par des -1.

Pour inverser la requête nous pouvons donc faire:
select id,nombre from matable where coalesce(nombre,0) != 1;

Note: Nous aurions aussi pu faire select id,nombre from matable where nombre!=1 or nombre is null , mais du coup il n'y aurait pas eu d'astuce :).

0 commentaire(s) programmation sql astuce

Documentation Javascript

Catégorie Web - posté le 14/05/08 23:12:36

Encore une fois, google nous facilite le développement Web: cette fois-ci, nous avons droit à tout un emsemble de documentation et trucs & astuces, aussi bien sur le DOM, que sur les CSS.

À quand le framework complet google?

0 commentaire(s) programmation javascript google css dom

Fondu d'images CSS et Javascript

Catégorie Web - posté le 27/10/07 10:05:33

En voyant la page officielle de Starcraft 2, je me demandais comment ils avaient fait pour faire un diaporama en fondu, sans utiliser Flash.

En fait il s'agit tout simplement de l'utilisation de la propriété CSS "opacity" d'une image. Cet attribut peut prendre les valeurs décimales de 0 à 1: 1 étant la valeur pour une image opaque. Seule ombre au tableau étant que Internet Explorer 5 et 6 ne supportent pas cet attribut: Il faut passer par un filtre. Exemple avec 1, 0.7, 0.4, 0.1:

e1

e1

e1

e1

Au final en javascript on obtient le code suivant.

var img = document.getElementById("mon_id_image"); img.style.opacity=0.5; /* Par exemple */ img.style.filter=alpha(opacity=0.5*100);

Ou tout simplement en css le code suivant

img { opacity:0.5; filter:alpha(opacity=0.5); }

À noter que l'attribut filter opacity demande pour valeurs un décimal de 0 à 100, d'où le "*100".

Avec ce petit code, et un peu de patience, nous pouvons faire un fondu entre 2 images: Il faut pour cela superposer 2 images au même emplacement, et dégrader celles-ci.

Si je ne suis pas clair, rien de plus parlant qu'un bon exemple (cliquez sur les miniatures pour modifier l'image).

1 commentaire(s) W3c CSS Internet Explorer programmation javascript

Le javascript sux

Catégorie Web - posté le 19/06/07 21:42:56

Plus ça va, plus j'en suis convaincu. Certes le javascript permets d'avoir de jolis effets; Certes le javascript permets l'ajax et tout les vérifications de formulaires en temps réel. Mais le javascript permets aussi:

Vous utilisez une extension (Adblock) qui ne permet pas d'afficher correctement le site VirusPhoto.com. Merci de désactiver l'extension Adblock de votre navigateur (Menu "Outils > Modules complémentaires"), puis d'actualiser le site VirusPhoto.com
  • Vous pouvez également laisser Adblock activé mais choisir de le désactiver pour VirusPhoto.com :

Cliquez sur la flèche pres de l'icone Adblock en haut à droite du navigateur, puis dans le menu déroulant, choisissez l'option :

"Désactiver pour www.virusphoto.com". Vous pouvez ensuite vous rendre à nouveau sur le site VirusPhoto.com.

Comme vous l'aurez compris, nous ne somme plus libre d'utiliser les extensions que l'on veut sur notre ordinateur; Via un petit script, le webmaster peut décider de vous rediriger vers "la_page_d_erreur" de son choix.

La technologie doit-elle donc toujours être utilisée à mauvais essor?

1 commentaire(s) programmation javascript

site multilingue: gettext

Catégorie Web - posté le 12/06/07 21:29:05

Merci à ciel pour m'avoir fait découvrir cette petite merveille. Ce billet n'a pas pour but d'être complet: pour cela veuillez vous référer à la documentation officielle. GNU/gettext est un outils permettant de localiser ses messages. L'ensemble des variables texte se retrouvent alors dans un fichier ayant l'extension "po".

structure du fichier po

msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "POT-Creation-Date: 2002-04-06 21:44-0500\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Language-Team: LANGUAGE <LL@li.org>\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=CHARSET\n" "Content-Transfer-Encoding: 8bit\n" #: gettext_example.php:12 msgid "une phrase" msgstr "sa traduction"

Il suffit de créer alors un fichier "po" dans le dossier de la langue correspondante: locales/fr/LC_MESSAGES , locales/es/LC_MESSAGES , ou autre. Par soucis de performance, il faut compiler le fichier "po" pour créer un "mo". Cela se fait via l'utilitaire "msgfmt", également disponible pour windows.

Une fois le fichier "mo" crée, voila le code php qui va bien.

$language = 'fr'; putenv("LANG=$language"); setlocale(LC_ALL, $language); $domain = 'messages'; bindtextdomain($domain, "./locales"); textdomain($domain); echo gettext("une phrase");

Par exemple, ce petit code php va écrire "sa traduction".

1 commentaire(s) W3c programmation php

Tuer le temps libre

Catégorie Perl - posté le 02/04/07 21:39:42

Que faire pour tuer le temps libre? Ben faire du 1-line en Perl évidemment!

perl -e '$v="tfe";$v=~s/(?{$,++})(.)/for($${\{1=>[-4,-15],2=>[12,6],3=>[-91,]}}{$,}){for $\(@{$_}){print chr(ord($1)+$\)}}/ge;'

0 commentaire(s) delire programmation