Ctrl Alt Geek » Tuto vidéo #1 : Découverte du bootstrap de twitter! J’inaugure aujourd’hui le premier tutoriel vidéo du site réalisé par mes soins. Il n’est pas encore dit que je fasse une série de tutoriels (même sur le #1 semble indiquer l’inverse ), mais c’est une facette que je n’ai jusqu’alors jamais testée. Il était donc temps pour moi de m’essayer à cette pratique pour vous faire découvrir aujourd’hui le bootstrap Twitter! Je me suis donc équipé de quelques logiciels (j’y reviendrai dans un prochain article) pour réaliser ce premier tutoriel vidéo, premier d’une longue série je l’espère! Késako? Le bootstrap Twitter, qu’est-ce? Il ne restera plus ensuite qu’à intégrer le design de votre site pour avoir un résultat très satisfaisant et propre! Ce kit permet également de réaliser facilement et rapidement un template correct et propre de votre site répondant même si vous le souhaitez à l’effet de mode « Responsive webdesign » (j’y reviendrai dans un prochain article). Présentation et découverte du bootstrap Twitter en vidéo!
Un site Web de 1000 ans Le grenier d'une grand-mère, la boîte à chaussures pleine de photos dans un placard ou tout simplement les étagères de nos bibliothèques : nous collectionnons de très nombreux objets physiques. Ces porteurs d'informations sont des éléments de notre mémoire personnelle et collective. Ils nous aident à créer du lien affectif, à transmettre des émotions mais aussi de la connaissance. La gestion de la mémoire (ou l'archivage) prend lieu à tous les niveaux structurels, du souvenir d'enfance à l'information d'une multinationale. Organisation de l'information dans le monde physique Nous avons appris dans le monde physique à gérer cette information par la création de stratégies adaptées à notre environnement. La refonte du site Web, cette catastrophe périodique Au cours de la vie d'un site Web, il est régulier d'entendre le mot « refonte » dans les équipes ou l'agence Web qui doivent gérer le site. L'information nouvelle sera de nouveau obsolète d'ici quelques mois, quelques années.
Designing Headers Designing Headers Languages: English • 中文(简体) • Русский • 한국어 • (Add your language) They say you can not judge a book by its cover, and yet every day people do. They pick up a book, look at the cover, and then are moved to either put it down, turn it over, or open it up just because of how the cover looks. Websites are also judged by their covers and the first impression often comes from the header. The header of your site is typically the first thing people see. We are going to take you inside the architecture of a WordPress header and offer tips on how to customize it to become your own book cover, enticing people into your site with a good first impression. The WordPress Header By default, the WordPress header is a simple piece of code. In its simplest form, the WordPress Classic Theme features the header code like this in the wp-content/themes/classic/header.php template file: <h1 id="header"><a href="<? <div id="header"><div id="headerimg"><h1><a href="<? Styling the Header Header Art
Create Clean Webpages with Twitter Bootstrap Introduction Do you need to a lay out a webpage in a clean and straightforward way? Do you find yourself Googling how to deal with tabs, menus, popups, forms and other UI elements? Do you find other layouts and samples and end up ripping out the basics to get started? Bootstrap is a very good framework to get a page up and running quickly - and provides plenty of advanced features. In this article, I'm going to show you how to get started with Bootstrap, and why you should bother. What're We Going To Use? We're going to be dealing with very basic code and only a few files - however, for the screenshots and example project I'll use Visual Studio 2012. Creating the Project Let's create an empty web project: We should have something pretty clean and lean, like so: Now head to Twitter Bootstrap's site and download the package: The bootstrap download contains three folders - css, img and js. <! This is the basic project structure. Setting up Bootstrap First, we need to include jQuery. <! <! <body><! <!
Comment tester la compatibilité de votre site sous Internet Explorer même si vous n'êtes pas sous Windows ? Si vous êtes développeur web et que vous avez besoin de faire des tests de compatibilité sur la dernière version d'Internet Explorer disponible sur la dernière version de Windows, à savoir la Technical Preview de Windows 10, voici un service proposé par Microsoft qui va bien vous rendre service. RemoteIE utilise le client RemoteApp qui donne accès aux machines virtuelles Azure, sauf que là, pas besoin de configurer votre propre machine... Non, non, Microsoft met à votre disposition un Internet Explorer distant sur lequel vous pouvez vous connecter gratuitement, que vous soyez sous Windows, sous Mac, sous iOS ou Android... Pour y accéder, rendez-vous sur ce site, puis loggez-vous avec votre compte Live. Ensuite, téléchargez l'un des clients suivants : Lancez-le et cliquez sur le bouton "Microsoft RemoteApp" (sous OSX) ou sur "App Invitations" (sous Windows). Une fois identifié, vous devriez voir apparaitre une invitation à utiliser Internet Explorer 10. Amusez-vous bien ! Source En Savoir +
How to Enable Custom Header Images Panel in WordPress 3.0 If you guys haven’t had a chance to test out WordPress 3.0, then you are missing out. We have created numerous posts about WordPress 3.0 features and have shown WordPress 3.0 screenshots as well. One of the note-worthy upgrade in this version is a new default theme called Twenty Ten. This theme has a lot of great features enabled, but one of the features that a lot of users want is the Custom Headers Panel. In this article, we will share with you how you can enable custom headers with a back-end admin panel in WordPress 3.0. What exactly will this feature do? It will create a tab in your admin panel which will allow you to change header images. How to Add this? We took the code straight from Twenty Ten’s functions.php file. That is jibbrish to me. Ofcourse, this might look jibrish to some of you. Note: We are using /images/headers/ as the directory where you will store your default header images. That is all what you are doing for the theme’s functions.php file. Code to add in your Theme
Bootstrap HTML Helpers Download link: Introduction The guys over at Twitter have done a serious favor for developers worldwide with their Bootstrap framework. This is especially useful for us coders with limited skills in UI design. With the Bootstrap Helpers project I have made things even easier for .NET developers. Update (2013.05.10) Note that the Bootstrap Helpers are now available as a Nuget package! Usage Here are some examples of the most useful of HTML helpers using the Razor syntax. Modal Dialog Tabs @using (var tabs = Html.Bootstrap().Begin(new Tabs())) { tabs.Tab("Tab One", "tab1"); tabs.Tab("Tab Two", "tab2"); tabs.Tab("Tab Three", "tab3"); using (tabs.BeginPanel()) { <p>This is tabs panel 1 content</p> } using (tabs.BeginPanel()) { <p>This is tabs panel 2 content</p> } using (tabs.BeginPanel()) { <p>This is tabs panel 3 content</p> } } You could also place the tabs on the left or right. @using (var tabs = Html.Bootstrap().Begin(new Tabs(TabPosition.Left))) { }
Liste des bonnes pratiques Webperf Sites Opquast Connexion Vous avez oublié votre mot de passe ? ou Créer un compte Webperf 41 critères pour afficher vos sites encore plus rapidement Testez et faites reconnaître vos compétences Opquast Certified est un test sur 1000 points permettant de vérifier le degré de maîtrise des meilleures pratiques du Web Découvrir L’ouvrage de référence pour les professionnels du Web En savoir + Version numérique offerte pour l’achat de la version papier How to Sync A Local And Remote WordPress Blog Ever wondered how you might use Version Control with WordPress? If you prefer to work on your WordPress projects locally but have to get them to sync remotely, this tutorial is for you. You have probably tried to synchronize between the two setups by manually uploading the changed files and using PHPmyAdmin to export and import your database once changed, and (very likely) broke something in the process. The Problem We usually start WordPress development on our local machines. The mess starts because you may need to release a new version, and since you work locally, changes that you made remotely need to be brought off-line. In the process, you may break something or forget a modification. Step 1 Setting Up The Foundation Explaining The Plan First, let me explain what we are going to do. WordPress stores information about your blog in both static files and your database. The information is unluckily split into two parts: Integrating Version Control I use Mercurial for version control.
#TEST : Le Nabaztag:Tag n’est pas mort ! Faites parler votre installation domotique à moindre coût! Salut à tous! Il y a quelques temps j’ai fait l’acquisition d’un Nabaztag:Tag d’occasion, vous savez, l’ancienne version de l’actuel Karotz, ce petit lapin connecté capable de communiquer avec vous ! Le but était de pouvoir faire communiquer mon installation domotique avec les personnes (et animaux ) vivant dans ma maison. Par exemple, rappeler qu’une fenêtre est ouverte depuis trop longtemps si la température extérieure est faible, annonce des heures creuses … Bref Si je n’ai pas choisi le Karotz, et bien, c’est tout simplement à cause du prix! Voici une petite photo du joujou accompagné de ses Flatnanoz : Pour ceux qui ne connaissent pas, ces petits portes clef (flatnanoz) servent à déclencher des actions lorsqu’on les passe devant le lapin (ex: annoncer la météo, appeler une Url..). Une fois votre lapin fraichement déballé du carton et branché, vous allez devoir le synchroniser avec un serveur afin de vous en servir. Les plus connus sont : Exemple de services proposés par Nabalive :
Browseo How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial Update: We’ve created a second edition of this popular tutorial! It contains updated code samples, coverage of the latest theme development techniques, and more. Check it out at The ThemeShaper WordPress Theme Tutorial: 2nd Edition. In only 11 individual lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. As we go along I’ll explain what’s happening including (for better or worse) my thinking on certain techniques and why I’m choosing one path over another. Essentially, I’ll be teaching you everything you need to know about WordPress Theme development. Skip to the Table of Contents. Here’s the list of features your finished theme will be able to boast of: I think that’s kind of impressive—for any WordPress Theme. At the end of this tutorial, with code in hand, you’ll be able to do almost anything you want. I’ve already used it to start another project of my own, The Shape Theme. Like this: Like Loading...
Manifeste pour la création d'application web au XXIème siècle À l’origine d’internet il existait une personne qui possédait tous les pouvoirs. Cet individu avait le droit de vie ou de mort sur un site internet. Cette personne c’était le maître du web aka webmaster. Certains de ces individus se sont transformés en développeurs web. Mais ce temps est révolu… Au XXIème siècle, l'évolution à fait un bon en avant et ces spécimens ont mutés en développeurs front-end. Et ce n'est que le début… Je partage ce guide pour une compréhension des meilleures pratiques en développement front-end. Navigateurs Les chiffres, les chiffres, les chiffres Chaque projet est différent. Mon site doit-il s’afficher de la même façon sur chaque navigateur ? Le rendu des éléments de formulaire doit être le même quelque soit l’os utilisé ? Je veux que le rendu de mes pages soit strictement identique entre site et emails. C’EST IMPOSSIBLE ! Je supporte actuellement Les dernières versions de tous les navigateurs modernes en n'oubliant pas les navigateurs mobiles. Mobile Moteurs de rendu <!