(OSM) player : Site

FlareVideo : Site

VideoJS : Site

HTML5 Video : Site

Video for everybody : Site

Je n’ai aucun avis tranché sur lequel utilisé, a vous d’aller visiter chaque site et faire votre choix selon vos contraintes.
J’ai quand même un petit faible pour SublimeVideo et videoJS si je ne me trompe pas qui doivent supporter tout les gros browser car ils affichent la vidéo en flash si le navigateur ne supporte pas le HTML5.

No related posts.

Slick Auto-Playing Featured Content Slider Site Démo

Feature list Site Démo

Featured Content Slider Site Démo

JC Play List Site Démo

Content Slider avec jFlow Site Démo

No related posts.

Ces sites m’ont quand même permis de réaliser les logos ci-dessous.
Ca m’a donc bien aidé je trouve :)

No related posts.

No related posts.

Vous pourrez choisir le texte à faire apparaitre sur le ruban, ainsi que sa couleur et sa police.

Vous aurez aussi le choix entre 4 types de ruban avec personnalisation des couleurs.

Voici un petit exemple d’un ruban que je viens de créer.

No related posts.

Ce site est une mine d’or pour y trouver de l’inspiration et la qualité est vraiment au rendez vous. Si vous ne le connaissiez pas je vous le conseille les yeux fermés.

No related posts.

Petite précision avant de commencer, il n’y aura pas d‘apprentissage CSS, en effet l’objectif de l’article est d’apprendre à découper un design.

Premiers étape : détermination des blocs principaux

La première étape consiste à déterminer les grands blocs principaux ; ce sont ces derniers qui structurent votre site.

A première vue on distingue assez facilement trois grands blocs :

<ul>
	<li class="puce">un bloc affichant le logo</li>
	<li class="puce">un bloc pour le menu</li>
	<li class="puce">un bloc pour le champ de recherche</li>
</ul

Ceci est vrai, mais en css, la notion de bloc conteneur est omniprésente.Les blocs conteneurs composent une hiérarchie d’imbrication.
Dans notre exemple on voit bien que j’ai déterminé 4 bloc principaux. Le bloc conteneur global, appelé aussi « parent » contient deux blocs « fils » qui sont la sidebar de gauche et le contenu central.

Pourquoi avoir choisi d’englober ces deux blocs dans un bloc global ?
Tout simplement pour leur appliquer des restrictions.

En effet nous ne voulons pas que les deux calques « fils » puissent prendre une taille supérieure à leur « parent » si le contenu devient trop long par exemple.
La propriété de taille que nous appliquerons au calque « parent » fera que les deux calques « fils » ne pourront être plus large que leur « parent ». (attention à la propriété position bien évidemment)

On voit donc bien que la notion de bloc conteneur est importante , et permet de composer la hiérarchie d’imbrication.

Deuxième étape : codage xHTML/CSS de ces blocs

Comme nous l’avons vu dans notre première étape le fait d’avoir déterminé 4 blocs principaux fait que dans notre code xHTML nous avons 4

dont la structure respectera celle déterminée dans la première étape.

<div id="header"></div><!--fin div header-->
<div id="conteneur-central">
<div id="sidebar-gauche"></div><!--sidebar-gauche-->
<div id="contenu-central"></div><!--fin div contenu-central-->
</div><!--fin div conteneur-central-->

Le code met bien en relief le fait que le div appelé « conteneur-central » qui est le bloc conteneur, comprend bien deux autres blocs « fils ».
Vous pouvez essayer d’augmenter width pour contenu-central et sidebar-gauche et vous verrez que le bloc ne dépassera jamais le conteneur « parent », cela vous permet de voir concrètement le rôle des blocs conteneurs.
Vous pouvez télécharger le design actuel sur le lien suivant design bloc global

Troisième étape : fractionner chaque bloc et codage

Maintenant que l’on a nos gros blocs, on va les fractionner à leur tour.

1) fractionnement du header

On distingue trois parties pour notre bloc header :

<ul>
	<li class="puce">un bloc affichant le logo</li>
	<li class="puce">un bloc pour le menu</li>
	<li class="puce">un bloc pour le champ de recherche</li>
</ul>

Cela va donc induire l’introduction de trois nouvelles balises

et de leur code css pour le bloc « header ».

Vous pouvez télécharger le design actuel sur le lien suivant Bloc + header.

2) fractionnement de la sidebar de gauche

On distingue trois blocs de structures identiques, chacun composés de deux blocs comme on le voit sur l’image :

<ul>
	<li class="puce">un bloc que j’appellerai « l’arrondi grisé »</li>
	<li class="puce">un bloc que j’appellerai « sous l’arrondi grisé »</li>
</ul>

3) Fractionnement du contenu central

Si vous voulez vous exercez à découper en bloc le contenu-central, joignez en commentaire votre image bien départagé et cela permettra d’en discuter.

Décomposez vos blocs parties par parties, et documentez vous sur le CSS et vous verrez que dès que vous avez la logique, le codage n’est pas le plus compliqué, bien au contraire.

P .S : pour le fractionnement 2) et 3) il vous suffit d’afficher le code source de mon site, si cela peux vous aider à avancer.

No related posts.