Comment faire un design extensible (sobre)

Publié le par dans Développement web/Tous les tutoriels vidéos

Dans ce nouveau tutoriel vidéo, vous allez apprendre à faire un design extensible (c’est à dire que le site s’adapte à l’écran, et occupe tout l’espace disponible contrairement à un design fixe ou il y a des marges sur les bords par exemple). Cela a des avantages mais aussi des…

16 commentaires ont été ajoutés, ajoutez le vôtre.

Vous pouvez laisser un commentaire, cependant je ne peux pas vous garantir qu'il sera modéré rapidement ou qu'il aura une réponse, faute de temps pour m'occuper du site.

  1. Meldde

    Slt pourquoi ne pas utiliser placeholder pour eviter d’avoir a effacer le texte (dans la partie commentaire) ?

  2. Nathan

    Merci beaucoup super tuto !

  3. Kazuko

    Merci pour le tuto, sa va beaucoup m’aider!
    Merci encore 🙂

  4. Alicia

    j’ai atte de me voir sur la télé de mon salon alor xd !!
    sniff sais tjr aussi flou je crois que c la version de camstudio qui n’est pas la même que la tienne je fait des test et je te dit merci !!

  5. Alicia

    ah OK j’ai cherché dans propriété vidéo mai j’ai pas trouvé j’ai trouvé que sa :

    Microsoft Vidéo 1
    Codec intel IYUV
    Helix l420 yuv codec
    codec cinepak de radius
    Microsoft MPEG-4 Video codec V2
    Microsoft MPEG-4 Video codec V3
    Microsoft MPEG-4 Video codec V1
    PICVideo M-jpeg 3 VfW Codec
    XviD MPEG-4 Codec
    TechSmith Screen Capture Codec
    Helix YV12 YUV Codec
    DivX 6.8.5 Codec (2 Logical CPUs)

    tu utilise qu’elle version de camstudio, tu fait qualité 100 ou par défaut 75 ?

    oui mai pour que je soi motion maker faudrait que j’ai un travail de qualité comme toi et la sais mal parti en plus de sa sur neufbox de sfr et d’autre FAI en a dailymotion dans sont décoder et en peut voir les vidéo des Motion Maker sur sa télé sais la chaine 200 ta vidéo est bien dans mon salon xd !

    • admin

      C’est le : XVID MPEG-4 et la qualité au maximum 😉
      Sinon pour le statut de motion maker, c’est relativement facile de l’avoir, en fait dailymotion tient plus en compte le fait qu’il n’y ait pas de publicité, pas de musique avec des droits sur la vidéo. Donc a partir de ce principe n’importe quels tutos ou vidéo dans le genre convient 🙂

  6. Alicia

    à je savais pas que ubuntu avais ses effets merci pour astuces, moi j’utilise camstudio sous vista la video est en haut qualité mai dé que je la mais sur dailymotion ses la kata tout est flou j’ai essayé de la convertir en flv pareil, je lé même mise en une définition de 320×240 avec un bitrate de 1.2 mbps comme il le demande mai le résultat est encore pire, tu la convertie en quoi toi kan tu utilise camstudio ?

    • admin

      Lorsque j’utilise camstudio je ne convertie pas la vidéo, par contre j’ai modifier les réglages d’encodages par défauts. Il me semble que c’est du WMV et moi j’ai du mettre en h264 ou un codec similaire.
      Puis j’ai un compte motion maker sur dailymotion donc je bénéficie d’une qualité d’encodage supérieur, ça aide déja :).

  7. Alicia

    merci pour ta réponse sa m’aide déjà bcp plus, sé très dommage que ce soi aussi compliqué sous wordpress parce que les thèmes extensible trouvé ne corresponde pas forcément à mai attente mai qui sais peut être que je trouverai la perle que je cherche , encore merci d’avoir pris le temps de me répondre !!
    j’ai remarqué que pendant la vidéo tu zoomé à un moment tu a utilisée ctrl+ ou sé une fonction du logiciel de screencasts parce que je crois pas que camstudio est cette fonction ?

    • admin

      Pour ce tutoriel j’utilise Ubuntu donc camstudio n’est pas compatible 🙂 En revanche j’utilise RecordMyDesktop.
      Pour ce qui est du zoom, en fait ça fait partie des effets graphiques d’ubuntu (effets graphiques) que j’ai activé, en faisait ctrl + molette de la souris, je zoom sur ce que je veut, c’est pratique pour les tuto 😛

  8. admin

    Bonjour,

    Je me suis permis d’éditter votre commentaire pour colorer le code et le rendre plus lisible.

    Le problème c’est qu’il est beaucoup plus facile de faire un petit site extensible comme dans le tuto que de rendre ou de faire un thème pour wordpress 🙁
    C’est vraiment trés compliqué, et d’ailleurs je n’est jamais fait de thème pour wordpress.
    Le plus simple serait de recherché un thème déjà extensible (fluide), il y en a quelques uns, sur le site officiel par exemple.

    Sinon si vous tenez vraiment a faire un thème extensible, vous pouvez regardé cette vidéo qui montre comment on peu faire un thème pour wordpress en partant de zéro, c’est utile pour comprendre tous le code php de wordpress qui est relativement galère si on ne connais pas 😛 …
    http://www.grafikart.fr/tutoriels/video/creer-theme-wordpress-79

  9. Alicia

    Bonjour !, merci pour ce tuto sa fait des semaine que je cherche je pense avoir trouvé ce que je cherche du moin avoir compris grasse a toi mai toujours dans le flou, je suis sous wordpress comme toi ! mon thèmes est StudioPress ==>http://www.dailyblogtips.com/studiopress-wordpress-theme-released/
    je voudré le rendre extencible 100% pour qu’il soi à la meme taille sur un écran 15 pouce comme un 17 ; 22 … mai je c pas ou je doit metre les 100% 80% … voila le style.css peut tu m’aider ? 

    /*  
Theme Name: StudioPress
Theme URI: http://www.dailyblogtips.com/studiopress-wordpress-theme-released/
Description: A clean, Adsense-ready WP theme.
Author: Daily Blog Tips
Author URI: http://www.dailyblogtips.com/
Version: 1.0
*/

/* Reset Defaults Starts */

* {
  margin: 0;
  padding: 0;
  }

h1, h2, h3, h4, h5, h6, p, blockquote {
  margin: 0;
  padding: 10px;
  }

a {
  color: #215679;
  }

a:hover {
  color: #4C82A6;
  }

blockquote {
  margin: 5px 15px;
  padding: 5px 5px;
  background: #8CB5D8;
  border: 1px solid #3A7CAC;
  }

code {
  color: #3366CC;
  }

a img {
  border: none;
  }


/* Reset Defaults Ends */

body {
  position: relative; /* Fixes browser resizing bug in IE6 */
  margin: 0 auto 10px auto;
  width: 950px;
  font-family: Trebuchet MS, sans-serif;
  text-align: center; /* IE Centering Technique */
  background: #656565 url(images/bgbody.jpg) repeat-x top left;
  }

#wrapper {
  text-align: left; /* IE Centering Technique */
  }

.topcurve {
  margin-top: 15px;
  height: 13px;
  background: url(images/bgtop.gif) left top no-repeat;
  }

.topcurvewhite {
  margin-top: 15px;
  height: 13px;
  background: url(images/bgtopwhite.gif) left top no-repeat;
  }

.bottomcurve {
  margin: 0;
  height: 13px;
  background: url(images/bgbottom.gif) left bottom no-repeat;
  }

.bottomcurvewhite {
  margin: 0;
  height: 13px;
  background: url(images/bgbottomwhite.gif) left bottom no-repeat;
  }

#header {
  margin: 0;
  padding: 0 0 0 0; 
  }

#header .topright {
  float: right;
  position: relative;
  margin: 0;
  padding: 0;
  text-align: right;
  color: #fff;
  }

#searchform {
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
  }

#searchform {
  margin-left: 5px;
  width: 213px;
  padding-top: 8px;
  height: 28px;
  background: #ccc;
  background: url(images/search.gif) left 3px no-repeat;
  }

*:first-child+html #searchform { /* Filter for IE7 */
  padding: 6px 0;
  }

* html #searchform { /* Filter for IE6 */
  padding: 6px 0;
  }

#searchbox {
  margin-left: 5px;
  margin-bottom: 3px;
  width: 150px;
  background: none;
  border: none;
  }

#searchbutton {
  width: 50px;
  background: none;
  border: none;
  }

#searchbutton:hover {
  cursor: pointer;
  }

#underheader {
  clear: both;
  margin-top: 20px;
  padding: 0 0 15px 0;
  }


#underheader h1.sitename {
  padding: 0 0 0 0;
  position: relative;
  font-size: 23pt;
  width: 600px;
  }

#underheader h1.sitename a {
  color: #fff;
  text-decoration: none;
  }

#underheader h1.sitename a:hover {
  color: #4C82A6;
  text-decoration: none;
  }

#underheader h2.sitedesc {
  padding: 0 0 0 0;
  position: relative;
  font-size: 12pt;
  color: #4C82A6;
  }


#underheader #toprss{
  float: right;
  position: relative;
  margin: 0 0 0 0;
  padding: 0;
  text-align: right;
  }

/* Menu */

#nav {
  clear: both;
  margin: 10px 0 -15px 0;
  }

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }

#nav li {
  float: left;
  margin-right: 10px;
  }

* html #nav li a { /* Filter for IE6 to prevent li stacking */
  float: left;
  text-decoration: none;
  }

* html #nav li a span { /* Filter for IE6 to prevent li stacking */
  float: left;
  margin-left: 4px;
  text-decoration: none;
  }

#nav li a {
  display: block;
  height: 26px;
  background: url(images/bgtableft.gif) left top no-repeat;
  text-transform: lowercase;
  font-size: 10pt;
  text-decoration: none;
  }

#nav li a span {
  display: block;
  margin-left: 6px;
  padding-left: 5px;
  padding-right: 12px;
  line-height: 26px;
  font-weight: bold;
  color: #FFF;
  background: url(images/bgtabright.gif) right top no-repeat;
  text-decoration: none;
  }

#nav li a:hover {
  background-position: left -26px;
  text-decoration: none;
  cursor: pointer; /* For IE6 */
  }

#nav li a:hover span {
  background-position: right -26px;
  color: #000;
  }

#nav li.current_page a {
  background-position: left -26px;
  }

#nav li.current_page a span {
  background-position: right -26px;
  color: #000;
  }

/* Main content */

#main {
  clear: both;
  width: 925px; /* Overrides miscalculation in IE6; ignored by other browsers. */
  margin: 0;
  padding: 0 15px 15px 10px;
  background: #fff;
  }

#contentwrapper {
  float: left;
  width: 550px;
  }

#content {
  }

#content .pageTitle {
  padding: 5px 10px 0 10px;
  font-size: 14pt;
  color: #215679;
  }

.contentsearch {
  margin: 0 0 40px 100px;
  }

.contentsponsors {
  margin: 0 0 30px 190px;
  }

.adsense_top {
  text-align:center;
  margin:10px 0 25px 0;
  font-size:9pt;
  }

.adsense_sidebar {
  text-align:center;
  margin:0 0 20px 0;
  font-size:9pt;
  }

.post {
  margin: 20px 0 25px 0;
  }

#content h2, #content h3, #content h4, #content h5, #content h6 {
  padding: 0 10px;
  font-weight: bold;
  }

#content h2 {
  font-size: 14pt;
  }

#content h3 {
  font-size: 12pt;
  }

#content h4, #content h5, #content h6 {
  font-size: 11pt;
  }

h2.homeTitle {
  margin: 0 0 15px 0;
  }

h2.postTitle {
  padding: 0 10px;
  font-size: 14pt;
  font-weight: bold;
  color: #000;
  }

h2.postTitle a {
  font-size: 14pt;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  letter-spacing: -1px;
  }

h2.postTitle a:hover {
  color: #215679;
  }

.postMeta {
  padding: 2px 10px 4px 10px;
  font-size: 9pt;
  color: #333;
  }

.postMeta .date {
  background: url(images/date.gif) left no-repeat;
  padding: 0 0 0 15px;
  }

.postMeta .filed {
  background: url(images/folder.gif) left no-repeat;
  padding: 0 0 0 18px;
  margin: 0 0 0 3px;
  }

.postMeta .commentcount {
  background: url(images/comments.gif) left no-repeat;
  padding: 0 0 0 18px;
  margin: 0 0 0 3px;
  }

.postMeta a {
  text-decoration: none;
  }

.postContent img {
  margin: 10px;
  border: 3px solid #CCC;
  }

#content p, .postContent p {
  padding: 5px 10px;
  font-size: 10pt;
  color: #000;
  }

.postContent ul, ol {
  padding: 0 0 0 35px;
  }

.postContent ul li, ol li {
  font-size: 10pt;
  color: #000;
  }

.postTags {
  margin: 15px 10px;
  font-size: 9pt;
  color: #000;
  background: #eee;
  padding: 2px 4px;
  }

p.comments {
  clear: both;
  padding: 5px 10px 5px 10px;
  }

p.comments a {
  padding-left: 20px;
  background: url(images/comment.gif) left top no-repeat;
  font-size: 10pt;
  text-decoration: none;
  }

.commentlist {
  margin: 10px 0;
  font-size: 10pt;
  list-style: none;
  }

.commentlist li {
  margin: 0 0 10px -25px;
  background: #e8eef3;
  width: 510px;
  }

.commentlist li.alt {
  margin: 0 0 10px -25px;
  background: #FFFFFF;
  width: 510px;
  }

.commentlist cite {
  padding: 10px;
  font-size: 10pt;
  }

.commentlist cite a {
  }

.commentmetadata {
  padding: 10px;
  }

.comment h3 {
  padding: 0 10px;
  font-size: 12pt;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  }

.comment p {
  padding: 10px;
  font-size: 10pt;
  color: #000;
  }

.comment a {
  text-decoration: none;
  }

.comment a:hover {
  text-decoration: underline;
  }

.comment textarea {
  width: 510px;
  }

.comment #submit {
  width: 118px;
  height: 30px;
  background: url(images/commentbutton.gif) left top no-repeat;
  border: none;
  font-size: 9pt;
  color: #333;
  }

.comment #submit:hover {
  cursor: pointer;
  }

.navigation {
  margin: 10px 0;
  color: #406E8D;
  text-align: center;
  font-size: 10pt;
  }

.navigation a {
  text-decoration: none;
  }


/* Start of sidebar */

#allsidebars {
  width:355px;
  float:right;
  }


/* Sidebar top welcome box */

.sidebarswrapper {
  margin-top: 0px;
  padding-top: 9px;
  width: 355px;
  background: url(images/bgsidebartop.gif) left top no-repeat;
  }

.sidebars {
  width: 355px;
  background: #363636;
  }

.sidebars h2 {
  padding: 0 0 2px 0;
  font-size: 11pt;
  color: #fff;
  letter-spacing: -1px;
  }

.sidebars p {
  padding: 2px 0;
  font-size: 9pt;
  }

#welcome {
  clear: both;
  padding: 0 10px;
  }

#welcome a {
  display: inline;
  color: #4C82A6;
  }

#welcome a:hover {
  color:#fff;
  }

#welcome p {
  color: #fff;
  margin-top: 5px;
  padding-left: 70px;
  background: url(images/welcome.gif) left top no-repeat;
  }

.sidebarsbottom {
  clear: both;
  width: 355px;
  height: 18px;
  background: url(images/bgsidebarbottom.gif) left bottom no-repeat;
  }


/* Sidebar 2 columns widget-ready */

.sidebarsB {
  width: 355px;
  margin-top: 15px;
  }

.sidebar1 {
  float: left;
  width: 165px;
  }

.sidebar2 {
  float: right;
  width: 165px;
  }

.sidebarsB h2 {
  padding: 2px 7px;
  font-size: 11pt;
  color: #fff;
  letter-spacing: -1px;
  background: url(images/sidebar_h2.gif) left no-repeat;
  margin-bottom: 3px;
  }

.sidebarsB table {
  width: 160px;
  }

.sidebarsB ul {
  margin: 0;
  padding: 0 0 5px 0;
  }

.sidebarsB li {
  margin-bottom: 20px;
  list-style: none;
  font-size: 9pt;
  }

.sidebarsB li ul {
  padding: 0;
  }

.sidebarsB ul ul li {
  margin: 0;
  padding: 3px 2px 2px 16px;
  color: #222;
  background: url(images/bullet.gif) left 7px no-repeat;
  line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
  border-bottom: 1px dotted #ccc;
  }

.sidebarsB a {
  display: block;
  color: #333;
  text-decoration: none;
  display: inline;
  }

.sidebarsB a:hover {
  color: #4C82A6;
  text-decoration: underline;
  }

.sidebarsB p {
  padding: 2px 0;
  font-size: 9pt;
  }

#tag_cloud a {
  display: inline;
  }

.sidebarsB ul.children li {border-bottom:none;}
.sidebarsB ul.children {margin-bottom:-5px;}


/* Footer */

#footer {
  clear: both;
  padding-top: 0;
  color: #fff;
  text-align: center; /* IE Centering Technique */
  background: #000;
  }

#footer p {
  padding: 0;
  font-size: 8pt;
  color: #fff;
  text-align: center;
  }

#footer a {
  color: #87BBD9;
  }

#footer a:hover {
  color: #fff;
  }

#credits {
  clear: both;
  margin: 0 auto;
  line-height: 19px;
  }


/* Extras */

.cleared {
  clear: both;
  }

.left {
  float:left;
  }

.right {
  float:right;
  }

#nextprevious {
  padding:10px;
  font-size:80%;
  }

  10. Rétrolien: Créer un avatar qui change aléatoirement en PHP « Tutoriels-Video

Réseaux sociaux

2009-2020 - Toutatis by Themes de France