Archives pour la catégorie HTML / HTML5

[PHP] Détection du navigateur ou du système d’exploitation

Si vous avez besoin de détecter le navigateur ou le système d’exploitation de vos utilisateurs, voici le code !

// Simple browser and OS detection script. This will not work if User Agent is false.
$agent = $_SERVER['HTTP_USER_AGENT'];

// Detect Device/Operating System
if(preg_match('/Linux/i',$agent)) $os = 'Linux';
elseif(preg_match('/Mac/i',$agent)) $os = 'Mac'; 
elseif(preg_match('/iPhone/i',$agent)) $os = 'iPhone'; 
elseif(preg_match('/iPad/i',$agent)) $os = 'iPad'; 
elseif(preg_match('/Droid/i',$agent)) $os = 'Droid'; 
elseif(preg_match('/Unix/i',$agent)) $os = 'Unix'; 
elseif(preg_match('/Windows/i',$agent)) $os = 'Windows';
else $os = 'Unknown';

// Browser Detection
if(preg_match('/Firefox/i',$agent)) $br = 'Firefox'; 
elseif(preg_match('/Mac/i',$agent)) $br = 'Mac';
elseif(preg_match('/Chrome/i',$agent)) $br = 'Chrome'; 
elseif(preg_match('/Opera/i',$agent)) $br = 'Opera'; 
elseif(preg_match('/MSIE/i',$agent)) $br = 'IE'; 
else $bs = 'Unknown';

// Action when OS/Device is found
if($os=='Linux')  { echo 'This is done when the OS/Device is Linux'; }
if($os=='Mac')	  { echo 'This is done when the OS/Device is MacOS'; }
if($os=='iPhone') { echo 'This is done when the OS/Device is iPhone'; }
if($os=='iPad')   { echo 'This is done when the OS/Device is iPad'; }
if($os=='Droid')  { echo 'This is done when the OS/Device is Droid'; }
if($os=='Unix')   { echo 'This is done when the OS/Device is Unix'; }
if($os=='Unknown'){ echo 'This is done when the OS/Device is unknown. This is the failsafe for when an OS/Device is not detected.'; }

// Action when Browser is detected
if($br=='Firefox'){ echo 'This is done when the Browser is Firefox'; }
if($br=='Chrome') { echo 'This is done when the Browser is Chrome'; }
if($br=='Opera')  { echo 'This is done when the Browser is Opera'; }
if($br=='MSIE')   { echo 'This is done when the Browser is Microsoft Internet Explorer'; }
if($br=='Unknown'){ echo 'This is done when the Browser is Unknown. This is the failsafe for when a browser type is not detected'; }

// Action when both browser and OS/Device are detected
if($os=='Linux' && $br=='Firefox')  { echo 'This is done when the Browser is Firefox and the OS is Linux.'; }
if($os=='Unknown' && $br=='Unknown'){ echo 'This is done when the Browser is Unknown and the OS is Unknown. This is the catch-the-rest failsafe'; }

[HTML] Blokk – Police pour les maquettes

Blokk est une police permettant de transformer vos paragraphes de textes en blocks, idéal pour vos maquettes graphiques.

Vous avez peut être déjà eu le cas où votre client vous demande pourquoi son site est en latin avec le lorem ipsum et pas en français ? Voici une solution alternative quand vous ne souhaitez pas mettre de vrais textes mais signaler leurs présences dans vos maquettes HTML : Blokk.

Blokk est tout simplement une webfont qui va remplacer vos caractères par des blocks que l’on peut tout à faire mettre en forme (gras, taille, couleur).

Son utilisation est très simple, comme une webfont… Grâce à elle, vos clients devraient moins faire un blocage sur le contenu et plus se concentrer sur le design et structure de votre maquette.
Continuer la lecture

[CSS/HTML] Responsive Boilerplate

Responsive Boilerplate est une base permettant de commencer un site responsive.

Grâce à cet ensemble de bibliothèques CSS et Javascript, vous n’aurez plus à vous pré-occuper de chercher les bonnes medias queries, ou comment adapter votre menu pour smartphones…

L’objectif de ce boilerplate est de vous faire gagner du temps en vous proposant une structure CSS et HTML simple et adaptée.

En plus du CSS, le package comprend :

  • Un PSD pour le système de grille
  • Des snippets Sublime Text2 pour générer rapidement son site responsive
  • Des fichiers Javascript pour adapter dynamiquement les menus et structure du site en fonction du périphérique
  • Un fichier index.html avec le markup HTML essentiel
  • Avec une feuille de style compressée à moins de 3Ko, ce squelette de responsive webdesign va faire des heureux !

responsive-boilerplate

Source

[HTMl, CSS] Liste de livres HTML / CSS

Voici une liste (non exhaustive) de livres abordant le sujet du HTML et du CSS. Les éditeurs s’intéresse de plus en plus aux thèmes HTML / HTML5 / CSS / CSS3.

Le choix des livres est vaste et il est difficile de conseiller un bouquin plutôt qu’un autre.

Sur Alsacréations il y a une liste de livres commentés et critiqués.

Source

[HTML] initial-scale=1, le pour et le contre

J’ai lu il y a quelque jours un excellent article de Raphaël Goetter sur un bug des terminaux apple iOS4 et iOS5 lors du passage du meta tag viewport à initial-scale=1 :


Pour mieux comprendre le phénomène et ses implications, rappelons deux comportements indésirables et distincts rencontrés sur les terminaux Apple lors de l’affichage des pages au format paysage :

  1. Sur iOS4 et iOS5 (corrigé sur iOS6), un bug d’affichage provoque un zoom global de la page lors du passage en paysage : le design “dépasse” alors de la zone d’affichage (viewport)
  2. Toujours sur iOS, le device-width est identique en portrait qu’en paysage. Il est par exemple de 320px sur iPhone dans les deux orientations. Par conséquent, au passage en landscape, la proportion passe de 640/320 à 960/320 et si votre site était parfaitement adapté au format portrait, les éléments seront environ 1/3 plus grands en paysage.

Le premier point est un bug connu des versions iOS4 et 5, le second point est une conséquence du souhait d’Apple de conserver un device-width identique en portrait et en paysage.

Continuer la lecture

[HTML CSS JS PHP] Vidéos pour apprendre HTML, CSS, jQuery & PHP

Je viens de trouver cette chaine Youtube NewDzign qui propose 184 tutoriels qui permettront aux débutant d’apprendre les 4 principaux languages du web HTML, CSS, jQuery et PHP.

Parmi les sujets abordés :

  • sélecteurs CSS avec jQuery
  • moteur de recherche dynamique avec jQuery et PHP
  • validation de formulaire avec Ajax
  • espace membre avec gestion des profils utilisateurs en PHP

La navigation parmi les vidéos n’étant pas vraiment idéale sur Youtube, le site newdzign.com pourra vous aider pour consulter les tutoriels dans l’ordre lorsqu’il s’agit d’une série.

Youtube NewDzign
site newdzign.com

[HTML] Classes conditionnelles en HTML

Des navigateurs internet, le seul qui pose problème est Internet Explorer 6, 7 et même 8 !

La première solution, à l’ancienne, est d’utiliser des hacks CSS. Ces derniers n’étant pas très fiables, il sont déconseillés. De plus, on ne sais pas comment les futurs navigateurs vont interpréter ces hacks. La deuxième solution, conseillée par Microsoft, est d’utiliser les commentaires conditionnels.

Cependant l’utilisation des commentaires conditionnels à quelques inconvénients, nous allons voir les avantages de la technique des classes conditionnelles.

Le problème des commentaires conditionnels

Ils se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document HTML.


    

Ces commentaires sont propres à Internet Explorer. Ils permettent d’inclure dans une page HTML une portion de code qui ne sera lue et interprétée que par Internet Explorer.
Continuer la lecture

[CSS] Websitedimensions – Informations sur les résolution navigateurs

Websitedimensions est un site internet qui propose des informations sur les résolutions d’écrans et navigateurs du marché.

Lorsqu’on va lancer un nouveau site, on se pose toujours des questions concernant la largeur et la hauteur.

Websitedimentions.com permet de répondre à cette questions avec des statistiques sur les résolutions les plus utilisées sur le web.

Le site vous guidera ainsi sur les bons choix, y compris dans les résolutions à adopter pour un responsive webdesign.
Continuer la lecture