Separare la versione diversa di un sito Web

Question

Voglio assicurarmi di voler ottimizzare e rendere il mio sito molto facile da mantenere per la versione diversa del mio sito.

Ho poche versione del mio sito:

• iPhone/iPod/Android ecc ...
• iPad/tablet ecc ...
• Altri piccoli dispositivi come Old Clap Phone
• predefinito

Uso Ubuntu Server con MySQL 5, PHP 5 e Apache + Memcache.

Quale sarebbe il modo migliore per implementare il mio sito in modo che usino tutti la stessa funzionalità di base:

• PHP
• JS (per comune)
• CSS (per comune)
• eccetera...?

Grazie

Answer 1

Nota: questa soluzione riguarda più le prestazioni che una correzione rapida e ho finalmente finito

Presumo dal momento che stai usando MemCache, ottieni i tuoi contenuti da un database MySQL, quindi analizzalo in PHP e salvalo nella cache e visualizzi.

Ogni versione avrebbe un dominio diverso. iPhone/Android (e altri smartphone) utilizzerà il m.domain.com Dominio, tablet (iPad, galassia ecc ...) utilizzerà t.domain.com, tutti gli altri useranno o.domain.com e il valore predefinito utilizzerà www.domain.com o domain.com.

Tutti questi sotto-domini possono indicare la stessa cartella (/var/www/ - quello predefinito). Quello che farà il trucco è come lo chiami.

Aggiungi questo il tuo .htaccess o apache config:

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]

Quindi nel tuo file PHP puoi usare il $_GET['subdomain'] E decidi cosa devi fare per generare la tua pagina. In questo modo, è molto facile da mantenere, hai 1 punto di iscrizione e puoi impostare le regole in PHP per recuperare informazioni su ciò che è necessario visualizzare (il contenuto sarà lo stesso, solo il layout cambierà).

Una cosa che consiglio sarà di ottimizzare i tuoi file. La versione mobile del tuo sito dovrebbe essere in alcun modo più chiara (CSS, immagini, JS). Non vuoi che il tuo utente carichi grandi CSS, JS e immagini da un dispositivo mobile con una rete lenta. Si desidera ottimizzare il più possibile per un dispositivo di rete più lento. In altre parole, non si desidera visualizzare un logo 300x200 su un dispositivo Flip Phlip 176x220. Un modo sarà quello di nominare il tuo file in base al dominio in cui si trovano. Ad esempio:

• file.css (4K) Vs File-M.CSS (0.4K)
• logo.jpg (300px * 300px 15k) Vs logo-m.jpg (100px * 40px 2K)

E nel tuo codice PHP puoi avere una logica per caricare dinamicamente JS, immagini e file CSS. Come ricorda, più velocemente carichi il tuo sito mobile, meglio è. La manutenzione è importante ma anche i tuoi utenti. Se hai un sito mobile lento, si tenderà a non andare sul tuo sito e andare da qualche altra parte. Non tutti usano la rete 3G/4G o il WiFi sul proprio telefono. Inoltre, ti consiglio di utilizzare la compressione di output (come sgonfiare) quando si desidera accedere ai tuoi file.

Ciò migliorerà il tempo di caricamento, specialmente per i dispositivi mobili. Ora, se usi il stesso File, diciamo un file JavaScript per inviare lettere di notizie, non vuoi duplicarlo né copiarlo con il nome. Invece di creare una logica extra nel tuo PHP, puoi creare un link simbolico come questo:

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

Con questa soluzione, dovrai reindirizzare al sito appropriato a seconda del tipo di dispositivo che utilizzano. Non vuoi una visualizzazione del telefono Flip una versione per iPhone del tuo sito. Ecco un paio di trucchi che puoi fare per raggiungere questo obiettivo:

// 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();
}

O nella configurazione .htaccess/apache sotto il sito predefinito:

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...

Consiglio di guardare http://detectmobilebrowsers.com/ Per scoprire cosa puoi utilizzare per i dispositivi mobili e puoi controllare http://validator.w3.org/mobile/ Per assicurarti che tutto abbia un bell'aspetto per il tuo dispositivo mobile.

A partire dai file PHP comuni, consiglierò di utilizzare un luogo centralizzato, un percorso specifico che puoi usare e il mondo esterno non può. Puoi inserire tutto questo codice in una cartella comune in cui tutti i siti possono accedere a questi file. Esempio:

/web/lib/

In questo modo, nessuno, tranne te, può accedere direttamente ai tuoi file. Nel tuo codice PHP farai qualcosa come (ad esempio lo script di accesso):

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

Answer 2

Esistono diversi modi, tuttavia il più semplice da mantenere è utilizzare una strategia di prima sviluppo mobile. Ciò significa scrivere il CSS per le dimensioni più piccole (utilizzando dimensioni di immagini più piccole ove possibile), e questa diventerà la base, quindi utilizzando query multimediali CSS3, sovrascrive il CSS di base con nuovi stili.

Naturalmente IE avrà alcuni problemi, quindi usa una dichiarazione condizionale (LTE IE8) dopo il foglio di stile di base (in modo che sovrascriva gli stili di base) per caricare il CSS desktop per IE.

Per quanto riguarda JS, assicurarsi che il sito possa funzionare bene con JS disabilitato. Un po 'di consiglio è di scrivere completamente il sito senza JavaScript, assicurarsi che funzioni e quindi aggiungilo dopo per migliorare la funzionalità esistente.

E per quanto riguarda il contenuto principale, mantienilo lo stesso, il tuo PHP non deve essere diverso per i diversi dispositivi, lasciare che il CSS faccia tutto il sollevamento pesante.

Ecco un campione di ciò che potresti avere

//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);
}
}

Quindi in questo esempio sto impostando una larghezza di base di 240px (supponendo che lo schermo più piccolo che verrà utilizzato sia 240px) e averla centrata, quindi sovrascrivo che a seconda della dimensione della finestra a un valore maggiore. Lo stesso vale per l'immagine, per impostazione predefinita, servo l'immagine più piccola, quindi lo ridimensionamento a seconda della dimensione della finestra.

Questo è un esempio di un approccio mobile-primo, che molti considerano la migliore pratica quando si lavora con il design reattivo, in quanto riduce la quantità di immagini di sfondo che un telefono deve caricare.

date un'occhiata al http://mediaqueri.es/ per vedere alcuni esempi di progetti reattivi

E cerca ulteriori informazioni, ciò che ho fornito qui graffia solo la superficie. Una ricerca per il primo design reattivo mobile ti farà ottenere molte informazioni su questo argomento.