aliastim

Quelques astuces pour rendre un site responsive 💡📐

Balise Méta

Le viewport(≠ device-width) est une valeur propre à chaque device et est attribuée par le navigateur sur lequel on navigue, par exemple :

• Viewport Safari mobile : 980px
• Viewport Android 1, 2 et 3 : 800px
• Viewport Android 4 : 980px
  
  

Meta par défaut à ajouter au code :

aliastim

Quelques frameworks, librairies et liens utiles 📕📗📘📙

Bootstrap

Pour le contenu d'un site Bootstrap

Font awesome

Pour ajouter des icônes utiles dans un texte Font Awesome

aliastim

Découvrir NODE JS

NodeJS est un langage de bas niveau reposant sur Javascript, ce qui lui apporte de multiples avantages :

• Il permet d'utiliser JavaScript côté serveur
• C'est un langage asynchrone qui permet de gérer plusieurs événements à la fois
• C'est un environnement de bas niveau (il ressemble davantage à du C ou du Python que du PHP)
• Il est beaucoup plus rapide que les autres langages (repose sur le moteur d'exécution V8 de Chrome)
• C'est un modèle non bloquant*

• Modèle bloquant : les actions sont réalisées les unes après les autres, le script ne peut pas réaliser d'autres actions tant que les précédentes n'ont pas été effectuées.
• Modèle non bloquant : les actions sont réalisées en parallèles, ce qui permet au script de réaliser une action pendant qu'une autre est en cours, l'exécution est de ce fait plus rapide.

aliastim

Intéragir avec sa base de données avec l'ORM Sequelize

npm install sequelize

voir la Notice

Pour intéragir avec la base de données :

aliastim

Les bases de l'UX/UI 🎨 🖼

EN COURS D'ECRITURE

L'UX et l'UI sont deux notions étroitement liées qui vont permettre à un site ou à une interface de se distinguer.
L'UX (User Experience) se concentre principalement sur l'utilisateur et va chercher à répondre à un besoin, tandis ce que l'UI (User Interface) va enjoliver cette même interface pour rendre la navigation plus confortable.

Optimiser son expérience utilisateur (UX)

Afin d'avoir une expérience utilisateur adaptée à son projet, il est important de se poser les bonnes questions et de suivre quelques étapes.

1️⃣ Définir le besoin ❓

Il est intéressant de chercher à connaitre ses utilisateurs en se posant quelques questions utiles à notre projet :

aliastim

Fidélisez vos utilisateurs avec le design thinking

EN COURS D'ECRITURE

aliastim

Index des types de formats de fichiers en base de données

Catégorie	Format	Type

aliastim

Installer et déployer un site sur son propre serveur

Besoins

Besoins matériels

• Carte Raspberry pi
• Carte SD (au minimum 16Go)
• Optionnel : Support de stockage pour le site web (Disque dur externe (SSD de préférence) ou clé USB)

Installations logiciels

• OS : Raspberry Pi OS with desktop
• Serveur Web : Nginx

aliastim

Créer une animation avec un Sprite

Un sprite est une alternative simple et rapide pour intégrer une animation sur votre site web.

Comment ça fonctionne ?

Un sprite se présente sous la forme d'une image PNG (Vericale ou horizontale) qui contient l'ensemble des frames de votre animation (Voir exemple ci-dessous).

Comment créer l'animation dans le code ?

Dans le code, l'animation est très basique. Dans le html, il suffit de créer une div avec une class qui correspondra à celle de votre image. Et dans le CSS, vous allez appeler votre sprite et définir la taille (égale à une frame) et le nombre de frames. Dans l'animation, vous allez préciser la taille totale de votre sprite.

aliastim

💳 Mettre en place un formulaire de paiement php sur son site avec Stripe

Stripe est une API très utile pour intégrer un formulaire de paiement à son site web. Celle-ci va vous permettre de mettre en place des paiements directs ou des abonnements sans avoir besoin d'enregistrer les données sensibles sur votre site puisque toutes les informations seront directement traitées par le serveur de Stripe.

⚠️ En revanche, le service de Stripe vous coûtera 2,9 % + 0,30 $US pour chaque transaction.

Avant de commencer

• Créer un compte sur le site de stripe
• Ajouter ses coordonnées bancaires pour accéder aux fonctionnalités

Vous trouverez sur l'interface, vos clés publiques (publishable key) et secrètes (secret key), assurez-vous d'avoir activé l'environnement de tests (sandbox) pour la mise en place du formulaire