About Typography:

Take care about your typography to make better user experience for your readers. How to achieve that?

• Learn more about typography, escpecially about the most often used codes, such as <p>, <h1>, <h2>, <h3>, <img> and <a>.
• This template has valid XHTML, but if you want to keep it like that, you must learn and follow the XHTML principles. Also, if some of your extensions are not XHTML valid, pages based on this component would not be XHTML valid as well (no matter if template itself is valid).
• Familiarize yourself with CSS styles that comes with this template.
• Never copy/paste directly from layout text editors, such as Microsoft Word or OpenOffice. Try to paste text in plain editors first (such as Notepad).
• Use a WYSIWYG editor that comes with Joomla or install a better editor, but always check your code in the editor's HTML mode.

Heading 1

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 3

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 4

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Quote/Citation

Paragraph with Big First Letter

This is a dropcap style applied to a paragraph of text. To use it, apply class of dropcap to your paragraph of text, in example: <p class="dropcap">...some text goes here...</p>. To edit this style, find class .dropcap in CSS stylesheet file template_css.css.

Notice Styles with Background Color

This is a warning message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="warning">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="info">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an error message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="error">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

Notice Styles with Outline

This is a warning message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="warning outline">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="info outline">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

This is an error message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect.
Here's a sample code: <p class="error outline">...your text here...</p>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.

Blockquote

This is an information message you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect. To use this style, wrap your text in blockquote element, like this <blockquote> your content here </blockquote>. The rest of text is just filler. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Legend

Typewriter Style

This is typewriter style you may use in your text. Simply add appropriate class to your paragraphs to achieve this effect. Here's a sample code: <p class="typewriter">...your text here...</p>. This style uses a font with constant width of characters.

Paragraphs Marked with a Number/Letter:

1This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class="p_number">1</span>...your text here...</p>

2This is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class="p_number">2</span>...your text here...</p>

AThis is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class="p_number">A</span>...your text here...</p>

BThis is a paragraph of text marked with a big number or letter. To make such paragraph of text, you should enter number before the rest of the text in the paragraph, and wrap it in span with a class of p_number, like this: <p><span class="p_number">B</span>...your text here...</p>

Code Style

To achieve this style, wrap your content in <code> tag.

#some_style {
  float: left;
  display: block;
}

Unordered and Ordered Lists

Lists with Icons

Inset Styles:

Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.To make such block of text, wrap it into a span with a class of inset-left. Optionally, inside this span you can add another span with class of inset_title for title. Here's an example: <span class="inset_left"><span class="inset_title">Title</span>...your text goes here...</span>. In a similar way, you can align the block of text to the right. Use inset_right, instead of inset_left. Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. If you need to change width or something else in those blocks, you can edit classes .inset_left and .inset_right in CSS stylesheet template_css.css.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.

Font Awesome Icon Set Included

Font Awesome is icon font set that counts over 500 vector icons. The icons are scalable and looks great in all sizes. Also, icon fonts are better for site speed than ordinary image icons because only one file is loaded. You can include these icons in your articles or modules easily by adding this HTML:

<i class="fa fa-CLASS_NAME"></i> content here...

Just change CLASS_NAME with name of any icon listed below.

Web Application Icons

Texte du lien

Ce modèle prend en charge 13 positions. Toutes les positions des modules sont pliables. Si aucun module n'est publié sur certaines positions de module, ces positions de module s'effondreront automatiquement.

Sparky framework vous permet d'ajouter plus de positions de module (si vous en avez besoin) facilement avec la technologie conviviale de glisser-déposer. Pour vérifier cela, ouvrez les paramètres du modèle et accédez à l'onglet Layout Designer.

L'image que vous pouvez voir sur cette page représente une "carte" de toutes les positions de module par défaut de ce modèle.

Adding new module positions and changing existing module positions is easy with Sparky's Layout Editor

Texte du lien

Site Web de conception adaptative

Alors que la conception du site Web continue d'évoluer, une forme fantastique de développement est entrée en jeu. La conception réactive est une méthode de développement d'un site qui est complètement flexible quel que soit l'appareil. Plutôt que de détecter un type de navigateur ou un type d'appareil spécifique, le site Web s'oriente automatiquement en fonction de la taille de l'écran de l'appareil. Une combinaison de reformatage et de ré-optimisation du site dans son ensemble donne une flexibilité pratique au-delà de l'imagination.

La conception réactive, bien que plus coûteuse à développer, est l'investissement de développement le plus judicieux si vous traitez avec un consommateur ou un public cible qui est actif sur les appareils mobiles ou devez effectuer des achats en déplacement. Les achats impulsifs sont évidents, mais cela est tout aussi essentiel pour le contenu des produits tels que les blogs ou les médias.

Voici un excellent article présentant des sites de conception responsive fantastiques.

Qu'en est-il des petites entreprises et du Web mobile?

La navigation mobile, des tablettes aux smartphones, connaît une croissance sans précédent. La passion du consommateur pour la satisfaction immédiate de ses besoins en information nécessite de livrer efficacement son produit (physique ou intellectuel) via le Web mobile.

Qu'en est-il des petites entreprises ou d'une organisation à but non lucratif? Le mobile est-il assez bon? Une organisation doit-elle discuter d'une version optimisée pour mobile? Investir dans un site de design réactif apportera-t-il un retour mesurable?

Excellentes questions avec des réponses que vous seul pouvez fournir. Chaque situation sera différente, mais réfléchissez sérieusement au pourcentage de visiteurs de votre site sur les appareils mobiles? Google Analytics vous le dira. À quoi ressemble votre site actuel? Sortez votre téléphone intelligent et découvrez.

Si vos yeux se sont tournés vers votre smartphone et que vous ne connaissez pas la réponse…. Je suppose que vous connaissez déjà la réponse.

Prêt pour la rétine

Sans devenir trop technique, cela signifie que les périphériques d'affichage Retina affichent plus de pixels par pouce carré, ce qui donne des images plus nettes. Un pixel de périphérique est la plus petite unité physique d'un écran; il existe également différents types de pixels, bitmap, CSS, etc.

POURQUOI DEVRIEZ-VOUS DEVENIR RETINA READY?
Lorsque nous regardons nos écrans, nous pouvons parfois voir les pixels individuels. Essayez de regarder quelque chose comme un coin arrondi CSS ou une image vraiment floue qui est explosée. Vous pouvez voir les petits carrés ou points minuscules qui tentent de constituer l'élément. Les pixels sont extrêmement petits, mais pour un œil averti, comme celui d'un designer, nous pouvons simplement le dire. Nous savons quand nous voyons la pixellisation et nous savons quand les images et les éléments sont tout simplement laids.

Le problème n'était pas énorme avant que des choses comme la conception réactive et la nécessité d'adapter une chose à plusieurs tailles de navigateur ne se manifestent. Avant, vous veniez de le gérer parce que votre navigateur, quel que soit votre emplacement, allait montrer exactement ce que vous lui aviez demandé de montrer. Maintenant, avec un design réactif et le fonctionnement des tablettes et autres appareils, je peux pincer une image pour la réduire ou appuyer deux fois sur mon écran pour augmenter la taille de la page.

Sur les sites Web qui ne sont pas prêts pour la rétine, les pages seront terriblement pixélisées et floues dans leur état normal ainsi que lorsque la taille des pages augmente. Les sites Web prêts pour la rétine, ainsi que les appareils, vous permettent de voir plus de pixels par pouce carré. Par conséquent, votre œil exercé voit une image ou un élément très lisse et de haute qualité et aucune distorsion. Se préparer à la rétine se fait avec du CSS et du Javascript. Cependant, pour les images, elles sont créées au moins deux fois plus grandes qu’elles seront affichées en ligne.

AVANTAGES DES SITES WEB RETINA READY
1. Images plus nettes: comme nous l'avons déjà mentionné, l'idée de la technologie prête pour la rétine est de nous donner des images plus nettes. L'idée derrière Retina Ready est de créer quelque chose qui serait aussi net que sur papier. Les couleurs sont vives et lumineuses car vous obtenez plus de pixels par pouce sur les appareils prêts pour la rétine. C'est essentiellement comme la haute définition pour votre ordinateur portable, votre téléphone ou votre tablette.

2. Meilleure esthétique pour réactif: Encore une fois, nous avons abordé l'idée que vous obtenez une meilleure qualité d'image. Ce que certains ne savent peut-être pas, c'est que la création d'un site Web prêt pour la rétine permet des polices plus nettes. Lorsque nous zoomons parfois sur des pages Web sur des sites Web, nous finissons par étirer certaines polices qui ne peuvent pas être étirées. Beaucoup de ces polices ne doivent pas être utilisées de cette manière et nous donnent le même aspect pixelisé que nous pouvons obtenir de certaines images.

Les sites Web prêts pour Retina aident à lisser les polices. Certaines polices sont également préparées pour les sites prêts pour la rétine et conservent leur qualité d'image lors d'un zoom avant (ou même arrière) sur les appareils de la rétine.

3. Concevoir avec encore plus de détails: je crois que le minimalisme est devenu très populaire car c'est un concept simple à comprendre et à concevoir. L'idée est de rester le plus propre possible et de se débarrasser des peluches. De temps en temps, il y a des détails subtils jetés dans ces types de thèmes, ainsi que d'autres qui sont parfois difficiles à voir sur les écrans réguliers. Les appareils Retina ne sont pas seulement utiles dans leur projection d'image de haute qualité mais aussi dans la luminosité de leur écran.

4. 30 millions de personnes pensent que votre site est laid: votre site web souffre dès cette minute si vous n'êtes pas prêt pour la rétine. Plus de 30 millions d'utilisateurs ont acheté ces appareils Apple dotés de cette fonction d'écran plus net. Lorsqu'ils consultent votre site, les images sont pixellisées, les polices sont difficiles à lire et dans l'ensemble, il y a probablement une mauvaise esthétique. Si vous savez que votre public est probablement le même que celui qui possède ces appareils, il est peut-être temps d'aller de l'avant et de préparer votre site pour qu'il soit prêt pour la rétine.

TUTORIELS ET RESSOURCES

Retina.js

Retina.js est un script JavaScript qui vérifie votre serveur pour voir si vous avez des images haute résolution disponibles sur votre site Web. Par exemple, si vous disposez à l'origine de picture.jpg, pour qu'il soit prêt pour la rétine, ils recherchent cette image que vous avez téléchargée et qui a le double de la taille et doit être nommée en conséquence. Cela résout une grande partie du problème avec les images haute résolution.

Texte du lien

Num accumsan. Maecenas tempor pellentesque dolor, ut vehicula justo luctus a. Nullam neque nulla, rutrum ac volutpat in, dapibus quis justo. Entier

Ce modèle possède un menu supérieur basé sur jQuery à chargement rapide avec des sous-menus imbriqués. Le sous-menu s'ouvre lorsque vous passez la souris sur l'action. Les fichiers Core Joomla ne sont pas piratés. Diverses options de menu sont disponibles pour tous les menus que vous créez dans Joomla. Vous pouvez changer les couleurs, les polices, les tailles et les autres paramètres du menu pour chaque menu.

Sparky Framework prend en charge plusieurs options de menu, telles que le menu déroulant (comme le menu supérieur de ce modèle), le menu accordéon, le menu horizontal et le menu Joomla classique. Chaque type de menu a ses propres paramètres et options spécifiques.

Texte du lien