Tous les articles par durstjack@gmail.com

7 outils en ligne sympas

Outils en ligne

CSS3 Generator

Propose de disposer du code CSS parfait pour réaliser vos feuilles de styles. Choisissez le type de styles (dégradés, transitions, ombre sur texte …) configurez les options puis copier / coller le code css dans votre fichier.

 

Screen Sizes

Comme son nom l’indique, ce site référence les résolutions d’écran des principaux devices utilisés aujourd’hui (tablette, smartphone, ordinateur).

 

Adobe Kuler

Assortir les bonnes couleurs pour un template facilement et sans fautes de gôut!!
Cet outil en ligne vous donnera pour chaque couleur le code hexadecimal et le code RGB équivalent.

 

Web Colour Data

Ce site vous permet d’analyser les couleurs dominantes de n’importe quel site
il donne également les composantes des sites les plus connus: Google, Facebook, Flickr, Instagram, Pinterest, WordPress, Dropbox etc…

 

Gist Box

Vous avez surement passé du temps à rechercher une fonction JS, une classe CSS ou autre morceaux de codes précédemment créés ! Avec cet app vous pourrez enregistrer et classifier tous vos codes. Vous pourrez également les partager et profiter des codes des autres membres. Vraiment parfait.

 

Extractcss

Vous permet d’extraire du code css intégré au balises html, puis de pouvoir faire un copier/coller afin d’avoir un fichier css externe (la norme normalement..)

 

RWD Wireframes

Cet outil vous permet de définir en drap and drop vos wireframes de site internet (cela pour en responsive total) puis vous pouvez exporter en HTML/CSS votre maquettes, reste plus qu’a remplir avec vos contenus pour un obtenir un site full responsive.

Responsive design grâce au media-queries

CSS, Langages, , ,

On peut écrire dans le fichier css de notre site des régles css media queries qui seront lues que dans certaines conditions.

voici comment:

@media screen and (max-width: 640px){
  p{ color:  blue;}
  /* etc etc */
}
@media screen and (min-width: 640px){

}
@media all and (min-width: 480px) and and (min-width: 640px){
}

Pour les téléphones portables qui « trichent » sur leurs valeurs en pixels « réels » on peut configurer la balise meta viewport du côté HTML comme suit:

<meta name= »viewport » content= »width=device-width » />

 

et dans les media queries au lieu de mettre:
« maw-width: xx » on écrira « max-device-width: xx »

vous pourrez trouver plus d’infos sur le site d’alsacréations: comprendre le viewport dans le web mobile

Protéger son site

CMS, Prestashop, Wordpress, , ,

Concrètement un hacker va essayer d’accéder à des répertoires présent sur votre serveur à l’aveugle en suivant une certaine logique, car qu’il s’agisse d’un site codé à la main ou avec un CMS, les arborescences sont souvent connues ou évidentes.

Pour empêcher le hacker de se balader sur votre site en se basant sur les URL affichées dans la barre de navigation, et ainsi rendre impossible l’accés aux répertoires importants, et de le rediriger sans cesse vers la page d’accueil de votre site, et ce grâce à une ligne de PHP.

<?php header("Location: http://monsite.fr"); ?>

placez cette ligne dans un fichier index.php et copiez ce fichier dans tous vos répertoires sensibles.

Connaitre le chemin absolu d’un dossier sur un Serveur

Linux, PHP, , , ,

Créez un fichier chemin.php contenant ceci

<?php echo realpath('chemin.php'); ?>

puis envoyez ce fichier sur sur votre serveur à l’intérieur du dossier voulu, puis avec votre navigateur atteignez l’url de ce fichier chemin.php, oh magie ;)

peut être pratique pour créer un .htaccess avec .htpasswd, en effet pour AuthuserFile le chemin doit être en absolu..

<files wp-login.php>
   AuthName "Page d'administration protégée"
   AuthType Basic
   AuthUserFile "/homepages/20/.htpasswd"
   require valid-user
</files>

Gérer son serveur MySQL

Linux, , ,

Quelques commandes de bases pour administrer, gérer un serveur MySQL sous Linux

Installation

Installez le paquet  mysql-server.

Démarrage
Pour démarrer le serveur MySQL, tapez la commande suivante dans un terminal :

sudo service mysql start

Redémarrage
Pour redémarrer le serveur MySQL, tapez la commande suivante dans un terminal :

sudo service mysql restart

Arrêt
Pour arrêter le serveur MySQL, tapez la commande suivante dans un terminal :

sudo service mysql stop

Rechargement de la configuration
Pour que MySQL prenne en compte les modifications de sa configuration, tapez la commande suivante dans un terminal :

sudo service mysql reload

Forcer la prise en compte de la nouvelle configuration
Pour forcer MySQL à recharger ses fichiers de configuration, tapez la commande suivante dans un terminal :

sudo service mysql force-reload

La Balise META «robots»

HTML, Langages, , ,

Cette balise est prise en compte par Google et les autres moteurs et sert à définir des restrictions au robot qui vient crawler la page.
Il est possible d’indiquer des restriction de manière individuelle aux différents bots (google ou yahoo par ex) a fin quelles s’appliquent qu’au moteur spécifié.

 Les différentes valeurs possibles pour la balise meta robots :

  • noindex : indique au robot qu’il ne faut pas indexer la page. Cela ne signifie pas que le robot ne va pas la crawler : pour cela il faut utiliser le fichier robots.txt
  • nofollow : indique au robot qu’il ne faut pas suivre les liens dans la page. Cela signifie que Google n’ira pas crawler les pages liées par la page contenant cette balise meta robots.
  • index : indique au robot qu’il peut indexer la page.
  • follow : indique au robot qu’il peut suivre les liens dans la page.
  • all : équivalent de  »index,follow ».
  • none : équivalent de « noindex,nofollow ».
  • nosnippet : indique au robot qu’il ne faut pas afficher de descriptif (snippet) dans la page de résultats.
  • noarchive : indique au robot qu’il ne faut pas laisser l’accès à la version en cache.
  • noodp : indique au robot qu’il ne faut pas utiliser les données et les associées dans l’annuaire DMOZ.
  • unavailable_after:[date] : indique au robot que la page ne doit pas ressortir dans les résultats après la date indiquée.

Les balises META facultatives

HTML, Langages, , ,
  1. Robots
  2. Googlebot
  3. Publisher: personne ou organisme publiant le site.
  4. Reply-to: permet de donner une adresse de contact pour la page.
  5. Syndication-source: en cas de la syndication de contenus,  sert à indiquer l’URL de l’article original.
  6. Original-source: dans le cas où un article a été rédigé à partir de plusieurs sources.
  7. Pragma: interdire l’enregistrement de la page dans la mémoire cache des navigateurs.
  8. Cache-control:  niveau de cache 4 valeurs possibles de la plus permissive à la plus restrictive « public » « private » « no-cache» « no-store ».
  9. Expires: indiquer que la page expire après une certaine date et ques son contenu sera « perimé ».
  10. Copyright: comme son nom l’indique.
1-2
<meta name="robots" content="index, follow" /><meta name="googlebot" content="index, nosnippet, noarchive" />

3
<meta name="Publisher" content="LALANDRE Thierry" />

4
<meta name="Reply-to" content="contact@site.fr" />

5
<meta name="syndication-source" content="lesite.fr" />

6
<meta name="original-source" content="lesite.fr" />

7
<meta http-equiv="pragma" content="no-cache">

8
<meta http-equiv="Cache-control" content="private" />

9
<meta name="expires" content="mon,30 Sep 2013 9:00:00 GMT" />

10
<meta name="copyright" content="LALANDRE Thierry" />

Les balises META essentielles

HTML, Langages, ,
  • balise title
  • balise meta content-type
  • balise meta description
  • balise meta charset
  • balise meta language

 

<title> titre de la page </title>

Par défaut, celle-ci doit être d’environ 70 caractères. Cela peut être plus mais seul les 70 premiers caractères sont affichés pour un titre dans les résultats de Google d’où cette limitation mais sachez pour information que plusieurs centaines de caractères sont pris en comptes. Votre titre doit absolument contenir les mots-clefs les plus importants de votre page.

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Cette balise sert à préciser le jeu de caractères utilisé pour le codage de la page.

 

<meta name="description" content="…" />

Sert à décrire le contenu d’une page web et peut contenir jusqu’à 1000 caractères. Il est impératif qu’elle soit renseignée car c’est elle qui sera affichée comme description de votre page dans les résultats de recherche.

 

<meta http-equiv="Content-Language" content="fr" />

Si votre page est en plusieurs langues, séparez ces codes par des virgules.

En bref:

<title> titre de la page </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="…" />
<meta http-equiv="Content-Language" content="fr" />