Les Trucs et Astuces du Web

Astuces HTML

My Jsfiddle

Reset de meyer

Reset de l'HTMLs

Astuce CSS

Le clearfix

Pour faire des tests nth-of-type

Pour réaliser des formes avec clip-path: http://bennettfeely.com/clippy/

Flexbox

Tester les newsletter sur toutes les boites mails

• http://panel.inboxinspector.com/tests
• https://www.emailonacid.com

Liste des compatibilités

https://www.campaignmonitor.com/css/

Solution pour une newsletter qui fonctionne sur Outlook standalone

• Il ne faut pas mettre de tableau dans les tableaux.
• Utiliser les colspan sur les balises
• mettre un espace dans les vides  
• ne pas utiliser des style css

Faire un bouton fermer

https://jsfiddle.net/MathieuClocquet/yjhg8949/

SVG

Pour afficher un SVG, il faut une balise img et mettre le lien du fichier SVG dans le src.

Petits tutos sympa

http://fr.learnlayout.com/toc.html

Outils pratiques

SASS

Prepros

Liens utiles

Icones

• http://www.flaticon.com/ : Plein de jolies icones

Fonts

• http://fontsgeek.com/ : Des typos à profusion
• Fontastic

  Pour créer sa typo contenant des icones. Les icones subtituent des lettres et des chiffres.

• FontAwesome

Banques d'images

https://stocksnap.io/

https://stock.tookapic.com/

Mockups

Freepik

En Local

Ajouter un site en local sur Mac

Sur Terminal

• sudo nano /private/etc/hosts
• entrer les liens
• pour fermer ctrl + x, puis Y, puis Enter

Sur Apache

Dans le dossier de Xampp/etc/extra/httpd-vhosts.conf

ServerName www.nomdusite.dev ServerAlias nomdusite.dev DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/nomdusite" AllowOverride All Allow from All

Enregistrer le fichier, PUIS redémarrer le serveur Apache.

Programme de serveur local : "Xampp manager-osx"

Programme de base de donnée : "Sequel pro"

Wordpress

Pour installer Wordpress:

• Télécharger la dernière version
• installer un thème proche de la structure voulue
• dans le dossier plugin nomdusite/wp-content/plugins, placer les plugins voulus.

Les plugins Wordpress plus utilisés:

• Advanced Custom Fields Pro
• Custom post type UI
• Contact form 7
• Google Analytics
• Events manager
• Yikes-inc-easy-mailchimp-extender
• Disqus

Installer wordpress (suite)

• Placer les fichier dans Xampp
• Créer une base de donnée sur http://localhost/phpmyadmin
• Commencer par vérifier les permissions sur le dossier
• lors de l'installation de wordpress, il faut écrire:
  • le nom de la base de donnée (voir point 2)
  • root
  • localhost
  • ex_ (plus sur que wp_)
• un fichier config.php est créé automatiquement
• Ecrire les informations du site

Copier un site Wordpress

• Copier les fichiers
• Copier la base de donnée
• Modifier dans la base de donnée wp_option
• Changer le modifier le fichier wp-config (DB_NAME, DB_USER, DB_PASSWORD)

Mise à jour

Pour mettre a jour les plugins Wordpress en local si c'est bloqué par une popup "connection information", il faut mettre dans wp-config

define('FS_METHOD', 'direct');

Créer un modèle de page

Coller ce coder en haut de page

Et modifier "Nom du modèle"

Choisir le modèle de la page d'accueil

Allez dans Réglages / Lecture

Sélectionner "Une page statique" et choisisez la page utilisée dans la liste déroulante "Page d'accueil"

Faire des résumés:

wp_trim_words( string $text, int $num_words = 55, string $more = null )

WPML

Prévoir les permaliens

Si un loop d'article est affiché dans plusieurs langues, il faut ajouter la ligne suppress_filters: $arr = array( 'post_type' => 'post', 'suppress_filters' => true );

Google Analytics

Il faut créer un compte.

Ensuite installer le plugin et cliquer sur "autorization";

- Chercher le tracking code et le coller dans le champ vide (ne fonctionne pas toujours). et/ou

- Prendre le long code, le coller avant la balise et remplacer l'ID de suivi.

Exemple de requête sql

update lptn_product_shop set active = 0 where id_product IN (select id_product from lptn_product where reference IN (86180,86191,86192,86203,86204,86210,86211,86213,86215,86218))

Prestashop

Il faut configurer le fichier config/settings.inc.php comme ceci pour travailler en local:

define('_DB_SERVER_', 'localhost');

define('_DB_NAME_', 'nom_de_ma_base_de_donnee');

define('_DB_USER_', 'root');

define('_DB_PASSWD_', '');

Optimisation

ImageOptim

Design

inDesign

Table des matière automatique

• il faut sélectionner le champ texte,
• Layout > Update table of content,
• Type > tabs,
• déplacer le curseur,
• ajouter 1 points pour "Leader"