version distincte d'un site Web

Question

Je veux être sûr que je veux optimiser et de rendre mon site très facile à entretenir pour les différentes version de mon site.

J'ai quelques version de mon site:

• iphone/ipod/android etc...
• ipad/tablettes etc...
• d'autres petits appareils comme les vieux clap de téléphone
• par défaut

J'utilise ubuntu serveur avec MySQL 5, PHP 5 et Apache + Memcache.

Quelle serait la meilleure façon de mettre en œuvre mon site afin qu'ils utilisent tous les mêmes fonctionnalités de base:

• PHP
• JS (pour la commune)
• CSS (pour la commune)
• etc...?

merci

Answer 1

Remarque: cette solution est plus sur les performances de quick fix et j'ai enfin fini de

Je suppose que depuis que vous êtes à l'aide de memcache vous obtenez votre contenu à partir d'une Base de données MySQL, puis de l'analyser en PHP et l'enregistrer dans la mémoire cache et l'afficher.

Chaque version aurait un autre domaine. iPhone/Android (et d'autres smartphone) utiliser l' m.domain.com de domaine, les tablettes (iPad, galaxy etc...) utilisera t.domain.com, tous les autres pourront utiliser o.domain.com et la valeur par défaut utiliser www.domain.com ou domain.com.

Tous ces sous-domaines peuvent pointer vers le même dossier (/var/www/ - celui par défaut). Ce qui va faire le truc est de savoir comment vous l'appelez.

Ajouter cette votre .htaccess ou de configuration d'apache:

SetEnvIf Host ^www\. page=www
SetEnvIf Host ^o\. page=others
SetEnvIf Host ^m\. page=mobile
SetEnvIf Host ^t\. page=tablets
rewriterule ^.*$ index.php?subdomain=%{ENV:page} [QSA,L]

Donc, dans votre fichier PHP, vous pouvez utiliser l' $_GET['subdomain'] et de décider ce que vous devez faire pour générer votre page. De cette façon, il est très facile à entretenir, vous avez 1 point d'entrée et vous pouvez configurer des règles en PHP pour récupérer des informations sur ce que vous avez besoin d'afficher le contenu sera le même, seule la mise en page va changer).

Une chose que je recommande sera d'optimiser vos fichiers. La version mobile de votre site doit être plus doux de toute manière (CSS, Images, JS). Vous ne voulez pas que votre utilisateur de charger de grosses CSS, JS et les images à partir d'un appareil mobile avec un réseau lent. Vous souhaitez afin d'optimiser autant que possible pour les plus lents périphérique réseau. En d'autres termes, vous ne souhaitez pas afficher une 300x200 logo sur un 176x220 flip téléphone de l'appareil. Une voie sera de donner un nom à votre fichier selon le domaine dans lequel ils sont. Par exemple:

• fichier.css (4k) V. S. fichier-m.css (0,4 k)
• logo.jpg (300px * 300px 15k) V. S. logo-m.jpg (100px * 40px 2k)

Et dans ton code PHP, vous pouvez avoir une logique de charger dynamiquement en JS, les Images et la CSS de fichiers. Comme un souvenir, plus vite vous chargez votre mobile site, mieux c'est. Maintability est important, mais vos utilisateurs sont trop. Si vous avez une lente site mobile, ils auront tendance à ne pas aller à votre site et aller quelque part d'autre. Pas tout le monde est en utilisant le réseau 3G/4G ou WiFi sur leur téléphone. Aussi, je recommande d'utiliser les sorties de compression (comme dégonfler) lorsque vous souhaitez accéder à vos fichiers.

Cela permettra d'améliorer votre temps de chargement, spécialement pour les appareils mobiles. Maintenant, si vous utilisez le même fichier, disons un fichier Javascript pour soumettre un communiqué de lettres, vous ne voulez pas reproduire ni le copier avec le nom. Au lieu de créer une logique supplémentaire dans votre PHP, vous pouvez créer un lien symbolique comme ceci:

ln -s /var/www/js/file.js /var/www/js/file-m.js

Avec cette solution, vous aurez besoin de rediriger vers le site approprié en fonction du type d'appareil qu'ils utilisent. Vous ne voulez pas un téléphone à clapet afficher une version iPhone de votre site. Voici quelques truc que vous pouvez faire pour accomplir ce:

// PHP version - also make sure the current domain is checked otherwise you will be in an infinite loop!
if(strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE)
{
  header('Location: http://m.domain.com/');
  exit();
}

OU dans le .htaccess/config d'apache sous le site par défaut:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "iphone|android" [NC]
RewriteCond %{HTTP_HOST} !^mobile.domain.com
RewriteRule ^(.*)$ http://m.domain.com/ [L,R=301] # or 302 if you want temporary
# etc...

Je vous recommande de regarder à http://detectmobilebrowsers.com/ pour savoir ce que vous pouvez utiliser pour les appareils mobiles et vous pouvez vérifier http://validator.w3.org/mobile/ pour s'assurer que tout semble bon pour votre appareil mobile.

La commune de PHP les fichiers, je vous recommande d'utiliser une centralisation place, un chemin d'accès spécifique, vous pouvez utiliser et le monde extérieur ne peut pas. Vous pouvez mettre tout ce code dans un dossier commun où tous les sites peuvent accéder à ces fichiers. Exemple:

/web/lib/

De cette façon, personne, sauf vous, pouvez directement accéder à vos fichiers. Dans votre code PHP que vous allez faire quelque chose comme (par exemple le script de connexion):

<?php
 define('BASE_PATH', '/web/lib/');
 require(BASE_PATH . 'filex.php');
 // etc...

Answer 2

Il ya quelques façons différentes, néanmoins le plus simple à maintenir, c'est l'utilisation d'un mobile de la première stratégie de développement. Cela signifie d'écrire le css pour la plus petite taille (à l'aide de petites tailles d'image si possible), et cela va devenir la base, puis à l'aide de css3 media queries, remplacer la base de css avec de nouveaux styles.

Bien sûr, IE va avoir quelques problèmes, donc à utiliser une instruction conditionnelle (lte ie8) après la base de la feuille de style (de sorte qu'il écrase les styles de base) pour charger le bureau css pour ie.

Comme pour le JS, assurez-vous que le site puisse fonctionner correctement avec JS désactivé. Un peu de conseil est d'écrire le site complètement sans javascript, assurez-vous qu'il fonctionne, puis l'ajouter dans la après pour améliorer les fonctionnalités existantes.

Et comme pour le contenu principal, garder le même, php n'a pas besoin d'être différents pour les différents périphériques, laissez le css faire tout le levage lourd.

Voici un échantillon de ce que vous pourriez avoir

//Your Base CSS (no background images here)
.content{
  width:240px;
  margin:0px auto;
}
.logo{
  background-image:url(../logosmall.png);
}
// Smartphones (portrait and landscape)
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
// Styles
}

// Smartphones (landscape)
@media only screen 
and (min-width : 321px) {
// Styles
}

// Smartphones (portrait)
@media only screen 
and (max-width : 320px) {
// Styles
}

// iPhone 4
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// Styles
}

// iPads (portrait and landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
// Styles    
.content{
  width:768px;
}
.logo{
  background-image{url(../logomedium.png);
}

// iPads (landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
// Styles
}

// iPads (portrait)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
// Styles 
}

// Desktops and laptops
@media only screen 
and (min-width : 1024px) {
// Styles
.content{
  width:1024px;
}
.logo{
  background-image:url(../logolarge.png);
}
}

Donc, dans cet exemple, je suis une largeur à la base de 240px (en supposant que le plus petit écran qui sera utilisé est 240px) et de l'avoir centré, puis-je remplacer qu'en fonction de la taille de la fenêtre à une plus grande valeur. Il en va de même pour l'image, par défaut je sers la plus petite de l'image, puis de l'échelle jusqu'en fonction de la taille de la fenêtre.

Ceci est un exemple d'un mobile-première approche, que beaucoup considèrent comme la meilleure pratique lorsque vous travaillez avec une conception adaptée, car elle réduit la quantité d'images d'arrière-plan d'un téléphone à charger.

jetez un oeil à http://mediaqueri.es/ pour voir quelques exemples de designs responsive

Et de la recherche autour pour plus d'informations, ce que j'ai donné ici qu'effleurer la surface. Une recherche pour "mobile first" responsive design, vous obtiendrez un beaucoup d'info sur ce sujet.