background preloader

Ink – Une boite à outils pour vos interfaces web

Ink – Une boite à outils pour vos interfaces web
Ink – Une boite à outils pour vos interfaces web Si vous développez des sites, je vous invite aujourd'hui à découvrir la boite à outil Ink qui permet de créer rapidement des interfaces web. Tout est parfaitement documenté, et tout semble simple avec Ink. Vous serez capable rapidement de mettre en place le layout de votre choix, puis tous types de menus (verticaux, horizontaux), votre pagination..etc., sans oublier tout ce qui concerne la mise en page textuelle, les listes, les styles, les formulaires, les alertes...etc. Ink vous permettra de gagner pas mal de temps pour construire vos projets web en vous évitant de recoder tous les trucs de base. Vous avez aimé cet article ? Related:  Logiciels création pages HTML

Comment générer une box CSS avec ombre portée Si vous cherchez un moyen de générer de jolis cadres en CSS avec ombre portée et tout le bordel... Du genre de celui-ci : Ne vous prenez plus la tête ! Il existe un super générateur très simple à utiliser. Et hop, c'est tout chaud démoulé, prêt à être intégré dans vos pages web. Rejoignez les 52126 korbenautes et réveillez le bidouilleur qui est en vous Suivez KorbenUn jour ça vous sauvera la vie.. Générer des photos avec votre application mobile dessus Vous développez des applications pour mobile ou tablettes, et vous vous êtes lancé dans la réalisation d'un site pour les promouvoir ? Excellente idée ! Sauf que, si comme moi, vous êtes une brêle en design (ou un egosigner qui refuse de changer de branche), votre site doit manquer un peu d'illustrations sympas pour mettre en avant vos applications. C'est pourquoi je vous ai dégoté un petit générateur de photo baptisé Breezi, sur lequel il vous suffit de glisser déposer une image aux bonnes dimensions (c'est comme le Port-Salut, c'est écrit dessus) afin d'obtenir des résultats comme ceux-ci : Je savais que ça vous plairait ! L'outil est on ne peut plus simple à utiliser et disponible gratuitement ici. Rejoignez les 52315 korbenautes et réveillez le bidouilleur qui est en vous Suivez KorbenUn jour ça vous sauvera la vie..

Brackets – L’éditeur open source d’Adobe Brackets est un éditeur de code open source et sous licence MIT, développé et maintenu par les équipes d'Adobe qui fonctionne aussi bien sous Windows que Linux et Mac OSX. J'en avais parlé l'année dernière et il a plutôt bien évolué. Du coup, j'ai pris un peu de temps pour le tester et je dois dire qu'il est plutôt sympa. Style épuré, léger, et avec quelques fonctionnalités bien pratiques. Par exemple, si vous éditez des CSS, vous pouvez choisir visuellement vos codes couleur. L'autocomplétion est évidemment au rendez-vous, ce qui permet de coder un peu plus vite et surtout, Brackets dispose d'un mode "Aperçu en direct" qui permet de connecter l'éditeur à Google Chrome et de visualiser chaque modification réalisée sur une page web, sans avoir à rafraichir celle-ci. A noter que l'éditeur de texte utilisé par Brackets est CodeMirror. Ce qui est sympa avec Brackets, c'est aussi le support des modules. Brackets est à télécharger ici. Vous avez aimé cet article ?

Home Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery. Exemples Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe : Simon & Comet Flavors me Piz'za-za Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le principe Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré. Préparation de l'image de fond La méthode CSS3 Le code HTML

Cross-browser fingerprinting test 2.0 While we browse the web, most web pages have an interest in observing our behaviour in order to achieve certain business benefits. Read more » For example, they would like to know what kind of content the visitor is interested in, and, more specifically, what to recommend to a user who has already downloaded certain page(s) (e.g. article(s)). Therefore, vaguely knowing users’ areas of interest is often insufficient; most web pages will be interested in the entire course of a visit, and, in the case of returning visitors, they want to know the whole browsing history, too. In order to pull this off, the web server needs to store a personal 'file' about each user, and must be able to identify returning visitors.However, there are certain technical restrictions to such activities, and therefore newer and newer techniques are invented to identify and profile users. For some of these – such as web bugs – it is indispensable to store an identifier on the user’s computer.

UICloud – Le moteur de recherche des designers d’interfaces UICloud – Le moteur de recherche des designers d’interfaces Si vous cherchez des éléments graphiques pour vos pages web, qui sont sous licence Creative Commons, je vous invite à essayer UICloud. Ce site est un moteur de recherche permettant de trouver son bonheur graphique dans plus de 37 000 éléments et 1 600 sets graphiques. De l'interface complète, au bouton "Download" en passant par la barre de progression et la maquette de l'iPhone, si vous êtes designer amateur ou confirmé, vous allez pouvoir faire le plein de PSD. Une excellente idée non ? Vous avez aimé cet article ?

Firefox 10 : Examiner le code avec les outils pour développeurs Depuis de nombreuses années déjà Firefox est doté d’un extraordinaire module complémentaire qui ne manque pas de quotidiennement simplifier la vie aux nombreux développeurs que le navigateur internet compte dans ses fidèles utilisateurs : Firebug. Initialement créée par Joe Hewitt, cette extension vivait un moment délicat cet été à l’annonce du départ de son contributeur principal John J. Barton qui partait se pencher sur la prochaine génération d’outils pour développeurs de Google Chrome. La fondation Mozilla travaille quant à elle sur un projet visant à offrir ses propres outils à destination des développeurs. C’est ainsi que Firefox 10, encore sur le canal Aurora, propose un inspecteur de code dont les fonctionnalités sont similaires à celles de Firebug. Le code HTML est visible dans le volet inférieur surmonté d’un breadcrumb qui permettra d’aisément accéder aux éléments parents et enfants mais aussi frères, respectivement à gauche, à droite et sur l’élément sélectionné.

Expanding Images using HTML5's contenteditable tabindex HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, which opens up some interesting possibilities! We'll exploit this little trick to make an expanding image (like a lightbox without the overlay) right within some content. UPDATE: Even better, you can give attributes a tabindex attribute, like you would a form element, which allow allows :focus without the editability. HTML5 Markup HTML5 has nice elements for including captioned images. <section class="image-gallery"><figure><img src="images/img-1.jpg" alt="jump, matey" /><figcaption">Jump! The Images The CSS Related

Comment éviter d'installer des Adware sur votre ordinateur « Korben Korben Comment éviter d’installer des Adware sur votre ordinateur Lorsqu'on est sous Windows et qu'on adore installer tout un tas de softs étranges, il faut savoir rester vigilant. En effet, certains programmes d'install proposent durant l'installation des toolbars et autres adware qui seront difficiles par la suite à retirer de votre système. En général, on fait attention, et on décoche les cases qui vont bien, mais il suffit d'une fois, d'un petit coup de barre et on laisse passer la toolbar fatale. Mais pourquoi se prendre la tête alors qu'un petit soft peut faire le travail pour vous ? Il s'agit de Unchecky, un service qui tourne en tâche de fond sous Windows, qui détectera automatiquement les logiciels additionnels dans les programmes d'installation et qui décochera les cases qu'il faut pour éviter de se faire polluer. Indispensable à avoir dans sa boite à outils ! Vous avez aimé cet article ?

Sauvegarder une base MySQL sur Dropbox On n'est jamais à l'abri d'un problème de crash de base de données ! Heureusement, pour ça, nous avons des sauvegardes MySQL !!! Mais qui dit sauvegarde dit avoir sous la main un ordi ou un serveur prêt à les accueillir... Ce que tout le monde n'a pas malheureusement. Alors pourquoi ne pas faire vos sauvegardes dans le nuage ? Disons sur Dropbox ? C'est ce que propose ce script PHP qui vous permettra très simplement de faire un export de votre base de données SQL, de la compresser, de le dater, puis de l'envoyer dans le répertoire de votre choix sur Dropbox. Pour configurer ce script, ouvrez le fichier backup.php et éditez les variables suivantes : $dbhost = "localhost"; // Le nom de votre serveur ou son IP. Ensuite, c'est du PHP, donc vous pouvez lancer le script manuellement avec la commande suivante : /usr/bin/php -q /chemin/vers/le/script/de/backup/backup.php Ou programmez son lancement automatique tous les jours avec Cron : Source Vous avez aimé cet article ?

Openweb.eu.org Effet Lightbox en CSS3 grâce à transition Effet Lightbox en CSS3 grâce à transition Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 29 965 fois. C’est en parcourant un lien partagé par Raphaël hier dans la journée, que je me suis décidé à tripoter un petit peu de CSS et HTML pour améliorer le rendu de M. Où cela se passe-t-il ? Vous trouverez les fichiers sur l’espace de test de CreativeJuiz, précisément à cette adresse : Le HTML Le code HTML utilisé est vraiment basique. <figure tabindex="0"> <img src="images/demo1.jpg" alt="Demo" /> <figcaption>Rorschach Artefact</figcaption> </figure> <span></span> <figure tabindex="0"> <img src="images/demo2.jpg" alt="Demo" /> <figcaption>Mystic Light</figcaption> </figure> <span></span> <figure tabindex="0"> <img src="images/demo3.jpg" alt="Demo" /> <figcaption>A simple idea... Le CSS Contenteditable M. À propos de Geoffrey Laisser un commentaire

Related: