| Janvier 2012 | ||||||||||
| L | M | M | J | V | S | D | ||||
| 1 | ||||||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 | ||||
| 9 | 10 | 11 | 12 | 13 | 14 | 15 | ||||
| 16 | 17 | 18 | 19 | 20 | 21 | 22 | ||||
| 23 | 24 | 25 | 26 | 27 | 28 | 29 | ||||
| 30 | 31 | |||||||||
|
||||||||||
J'ai enfin créé mon premier tutoriel vidéo basé sur une petite formation jQuery que j'avais effectuée dans le cadre d'une de mes expériences professionnelles.
La vidéo que j'ai réalisée est en anglais (avec un joli fort accent français !) et son but est d'expliquer à un débutant complet comment s'y prendre avec jQuery, en utilisant un exemple très simple.
Cela fait quelques semaines qu'il est en ligne et il n'est pas complètement finalisé mais vous pouvez déjà l'admirer sur ce lien.
C'est mon nouveau site professionnel ! Réalisé avec CMS Made Simple, un CMS que je trouve très pratique à utiliser : en effet, il permet une souplesse incroyable pour le graphisme et ne m'a pas empêché de développer mon site en HTML5 avec un peu de CSS3 et du jQuery !
Puisqu'environ 11% des utilisateurs sont encore sur IE6, il me semble important de tester mes pages HTML sur ce navigateur, aussi obsolète et si peu respectueux des
standards du Web soit-il.
Le problème c'est que, comme vous le savez sans doute, on ne peut pas malheureusement pas installer plusieurs versions d'Internet Explorer sur la même machine. Pour remédier à ça, j'avais même
essayé de remplacer IE7 par IE6 sur mon PC personnel mais en vain car Windows Vista n'autorise pas l'installation d'IE6 sur sa plate-forme (semble-t-il). Donc, comment faire ?
Après avoir étudié plusieurs options, la solution la plus simple que j'ai trouvée est le site spoon.net, qui permet d'utiliser n'importe quel
navigateur via Internet. Il vous faut d'abord télécharger un plugin puis aller sur cette page où vous pourrez ouvrir IE6 et y visualiser
n'importe quelle page Web.
Bien sûr, il est indispensable d'être connecté à Internet pour que cela fonctionne. L'autre inconvénient est que cet outil ne marche pas (encore) sur les Mac : or, c'est quand même souvent quand
on a un Mac qu'on a le plus de soucis pour tester un site sur Internet Explorer...
Ceci dit, je trouve cet outil vraiment très pratique et je pense m'en servir souvent, du moins tant qu'IE6 vivra...
|
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
ol, ul {
list-style: none;
}
#container {
width: 950px;
margin-left: auto;
margin-right: auto;
}
h1 {
color: #06C;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
border-bottom: dotted 1px #003;
margin-top: 20px;
text-align: left;
}
ul li {
display: block;
float: left;
margin-right: 20px;
width: 200px;
background-color:#06C;
line-height: 20px;
}
ul li a {
text-decoration: none;
color: #333;
font-size: 11px;
color: #fff;
font-weight: bold;
}
ul li ul {
display: none;
background-color: #6CF;
line-height: 14px;
}
ul li ul li a {
font-size: 10px;
font-weight: normal;
display: block;
width: 100%;
background-color: #09F;
}
ul li ul li a:hover {
background: #06C;
}
ul li:hover ul {
display: block;
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Un menu déroulant en CSS</title>
</head><body>
<div id="container">
<h1>Mon menu déroulant en CSS</h1>
<ul>
<li><a href="#">Entreprise</a>
<ul><li><a href="#">Histoire</a></li>
<li><a href="#">Philosophie</a></li>
<li><a href="#">Notre équipe</a></li>
<li><a href="#">Nos atouts</a></li></ul>
<li><a href="#">Produits</a>
<ul><li><a href="#">Produits phare</a></li>
<li><a href="#">Nouveaux produits</a></li>
<li><a href="#">Produits du futur</a></li></ul></li>
<li><a href="#">Partenaires</a></li>
<li><a href="#">Contact</a><ul><li><a href="#">Siège
social</a></li>
<li><a href="#">Formulaire</a></li></ul></li>
</ul>
</div></body> < /html> |
| <script type="text/javascript" src="jquery.js"></script> |
|
<script type="text/javascript">
$(document).ready(function(){
$('ul li ul').hover(
function() { $(this).css('display', 'block'); },
function() { $(this).css('display', 'none'); });
});
</script> |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
ol, ul {
list-style: none;
}
#container {
width: 950px;
margin-left: auto;
margin-right: auto;
}
h1 {
color: #06C;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
border-bottom: dotted 1px #003;
margin-top: 20px;
text-align: left;
}
ul li {
display: block;
float: left;
margin-right: 20px;
width: 200px;
background-color:#06C;
line-height: 20px;
}
ul li a {
text-decoration: none;
color: #333;
font-size: 11px;
color: #fff;
font-weight: bold;
}
ul li ul {
display: none;
background-color: #6CF;
line-height: 14px;
}
ul li ul li a {
font-size: 10px;
font-weight: normal;
display: block;
width: 100%;
background-color: #09F;
}
ul li ul li a:hover {
background: #06C;
}
ul li:hover ul {
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('ul li ul').hover(
function() { $(this).css('display', 'block'); },
function() { $(this).css('display', 'none'); });
});
</script>
</head>
<body>
<div id="container">
<h1>Mon menu déroulant en CSS</h1>
<ul>
<li><a href="#">Entreprise</a>
<ul><li><a href="#">Histoire</a></li>
<li><a href="#">Philosophie</a></li>
<li><a href="#">Notre équipe</a></li>
<li><a href="#">Nos atouts</a></li></ul>
<li><a href="#">Produits</a>
<ul><li><a href="#">Produits phare</a></li>
<li><a href="#">Nouveaux produits</a></li>
<li><a href="#">Produits du futur</a></li></ul></li>
<li><a href="#">Partenaires</a></li>
<li><a href="#">Contact</a><ul><li><a href="#">Siège
social</a></li>
<li><a href="#">Formulaire</a></li></ul></li>
</ul>
</div>
</body>
</html>
|
L'un de mes soucis, en tant que Web designer, est le même que beaucoup d'autres professionnels qui développent/produisent pour le Web : mais quand est-ce
qu'Internet Explorer va mourir ????!!! Quand est-ce que je vais pouvoir enfin créer un menu déroulant tout en CSS et sans un seul gramme de Javascript ???!!! Quand est-ce que je vais pouvoir
créer des effets trop coooooool en CSS 3 sur tous mes sites ???? La question se pose tout particulièrement pour IE6 qui est désormais en stade d'agonie mais malheureusement pas encore décédé.
Voilà pourquoi je recherche régulièrement sur le Web des informations concernant les statistiques d'utilisation des navigateurs Web. Cet article du site Browser
Watch se montre relativement optimiste : il nous apprend que 2009 a vu une réelle baisse de l'utilisation d'Internet Explorer au profit d'autres navigateurs mieux adaptés au CSS 3 : Firefox,
Safari, Chrome et Opera. Peut-on crier victoire ? Malheureusement je n'ai pas trouvé d'information précise concernant le partage des différentes versions d'Internet Explorer, IE 6 étant vraiment
une plaie. Heureusement, les statistiques de mes propres sites Web m'informent que, oui, bientôt, il n'y aura plus d'IE6... Hé hé hé...