Schnaps.it, le générateur de template HTML5

Outil par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (34238 lectures)
Tags : schnapsum, ipsum, lorem, schnapsit

Alsacréations est fier de vous annoncer la naissance de Schnaps.it, notre nouvel outil de génération de code HTML / CSS !

Schnaps.it

Combinaison de plusieurs outils existants (KNACSS,  Schnapsum et Squelettor), Schnaps.it offre une palette de fonctionnalités lorsque vous débutez un nouveau projet web :

  • il permet de construire un squelette HTML vide très rapidement
  • il offre la possibilité de concevoir des gabarits de mise en page simple (une, deux, trois colonnes, hauteurs identiques, etc.) basés sur le mini framework KNACSS
  • il propose du faux-texte "Lorem Ipsum" en version alsacienne provenant de Schnapsum.

Le générateur de gabarits permet d'affiner certains réglages visuels des différents éléments (largeur, marges internes, marges externes, alignement de texte, etc.).

Une fois vos réglages effectués, il ne vous reste plus qu'à récupérer l'ensemble des fichiers en un clic !

générateur HTML

Un grand merci à Laetitia Bonanni, stagiaire dans l'agence Alsacréations pour ce joli travail réalisé tant du point de vue graphique que technique !

Commentaires

sumbobyboys a dit le

Super ce petit outil ! Par contre, faites attention aux espaces mélangés aux tabulations dans les fichiers html générés !

Manumanu a dit le

Et merdouille, j'étais en train de bosser sur un projet similaire. :(

Bon boulot ;)

Geoffrey C. a dit le

Bien joué Laetitia ! C'est du bon boulot !

Stéphanie W. a dit le

Notre stagiaire en chef elle roxx :)

Aldarone a dit le

Ça va beaucoup servir !

Une petite remarque par contre, en recevant le zip, le content-type est à "txt/html" alors qu'il devrait être à "application/zip" du coup certains navigateurs vont essayer de l'afficher au lieu de le télécharger.

colibrilibre a dit le

Très simple, c'est propre.

En regardant la façon dont on change les margin, ne serait-ce pas plus adapté de mettre un slider ? C'est plus intuitif je pense, non ?

En tout cas bon boulot !

karlcow a dit le

L'outil semble créer un gabarit sur la notion de présentation (layout), est-il possible d'associer aux boites et liens des valeurs sémantiques: élément spécifique, class, id, rel, meta, link.

gromb57 a dit le

Petit bug pour le 1er Gabarits sur trois colonnes :

- en choisissant margin : aucune
- puis padding aucun
- puis choisir un autre padding, le padding ne change pas dans le gabarit(étape 2)

Raphael a dit le

Merci pour vos retours de bugs, on va s'y atteler !

@karlcow : pourrais-tu préciser ce que tu veux dire exactement ?
Pour ce qui est des éléments, on a essayé de choisir les tags les plus "sémantiques" possibles (header, footer, nav, etc.).

Par contre je ne saisis pas où tu veux en venir avec "class, id, rel, meta, link". Ces attributs existent dans le code produit.
Si tu veux dire que le choix de nommage d'une classe telle que "txtleft" n'est pas "sémantique", je te l'accorde... mais c'est quoi une "classe sémantique" ?
http://blog.goetter.fr/post/31193037773/css-l...

franek a dit le

Juste une petite remarque, la page générée fait appel à
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Pour des questions de performance, il est conseillée de ne pas utiliser ce script :
1- Il est hébergée sur un dépôt de source (donc pas d'entête de cache)
2- La dernière version à jour est désormais sur github https://github.com/aFarkas/html5shiv

Il y a un article qui explique bien le problème :
http://zoompf.com/2012/05/html5shiv-and-servi...

Bonne soirée,

Raphael a dit le

@franek : oui tu as raison.
Après hésitation, on a préféré faire ce choix parce que dans le cas contraire - comme tous les outils automatiques qu'on utilise sans chercher plus loin - , il y aurait un lien de type "/js/html5shiv.js" ... et 90% des utilisateurs ne penseraient pas à faire la démarche de télécharger le fichier chez eux.
On va peut-être faire un warning à ce sujet.

karlcow a dit le

@Raphael : ah non non, le choix des class que vous utilisez pour le framework est une chose. Ce que je veux dire c'est de pouvoir nommer les éléments avec les class/rel/element/id de son choix pour extraire l'information. Les "class" n'ont pas été faits pour CSS, CSS utilise les 'class'. Donc votre outil semble faire assez bien la partie layout mais ne permet pas semble-t-il d'ajuster le gabarit à ses propres besoins.

Ce n'est pas grave, je voulais savoir si vous y aviez pensé. Je vais continuer à chercher.

Merci pour la réponse rapide.

Raphael a dit le

@karlcow : "votre outil semble faire assez bien la partie layout mais ne permet pas semble-t-il d'ajuster le gabarit à ses propres besoins"

Pourrais-tu détailler ce point important ? Voire apporter des exemples concrets de ce qui pourrait être amélioré, modifié, banni ?

Raphael a dit le

@gromb57 : résolu :)

Gili a dit le

Bravo Laetitia ! :-)

_laurent a dit le

Ça c'est du Stagiare ++ !!!

jojaba a dit le

Ouahh, génial !!!
Merci beaucoup ! Question bête : je n'ai pas vu de balises article, section, hgroup, ...
Pour des raisons plus "pédagogiques" il serait intéressant de les rajouter non ?

Raphael a dit le

@jojaba : il y a les éléments nécessaires à la construction du gabarit (header, aside, nav, footer).
Il est vrai qu'on n'en a pas "fait de trop" volontairement parce qu'on ne peut pas "deviner" de quoi sera fait le contenu, ... et surtout pas de hgroup qui ne fait déjà plus partie des spécifications ;)

Epok75 a dit le

Outil très performant et très agréable à utiliser. Par contre, lorsque l'on définit le margin et le padding d'un bloc à 0, on ne peut plus le sélectionner.
Ça pourrait être intéressant de placer dans l'éditeur de bloc un lien vers le bloc parent.

Un grand bravo à Laetitia

billy101 a dit le

Un outil très intéressant pour les designers

cedric7693 a dit le

Hello :)

Merci pour cet outil. Je débute dans l'intégration et je dois dire que c'est bien pratique.
Par contre j'ai constaté un bug (lié au choix du doctype ?)
En choisissant le doctype XHTML 1.0 STRICT, le fichier HTML généré mélange les balises, on sent que HTML5 veut faire sa place !

Par exemple, la balise <div id=header"> se ferme avec la balise </header>,
la balise <div id="navigation"> se termine par la balise </nav>. Pareil pour la balise <div id="section"></section> et <div id="footer></footer>.

Le problème a-t-il été signalé ?

dew a dit le

Merci pour ce signalement, le bug devrait être à présent corrigé.

Gixxer a dit le

Bravo ! très sympathique ! et rapide...

cedric7693 a dit le

@dew :

je confirme. Merci pour votre réactivité.

Newzic a dit le

Sur www.schnaps.it en ne touchant à rien, en cochant seulement google analytics mais sans y entrer un id de suivi, le code se termine ainsi :
</script>;
</body>
</html>
Y'aurait pas un ; en trop après <script> ?
Et au passage, le terme "ID de suivi" serait plus approprié que le terme "Code" (Google parle toujours de son "ID de suivi" sur Analytics, pour le fameux UA-XXX).

dew a dit le

C'est rectifié, merci pour le bug report.

vin100 a dit le

bonjour, je me demande s'il n'y a pas une erreur au niveau de la première classe conditionnelle :

<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->

"si inférieur ou égal à IE7" et pour tant la classe ie678 est ajoutée ; je pense que cela devrait être ie67

par ailleurs on as ensuite :
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->

pour suivre la logique, est-ce qu'il ne devrait pas y avoir une classe ie6789 ?

Plus globalement, je trouve que le modèle HTML5 Boilerplate est intéressant :
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

vin100 a dit le

en combinant les deux approches (et si je ne me trompe pas), on peut arriver à quelque chose comme ça :

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7 ie67"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 ie8 ie678"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 ie6789"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

nathan52 a dit le

Bonjour,

Superbe outil.
Je débute dans la création et j'apprends à me servir de dreamweaver.
Donc j'ai chargé le deuxième modèle.
J'ai entièrement suivi le processus mais c'est en ouvrant la page d'accueil sur dreamweaver que j'ai un problème
Il n'y a pas les cadres et par exemple mon meneu de navigation au lieu d'être horizontal et vertical.
Comment faire, merci.

Nathan

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Vous identifier (déjà inscrit)

Nouvel inscrit

Être inscrit sur Alsacréations vous permet de :

  • participer à la communauté
  • intervenir sur les actualités
  • créer des sujets sur le forum et y répondre
  • participer aux concours
  • vous inscrire à des événements tels que la KiwiParty
  • publier votre profil

Indiquez un e-mail valide pour recevoir votre mot de passe :

Votre adresse e-mail restera strictement confidentielle, ne sera ni divulguée à un tiers ni spammée.

Annonces par e-mail

Souhaitez-vous recevoir les newsletters officielles par e-mail ?   Fréquence d'envoi : tous les 3 à 6 mois, annulation possible à tout moment

En vous inscrivant, vous confirmez accepter les règles d'utilisation.

Retour à l'accueil