cross-browsers

Custom theme for browsers

It may look like a fancy detail for most of people but for web editors and developers using custom themes will help to better differentiate browsers when doing multi-tasking or cross-browser QA.

My Chrome Theme

Custom Google Chrome Theme MartinDubeNet

  1. Download the Google Chrome Theme_MartinDubeNet.zip on your desktop,
  2. Unzip it,
  3. From your Google Chrome browser menu, Open the CRX file,
  4. Activate the new theme as any other Chrome Extensions and that’s it!

My Firefox Personnas

I’ve submit a set of OS based faded fox themes in Mozilla’s Personnas to help better differentiate my Firefox app from different OS when in bootstrap mode on Mac OS.

Preview Personnas for Firefox

  1. Install the Personnas Plus add-on on your Firefox Extensions,
  2. Search for my personnas,
  3. Choose the one you prefer and simply click on the WEAR IT button to activate it.
Select_fields

Custom drop-down select tag using only CSS

Graphic illustration of the alternative select drop-down
A 100% CSS method to customize the layout of HTML
 

The required HTML markup

<div class="select">
    <div class="altSelect">
        <select name="dropdownSelect" title="Select an option">
            <option value="-1" class="first">-</option>
            <option value="1">Option 1 </option>
            <option value="2">Option 2 minutes</option>
            <option value="3">Option 3 hours</option>
            <option value="4">Option 4 very long days</option>
            <option value="5">Option 5 weeks</option>
            <option value="6">Option 6 month</option>
            <option value="7">Option 7 years</option>
            <option value="8">Long option 8 lorem ipsum</option>
            <option value="9">Option 9 centiries</option>
        </select>
        <span class="arrow" title="&larr; edit"></span>
    </div>
</div>

The style

select {
	padding-top: .3em;
	padding-bottom: .3em;
}
select option {
	border-bottom: 1px dotted #CCC; /*-moz-*/
	background-color: white;
}
select option:focus {
	outline-width: thin; /*-webkit-*/
}
select option:before {
	content: "\2022\0020"; /*-moz- Adds a bullet before each line*/
}
/*The following style should only target an option where NO values are declared: <option value=""> or <option value="-1">*/
select option[value=""],
select option[value="-1"] {
	font-style: italic;
	opacity: .7;
	background-color: #EEE;
}
select option[value=""]:before,
select option[value="-1"]:before {
    content: "\2193\0020Please select one of these options"; /*-moz- only*/
	color: #EEE;
}
/* html5 requires to set a lang value on the <html> tag. Let's us it for my French Canadian translation example */
select option[value=""]:lang(fr-CA):before,
select option[value="-1"]:lang(fr-CA):before {
    content: "\2193\0020Veuillez choisir parmi ces options"; /*-moz- only*/
}

Support for Internet Explorer

Using this CSS hack is not what I would recommend, but it allowed me to isolate the display on the span ONLY to Microsoft’s browser without requiring the complex management of conditional comments in the customer’s CMS.

div.select .altSelect:hover {
	background-image: none\9; /*ie9Hack : hide the arrow in background*/
}
.select .altSelect span.arrow {
	display: block\9; /*ie9Hack : show the arrow in foreground, over the <select>*/
}
div.select .altSelect:hover span.arrow {
	background-position: right -349px\9; /*ie9Hack*/
}
div.select .altSelect:hover span.arrow:hover {
	background-position: right 1px\9; /*ie9Hack*/
}

Styled option tag layout in IE9

Select field

Enhance drop-down options layout for Firefox

Enhance the layout of your dropdown list based on the HTML <select> tag. The following CSS code will NOT affect the layout and usability of your forms in other browsers then Firefox since only Mozilla’s Gecko layout engine seems to support custom styling on the <option> tags.

<div class="select">
    <label for="thisField"><abbr class="required">*</abbr>Select field</label>
    <select id="thisField" name="thisField" required="required" title="Select an option">
        <option value=""></option>
        <option value="01">Option 01</option>
        <option value="02">Option 02 lorem ipsum dolor sit amet</option>
        <option value="03">Option 03</option>
    </select>
    </div><!-- /.altSelect -->
</div><!-- /.select -->

 

select {
	padding-top: .3em;
	padding-bottom: .3em;
}
select option {
	border-bottom: 1px dotted #CCC; /*-moz-*/
	background-color: white;
}
select option:focus {
	outline-width: thin; /*-webkit-*/
}
select option:before {
	content: "\2022\0020"; /*-moz- Adds a bullet before each line*/
}

The following style should only target an option where NO values are declared: <option value=""> or <option value="-1">

select option[value=""],
select option[value="-1"] {
	font-style: italic;
	opacity: .7;
	background-color: #EEE;
}
select option[value=""]:before,
select option[value="-1"]:before {
    content: "\2193\0020Please select one of these options"; /*-moz- only*/
	color: #EEE;
}

HTML5 requires to set a lang value on the <html> tag. Let’s use it for my French Canadian translation example.

select option[value=""]:lang(fr-CA):before,
select option[value="-1"]:lang(fr-CA):before {
    content: "\2193\0020Veuillez choisir parmi ces options"; /*-moz- only*/
}

End result examples

Here are screen capture images from 3 major browsers.

Mozilla Firefox

Styled option tag layout in Mozilla Firefox browser

Google Chrome

Styled option tag layout in Google Chrome browser

Microsoft Internet Explorer 9

Styled option tag layout in Microsoft IE9 browser

International quotation marks

Styling from Quotation marks to Guillemets & Comillas

Today’s CMS (Content Management System) rely on web text editor APIs, like CKEditor or TinyMCE, to generate, edit and style their post’s contents based on HTML tags. But if those HTML tags are not style properly site editors can generate more bad than good by generating typos in their text.

Inline quotation marks from CKEditor

Here is my handy CSS method to style an HTML quote <q> tag that meets the 3 main North-American languages (culture).

This method is based on the HTML5 language declaration required on the <html> tag.

<!doctype html>
<html lang="fr-CA">
<head>
...

First the language by default; English

q {
    font-style: italic; /*personal design decision*/
}
q::before,
q:lang(en)::before,
q:lang(en-CA)::before,
q:lang(en-US)::before {
    content: "\201c";
}
q::after,
q:lang(en)::after,
q:lang(en-CA)::after,
q:lang(en-US)::after {
    content: "\201d";
}

Then cascading to the French and Spanish version

For your information, the translation of Quotation marks in French is Guillemets VS Comillas in Spanish. To simplify my code and since I never integrated an HTML page for a Spanish customer, I decided that both FR and EN version will benefit of the white space character (unicode \0020) within the <q> tag content.

/* First level of FR and ES quotes */
.fr q::before,
q:lang(fr)::before,
q:lang(fr-CA)::before,
.es q::before,
q:lang(es)::before,
q:lang(es-US)::before,
q:lang(es-ES)::before {
    content: "\00ab\0020";
}
.fr q::after,
q:lang(fr)::after,
q:lang(fr-CA)::after,
.es q::after,
q:lang(es)::after,
q:lang(es-US)::after,
q:lang(es-ES)::after {
    content: "\0020\00bb";
}
/* Second level: FR and ES quotes within quotes */
.fr q q::before,
q q:lang(fr)::before,
q q:lang(fr-CA)::before,
.es q q::before,
q q:lang(es)::before,
q q:lang(es-US)::before,
q q:lang(es-ES)::before {
    content: "\201c";
}
.fr q q::after,
q q:lang(fr)::after,
q q:lang(fr-CA)::after,
.es q q::after,
q q:lang(es)::after,
q q:lang(es-US)::after,
q q:lang(es-ES)::after {
    content: "\201d";
}
Adding functionality to HTML table

HTML table accessibility enhanced with jQuery

Creating a generic JavaScript function (within the AUI project) that would add classname “hover” to visually identify the cell row and column related with the <TD> cell where the cursor is focus.

HTML <table> with enhanced usability

Default table layout

<table class="jTable" frame="hsides" rules="groups">
	<thead>
		<tr>
			<td id="col1" class="first">Header, 1st cell</td>
			<td id="col2">Header, 2nd cell</td>
			<td id="col3">Header, 3rd cell</td>
			<td id="col4">Header, 4th cell</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="col1" class="first">Row1, 1st cell</td>
			<td headers="col2">Row1, 2nd cell</td>
			<td headers="col3">Row1, 3rd cell</td>
			<td headers="col4">Row1, 4th cell</td>
		</tr>
		<tr>
			<td headers="col1" class="first">Row2, 1st cell</td>
			<td headers="col2">Row2, 2nd cell</td>
			<td headers="col3">Row2, 3rd cell</td>
			<td headers="col4">Row2, 4th cell</td>
		</tr>
	</tbody>
</table>

Expected mark-up of the same table when animated layout on “mouse hover” using jQuery

<table class="jTable" frame="hsides" rules="groups">
	<thead>
		<tr class="hover">
			<td id="col1" class="first">Header, 1st cell</td>
			<td id="col2">Header, 2nd cell</td>
			<td id="col3" class="overRelated">Header, 3rd cell</td>
			<td id="col4">Header, 4th cell</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="col1" class="first">Row1, 1st cell</td>
			<td headers="col2">Row1, 2nd cell</td>
			<td headers="col3">Row1, 3rd cell</td>
			<td headers="col4">Row1, 4th cell</td>
		</tr>
		<tr class="hover">
			<td headers="col1" class="first overRelated">Row2, 1st cell</td>
			<td headers="col2">Row2, 2nd cell</td>
			<td headers="col3" class="hover">Row2, 3rd cell</td>
			<td headers="col4">Row2, 4th cell</td>
		</tr>
	</tbody>
</table>

I got an idea after seeing the behavior of that Firefox add-on for “Complex Table Mark-up (com tab) Toolbar” on Vision Australia website.

appstore

iPhone Apps – Mes incontournables

Applications de Apple

  1. GarageBand
  2. Localiser mon iPhone
  3. iBooks
  4. iMovie

Divertissement vidéos et Webtélé

  1. Bell TV et son complément Bell Fibe Remote.
  2. illico.tv pour iPad.
  3. Tou.tv
  4. Vimeo
  5. YouTube (aussi disponible en version iPad)

Divertissement musiques

  1. Ocarina : Une flute virtuelle.
  2. Ringtones : Pour créer des sonnerie à partir des chansons de ton téléphone.
  3. CarTunes Music Player : Pour choisir sa musique dans l’auto avec un minimum de distraction en utilisant un interfaces optimisés.

Fonctionnalités et consommation de vos services

  • Client de Bell Mobilité
    1. Bell Mobility Self serve : Pour gérer votre compte de Bell Mobilité vous même.
    2. Bell Push to talk : Une app qui permet de faire une communication fermée avec un de vos contacts comme dans une radio CB à 2 canaux dans une autre époque.
  • Clients de Rogers
    1. Mon compte (Rogers) : Excellent pour connaître sa consommation des services Rogers AVANT de recevoir un compte $$$$$ à la fin du mois.
      PS: Ça ne fonctionne que par le réseau 3G, donc requiert de fermer son Wifi.

Géographie et GPS

  1. Google Maps : Un incoutournable. La base de donnée de Google est de beaucoup suppérieure à celle de Tom Tom utilisée dans l’application native (Plans) du iOS.
  2. Google Latitude : Partager sa géo localisation avec un/tes contact(s) Google.
  3. Google Earth

Jeux ludiques

  1. Angry Birds (classique)
  2. Angry Birds Go : Une réplique (gratuite) de Mario Kart adapté au thème de l’oiseau faché pour les appareils iOS.
  3. Bubble Shooter Free ou Bubble Shooter Pro
  4. Fragger
  5. Pac-Man lite ou Pac-Man ($)
  6. PopMath Lite
  7. Sheep Launcher Free

Magasinage & Petites annonces

  1. Amazon
  2. Best Buy Canada
  3. DuProprio Mobile : Immobilier.
  4. Future Shop
  5. Jean Coutue : Développement photo et circulaire.
  6. Kijiji
  7. LesPAC
  8. MEC : Coopérative d’article de plein-air.
  9. SAQ
  10. Sears Canada

Outils

  1. Gmail : L’application “stand alone”. Ça peut servir si on souhaite séparer les courriels du bureau des courriels personnels.
  2. Google Voice : Un service gratuit (aux USA) pour synchroniser tous nos numéros de téléphones et boîtes vocales à un seul numéro.
  3. Recherche Google : Recherche vocale et toutes les applications de Google. Un indispensable.

Réseau sociaux

  1. Bump : Permet d’échanger nos coordonnées, comme une carte d’affaire, entre 2 iPhones. PS: Il y-a des histoires de partage accidentels de données, donc pas très conseiller si vous souhaitez protéger votre vie privée.
  2. Facebook
  3. Foursquare
  4. Google+
  5. HeyTell : Échange vocale, comme dans une radio CB à 2 canaux dans une autre époque.
  6. LinkedIn
  7. Skype : Appels et vidéos conférences gratuits.
  8. Twitter : Ce service de partage virale est fortement conseillé car il fait parti intégrante du système d’exploitation (iOS) du iPhone.

Restaurants

  1. Urbanspoon : Pour sélectionner un restaurant.

Transport

  1. Call a taxi (world wide)
  2. GasBuddy : Permet de trouver l’essence le moins cher.
  3. Quebec511 : Liste des traveaux routiers à éviter (avec GPS).
  4. Spotcycle : Trouver des byciclettes en partage (ou location) dans les grande ville, dont le Bixi de Montréal.
  5. STM : Société de transport de Montréal.
  6. P$ Mobile Service : App de Stationnement Montréal pour payer et renouveler votre parcomètres à distance. Paiements par carte de crédit.
  7. TomTom US & Canada : L’app permet de télécharger la carte à l’avance, ainsi on n’a pas besoin de connexion 3G/Wifi pour consulter la carte et on évite de payer des frais de roaming.

Voyage à New-York

  1. TKTS : L’application officielle de l’organisme communautaire Theater Development Found pour se procurer des billets dernière minute d’un spectacle à New-York.
  2. CityTransit – Official NYC Subway Guide : CityTransit features official MTA licensed subway maps and a GPS-based station finder.
  3. NYC Travel Guide – Lonely Planet : Over 700 text-searchable locations are at your fingertips with Lonely Planet’s New York City guide. Online and offline maps along with detailed information about all locations are also available.
  4. NYC 24 Hour KickMap
CSS_inner_border_teaser

Clean inner transparent border in CSS

Pure CSS 2.1, no image sprite in there

Quand j’ai reçu cette maquette du designer je croyais devoir utiliser une énorme image sprite qui contiendrait un contour rouge de 10 pixels, dont la couche (Photoshop layer) serait à 50% de transparence, pour chaque dimensions d’image utilisés dans le site.

Puis j’ai trouver la méthode CSS “:before” & “:after” proposée par Remy Sharp (VagrantRadio) en réponse à la question “Inner Border in CSS?“. Malgré que cette technique ne soit pas supportée par les anciens navigateurs de Internet Explorer (IE8 et moins), puisqu’il ne s’agit que d’un élément graphique, de savoir que c’est supporté et fonctionnel dans IE9, IE10, Google Chrome, Safari et Firefox me suffit amplement pour ce client.

The HTML source

<a class="picture" title="db_ARTICLE_TITLE" href="#">
 <span class="flag">Flag label</span>
 <img src="image/picture_182x102.jpg" alt="db_IMG_DESC" />
</a>

The CSS code

a.picture{
	position:relative;
	width:182px;
	height:102px;
}
.picture:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:162px;
	height:82px;
	border:10px solid transparent;
}
.picture:hover:before{
	border-color:rgba(215,32,23,.5);
}

Références:

Viewport du fureteur Firefox 3.5

Standards de largeur de site

Il est aujourd’hui difficile de décider d’un format d’écran puisque beaucoup d’appareils différents occupent les rapports de ventes des marchands de produits informatiques ; Du gigantesque écran d’ordinateur de bureau aux écrans d’appareils mobiles en passant par la panoplie de netbook, ultrabook etc…

Les bananes avec les bananes

Pour éviter de mélanger les pommes avec les bananes, cet exercice se limitera à calculer une norme de largeur pour les fureteurs “standards”. Cet à dire, en language CSS, aux médias de type screen. Donc les ordinateurs de bureaux et les ordinateurs portables (incluant les netbook) qui utilisent un système d’opération grand public tels que Windows (XP, Vista, 7), Mac OS X ou Linux.

Les contraintes

Viewport du fureteur Firefox 3.5
Voici une liste des contraintes que j’ai considérée pour décider du format final :

  1. Les statistiques compilées par Google Analytics des résolutions d’écrans des visiteurs de mon site ; Soit 1024 x 768 et 1280 x 1024.
  2. La largeur de l’interface du fureteur moderne qui gruge le plus de pixels dans la fenêtre du viewport ; Mozilla Firefox version 3.5 pour Windows XP. Ce fureteur  nécessite 4 pixels à gauche et 21 pixels pour sa barre de défilement (scrollbar) à droite, donc un total de 25 pixels de largeur.
  3. La dimension doit être un nombre paire pour permettre un alignement horizontal parfait.
  4. La dimension doit être divisible par des valeurs paires et impaires pour laisser un maximum de flexibilité au designer pour décider de la grille graphique (sub-division en colonnes avec des marges) qui convient le mieux au style de ses maquettes.

Les standards finaux sont …

  • 996 pixels pour un écran de 1024 x 768.
  • 1248 pixels pour les écrans de 1280 x 1024.

Un premier billet pour la planète

Ça y est ! Depuis le temps que j’instruit un peu tout le monde (clients et amis) sur les bonnes méthodes à suivre pour bien s’afficher sur l’internet… Allez up!

Primo: Au diable l’esthétique ! Avant de décider de la couleur des mûrs je souhaite m’attaquer à produire mes premiers contenus. Question de voir dans quel direction me mènera mon inspiration.

Secondo: … Heeeee … Bien rien finalement. Tout est dans le contenu (à venir).

Artwork of web labor