Développeur Web RoR

Aller au contenu | Aller au menu | Aller à la recherche

Tag - html5

Fil des billets

mercredi 15 janvier 2014

L'attribut form d'html5

Vous avez peut-être un jour souffert des formulaires en html. html5 introduit une nouveauté l'attribut form, celui-ci permet de placer les input/select/button partout dans votre page web et de leur associer à un formulaire.

<form id="monform">

</form>

<input type="text" form="monform" name="name" value="" placeholder="Votre nom">

Ça peut-être bien pratique croyez-moi.

jeudi 6 juin 2013

Des alternatives à Aloha Editor

En cherchant, je suis tombé sur deux alternatives à Aloha Editor, vous savez cet éditeur html5 qui fait du "content editing".

EtchJs : sous licence MIT, http://etchjs.com

HalloJs : sous licence MIT, http://hallojs.org/

Essayez-les je pense qu'ils valent le coup !

CreateJs (http://createjs.org) permet d'intégrer plus facilement ces éditeurs avec des CMS.

lundi 23 janvier 2012

Les ressources / articles web dev de ces derniers jours

Voici les quelques ressources que j'ai trouvé intéressante ces derniers jours (ça fait office de post-it en ce qui me concerne).

Framework html / css / js : http://www.99lime.com/

jQuery highlighter de code (marche avec Ruby !) : http://steamdev.com/snippet/

Utilisation de VIM : tutorial découverte par Synbioz : http://www.synbioz.com/blog/2012/01/18/l_utilisation_de_vim

Impress.js (Sur la ferme du web) : http://www.lafermeduweb.net/billet/impress-js-creez-des-presentations-de-type-prezi-en-javascript-1273.html

User interface Futurico (attention payant, mais peut être une bonne source d'inspi !) : http://www.behance.net/gallery/Futurico-User-Interface-Pro/2650227

Autre user interface : http://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/

Inspiration de design web : http://www.queness.com/community-news/10453/30-beautiful-web-design-examples-from-behance-and-deviantart

En espérant que cette petite compilation vous servira...

jeudi 12 janvier 2012

Barre de progression en html, css3

Ca vous dit une petite barre de progression (progress bar) ? Certain diront qu'il existe <progress> et <meter> d'html5, c'est juste utilisez-les ! Là il s'agit plus de l'aspect (css) que de la sémantique (html). Donc vous pouvez également utiliser ce css avec les balises sémantique html5...

Voilà pour l'HTML

<div class="barre">
    <div class="progress"></div>
</div>

Voilà pour le CSS3

body{
    background-color:black;
}

.barre{
    height:3px;
    width:300px;
    border-radius:3px;
    border:1px solid #111;
    border-bottom:1px solid #111;
    margin:10px;
}

.progress{
    margin-top:2px;
    margin:0;
    padding:0;
    background-color:#2B85C1;
    height:1px;
    width:200px;
    box-shadow:0px 0px 15px 1px #2B85C1,0px 0px 10px 1px black;
}

Voici le jsfiddle qui va avec : http://jsfiddle.net/yQUHc/2/

mercredi 7 septembre 2011

Le métier de l'intégrateur html

Voici une description illustrée du métier d'intégrateur web, ou développeur front office. J'ai fait la vidéo sans me préparer, c'est pour ça que des fois je me casse la tête sur certains trucs. Elle dure 1h (en réalité il a fallu 3 heures.) Chargez la vidéo en HD et plein écran pour bien voir.  


Intégration html5 css3 par rivsc

J'ai fait un tout petit peu de JS pour dire que j'aurais vu tous les aspects de l'intégration. Mais bon il y a d'autres choses à faire (Tester sur les autres navigateurs/versions, S'intéresser aux interfaces riches FLASH / AIR / SILVERLIGHT, faire du JS un peu plus évolué avec des plugins jquery par exemple, utiliser les CSS transitions, utiliser les font-face, ...).

Le découpage est fait à la truelle, normalement on fait des png avec la transparence, comme ça on peut changer le background comme on veut sans tout retoucher.

Après la fin de la vidéo, J'ai finalisé l'intégration un peu plus proprement (l'élément actif du menu qui passe au dessus, la couleur de fond, les transitions css pour le menu, le design fluide complet).

Ressources utilisées pour ou pendant la vidéo :

Netbeans IDE gratuit et open-source pour php/html/css/js/ruby : http://fr.netbeans.org/

Logiciel pour les screencasts : gtk-recordMyDesktophttp://recordmydesktop.sourceforge.net/about.php

Ubuntu (10.04) toujours pas upgradé le portable... : http://www.ubuntu.com/download/ubuntu/download

Gimp pour les découpages des éléments de la charte graphique (version de dev) : http://www.gimp.org/

Un navigateur internet : Chromiumhttp://www.chromium.org/

Le plugin pendule pour la capture de couleur (colorpicker) et mesure des éléments (ruler) : https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi?hl=fr

Le site internet pour faire ses gradients css3 sans se casser la tête colorzillahttp://www.colorzilla.com/gradient-editor/

Liste des selecteurs CSS w3schoolshttp://www.w3schools.com/cssref/css_selectors.asp

S'il manque des trucs, laissez des commentaires.

La charte était une démo sur un site de template payant. Donc je ne laisse pas les sources. Si vous êtes graphiste ou que vous avez les droits complets sur une charte graphique, je veux bien l'intégrer et laisser les sources , contactez-moi !

vendredi 12 août 2011

Cramp : framework d'application asynchrone et temps réel

Cramp est un  framework d'application asynchrone et temps réel, bon je vous laisse le lien et le soin de matter un peu la doc. Au programme WebSocket et Streaming API. Il est distribué sous forme de gem, que de bonnes nouvelles !

Installation

gem install cramp

Création d'un projet

cramp new myapp

Et c'est parti ! Donc pour plus de détails : http://cramp.in/

mercredi 8 juin 2011

Plugin jquery pour générer des qrcodes avec canvas d'html5

Voici un plugin jQuery permettant d'afficher un qrcode (grâce à jquery et canvas d'html5) sur une page web. L'utilisation est simple :

$('#qrcode').qrcode("this plugin is great");

Appliquer sur un div :

<div id="qrcode"></div>

Lu sur lafermeduweb.net .

Site officiel : http://jeromeetienne.github.com/jquery-qrcode/

- page 1 de 2