p {
	font-family:Georgia;
	font-weight:bold;
	text-transform:uppercase;
	padding: 5px 10px;
	margin: 10px;
	background: linear-gradient(top, #2F2727, #1a82f7);
	color: #fff;
	font-size: 21px;
	line-height: 1.3em;
	border: 1px dashed #fff;
	border-radius: 3px;
	box-shadow: 0 0 0 4px #2F2727, 2px 1px 6px 4px rgba(10,10,0,.5);
	text-shadow: -1px -1px #2F2727;
	}

Voir la démo.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}

Donc:

var zoom = document.documentElement.clientWidth / window.innerWidth;

Furthermore, you should be able to use the onresize event handler (or jQuery’s .resize()) to check for this:

var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
    var zoomNew = document.documentElement.clientWidth / window.innerWidth;
    if (zoom != zoomNew) {
        // zoom has changed
        // adjust your fixed element
        zoom = zoomNew
    }
});

The overview of iPad user experience guidelines listed below is © 2010 Apple Inc. More details on these guidelines and further information on developing for the iPad can be found in Apple’s Human Interface Guidelines for the iPad.

Support All Orientations

Your application should encourage people to interact with iPad from any side by providing a great experience in all orientations. The reason is that people don’t view the device as having a default orientation, because they don’t pay much attention to the minimal device frame and they’re unconcerned with the location of the Home button.

Enhance Interactivity (Don’t Just Add Features)

The best iPad applications give people innovative ways to interact with content while they perform a clearly defined, finite task. Resist the temptation to fill the large screen with features that are not directly related to the main task. In particular, you should not view the large iPad screen as an invitation to bring back all the functionality you pruned from your iPhone application.

Flatten Your Information Hierarchy

Although you don’t want to pack too much information into one screen, you also want to prevent people from feeling that they must visit many different screens to find what they want. In general, focus the main screen on the primary content and provide additional information or tools in an auxiliary view, such as a popover.

Reduce Full-Screen Transitions

Instead of swapping in a whole new screen when some embedded information changes, update only the areas of the user interface that need it. When you perform fewer full-screen transitions, your application has greater visual stability, which helps people keep track of where they are in their task.

Enable Collaboration and Connectedness

Think of ways people might want to use your application with others. Expand your thinking to include both the physical sharing of a single device and the virtual sharing of data.

Add Physicality and Heightened Realism

Whenever possible, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.

Delight People with Stunning Graphics

The high-resolution iPad screen supports rich, beautiful, engaging graphics that draw people into an application and make the simplest task rewarding.

De-emphasize User Interface Controls

Help people focus on the content by designing your application UI as a subtle frame for the information they’re interested in. Downplay application controls by minimizing their number and prominence. Consider creating custom controls that subtly integrate with your application’s graphical style. In this way, controls are discoverable, but not too conspicuous.

Minimize Modality

iPad applications should allow people to interact with them in nonlinear ways. Modality prevents this freedom by interrupting people’s workflow and forcing them to choose a particular path.

Rethink Your Lists

Consider a more real-world vision of your application. For example, on iPhone, Contacts is a streamlined list, but on iPad, Contacts is an address book with a beautifully tangible look and feel.

Consider Multifinger Gestures

The large iPad screen provides great scope for multifinger gestures, including gestures made by more than one person.

Consider Popovers for Some Modal Tasks

If you use modal views to enable self-contained tasks in your iPhone application, you might be able to use popovers instead.

Restrict Complexity in Modal Tasks

People appreciate being able to accomplish a self-contained subtask in a modal view, because the context shift is clear and temporary. But if the subtask is too complex, people can lose sight of the main task they suspended when they entered the modal view.

Downplay File-Handling Operations

Although iPad applications can allow people to create and manipulate files and share them with a computer (when the device is docked), this does not mean that people should have a sense of the file system on iPad.

Ask People to Save Only When Necessary

People should have confidence that their work is always preserved unless they explicitly cancel or delete it. If your application helps people create and edit documents, make sure they do not have to take an explicit save action.

Start Instantly

iPad applications should start as quickly as possible so that people can begin using them without delay.

Always Be Prepared to Stop

Like iPhone applications, iPad applications stop when people press the Home button to open another application.

More details on these guidelines and further information on developing for the iPad can be found in Apple’s Human Interface Guidelines for the iPad.

Source : [UX]Magazine

Une fois notre partie « articles » créée, Il faut télécharger le plugin easyFckeditor.
Pré-requis : Il vous faut Git d’installé pour ensuite télécharger le plugin easyFckeditor.
2 solutions s’offrent à vous : soit l’installer sous forme de gem :
gem install git
ou directement : sous windows avec mysysgit, sous linux en ligne de code :
mkdir mon_git cd mon_git git-clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux-2.6.git
ou sous mac : git-osx-installer

Et voici les 4 étapes magiques :
1 . Téléchargez le plugin script/plugin install git://github.com/gramos/easy-fckeditor.git
2 . Installez le plugin puis redémarrez votre serveur rake fckeditor:install
3. Placez cette ligne de code dans votre layout entre la balise

</p>
<p>
<head></p>
<p>
 ...</p>
<p>
<%= javascript_include_tag :fckeditor %></p>
<p>
...</p>
<p>
</head></p>
<p>

4. Et enfin ajoutez cette ligne dans le fichier app/view/edit.html.erb et app/view/new.html.erb à la place de <%= f.text_area :body %> par :

</p>
<p>
<%= fckeditor_textarea("article", "body", :toolbarSet => 'Simple', :width => '600px', :height => '600px') %></p>
<p>

Et voila ! tout fonctionne. Pour les windosiens, il vous faudra peut-être modifier, si le plugin ne fonctionne pas correctement, le fichier public/javascripts/fckcustom.js. Modifiez

FCKRelativePath = '';

en

FCKRelativePath = '/app';

Ceci fut testé sur Mac et Pc.

Source : T.Hummel, HJ

Tout d’abord nous allons créer un scaffold user et address.
script/generate scaffold user name:string surname:string login:string password:string address_id:integer

script/generate scaffold address street:string postalcode:integer city:string country:string user_id:integer


Ensuite il faut faire une migration de ces 2 scaffolds :
rake db:migrate

Une fois la migration effectuée vous devriez avoir ce résultat dans votre fichier db/shema.rb

<br />
ActiveRecord::Schema.define(:version => 20100520145856) do<br />
<br />
  create_table "addresses", :force => true do |t|<br />
    t.string   "street"<br />
    t.integer  "postalcode"<br />
    t.string   "city"<br />
    t.string  "country"<br />
    t.datetime "created_at"<br />
    t.datetime "updated_at"<br />
    t.integer  "user_id"<br />
  end<br />
<br />
  create_table "users", :force => true do |t|<br />
    t.string   "name"<br />
    t.string   "surname"<br />
    t.string   "login"<br />
    t.string   "password"<br />
    t.integer  "address_id"<br />
    t.datetime "created_at"<br />
    t.datetime "updated_at"<br />
  end<br />
<br />
end<br />
<br />

ps : Le numéro de la version du schéma n’est pas à prendre en compte.

Ensuite nous allons du côté de la vue pour insérer quelques partials, histoire d’éviter la répétition de code (DRY).
On commence par la vue addresses ou l’on va modifier le fichier addresses/new.html.erb, addresses/edit.html.erb et nous allons créer le fichier addresses/_form.html.erb.
( important : le fichier doit forcément contenir « _ » avant le nom pour que le partial le prenne en compte.)

addresses/new.html.erb

<br />
<h1>New address</h1><br />
<br />
<% form_for(@address) do |f_address| %><br />
<%= f_address.error_messages %><br />
  <%= render :partial => 'form', :locals => { :f_address => f_address } %><br />
  <p><br />
    <%= f_address.submit 'Create' %><br />
  </p><br />
<% end %><br />
<br />
<%= link_to 'Back', addresses_path %><br />

addresses/edit.html.erb

<br />
<h1>Editing address</h1><br />
<br />
<% form_for(@address) do |f_address| %><br />
<%= f_adress.error_messages %><br />
  <%= render :partial => 'form', :locals => { :f_address => f_address } %><br />
  <p><br />
    <%= f_address.submit 'Update' %><br />
  </p><br />
<% end %><br />
<br />
<%= link_to 'Show', @address %> |<br />
<%= link_to 'Back', addresses_path %><br />

addresses/_form.html.erb

<br />
<p><br />
    <%= f_address.label :street %><br /><br />
    <%= f_address.text_field :street %><br />
  </p><br />
  <p><br />
    <%= f_address.label :postalcode %><br /><br />
    <%= f_address.text_field :postalcode %><br />
  </p><br />
  <p><br />
    <%= f_address.label :city %><br /><br />
    <%= f_address.text_field :city %><br />
  </p><br />
  <p><br />
    <%= f_address.label :country %><br /><br />
    <%= f_address.text_field :country %><br />
  </p><br />

Vous pouvez vous apercevoir que j’ajoute lors de l’écriture de mon partial :locals => { :f_address => f_address }
Ce qui me permet de passer la variable f_adress dans le partial sinon rails ne le comprendra pas.
Petite modification aussi de la variable f dans <% form_for(@address) do |f_address| %> que j’ai changé pour des raisons qui seront évidentes plus tard.

Maintenant occupons nous de la vue users.

users/new.html.erb

<br />
<h1>New user</h1><br />
<br />
<% form_for(@user) do |f| %><br />
 <%= render :partial => 'form', :locals => { :f => f } %><br />
  <p><br />
    <%= f.submit 'Create' %><br />
  </p><br />
<% end %><br />
<br />
<%= link_to 'Back', users_path %><br />

users/edit.html.erb

<br />
<h1>Editing user</h1><br />
<br />
<% form_for(@user) do |f| %><br />
 <%= render :partial => 'form', :locals => { :f => f } %><br />
  <p><br />
    <%= f.submit 'Update' %><br />
  </p><br />
<% end %><br />
<br />
<%= link_to 'Show', @user %> |<br />
<%= link_to 'Back', users_path %><br />

users/_form.html.erb

<br />
<%= f.error_messages %><br />
<br />
 <p><br />
   <%= f.label :name %><br /><br />
   <%= f.text_field :name %><br />
 </p><br />
 <p><br />
   <%= f.label :surname %><br /><br />
   <%= f.text_field :surname %><br />
 </p><br />
 <p><br />
   <%= f.label :login %><br /><br />
   <%= f.text_field :login %><br />
 </p><br />
 <p><br />
   <%= f.label :password %><br /><br />
   <%= f.text_field :password %><br />
 </p><br />
<% f.fields_for :addresses do |f_address| %><br />
	<%= render :partial => 'addresses/form', :locals => { :f_address => f_address } %><br />
<% end %><br />

Vous pouvez vous apercevoir que je créé un partial dans le partial. Dans mon fichier users/_form.html.erb j’ajoute la ligne <%= render :partial => ‘addresses/form’, :locals => { :f_address => f_address } %> ce qui va me permettre d’aller rechercher un bout de code déjà créé dans la vue addresses. De plus vous pouvez vous rendre compte maintenant pourquoi j’ai changé tout à l’heure la variable f en f_address. Cela évite une confusion avec la variable f du formulaire un peu plus haut.

Une fois la partie vue terminée, occupons nous du modèle. Pour ce faire il suffit d’ajouter 2 lignes dans le fichier model/user.rb

model/user.rb

<br />
has_many :addresses, :dependent => :destroy<br />
accepts_nested_attributes_for :addresses<br />

« has_many « permet de dire qu’un utilisateur peut avoir plusieurs adresses et que celles-ci seront supprimées si l’on supprime l’utilisateur grâce à « :dependent => :destroy« .
Ensuite « accepts_nested_attributes_for :addresses » permet de dire que lorsque l’on va ajouter un utilisateur, rails ajoutera aussi dans la table Adresses la rue, le code postal et la ville de l’utilisateur.

Et enfin pour que la partie adresse du formulaire user soit visible, il faut modifier le controller users.

controllers/users_controller.rb

<br />
...<br />
<br />
def new<br />
    @user = User.new<br />
    @user.addresses.build<br />
<br />
    respond_to do |format|<br />
      format.html  new.html.erb<br />
    end<br />
  end<br />
<br />
...<br />

Voici un exemple de partial :

app/view/new.html.rb

<h2>Ajouter un livre</h2>
<%= render :partial => 'form' %>
<%= submit_tag 'Nouveau' %>

app/view/edit.html.rb

 <h2>Modifier un livre</h2>
 <%= render :partial => 'form' %>
 <%= submit_tag 'Edit' %>
 

app/view/_form.html.rb

<% form_for @livres do |f| %>

  <%= error_message_for 'livre' %>
  <p>
    <%= f.label :name %>
    <%= f.text_field : name %>
  </p>
<% end %>

Ici le partial _form va être appelé pour la page édit et new.
En php, l’équivalent serait include(‘form.php’). Ceci évite la répétition de code.

En ce qui concerne les filtres, la magie de rails opère avec une facilité déconcertante.

Voici quelques exemples :

app/view/application.rb

def  livre_disponible
  if @livre.disponible == 't'
    flash[:notice] = "Vous ne pouvez pas prendre ce livre car il n'est pas disponible dans la bibliothèque"
    redirect_to (:controller => 'livres', :action => 'demande')
  end
end

app/view/livre.rb

class AdminController < ApplicationController
  before_filter :livre_disponible

...
end

Si la personne veut disposer d’un livre et qu’il n’est pas disponible dans la bibliothèque, celui-ci sera prévenu et redirigé vers la page ‘demande.html.erb’

Pour les callbacks (triggers), ils fonctionnent comme les filtres et sont appelés par ActiveRecord après ou avant une sauvegarde/suppression d’un ou plusieurs enregistrements dans la base de données.

ex : before_save/ after_save ou before_destroy/ after_destroy

Source : T. Hummel, H&J

livres_controller.rb

<br />
@livres = Livre.find(:all) # Recherche tous les livres<br />
@livre = Livre.find(:first) # Recherche le premier livre enregistrer<br />
@livre = Livre.find(:last) # Recherche le dernier livre enregistrer<br />
@livre = Livre.find(:id) # Rechercher le livre correspondant à un id<br />

Maintenant à l’aide des fabuleux scopes de rails, nous allons réécrire les mêmes requêtes mais différemment : livres_controller.rb

<br />
@livres = Livre.all # Recherche tous les livres<br />
 @livre = Livre.first # Recherche le premier livre enregistrer<br />
 @livre = Livre.last # Recherche le dernier livre enregistrer<br />
 @livre = Livre.find(:id) # Rechercher le livre correspondant à l'id<br />
 

Vous pouvez remarquer que @livre est parfois au pluriel, parfois au singulier. Ici rien ne vous oblige à plurialiser l’objet @livre cependant la convention et la logique veut que lorsque l’on cherche plusieurs livres on ajoute un s et lorsque l’on cherche un seul élément @livre est au singulier. Tout cela est bien beau mais si nous avons un cas particulier ou les livres doivent être rouges, ou qu’ils doivent être disponible dans la bibliothèque… Eh bien nous allons utiliser les conditions. Celles-ci peuvent s’écrire de différentes manières : livres_controller.rb

<br />
 @livres = Livre.all(:conditions { :couleur => 'rouge'}) # Recherche tous les livres rouges<br />
 @livres = Livre.all(:conditions => {:couleur => ['rouge','vert']}) # Rechercher tous les livres rouges et verts<br />
 @livres = Livre.all(:conditions => ['couleur = ? AND disponible = ?', 'rouge', 't']) #Recherche tous les livres rouges disponibles<br />
 

Vous en voulez encore ? Voici comment on peut modifier l’ordre et faire une jointure avec une ou plusieurs tables : livres_controller.rb

<br />
 @livres = Livre.all(:include => :categorie, :conditions => ['categorie.id = ?, '3') # Recherche tous les livres dans la catégorie 3<br />
 @livres = Livre.all(:include => [:categorie, :auteur] :conditions => ['categorie.name = ? AND auteur.name = ?','roman','Hugo']) # Rechercher tous les livres dans la catégorie <strong>roman</strong> dont l'auteur se nomme <strong>Hugo</strong><br />
 @livres = Livre.all(:order => 'name DESC') #Recherche tous les livres par nom dans l'ordre descendant<br />
 

Sachez que vous pouvez utiliser :joins à la place d’:include mais il faut savoir que la requête prendra plus de temps à s’effectuer.

Source : T. Hummel, H&J

Imaginons que nous possédons une bibliothèque.
Dans cette bibliothèque nous aimerions connaitre tous les livres appartenant aux catégories disponibles dans cette celle-ci.
Dans notre cas nous considérons qu’un livre appartient à une seule catégorie (singulier) et qu’une catégorie possède plusieurs livres (pluriel).
Pour se faire nous allons utiliser :include qui fera la liaison entre les livres et leurs catégories.

app/controllers/livres_controller.rb (controller)

<br /><br /><br />
class FavorisController < ApplicationController<br /><br /><br />
<br /><br /><br />
  def index<br /><br /><br />
    # ici la requète  avec :include<br /><br /><br />
    @livres = Livre.all(:include => 'categories')<br /><br /><br />
  end<br /><br /><br />
<br /><br /><br />
end<br /><br /><br />

app/models/categorie.rb (model)

<br /><br /><br />
class Livre < ActiveRecord::Base<br /><br /><br />
 has_many :livres<br /><br /><br />
end<br /><br /><br />

app/models/livre.rb (model)

<br /><br /><br />
class Livre < ActiveRecord::Base<br /><br /><br />
 belongs_to :categorie<br /><br /><br />
end<br /><br /><br />

Vous pouvez remarquez que dans les modèles , ‘livres’ est au pluriel lorsque l’on utilise has_many et catégorie est au singulier avec belongs_to. Et c’est grâce à ces 2 modèles et la puissance d’ActiveRecord que vous allez pouvoir créez la jointure.Maintenant nous allons exploiter les résultats obtenus dans la partie view. app/view/index.html.erb (model)

<br /><br /><br />
<% @livres.each do ⎮livre⎮ %><br /><br /><br />
  <p>Référence du livre : <%= livre.id %><br /><br /><br />
  <p>Nom du livre : <%= livre.name %></p><br /><br /><br />
  <p>Nom de l'auteur : <%= livre.auteur %></p><br/><br /><br /><br />
<br /><br /><br />
  <p>Référence de la catégorie : <%= livre.categorie.id %><br /><br /><br />
  <p>Nom de la catégorie : <%= livre.catégorie.name %></p><br /><br /><br />
<% end %><br /><br /><br />

Vous pouvez vous apercevoir qu’il est très facile d’exploiter les informations des 2 tables. Ici on va afficher tous les livres présent dans @livres avec l’itération each.

Source : T. Hummel, H&J

L’explication suivante suit une procédure qui fut effectué sur Wamp 2.0 (Apache 2.2.11, Php5.3, MySQL 5.1.36 et PhpMyAdmin 3.2.

1 – Générer la base et les tables

Tout d’abord, copiez le code SQL que vous trouverez dans /scripts/create_tables.sql, présent dans le répertoire /phpmyadmin/.
Ouvrez ensuite une fenêtre SQL dans PhpMyAdmin, puis collez et exécuter ce code.
Cela va vous créer une base ‘phpmyadmin’ et les tables associées.

2 – Editez et modifier le fichier config.inc.php

$cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';
$cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark';
$cfg['Servers'][$i]['relation'] = 'pma_relation';
$cfg['Servers'][$i]['table_info'] = 'pma_table_info';
$cfg['Servers'][$i]['table_coords'] = 'pma_table_coords';
$cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages';
$cfg['Servers'][$i]['column_info'] = 'pma_column_info';
$cfg['Servers'][$i]['history'] = 'pma_history';
$cfg['Servers'][$i]['designer_coords'] = 'pma_designer_coords';
$cfg['Servers'][$i]['controluser'] = 'user';
$cfg['Servers'][$i]['controlpass'] = 'mdp';

3 – Forcer la fonction PMA_getRelationsParam

Dans le fichier librairies/relation.lib.php du répertoire /phpmyadmin/, aller à la ligne 56 et changer la ligne :

if (empty($_SESSION['relation' . $GLOBALS['server']])) {

par la ligne :

if (empty($_SESSION['relation' . $GLOBALS['server']]) || true) {

- Fin des manipulations -

Vous pouvez dorénavant faire votre MCD avec PhpMyAdmin en cliquant sur l’onglet « Concepteur ».

Contrairement à ses ainés, qui se concentrent principalement sur l’aspect sémantique du contenu d’une page, une des révolutions du HTML 5 est qu’il apporte toute une série de nouveautés multimédia aux pages.

Le HTML5 offre un ensemble de composants qui permettent de gérer ce type de contenu sans avoir à faire appel à des plug-ins externes (comme Flash ou Silverlight).

Que ce soit pour la vidéo, le son ou encore le dessin vectoriel, une toute nouvelle gamme de balises ont été incorporées aux spécifications du HTML 5. Celles-ci nous permettent d’accéder à tout un monde auquel on n’osait aspirer tellement le HTML était vu comme un langage statique et faible en interactions.

Le SVG

SVG est un ensemble de spécifications qui permettent de réaliser des graphismes vectoriels à l’aide de fichiers XML.

Un des grands avantages de ce format, c’est que les images SVG sont créées exclusivement à partir de XML et donc, de texte.

Elles sont ainsi éditables à la volée, compressibles et leur contenu est facilement trouvable par un moteur de recherche. Ces avantages font qu’une image SVG est particulièrement adaptée au web.

Un temps destiné à entrer entièrement dans le standard HTML 5 avec sa propre balise <svg>, il n’est pour l’instant plus utilisable que grâce à la balise <embed> (Opera et Safari acceptent également le SVG dans la balise <img>, suite à une demande du consortium s’occupant de la rédaction des spécifications de SVG.

S’il ne fait plus partie intégrante du HTML5, il est cependant important de s’y intéresser, car tous les navigateurs (sauf Internet Explorer), gèrent le format SVG et permettent donc de l’intégrer directement dans n’importe laquelle des pages. L’intégration du SVG dans une page permet des effets intéressants. On peut par exemple interagir avec une vidéo (voir plus loin : la balise <video>) en y appliquant des filtres à la volée.

Un document SVG se présente sous la forme suivante :

	<?xml version="1.0" standalone="no"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

	<svg width="100%" height="100%" version="1.1"
	xmlns="http://www.w3.org/2000/svg">

	<circle cx="42" cy="42" r="40" stroke="black"
	stroke-width="2" fill="yellow"/>

	<circle cx="43" cy="42" r="30" stroke="black"
	stroke-width="2" fill="red"/>

	<circle cx="25" cy="30" r="10" stroke="black"
	stroke-width="2" fill="white"/>
	<circle cx="25" cy="30" r="3" stroke="black"
	stroke-width="1" fill="blue"/>

	<circle cx="60" cy="30" r="10" stroke="black"
	stroke-width="2" fill="white"/>
	<circle cx="60" cy="30" r="3" stroke="black"
	stroke-width="2" fill="blue"/>

	</svg>

Il y a beaucoup de choses à découvrir à propos du SVG, il permet créer des filtres avancés sur les images ainsi que de gérer des animations. Les liens suivants constituent un bon point de départ pour toute personne désirant en savoir plus :

• Tutorial SVG sur w3schools.com
• Articles dédiés au SVG sur dev.opera.com
• Liens vers un bon nombre de démos SVG sur w3schools

Vidéo

Parmi toutes les nouveautés qu’apporte le HTML5, il ne fait aucun doute que celle qui aura fait le plus parler d’elle est la balise <video>. En effet, alors que le SVG est un peu trop technique pour le grand public, c’est <video> qui est la plus représentative de l’alternative aux plug-ins externes type flash ou silverlight pour l’insertion de contenu multimédia dans une page.

Le W3C avait dans un premier temps essayé de standardiser les formats utilisés par cette balise. Ils pensaient que le plus adapté serait un format ouvert qui n’impose de royalties à aucun niveau. Ogg Theora était donc à leur sens la meilleure option, et l’intégration de codecs pour lire les vidéos de ce format a été ajoutée dans les spécifications du HTML5.

Cependant, les différents éditeurs de navigateurs ne voyaient pas la chose du même oeil, en particulier Safari, qui a tout simplement refusé le format Ogg, en disant qu’ils préféraient gérer le H.264.

Le H.264 a ses avantages, comme le fait d’avoir des fichiers plus petits en taille ou d’offrir une qualité vidéo supérieure (même si le Ogg se défend bien de ce côté là. Par contre, H.264 n’est pas gratuit à implémenter pour les navigateurs, et les coûts de licence ont refroidi Firefox et Opera.

De son côté, Google annonce que Chrome supportera aussi bien Ogg que H.264.

Puisque les éditeurs n’acceptaient pas l’idée d’un format unique pour la balise <video>, Ian Hickson a retiré des spécifications la partie qui impose le format Ogg.

On voit ici que Ogg est supporté nativement par trois navigateurs sur cinq, ce qui lui donne une longueur d’avance sur les autres. Il n’est cependant pas trop tard pour H.264 (qui possède un avantage technique sur Ogg) de prendre des mesures stratégiques en rapport avec leur licence qui pourrait changer la donne.

Comme souvent, quand plusieurs formats entrent en conflit, on laisse les deux vivre jusqu’à ce que l’un prenne l’avantage sur l’autre. Ainsi, il ne fait aucun doute que d’ici quelques années, l’un des deux (ou éventuellement un nouvel acteur) s’imposera.

On remarque accessoirement qu’Internet Explorer n’a pas réagi sur cette histoire de format. En fait, il n’a même pas réagi sur l’implémentation de la balise <video>. Si jamais il venait à le supporter, les chances qu’il supporte le WMV sont grandes, mais le doute plane sur le format ouvert qu’il choisira (si jamais il en choisit un). On pourrait même supposer que puisque Silverlight n’est pas vraiment un plug-in externe pour Internet Explorer, il l’utilisera pour gérer la balise <video>.

Voici la façon la plus simple d’utiliser la balise vidéo dans un navigateur qui le supporte.

<video src="chemin vers la vidéo">
Message alternatif à afficher si le navigateur ne supporte pas la balise.
</video>

Ce code très simple permet donc d’afficher une vidéo dans une page web mais le W3C a prévu tout un ensemble d’options permettant une utilisation plus avancée de ce tag.

controls

(true ou false)

En passant cet attribut à vrai, on indique au navigateur qu’on souhaite qu’il affiche des contrôles pour la vidéo (volume, bouton lecture, bouton stop…).

poster

(lien vers une image)

En passant à l’attribut poster un lien vers une image, on indique quelle image le navigateur doit afficher à la place de la vidéo quand celle-ci n’est pas encore lancée ou qu’il y a un problème lors de l’accès à la vidéo.

autobuffer

(true ou false)

Permet de lancer le chargement de la vidéo automatiquement, sans avoir à cliquer sur lecture. Ainsi, lorsque l’utilisateur lancera la vidéo, celle-ci aura déjà pré chargé suffisamment de vidéo pour qu’il n’y ait pas de temps d’attente avant que la vidéo ne commence.

autoplay

(true ou false)

En passant cet attribut à vrai, la vidéo se lancera dès que la page sera chargée, sans attendre d’action de la part du visiteur.

loop

(true ou false)

A la fin de la lecture, si cet attribut est à vrai, la lecture de la vidéo reprendra à zéro

On peut observer qu’il n’est pas indispensable d’utiliser les contrôleurs du navigateur. Ça implique, évidemment, que l’on peut créer ses propres contrôleurs en leur donnant l’apparence que l’on souhaite. Mieux encore, on peut même intégrer sa vidéo dans du SVG et y appliquer des filtres « à la volée ».

L’interaction avec le lecteur se fait grâce à du JavaScript qui peut modifier très simplement les propriétés d’un élément DOM (et lancer des évènements comme la lecture avec la méthode « play() »).

Vous trouverez ci-dessous, quelques liens vers des pages où la balise vidéo est en démonstration. (Tous ne fonctionnent pas avec tous les navigateurs)

• Intégration de la balise <video> dans du SVG avec application de filtres à la volée
• Démonstration de Mozilla de l’association du SVG avec <video>
• Page de présentation de la balise <video> pour Firefox.
• Page de Youtube où les vidéos utilisent la balise <video> au lieu du plug-in Flash
• Page de Dailymotion où les vidéos utilisent la balise <video> au lieu du plug-in Flash.
• Quelques autres exemples sur le site dédié aux développeurs sur Opera.com

Audio

La balise audio, n’est pas quelque chose de complètement nouveau dans le monde du HTML. On se souvient en effet qu’Internet Explorer implémentait la balise <bgsound<, qui permettait de jouer un son en fond d’une page. Ce n’était cependant pas une balise valide et n’était donc compatible avec rien d’autre qu’un Internet Explorer (ce qui à l’époque était nettement moins problématique qu’aujourd’hui).

Aujourd’hui, c’est une véritable balise d’intégration de musique dans le navigateur que le W3C ajoute aux spécifications du HTML5.

De la même manière que pour les vidéos, l’idée au départ était d’imposer un codec à tous les navigateurs, mais ça a été retiré des spécifications, et maintenant chaque navigateur lit les formats qu’il désire.

Navigateur	Formats supportés
Chrome	Ogg Vorbis, MP3
Mozilla (Firefox)	Ogg Vorbis, WAV
Opera	WAV
Safari	Tous les formats supportés par QuickTime Encore une fois, pour le Ogg, il faudra installer une extension à QuickTime
Internet Explorer	<audio> ? bgsound ne vous suffit pas ?

Dans l’état actuel des spécifications, voici à quoi l’utilisation de la balise audio devrait ressemble :

<audio src="mon_fichier_audio.ext" />

On retrouve également le même type d’attributs que pour la balise video : autobuffer pour charger le fichier dès le chargement de la page, autoplay pour lancer le fichier audio dès que la page est chargée, loop pour la lecture en boucle et controles pour utiliser les contrôles fournis par le navigateur.

vous trouverez ci-après, quelques liens vers des démonstrations de la balise <audio>.

• JavaScript Audio Interface : un lecteur musical n’utilisant que des éléments HTML 5 (dont audio)
• La balise audio sur w3schools

Les sources

Comme il est indiqué plus haut, que ça soit pour la balise vidéo ou pour la balise audio, il n’y a pas de format supporté par tous les navigateurs (à l’heure actuelle). Il n’est donc pas facile pour un webmaster de faire son choix dans le codec.

Sans apporter de solution, puisqu’ils se sont effacés du débat des codecs, le W3C apporte quand même une nouvelle balise qui permet, à défaut de fournir un seul format à tous, de fournir plusieurs formats afin que tout le monde puisse lire le format que son navigateur supporte.

La balise <source< permet donc de définir plusieurs origines pour le contenu des balises multimédia.

Le code suivant permet donc de définir deux sources de vidéo pour le navigateur. Si la première ne peut pas être utilisée, que ça soit parce que la vidéo est inaccessible pour que le navigateur n’est pas capable de lire un certain format, alors le navigateur essaiera la source suivante.

<video controller="true">
	<source src="video.mkv" />
	<source src="video.mp4" />
</video>

Tant qu’il n’y aura pas eu d’adaptation d’un unique codec pour tous les navigateurs, les balises multimédia ont pour l’instant assez peu de sens. Cette balise source leur en redonne un peu.

Canvas

<canvas> est assez peu révolutionnaire dans son genre puisque, dans l’absolu, elle ne représente que la bitmap d’une image. Cependant, c’est probablement de cette balise que viendront les démonstrations les plus spectaculaires du HTML5.

En effet, un canvas est complètement manipulable au travers du JavaScript, ce qui permet de créer toutes sortes d’effets et/ou d’interactions avec le visiteur.

Depuis que les navigateurs ont commencé à intégrer cette balise, on a vu fleurir sur internet toutes sortes de démonstrations qui montrent le potentiel de la balise. Du jeu en 3D à une copie de Paint, il y a beaucoup d’espoir qui repose sur cette balise.

• Intégration d’une vidéo dans la balise <canvas>
• Un moteur 3D utilisant <canvas>
• Une sorte de Loco Roco que l’on peut controller avec sa souris
• Canvas Demos.com, un site dédié au <canvas>. Regorge d’exemples, d’articles et de liens
• Un Asteroids en HTML 5
• Torus : Un Tétris en 3 dimensions utilisant

Conclusion

Le HTML5 est décidément plein de surprises et apporte un véritable lot d’évolutions, surtout en comparaison avec l’XHTML qui a suivi le HTML 4. Il se positionne pour un internet moderne, et propose de se libérer des plug-ins externes au navigateur qui dépendent de sociétés tierces et travaillent avec outils fermés et qui rendent donc dépendant de ces entreprises.

Les balises multimédia du HTML 5 ne sont qu’un petit aperçu de ce qui est à venir, et tout programmeur web devrait prendre le temps de regarder attentivement les évolutions des spécifications et suivre les implémentations de chaque nouvelle fonctionnalité dans les navigateurs pour pouvoir les essayer au plus vite. Je pense notamment à la possible implémentation de balises en relation avec la communication réseau de bas niveau qui permettrait d’avoir des relations suivant n’importe quel type de protocole en symétrique et asynchrone.

On est encore loin d’avoir tout vu de ce que le HTML 5 a à nous offrir, et je pense sincèrement qu’on n’a pas fini d’être épatés.

Source : MTI – Epita

Quelques exemples courants:

• Pas de véritables liens : les sous-liens ne peuvent être révélés sans l’aide d’une souris, les utilisateurs de clavier « exclusif » sont donc automatiquement mis hors de portée de l’accessibilité au contenu. Pourquoi ne pas ajouter des indications pour les claviers ?  De cette façon, les menus déroulants n’empêchent pas les gens de naviguer dans le site et peut être vu comme une amélioration pour les utilisateurs « keyboard only ».
• Tabulation « trou noir » : les sous-liens ne sont pas affichés sur le focus mais existent dans l’ordre de tabulation, ce qui les rend accessible techniquement, mais crée également un « trou noir de tabulation » pour les non-utilisateurs de souris. Comme il n’y a pas de retour visuel, sauf si vous utilisez une souris, ils sont extrêmement difficiles à utiliser.

La prochaine fois que vous mettez en place un menu déroulant, s’il vous plaît, assurez-vous d’éviter ces problèmes qui sont corrigibles avec un code HTML simple.
Et le petit plus, c’est mieux pris en compte par les moteurs de recherche, avis aux experts SEO !

Pourquoi une image peut-elle être manquante ? De nombreuses possibilités peuvent générées des images non visibles, problèmes de réseaux et paramètres utilisateurs.
Ci-dessous, voici un CSS qui peut convenir.

1. body {
2. color:#000;
3. background-color:#fff;
4. }
5. #my-element {
6. color:#fff; /* white */
7. background-image:url(my-blue-image.png);
8. background-color:#2f4b8e; /* blue */
9. }

Source : 456BereaStreet

1 – Organisez et planifiez votre journée avec soin entre les tâches prioritaires et secondaires à effectuer en plus des tâches habituelles.
C’est très utile aux mères de famille qui veulent trop en faire et qui finalement manquent l’objectif principal de la journée et qui se dispersent avec des tâches mineures…
En entreprise il faut également se fixer des priorités pour la journée et la semaine… et des objectifs longs termes !

2 – Ne jouez pas aux héroïnes
Si votre belle mère ou votre copine vous demande de l’aide vous n’êtes pas obligée de dire toujours Oui !
En entreprise c’est la même chose, vous devez apprendre à dire non à ceux qui vous demandent de faire leur travail tout simplement car ils ont la flemme ou que vous êtes la “bonne poire”.

3 – Mettez vos enfants à contribution.
En fonction de leurs âges et leurs préférences, confiez leur des tâches (mettre le couvert, essuyer la vaisselle…). Si nécessaire dressez un tableau des “corvées” pour éviter les sempiternels “C’est son tour” ou “c’est toujours à moi de le faire”.
En entreprise c’est tout simplement apprendre à déléguer et à ne pas vouloir tout faire soit même… mais également à être juste et à établir des règles écrites.

4 – Faites vos courses malin.
Faire les courses c’est parfois le stress : place de parking introuvable, enfants qui font des caprices… Profitez donc d’internet pour vous faire livrer chez vous à l’heure qui vous convient même si c’est un peu plus cher !
En entreprise c’est faire appel à des services qui peuvent automatiser vos tâches administrative : service de sauvegarde automatique de votre disque dur, faire une “réunion sandwich” le midi si les agendas sont remplis, commander par internet vos produits au lieu d’aller les chercher…

5 – Prévoyez les imprévus
Prévoir c’est anticiper. Les super mamans ne remplissent qu’à 60% leur planning quotidien pour laisser de la place à l’imprévu sans culpabiliser.
En entreprise vous devez aussi éviter de charger votre agenda à 100% avec des réunions. Planifiez des réunions avec vous-même pour vous réserver des créneaux de travail et de réflexion.

6- Utilisez les services à domicile
Désormais avec le CESU et les déductions d’impôts faire appel à une entreprise d’aide à domicile n’est plus compliqué ni trop onéreux. Vous vous pouvez même demander de l’aide pour 1h seulement.
En entreprise c’est parfois sous-traiter à une agence plutôt que vouloir tout faire soit même (ex: organiser un évènement, faire des impressions couleur…).

7 – Ne laissez pas les objets vous envahir
Une fois par mois faites le ménage: classez ce qui doit être conservé, et jetez le reste… Cela permet de ne plus perdre de temps à chercher dans des placards remplis et de gagner de la place.
Par exemple jetez les prospectus dès réception, faites vos comptes sur internet…
En entreprise vous devez également éviter que le désordre ne vienne perturber votre esprit… Quand un email arrive soit vous le lisez, soit vous le jetez, soit vous l’archivez… Pour vos dossiers en cours, organisez-les via des chemises de différentes couleurs que vous étalez sur votre bureau, vous aurez une meilleure vision de votre travail et vous aurez l’impression de maîtriser vos dossiers.

8 – Planifiez en famille
Utilisez un calendrier où toute la famille pourra indiquer les dates clés : fêtes de l’école, weekend chez les grands parents, anniversaires… Vous éviterez les clashs (tu m’avais promis que tu serais là pour….) et les mauvaises surprises.
En entreprise il faut utiliser les agendas partagés (Outlook, Google Agenda ou ACT!), avec si possible une synchronisation avec votre iPhone ou votre PDA.

9 – Evitez les économies chronophages !
Courir chez le pressing le moins cher à l’autre bout de la ville, chercher le fameux pain au 4 céréales chez le meilleur boulanger… est couteux en temps et en énergie… Privilégiez ce qui est proche de chez vous.
En entreprise il faut savoir se concentrer sur sa valeur ajoutée et consacrer du temps à ce qui va vous rapporter le plus… Cela peut se faire via la sous-traitance, l’organisation de réunion téléphonique ou de visio conférences au lieu d’un premier rendez-vous physique, c’est identifier les affaires qui ont le plus de chance de se concrétiser, c’est automatiser les relances de ses devis…

10 – Dressez la veille au soir la table du petit déjeuner.
Et investissez dans une cafetière programmable qui vous fera le café automatiquement tous les matins…
En entreprise c’est la même chose : vous devez planifier vos journées de travail, mais également mettre en place des chaines de prospection et de fidélisation avec l’envoi automatique de messages, mais aussi la planification d’action dans votre agenda.

11 – Créez-vous un réseau !
Profitez des fêtes de l’école, des réunions de parents d’élèves… pour mutualiser des services entre parents (emmener les enfants à l’école, ramener les enfants depuis le judo…).
En entreprise il est essentiel de travailler son réseau, que cela soit via des soirées networking entre professionnels, un réseau social professionnel… Ainsi vous pouvez mutualiser vos coûts et mettre en place des partenariats : échanges de visibilité, emailings croisés, journées portes ouvertes, matinée découvertes…

12 – Pensez “Lundi c’est ravioli” !
Prévoyez un menu par jour : cela permet de ne pas se creuser la tête, vous prévoyez vos courses et vous faites des repas équilibrés.
En entreprise vous devez planifier des plages réservées à la réflexion stratégique (évolution de votre business, plan d’action long terme…) pour ne pas rester la tête dans le guidon.
Et au contraire vous devez prévoir des actions récurrentes chaque mois afin de rythmer votre activité avec des opérations qui sont simples et faciles à réactualiser (newsletter, promotion…).

13 – Passez quelques minutes à préparer le lendemain avec vos enfants.
D’abord cela rassurera vos enfants sur ce qu’ils auront à faire, et cela leur donnera moins l’impression de tout décider à leur place… enfin cela vous permettra de ne rien oublier !
En entreprise c’est faire une réunion mensuelle avec vos équipes, mais également de faire des réunions individuelles hebdomadaires pour faire un point sur l’activité, refixer les priorités, prendre des décisions…

14 – Etablissez des règles avec votre conjoint.
Faites le point sur ce qui ne marchait pas l’année dernière et trouvez ensemble des solutions pour l’améliorer, et essayez de jouer la complémentarité (inutile que 2 personnes vérifient 2 fois que les enfants sont prêts).
En entreprise il faut faire un entretien annuel pour faire un point sur l’activité d’un salarié et voir les points de satisfaction et les thèmes à améliorer. Mais c’est aussi mettre en place régulièrement des task forces sur des sujets particuliers afin d’avancer sur un sujet précis.

15 – Congélez !
Lorsque que vous préparez des plats complets faites en deux fois plus et congelez le tout. Ainsi vous le temps de préparation sera rentabilisé sur 2 repas, et vous aurez des repas de prêts en cas d’imprévu.
En entreprise lorsque vous réalisez une opération, il est essentiel de réutiliser au maximum ce qui a été réalisé (template d’emailing, salon…) pour le refaire plus tard (en changeant quelques éléments), mais aussi en les ré-exploitant sous différentes formes (ex: un article de blog peut être utilisé via un résumé sur Powerpoint, via une vidéo…).

16 – Anticipez le biberon de la nuit.
Il suffit de le préparer le soir même, de le mettre au réfrigérateur et de le réchauffer au micro onde à 3h du matin…
En entreprise il est essentiel de prévoir un budget supplémentaire pour les opportunités qui pourraient se présenter (publicité, partenariat…). De même vous pouvez prévoir une action sous le coude (ou l’adaptation d’une action existante…) pour la sortir si votre business commence à se ramollir. Enfin vous pouvez faire une veille concurrentielle sur votre secteur, et mettre dans une bibliothèque des idées que vous pourrez réutiliser dans votre secteur d’activité en suivant ce qui se fait ailleurs.

17 – Gardez en permanence un change dans la voiture.
Grâce à cela vous pourrez faire face aux petits imprévus sans devoir faire demi tour pour retourner chercher un change à la maison.
En entreprise lorsque vous organisez un évènement, un emailing… vous devez toujours prévoir un plan B pour parer aux imprévus. Par exemple si votre site plante, vous devez prévoir un hébergement de secours avec un miroir de votre site.

18 – Apprenez à dire non !
Mais il faut le faire fermement, et surtout définitivement !
En entreprise parfois il faut savoir dire non à un client, si vous savez que le client ne va que vous attirer des ennuis, ou si ce qu’il réclame n’est pas rentable pour votre entreprise. Si vous ne pouvez pas dire non, vous devez alors absolument cadrer votre proposition commerciale en délimitant exactement ce que vous allez effectuer comme prestations, et les obligations de l’annonceur (validation, remise des éléments…).

19 – Préparez vos vêtements la veille au soir !
Cela vous permettra d’éviter les caprices des enfants qui ne veulent plus porter un vêtement ou la chasse à la chaussette qui manque !
En entreprise c’est la même chose : préparez votre costume cravate, cirez vos chaussures le jour avant… vous serez prêt plus rapidement le matin et vous serez plus tôt au bureau !

20 – Cultivez l’humour !
Rire c’est très bon pour le moral et la santé, et ensuite c’est un bon moyen de faire obéir ses enfants (”Le premier dans le bain à gagné…”).
En entreprise, plutôt que de s’énerver ou de faire des entretiens de recadrage, jouez également sur l’humour, cela détendra tout de suite l’atmosphère et cela vous évitera que vos collaborateurs ne se braquent à la moindre remarque…

…

Source : ConseilMarketing

Christian Heilmann, nous fait part dans un article traduit par pompage.net, de son expérience en temps que développeur.

http://www.pompage.net/pompe/sept-erreurs-accessibilite-1/

http://www.pompage.net/pompe/sept-erreurs-accessibilite-2/

• Erreur #1 : Croire en des produits sans les avoir testés. Ce n’est pas drôle de découvrir au milieu d’un développement que le CMS n’aide pas vraiment à créer un balisage propre, ou que l’application utilisée crache des contrôles qui sont uniquement utilisables avec une souris.
• Erreur #2 : Prendre trop de responsabilités. Parfois nous donnons l’impression au client que tout ce qu’il a à faire pour créer un produit accessible est de croire en nous ! Nous devrions aider le client à comprendre que lorsque qu’il s’agit de la maintenance du produit, l‘accessibilité est autant de sa responsabilité que de la nôtre.
• Erreur #3 : Prévoir uniquement le pire des scénarios. Trop souvent, nous voyons l’accessibilité comme le fait de faire un design pour le plus petit dénominateur, gardant ainsi en vie le mythe selon lequel les produits accessibles doivent être laids et approximatifs.
• Erreur #4 : Partager les problèmes avec le visiteur. Il est tentant de faire subir à l’utilisateur nos propres problèmes de sécurité. Pourquoi vos visiteurs devraient-ils passer à travers plusieurs étapes d’un processus d’inscription pour vous poser une question ? C’est votre problème si vous recevez du spam !
• Erreur #5 : Essayer de résoudre des problèmes qui sont en dehors de notre domaine de compétences. L’utilisation de gadget par des scripts clients sont-ils appropriés ? L’exemple des gestions de la taille des polices est frappant, car ce sont des fonctionnalités gérees par le navigateur.
• Erreur #6 : Cacher ou écraser des améliorations d’accessibilité/utilisabilité. Les liens ont plusieurs états, tout comme les éléments de formulaires, mais bien souvent, pour des raisons d’esthétisme nous limitons ces états alors qu’ils ont une réelle raison d’être.
• Erreur #7 : Satisfaire votre client, et pas leurs clients. Nous sommes engagés comme des experts, et non pas comme des valets. N’oubliez pas que le meilleur moyen de faire passer vos idées et vos arguments passe par la pédagogie !

Source : Ergonomie Utilisateur

Il n’y a pas qu’un seul type de HTML, il y en a plusieurs : HTML 4.01 Strict, HTML 4.01 Transitionnel, XHTML 1.0 Strict, et d’autres encore. Tous ces types de HTML sont définis dans leurs spécifications respectives (en langage humain), mais ils sont également définis dans un langage compréhensible par les machines, qui précise la structure légale, les éléments et les attributs de chaque type de HTML.

Cette seconde définition s’appelle en anglais « Document Type Definition » (Définition du Type de Document) ou pour faire court, DTD.

Les outils qui traitent les documents HTML (les navigateurs Web par exemple) ont besoin de savoir quelle  DTD tel document (X)HTML utilise : c’est pourquoi chaque document (X)HTML doit commencer par une déclaration DTD comme :

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

Étant donnée sa syntaxe, la déclaration DTD s’appelle souvent, pour faire simple, « doctype ».

Pourquoi ?

Pourquoi préciser un docytpe ? Parce qu’il définit la version (X)HTML dont votre document se sert ; cette information est indispensable aux navigateurs et aux outils qui traitent votre document.

Par exemple, en précisant le doctype de votre document, vous pourrez utilisez des outils tels que le validateur de balisage (Markup Validator) pour vérifier la syntaxe de votre document (X)HTML (et découvrir ainsi des erreurs qui pourraient altérer la façon dont votre page est rendue par différents navigateurs). De tels outils ne peuvent fonctionner que s’ils savent quel type de document vous utilisez.

Plus important : une déclaration doctype épargne à la plupart des navigateurs beaucoup de choses à deviner ; ainsi la page est interprétée dans un mode « standard », dans lequel l’interprétation du document (et donc son affichage) est non seulement plus rapide, mais également cohérente et sans les mauvaises surprises que les documents sans doctype génèrent.

En savoir plus

• Compléter votre site avec un Doctype (Fixing your site with the right Doctype), un article de Jeffrey Zeldman sur le site A List apart
• une liste de doctypes valides pour les documents (X)HTML (list of valid doctypes for (X)HTML documents)

Source : PDimension.net

Comment choisir l’intitulé d’une Url ?

Peut-on l’écrire / la mémoriser facilement ?
Peut-on l’épeler ?
L’intitulé donne-t-il des informations sur le contenu de la page ?

Cela peut apparaitre très basique, mais au vu de nombreux sites qui ne l’appliquent pas, un petit rappel ne fait jamais de mal.

De plus, pour aisément re-écrire une Url, il convient d’utiliser différents paramètres d’Url Rewriting présent dans un fichier .htaccess (sous Apache, bien entendu).
Voici un exemple simple permettant de transformer l’adresse : http://www.monsite.com/test.php en http://www.monsite/test

RewriteEngine on
 RewriteCond %{REQUEST_FILENAME}.php -f
 RewriteRule ^(.*)$ $1.php [L]

La gestion de projet ou conduite de projet est une démarche visant à structurer, assurer et optimiser le bon déroulement d’un projet.
Gérer et animer un projet, être chef de projet c’est d’abord savoir en négocier l’objectif mais aussi mettre en œuvre les compétences et outils de l’analyse fonctionnelle, de planification (WBS, PERT, Gantt), gérer un budget, maîtriser des risques, animer et motiver une équipe-projet tout cela en conciliant les intérêts du maitre d’ouvrage et des parties prenantes.
Les livrables doivent être clairement définis pour un résultat conforme à des normes de qualité, pour le moindre coût et dans le meilleur délai possible.

1. Faire le diagnostic d’un projet

– Le triangle qualité-coûts-délais

Budget = synthèse de toutes les ressources utilisées : salaires, achats, machines, prototypage, prestations externes…
Temps = un projet est limité dans le temps : pénalités de retard, date de fin imposée…
Qualité = spécifications techniques : plus de fonctions, de fiabilité, d’ergonomie…

En pratique…

L’amélioration d’une composante … Par exemple finir plus vite … est possible, mais avec une détérioration des deux autres. Par exemple, pour gagner du temps on dégrade les coûts et la qualité … ou si on veut être plus exigeant sur le livrable … alors il faudra accepter d’attendre et de payer plus cher.
Un projet peut se représenter comme un point dans ce triangle …

– Pilotage et acteurs du projet

A quoi sert un consultant ?

• Agent de changement : – aide à définir des objectifs réalistes en qualité/délai/coût
• Expert : – sur des domaines pointus, apporte des conseils et propose des pistes
• Formateur : – lorsque le consultant n’est pas là, il reste un apprentissage.
• Personne-ressource : – force de travail
• Certificateur : – valide et certifie les compétences acquises
Un consultant se paye et on négocie son apport.

Analyse stratégique des acteurs du projet

Pour tous les acteurs du projet :
– Identifier leurs enjeux :  pourquoi s’est-il impliqué au début ? pourquoi reste t-il impliqué ? atouts et handicaps pour agir sur le projet.
– Stratégie adoptée.
– Le projet est un système d’action.

Ces données sont dynamiques : les comprendre est la responsabilité du manager de projet exploiter la marge de manœuvre cachée, redéfinir certaines composantes du projet, négocier…

2. Comprendre et gérer les ressources humaines

Les différents types de tâches … et leur facteurs-clés de succès
1. Tâches additives : pousser une voiture à plusieurs, risque = « passager clandestin »
2. Tâches communes ou indispensables : cordée, risque = « facteur limitant »
3. Tâches disjointes : réponse à trouver, risque = « importance du champion »
4. Tâches discrétionnaires : brainstorming, risque = « coordination complexe »

La motivation

Par la stimulation : source de motivation extérieure au travail/projet => approche externe
– Approche taylorienne : paiement aux pièces aliénation au travail
Par les besoins : motivation = processus interne de satisfaction
– c’est la fameuse pyramide de Maslow.

La motivation : comment la créer ?

D’après l’approche par les critères, on ne peut donc pas « motiver » quelqu’un, la motivation a une origine interne à l’individu.
• Le management consiste donc à …
– Identifier, puis
– …créer les conditions de la motivation
Plus de « recette » de motivation mais une équation :
Critères + contexte = motivation
– Ne pas mettre quelqu’un dont les critères sont l’apprentissage, la prise de risques, et le travail en équipe sur une mission en solitaire, facile et sans enjeu fort => désintérêt, démission.
Attention à l’effet Pygmalion !

La motivation : comment trouver les critères

Commencer par éclaircir votre propre motivation
– Revenir sur vos expériences vécues, faire de l’introspection
• Comprendre la motivation des autres
– Observer le comportement quotidien : indices
– Écouter, maintenir un contact informel, poser des questions
• De la motivation individuelle à la dynamique de groupe
– Créer une identité de groupe
– Faire émerger les différences crée une dynamique, utiliser les autres groupes comme benchmark
– Dialoguer, décider ensemble,
• Critères partagés + vision de l’avenir => motivations => actions
– L’espace symbolique (nom, logo, rites)
– …

3 – Animer un projet : conclusions

• Revenir périodiquement sur la motivation et ses raisons
– Ne pas perdre de vue le sens et les critères du projet, surtout pour l’équipe
• Ne pas chercher à convaincre ceux qui sont moins motivés
– Mais confier des actions aux hésitants qui leur permettent de s’impliquer (théorie de l’engagement : action > opinion).
• Les règles de fonctionnement et les objectifs sont primordiaux :
– Avoir une charte de travail en commun avant tout
– Ont-ils été construits par tous ? Sont-ils partagés ?
• Le projet traverse différentes phases et doit réussir différents types de tâches
– Savoir s’adapter en conséquence
• Ne pas laisser traîner les décisions et les actions
– Toute réunion donne des objectifs formalisés par un compte-rendu approuvé par tous.
– Jalonner le projet : des livrables précis à des dates précises
– Un retard n’est pas forcément grave, ce qui est grave c’est un retard
• Qu’on « oublie » au lieu de l’expliquer pour traiter le problème
• Qu’on « laisse filer » au lieu de réprévoir une échéance et un livrable
• Les expertises individuelles ne servent que si elles sont « maillées »
– Garder une communication régulière entre les sous-projets
• Valoriser le projet et capitaliser les connaissances au fur et à mesure
– Ne pas attendre la fin… à la fin, c’est trop tard.
• Appréhender un projet, c’est aussi comprendre et gérer un système d’action.
– Construire / entretenir un réseau d’alliés autour du projet. (cf.
analyse stratégique).

Idées à retenir

• Ne pas craindre de « perdre du temps » en étant rigoureux au début d’un projet pour le réussir par la suite
• Un projet peut avoir de multiples objectifs (points de vue, enjeux des acteurs). Identifier le système-client.
• Produire un livrable final n’est pas le seul critère d’évaluation de la réussite d’un projet
– Apprentissages des membres de l’équipe-projet dans tous les domaines (savoir-être…), transmission d’un savoir-faire,
amélioration de l’image, récupération par un tiers, valorisation …

Source : Central Lille, R. Bachelet

1 – Télécharger le menu Dock.

2 – Insertion de code

Voici le code à insérer entre les balises <head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

3 – Configuration

N’oubliez pas de copier ce code avant la balise <body>

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

4 – Ajouter ou retirer un item

Pour ajouter un item dans un menu supérieur.
<a href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Pour ajouter un item dans un menu inférieur

<a href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

Compatibilité des navigateurs

Ce script a été tester avec IE 6, IE 7, Opera 9, Firefox 2, and Safari 2

Source : N.Design Studio

La limite de visibilité est la ligne horizontale d’une page au-dessous de laquelle le contenu n’est plus affiché à cause de la résolution de l’écran.
Apparu sur les journaux papiers aux niveaux de la pliure médiane, elle continue son existence sur le web, au delà de laquelle l’utilisation de la barre de défilement est utilisée.

il en ressort que les démonstrations marketing du siècle dernier ne sont pas celles actuelles.
Pour s’affranchir de cette limite, il suffit de mettre en avant les moyens visuels qui donneront l’envie aux internautes de scroller leurs pages.

Un exemple permettra de s’en convaincre.
La limite de visibilité tombant au milieu d’un contenu de photos et d’images aura un impact direct sur l’envie que l’utilisateur aura de faire défiler sa barre de scroll.

Source : le bon blog SimpleWeb de FredCavazza.
Plus d’infos ? Blasting the Myth of the Fold, Worried about content “below the fold”? Don’t be, Debunking the Myth of the Page Fold in Web Design