[mysql] Exporter / Importer des bases de données en ligne de commande

Lorsque l’export / import n’est pas faisable via phpMyAdmin de par la restriction de la taille du fichier en input – ce qui pourrait être modifié mais bon en ligne de commande, c’est plus fun ! – et bien utilisons la commande « mysqldump »

Installer mysqldump

sudo apt-get install mysqldump

Exporter la base de données

mysqldump -u root -p maBase > maBase_backup.sql

Importer la base de données

mysql -u root -p maBase < maBase_backup.sql

En savoir plus : https://www.liquidweb.com/kb/how-to-back-up-mysql-databases-from-the-command-line/

Enjoy !

[owncloud] Quelques commandes utiles lors d’une migration

Hello,

Venant de migrer d’un serveur dédié à un autre mon instance owncloud, quelques commandes utiles.

Copie de dossier d’un serveur à un autre :

scp -r -P xxx dossier1/ user@server:dossier2/
  • le -P xxx indique le port si vous l’avez modifié (ce qui est mon cas)
  • dossier1/ : dossier depuis votre serveur source
  • user@server : utilisateur et domaine du serveur cible
  • dossier2/ : dossier dans lequel sera déposé vos données, attention ce dossier doit se trouver dans le dossier /home/user de votre serveur cible

Plus de détails sur la commande scp

On se place sur le serveur cible sur /home/user/ et on déplace le dossier vers l’espace owncloud

mv dossier1/ /var/www/owncloud/data/userowncloud/files/

Plus de détails sur la commande mv

On modifie les droits pour les attribuer à www-data

chown -R www-data:www-data dossier1/

Plus de détails sur la commande chown 

Une fois la migration terminée, un petit scan ne fait pas de mal !

sudo -u www-data php /var/www/owncloud/occ files:scan --all --verbose

Plus de détails sur la commande occ d’owncloud.


Par contre, j’ai rencontré des soucis de suppression depuis l’interface owncloud ou sur mon poste, j’ai dû supprimé la table des fichiers lockés.

On passe owncloud en mode maintenance

sudo -u www-data php /var/www/owncloud/occ maintenance:mode --on

Dans phpMyAdmin, on vide la table des fichiers lockés

delete from oc_file_locks

Et on remet en marche !

sudo -u www-data php /var/www/owncloud/occ maintenance:mode --off

En cadeau, pour connaître la taille d’un dossier

du -hs dossier1/

Plus de détails sur la commande du

Enjoy !

Personnaliser les commandes Unix / .bashrc

Hello !

Par défaut, lorsque vous arrivez sur un serveur, vous avez accès aux commandes Unix mais rapidement, à l’usage, vous vous rendez compte que vous utilisez toujours les mêmes ! 

Alors pour gagner du temps, rien de mieux que de se créer quelques raccourcis en créant ses propres commandes.

Pour cela, ouvrer le fichier « .bashrc » dans votre dossier root

cd /root/
vi .bashrc

Et modifier votre fichier de la sorte

# You may uncomment the following lines if you want `ls' to be colorized:
export LS_OPTIONS='--color=auto'
eval "`dircolors`"
alias ls='ls $LS_OPTIONS'
alias ll='ls $LS_OPTIONS -al'
alias l='ls $LS_OPTIONS -lA'

# Some more alias to avoid making mistakes:
alias rm='rm -i'
alias cp='cp -i'
alias mv='mv -i'

On enregistre le tout et on oublie pas de rafraîchir le script.

source .bashrc

Enjoy !

Méthode « WYLTIWLT » pour des boutons d’actions efficace

La conception d’interface nous amène à écrire des mots sur des boutons et des liens tout le temps. Mais comment choisir quels mots écrire sur les boutons ?

Les boutons et les liens permettent de réaliser des actions comme « Obtenir un document », « Télécharger », « Ouvrir un compte » etc.

Par exemple, si on ne lit que le lien « Cliquez ici », on ne comprend pas ce qui se trouve dans la page visée. Un lien doit indiquer le plus explicitement possible vers quoi il pointe.

Est-il possible d’appliquer un principe généralisé de choix de forme grammaticale sur ces boutons d’actions ?

Les mots sur le bouton doivent commencer par un verbe pour appeler à une action et avoir un sens dans le contexte de l’interface. Il faut penser à utiliser des mots déclencheurs qui poussent à réaliser une action. Par exemple « Plus d’information » n’est pas une phrase qui appelle à l’action et elle n’est pas reliée à un contexte.

Une façon de tester si les mots que l’on écrit sur les boutons seront compris par les utilisateurs, est de réaliser le test « WYLTIWLT » (Would you like to {Button text} & I would like to {Button text}) :

Placez les mots à écrire sur les boutons après ces deux phrases : « Voulez-vous… ? » et « Je voudrais… ». Si les phrases complétées ont du sens alors les boutons sont utilisables.
Voici des exemples de boutons qui ont été évalués positivement par le test :

Test-WYLTIWLT-ok1-480x252

Il est intéressant de voir que l’erreur fréquente (suivant la logique du test WYLTIWLT) est l’utilisation des adjectifs possessifs « mon » / « votre » sur les boutons :

Test-WYLTIWLT-pas-ok1-480x141

Recommandations :

– Les mots d’action (mots déclencheurs) doivent être utilisés pour caractériser de façon concrète l’action que renvoi le bouton,
– Les boutons d’action doivent être placées dans les composants associés pour les mettre en évidence,
– Lorsque la page est scrollée le bouton doit être répété en bas de page,
– Les attributs graphiques du bouton participent à sa mise en avant (la couleur, la brillance, la taille etc.),
– Les mots doivent être directs et concis. Cela rend l’appel à l’action efficace,
– Les subtilités langagières d’une langue à une autre doivent être prises en compte.
– Pour préserver l’impact de chaque bouton d’action sur une même page, limiter leur nombre.

Reproduction de l’article très intéressant lu initialement ici : Pour des boutons d’action plus efficaces

Obtenir une capture d’écran d’une vidéo YouTube

Concernant le site internet pour une compagnie de théâtre (La Compagnie du Marque-Page – http://www.lacompagniedumarquepage.fr/), il s’est présenté le besoin d’extraire des images des vidéos YouTube pour en faire des miniatures.

J’ai trouvé ce site très intéressant qui permet de réaliser la manip’ et récupérer les-dites miniatures en indiquant simplement l’url de la vidéo concernée : http://custom-drupal.com/jquery-demo/jyoutube/

Par ailleurs, YouTube stocke automatiquement quelques images de la vidéo qu’il est possible de récupérer en saisissant les urls suivantes (à partir de l’identifiant unique de la vidéo – en rouge ici) :

Enjoy !

Maitriser l’accès root à son serveur web / Sécurisation de SSH

Après avoir expliquer en détail comment corriger les avertissements de rkhunter (outil de surveillance de failles sur un serveur, cf. post consacré), je précisais qu’il était vivement conseillé de ne pas autoriser les accès root sur son serveur. Ci-dessous, une méthode de sécurisation de l’accès root.

Sécurisation de SSH
Editer le fichier

vi /etc/ssh/sshd_config

Et modifier les propriétés suivantes :

Port 2222 # Changer le port par défaut
PermitRootLogin no # Ne pas permettre de login en root
Protocol 2 # Protocole v2
AllowUsers ooznet # N'autoriser qu'un utilisateur précis

et redémarrez le service:

/etc/init.d/ssh restart

Recevoir un mail en cas de connexion avec Root
Vous pouvez éditer le fichier /root/.bashrc qui est exécuté au démarrage d’une session root pour envoyer un e-mail de notification. De cette façon, vous serez prévenu lorsqu’un login est effectué.

vi /root/.bashrc

Ajoutez la ligne (en modifiant l’adresse e-mail de destination) :

echo 'Accès Shell Root le ' `date` `who` | mail -s `hostname` Shell Root de `who | cut -d"(" -f2 | cut -d")" -f1` monitoring@monitoring.com

Créer un utilisateur
Tout d’abord, créer l’utilisateur :

sudo useradd [options] identifiant

et modifier son mot de passe :

passwd identifiant

Se connecter à son serveur web
Dorénavant, il n’est plus possible de vous connecter à votre serveur web avec root. Il faut donc se connecter avec Kitty par exemple via SSH sur le port 2222 (ou autre en fonction de ce que vous avez configuré dans le fichier sshd_config) avec le nouvel utilisateur créé. Ensuite, il vous faut prendre la main sur votre serveur en root via la commande :

su -

Enjoy !

[CSS3] @font-face / Font Squirrel

La propriété @font-face intégrée à CSS3 permet d’afficher une police embarquée sur le serveur et ainsi sortir du carcan des polices par défaut imposées pour les sites internet, les courantes Arial, Times New Roman & co.

L’excellent outil Font Squirrel (http://www.fontsquirrel.com/fontface/generator) permet de créer ses propres kits de font-face.

Cet outil est très utile car seuls les navigateurs modernes tels qu’Opera 10+, Firefox 3.5+, Safari 3+ et Chrome 4+ reconnaissent cette propriété CSS3, mais là encore Internet Explorer ne facilite pas les choses en ne reconnaissant qu’un seul format de fichier de fonte (.eot), incompatible avec les autres ! Il est donc nécessaire de systématiquement proposer une double version des polices à télécharger : .ttf (ou .otf) pour le commun des mortels, et une version .eot pour IE. Font Squirrel le fait pour vous !

Une fois vos fichiers convertis à l’aide de Font-Face generator, il vous suffit de les appeler dans vos feuilles de styles de la sorte :

Version pour tout le monde, incluant uniquement la version truetype .ttf :

@font-face {
font-family: 'Segoe UI';
src: url('segoeui.ttf') format('truetype');
}

Version prévue dans la feuille de style dédiée à Internet Explorer à l’aide de commentaires conditionnels, incluant la version .eot :

@font-face {
font-family: 'Segoe UI';
src: url('segoeui.eot');
}

Concrètement, il suffit ensuite de déclarer le nom de cette police dans la liste des valeurs de la propriété font-family, par exemple :

article {
	font-family: Segoe UI, Verdana, sans-serif;
}

 

Par ailleurs, les polices de caractères sont généralement assujettis à droit d’auteurs alors utilisez-les en respect de ces droits. De plus, faites attention au poids de celles-ci puisqu’Internet Explorer par exemple télécharge les deux fichiers de police (.eot et .ttf) et non pas seulement celui qui le concerne !

Une des solutions pour éviter ce problème serait d’appeler la police classique .ttf à l’aide d’un commentaire conditionnel excluant Explorer, tel que

<!--[if !IE]>--> <!--<![endif]-->

Enjoy !

Les nouvelles technologies au service de la mobilité

L’informatique mobile évolue à grande vitesse ces dernières années, les utilisateurs étant amenés à consulter des sites internet via leurs smartphones ou tablettes tactiles.

Dans ce contexte tourné vers la mobilité, deux nouvelles technologies ont fait leur apparition : HTML 5 et CSS3.

Il est intéressant de savoir que les technologies nécessitant un plugin (notamment Flash) sont dorénavant boycottées par les grandes firmes d’appareils mobiles comme Apple ou Microsoft. Pour exemple, l’iPhone/iPad et le nouvel système d’exploitation Windows 8 (dénommé Metro pour sa version tablette) via Internet Explorer 10 n’intègrent pas le plugin Flash dans leur navigateur web. 

HTML 5 et CSS3 se positionnent donc comme les technologies qui apportent une compatibilité, une sécurité et une stabilité accrues entre tous les navigateurs et sur toutes plateformes (PC/tablette/téléphone portable) et surtout préservent l’autonomie des terminaux utilisés.

Ces nouvelles technologies amènent également quelques nouveautés techniques non négligeables comme l’intégration directe de médias (video, audio, etc.) sans passer par l’utilisation d’un plugin tiers, la géolocalisation, une meilleure gestion des formulaires avec une validation au niveau du navigateur de l’utilisateur ou encore la gestion possible du drag&drop. Je reviendrai sur tous ces éléments d’un point de vue technique dans un autre post.

Une évolution majeure apparaît pour les méthodes de développement, plus rapides. En effet, auparavant, il était nécessaire de développer une interface pour chacune des plateformes, une pour la partie site internet, une autre pour la partie tablette et une dernière pour le téléphone portable, soit 3 fois plus de développements (pas de factorisation possible).

Or, grâce à quelques lignes de CSS3, il est dorénavant possible de ne concevoir qu’une seule interface qui s’adapte automatiquement à l’environnement dans lequel la page est affichée.

Amusez-vous à redimensionner ce site pour voir le résultat, une référence : http://www.alsacreations.fr/ (ne fonctionne que sur les navigateurs récents, Chrome, Mozilla et IE9)

Enjoy !

 

Modernizr, ou comment appliquer du HTML5/CSS3 sur les anciens navigateurs

Problématique rencontrée récemment en développant un site internet en HTML5/CSS3, la compatibilité avec les anciens navigateurs.

En effet, les nouveautés de ces nouvelles technologies sorties récemment ne sont visualisables que sur les navigateurs récents (détail complet de compatibilité sur http://html5readiness.com/).

La parade : Modernizr, une librairie Javascript open-source permettant de filtrer/paramétrer les caractéristiques spécifiques à CSS3 et HTML5 et de proposer une alternative pour l’affichage. Modernizr est évolutif et à pour objectif de « moderniser nos pratiques de développement ».

Lien du site : http://www.modernizr.com/

Enjoy !