Versión diferente separada de un sitio web

Question

Quiero asegurarme de que quiero optimizar y hacer que mi sitio sea muy fácil de mantener para diferentes versiones de mi sitio.

que tienen pocas versión de mi sitio web:

• iPhone/iPod/Android etc ...
• iPad/tabletas, etc ...
• otros dispositivos pequeños como teléfonos aplauso de edad
• predeterminado

Uso el servidor ubuntu con MySQL 5, PHP 5 y Apache + Memcache.

¿Cuál sería la mejor manera de poner en práctica mi sitio para que todos utilizan la misma funcionalidad básica:

• PHP
• JS (por común)
• CSS (por común)
• etc. ...?

gracias

Answer 1

Nota: esta solución es más sobre el rendimiento de solución rápida y por fin he terminado

Asumo ya que está utilizando Memcache a presentar el contenido de una base de datos MySQL, y luego analizarlo en PHP y guardar a la caché y mostrarlo.

Cada versión tendría un dominio diferente. iPhone/Android (y otro teléfono inteligente) utilizará el dominio m.domain.com, las tabletas (iPad, galaxy, etc.) usarán t.domain.com, todas las demás usarán o.domain.com y las predeterminadas usarán www.domain.com o domain.com.

Todos estos subdominios pueden apuntar a la misma carpeta (/var/www/ - la predeterminada). Lo que hará el truco es cómo lo llamas.

Añadir esta tu .htaccess o configuración de 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] 

Así que en su archivo PHP que puede utilizar el $_GET['subdomain'] y decidir lo que hay que hacer para generar su página. De esta forma, es muy fácil de mantener, tienes 1 punto de entrada y puedes configurar reglas en PHP para recuperar información sobre lo que necesitas mostrar (el contenido será el mismo, solo cambiará el diseño).

Una cosa que recomiendo será optimizar sus archivos. La versión móvil de su sitio debe ser de alguna manera (CSS, Images, JS). No desea que su usuario cargue grandes CSS, JS e imágenes desde un dispositivo móvil con una red lenta. Desea optimizar tanto como sea posible para un dispositivo de red más lento. En otras palabras, no desea mostrar un logotipo de 300x200 en un dispositivo de teléfono plegable de 176x220. Una forma será a nombre de su archivo basado en el dominio que están en, por ejemplo:.

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

Y en su código PHP que puede tener una lógica para cargar dinámicamente JS, imágenes y archivos CSS. Como recordatorio, mientras más rápido cargue su sitio móvil, mejor será. La capacidad de mantenimiento es importante, pero tus usuarios también lo son. Si tiene un sitio móvil lento, tenderá a no ir a su sitio e ir a otro lugar. No todo el mundo usa una red 3G/4G o WiFi en su teléfono. Además, recomiendo utilizar la compresión de salida (como deflate) cuando desee acceder a sus archivos.

Esto mejorará su tiempo de carga, especialmente para los dispositivos móviles. Ahora, si utiliza el mismo archivo , digamos un archivo Javascript para enviar cartas informativas, no desea duplicarlo ni copiarlo con el nombre. En lugar de crear una lógica adicional en su PHP, puede crear un enlace simbólico de esta manera:

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

Con esta solución, tendrá que volver a dirigir al sitio adecuado en función del tipo de dispositivo que utilicen. No desea que un teléfono plegable vea una versión de iPhone de su sitio. Aquí hay un par de truco que puede hacer para lograr esto:

// 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 en la.htaccess/configuración de Apache en el sitio por defecto:

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

recomiendo mirar http://detectmobilebrowsers.com/ para averiguar lo que se puede utilizar para los dispositivos móviles y se puede comprobar http://validator.w3.org/mobile/ para asegurarse de que todo se ve bien para su dispositivo móvil.

A partir de los archivos PHP comunes, recomendaré utilizar un lugar de centralización, una ruta específica que puede usar y el mundo exterior no. Puede poner todo este código en una carpeta común donde todos los sitios pueden acceder a estos archivos. Ejemplo:

/web/lib/

De esta manera, nadie, excepto tú, puede acceder directamente a sus archivos. En su código PHP, hará algo como (por ejemplo, el script de inicio de sesión):

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

Answer 2

Hay algunas maneras diferentes, sin embargo, el más fácil de mantener es el uso de una primera estrategia de desarrollo móvil. Esto significa escribir el CSS para el tamaño más pequeño (usando tamaños de imagen más pequeños donde sea posible), y esto se convertirá en la base, luego usando las consultas de medios css3, anulará el CSS base con nuevos estilos.

Por supuesto, IE tendrá algunos problemas, por lo tanto, utilice una sentencia condicional (lte ie8) después de la hoja de estilo base (para sobrescribir los estilos base) para cargar el css del escritorio, por ejemplo.

En cuanto a JS, asegúrese de que el sitio puede funcionar bien con JS deshabilitado. Un pequeño consejo es escribir el sitio completamente sin javascript, asegúrese de que funcione y luego agréguelo para mejorar la funcionalidad existente.

Y en cuanto al contenido principal, mantenlo igual, tu php no necesita ser diferente para los diferentes dispositivos, deja que el CSS haga todo el trabajo pesado.

Aquí está una muestra de lo que es posible que tenga

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

Así que en este ejemplo Soy la creación de una anchura de base de 240px (suponiendo que la pantalla más pequeña que se utilizará es 240px) y hacer que se centra , luego sobrescribo eso dependiendo del tamaño de la ventana a un valor mayor. Lo mismo ocurre con la imagen, de manera predeterminada sirvo la imagen más pequeña y luego la amplío dependiendo del tamaño de la ventana.

Este es un ejemplo de un enfoque móvil primero, que muchos consideran la mejor práctica cuando se trabaja con un diseño receptivo, ya que reduce la cantidad de imágenes de fondo que un teléfono tiene que cargar.

echar un vistazo a http://mediaqueri.es/ para ver algunos ejemplos de diseños que responden

Y buscar alrededor para obtener más información, lo que he proporcionado aquí sólo roza la superficie. Una búsqueda de un primer diseño receptivo para dispositivos móviles le brindará mucha información sobre este tema.