12 rue de Blénod, 54700 Maidières +33 6 87 42 95 30 Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. Lun-Ven: 8h/12h 14h/17h

Tutoriels sur Joomla et la création de site

blog / tutoriels

Nous proposons à la communauté des tutoriels au gré de nos humeurs, de l'actualité et des besoins.
( n'hésitez pas, par ailleurs à nous en demander)

Sous-catégories

Le blog d'une agence web lorraine

Quelques articles sur l'actualité de Web54 et de ce qu'il se passe au niveau internet en Lorraine

tutoriels frameworks / templates

Tutoriels sur Gantry, Vertex, Helix ... etc ...

(documentation personnelle ou traduction de la documentation originale)

logiciels libres

La création de site internet, necessite des logiciels.
En lorraine, certains créateurs de sites utilisent des logiciels libres et en font la promotion.

Serge Billon en fait partie, et vous fait partager ici, en tant que webmaster reconnu sur Nancy et sa région, sa passion pour les logiciels libres.

tutoriels joomla!

tutoriel reférencement

Référencer un site n'est souvent pas une partie de plaisir, ni une formalité.

C'est pourquoi nous proposons des prestations en référencement, sur forfait ou sur devis personnalisé.

Toutefois, nous tenons à proposer une méthodologie aux clients qui voudraient tenter l'aventure et procéder eux-même à leur référencement.

Suivez les étapes pas à pas, et faites progresser votre site dans les méandres des moteurs de recherche.

tutoriels RS

Tutoriels en français des composants RS

Le Framework Protostar Pour Joomla 3.2

Le template Protostar pour Joomla 3.2 dispose d'un framework par défaut qui permet d'intégrer les positions de module et utilise également le système de grille de Bootstrap pour un design responsive. Ce framework revisé a été mis à jour pour inclure les divisions HTML5 telles que <header>, <nav>, <main> et <footer>.

Si vous enlevez tout le php et extrayez le fichier index.php de Protostar, vous voyez le framework du template comme montré ci-dessous. C'est pour la mise en page statique, avec le <div class="container">. La mise en page fluide a la class="container-fluid" assignée, ce qui permet au conteneur d'être aussi grand que la taille de l'écran et de se réduire proportionnellement. Lorsque vous sélectionnez l'un ou l'autre dans le gestionnaire de templates, il utilise php pour ajouter "-fluid" au conteneur.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<div>

<header role="banner">

<div></div>

<a>

<span></span>

</a>

</header>

<nav role="navigation"></nav>

<div></div>

<div>

<div id="sidebar"></div>

<div id="content"></div>

<div id="aside"></div>

</div>

</div>

</div>

<footer>

<div></div>

</footer>

</body>

</html>

Le style par défaut du tempalte Protostar donne une margin de 20px au container, puis le header et la navigation n'ont pas de largeur particulière attribuées et prennent toute la largeur du conteneur moins le padding. Le logo est situé dans le header.

Le .row-fluid se voit attribuer une largeur de 100%. Il s'agit d'une désignation Bootstrap si les divs à l'intérieur de .row-fluid doivent s' ajouter jusqu'à 12 pour le grid 12 dans Bootstrap. Protostar par défaut assigne .span3 a #sidebar et #aside et attribue à content .span6 pour compléter jusque 12.

Touutes les divs dans .row-fluid avec une désignation .span3 ont une largeur de 23.4043% et .span6 ont une largeur de 48.9362%. Avec la mise en page statique le conteneur a des étapes définies pour sa largeur et les colonnes prennent alors un certain pourcentage de cette largeur. Avec l'agencement fluide, le conteneur est aussi large que l'écran et les pourcentages des colonnes font en sorte qu'ils changent de largeur proportionnellement à la largeur de l'écran. Une fois que la taille de l'écran atteint la gamme des petits écrans comme dans les téléphones, par exemple, la largeur de ces divs est définie sur 100 % et float : none et les divs vont s'empiler verticalement.

Vous pouvez tester cela en réduisant la taille de la fenêtre de votre moniteur, ou par l'outil « voir les modèles adaptatifs » du plugin webdevelopper de firefox.

Joomla 3.2 Protostar : Positions de Module par défaut

Joomla 3.2 est livré avec le template Protostar configuré pour être le template par défaut. Ce template a un minimum de positions dans son framework. Vous pouvez bien sûr modifier les positions de template dans le fichier index.php du répertoire...

Lire → Joomla 3.2 Protostar : Positions de Module par défaut

Protostar et les classes .span

Comprendre comment Protostar utilise les classes .span de Bootstrap

Dans le index.php et la feuille de style template.css livrés avec le template Protostar pour Joomla 3.2, Il existe plusieurs appellations pour les classes .span. Ces classes sont ce qui est...

Lire → Protostar et les classes .span

Protostar@media

Dans la seule et unique feuille de style pour Protostar, layout.css, les appels @media pour Protostar sont les suivants:

@media (min-width: 768px) and (max-width: 979px)
 
 @media (max-width: 767px)
 
 @media (max-width: 480px)
 
 @media (min-width: 768px) and (max-width: 979px)

Lire → Protostar@media

Personnalisation et surcharge de votre template Protostar

Les mises en page responsive sont très importantes, mais un graphiste peut vous remettre une mise en page qui ne fonctionne pas bien avec le template prototype par défaut. Il y a certainement des modifications mineures que vous pouvez faire...

Lire → Personnalisation et surcharge de votre template Protostar

Plus d'articles...

Page 16 sur 39