background preloader

Webdesign adaptatif : 5 astuces indispensables

Webdesign adaptatif : 5 astuces indispensables
Depuis l’année dernière, la tendance est au webdesign adaptatif. Avec la sortie du nouvel iPad et l’explosion du marché téléphone mobile, cette tendance devrait doit devenir la norme d’ici la fin de l’année. Si les travailleurs du web ne plongent pas dans ces nouvelles pratiques, je parie sur un beau IE6 revival pour leurs sites internet. Voici 5 conseils pour vous aider à créer un design de qualité, accessible et adaptable. Vous apprendrez dans cet article : Comment cacher du contenu pour les petits écrans ? Avant de commencer la lecture de cet article je vous invite à visiter le site smashing magazine. Non, c’est du webdesign adaptatif. Pour maîtriser la technique de changement du contenu installez vous confortablement et prenez des notes ! Cacher du contenu Au XXème siècle, le contenu était optimisé pour une taille d’écran de 1024*768px. Utilisez la propriété CSS display:none en fonction de la taille de votre périphérique. L’effondrement du contenu Structure HTML Comportement Javacript

Des images à la une responsives pour votre theme Wordpress - Kune.fr Depuis quelques années, et avec l’utilisation de plus en plus importante des terminaux mobiles pour naviguer sur internet, les designs responsives sont devenus monnaie courante. Cette tendance n’est d’ailleurs pas prête de s’arrêter, car de plus en plus de sites deviennent responsives. Seulement voilà, il existe encore et toujours quelques barrières à l’utilisation optimale du responsives et nous allons voir comment travailler sur un point particulier, les images, dans un thème WordPress. Dans cet article, nous allons donc aborder un problème récurrent dans la création de design responsive, les images. Nous verrons comment utiliser les fonctions natives pour améliorer leurs utilisations. Mais avant tout, petit point sur la question. Navigation sur mobile Lorsque l’on pense responsive, la première chose sur laquelle on travaille est le gabarit de la page. Même si cette étape est primordiale, il faut également se mettre à la place de l’utilisateur dans son utilisation générale. Conclusion

Responsive Mind - Parce que notre monde change tous les jours Changez Vos Permaliens Sans Nuire A Votre Site WordPress Crédit photo : khunaspix Modifier les permaliens sur un site en place peut être risqué. Vous devez être absolument sûr de vouloir faire ce changement, car il peut avoir un impact sur votre référencement. Heureusement, avec un peu de planification et un outil simple, vous devriez être en mesure de vous acquitter de cette tâche sans trop de problèmes. Les permaliens, mais c’est quoi ? Les permaliens sont la partie visible de l’adresse Web, qui vient après votre nom de domaine, et qui pointe vers les messages et les pages de votre site. Lorsque les permaliens sont sélectionnés, ils ont plusieurs fonctions. Vous définissez la structure de permaliens depuis le tableau de bord WordPress >Réglages> Permaliens. La plupart des gens changent la structure des permaliens de leur blog WordPress lors de sa création. la date suivie du nom de l’articlele nom de l’article Ce choix est généralement fait en ayant à l’esprit le contenu qui sera inclus. Pourquoi changer la structure des permaliens ? Conclusion

Responsinator Change Your WordPress Login URL WordPress’ default login URL is /wp-login.php (or you can just type in /wp-admin/ and it’ll redirect you there if not yet logged in). For example: You may think to yourself, “OK. Who cares?” There are 3 reasons you should care: I can tell you’re using WordPress. Did any of that sound like fun? How To Change Your WordPress Login URL The short answer is to install, activate, and configure the Better WP Security WordPress plugin. What We’re Doing With Better WP Security, you’ll be able to change: /wp-login.php to /login//wp-admin/ to /admin//wp-login.php? Warnings Compatibility might be an issue. If you already have the site added to ManageWP Dashboard, you’ll need to update your ManageWP options, but it’s quick and easy. Continue reading for all the step-by-step instructions for Better WP Security and updating the ManageWP Dashboard options. Step By Step Instructions Step 1: Take a Full Backup Duh. Step 2: Install and Activate the Better WP Security plugin

50 fantastic tools for responsive web design | CSS3 As introduced/coined by Ethan Marcotte in both his article "Responsive Web Design" as well as his best-selling book, one needs three elements to make a site responsive: A flexible/fluid grid Responsive images Media queries There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we'll keep the focus of this article on some top tools that will help you become responsibly responsive. Tools for starting out Before you start with building your site, it's best to sketch out how the elements on the page will adapt to fit the different browser sizes of the various devices that they will be viewed upon, and to avoid the disconnect that often comes from thinking primarily about the desktop design and the rest of the responsive iterations as an afterthought (see especially Stephanie (Sullivan) Rewis' comment). 01. 02. 03. 04. 05. Tools for a flexible/fluid grid 06. 07. 08. 09. 10. 11. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. slabText 23.

Créer un user admin sans accès à la base de données Il y a des tas de raisons qui peuvent faire qu’on n’accède plus à son tableau de bord : hackoubli des mots de passele webmaster a disparu dans la naturemon chat a sauté sur le clavier quand je tapais mon mot de passe Une procédure existe, en passant par phpmyadmin. ça donne des sueurs froides à certainsil est aussi possible qu’on n’ait pas / plus ses accès à phpmyadmin Pas de panique ! Vous dézippez et vous trouvez un fichier script_user_creation.php dont voici le contenu : Ce fichier est à télécharger sur votre espace web au même niveau que le wp-config.php Une fois que vous l’avez téléchargé, vous allez sur la page d’accueil de votre blog, et vous rajoutez, dans la barre d’adresse, /script_user_creation.php Vous pouvez éventuellement avoir des messages d’erreur cabalistiques, on s’en fiche. Et voilà, il vous suffit de vous connectez en temp_admin avec le mot de passe toutouyoutoutou Attention : c’est brutal, efficace et absolument pas sécurisé.

Responsive design : définition, fonctionnement, ressources et tutoriels Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant. Le problème est qu’on ne peut pas – ou du moins ce ne serait pas très pratique – développer autant de versions d’un site qu’il y a de résolutions différentes. Définition du responsive web design Cette évolution des techniques de webdesign, d’intégration et de développement se base sur un objectif simple : un même site doit pouvoir s’adapter lui-même aux différentes résolutions d’écrans… et donc son contenu aussi ! Voici 2 exemples pour illustrer des webdesigns crées de façon “responsive” : La typo 1.

Sécuriser Wordpress - Attention au fichier wp-config.php Ce travail sur Wordpress a été rendu possible grâce au soutien d'Ikoula. Le fichier wp-config.php contient toutes les informations confidentielles dont WordPress a besoin pour accéder à votre base de données et chiffrer les cookies. Il est donc primordial de correctement protéger ce fichier. Changer les clés WordPress WordPress chiffre les informations stockées dans vos cookies grâce à des clés de sécurité conservées dans le fichier wp-config.php. Pour cela, vous pouvez au choix inventer vos propres clés ou les générer de manière aléatoire grâce à l'outil suivant. Remonter le wp-config.php d'un niveau Par défaut, le fichier wp-config.php se trouve à la racine de l'installation WordPress. Ça peut vous paraitre inutile, car par défaut, ce genre de fichier n'est pas lisible et accessible uniquement par PHP mais si par erreur, vous désactivez PHP, n'importe qui pourra lire les fichiers PHP comme si c'était de vulgaires fichiers texte. Bloquer l'accès au wp-config.php Changer les droits d'accès

Les fondamentaux du Responsive Web Design Prenons deux exemples simples. Le premier pourrait être ces vitres qui s'opacifient en fonction de la luminosité extérieure. Ou encore ces murs-miroirs où plus nous nous approchons, plus ils nous semblent se déformer. Bref, ce que cherchent les architectes dans ce mouvement, c'est de dépasser/s'abstraire des contraintes inhérentes liées aux différents supports. Le « Responsive Web Design » est né, car nous sommes de plus en plus confrontés aux mêmes problèmes que les architectes : s'adapter aux supports. Voyez plutôt : autrefois, nous n'avions qu'un ou deux navigateurs et les tailles d'écrans variaient peu. Et tout cela, c'est ce que nous avons maintenant. Pour faire une application Web qui soit Responsive Web Design, nous devons établir les trois points suivants : Si nous faisons une analogie avec l'architecture, les trois derniers points représentent nos outils. Il est heureusement possible de s'adapter pour y parvenir. En fait, nous devons appliquer à chaque fois la formule suivante :

Role Scoper Role Scoper is a comprehensive access control solution, giving you CMS-like control of reading and editing permissions. Assign restrictions and roles to specific pages, posts or categories. Role Scoper is no longer actively developed.For feature requests (including plugin compatability issues) and WP 3.7+ compatibility try the successor plugins, Press Permit Core and Press Permit Pro. See the RS-PP feature comparison grid for details. How it works: Your WordPress core role definitions remain unchanged, and continue to function as default permissions. Users of any level can be elevated to read or edit content of your choice. Scoped role restrictions and assignments are reflected in every aspect of the WordPress interface, from front end content and navigation to administrative post and comment totals. Partial Feature List Template Functions Theme code can utilize the is_restricted_rs() and is_teaser_rs() functions to customize front-end styling. Support Documentation Plugin Compatibility Issues

Creating a Responsive WordPress Site Your Mobile Users Will Love As more and more people get online using a variety of mobile devices and screen sizes, it’s essential that your WordPress site is responsive and device-agnostic. Heck, you may even be reading this article on your phone right now. (How does our site look? Okay? In this post I’ll cover everything you need to know to give your site a responsive layout, but also ensure it gives your visitors the best possible experience on everything from 27-inch UHD desktop displays to 4-inch iPhone 5s screens. Specifically, I’ll look at: Responsive theming, either by downloading a responsive theme or by making your own theme responsive.Making it easy for people to consume your site’s content on all devices.Responsive navigation and the ways you can make it easier for users to move around your site on different devices.Responsive forms, making sure they’re easy to fill out on all devices.Responsive images: making sure your images are no larger than they need to be for different screen sizes. 1. 2. Font Sizes

Google Analytics: nouvelle segmentation avec visites et cohortes - by Julien Coquet En début de période estivale, Google lance pour le grand public son nouveau moteur de segmentation pour Google Analytics. Il permet notamment de créer des segments portant non seulement sur les visites mais également sur les visiteurs. On appelle ce groupement des cohortes. Le mot vous fait peur? Ne vous en faites pas, on va en parler plus avant. Pardon? Si comme moi vous avez fait du latin et/ou que vous êtes passionné(e) pour l’art militaire de l’empire romain, une cohorte est un sous-ensemble d’une légion romaine. OK, super. Une cohorte désigne un ensemble d’individus ayant vécu un même événement au cours d’une même période.Exemple : la cohorte des femmes ayant eu leur premier enfant en 2005. On y arrive. Jusqu’à présent dans Google Analytics, nous étions habitués jusqu’alors à utiliser les segments pour mettre en évidence les visites liées à certains comportements sur le site: provenance, nombre de pages vues, page d’arrivée sur le site, etc. L’interface de segmentation. Magique!

Related: