Separe una versión diferente de un sitio web

Question

Quiero asegurarme de que quiero optimizar y hacer que mi sitio sea muy fácil de mantener para una versión diferente de mi sitio.

Tengo pocas versión de mi sitio:

• iPhone/iPod/Android, etc ...
• iPad/tabletas, etc.
• Otros dispositivos pequeños como el viejo teléfono de aplausos
• defecto

Utilizo el servidor Ubuntu con MySQL 5, PHP 5 y Apache + Memcache.

¿Cuál sería la mejor manera de implementar mi sitio para que todos usen la misma funcionalidad base:

• Php
• JS (para común)
• CSS (para común)
• etc...?

Gracias

Answer 1

Nota: Esta solución tiene más sobre el rendimiento que la solución rápida y finalmente he terminado

Supongo que, dado que está utilizando Memcache, obtiene su contenido de una base de datos MySQL, luego análisis en PHP y guárdelo en el caché y lo muestre.

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

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

Agregue esto su configuración .htaccess o 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]

Entonces, en su archivo PHP, puede usar el $_GET['subdomain'] y decida qué debe hacer para generar su página. De esta manera, es muy fácil de mantener, tiene 1 punto de entrada y puede configurar las reglas en PHP para recuperar información sobre lo que necesita mostrar (el contenido será el mismo, solo el diseño cambiará).

Una cosa que recomiendo será optimizar sus archivos. La versión móvil de su sitio debe ser más ligera de cualquier manera (CSS, Images, JS). No desea que su usuario cargue grandes CSS, JS e imágenes de 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 Flip 176x220. Una forma será nombrar su archivo en función del dominio en el que se encuentren. Por ejemplo:

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

Y en su código PHP puede tener una lógica para cargar dinámicamente los archivos JS, Imágenes y CSS. Como recuerdo, cuanto más rápido cargue su sitio móvil, mejor será. El mantenimiento es importante pero sus usuarios también lo son. Si tiene un sitio móvil lento, tenderán para no ir a su sitio e ir a otro lugar. No todos están usando red 3G/4G o wifi en su teléfono. Además, recomiendo usar la compresión de salida (como desinflar) cuando desee acceder a sus archivos.

Esto mejorará su tiempo de carga, especialmente para los dispositivos móviles. Ahora, si usas el mismo Archivo, digamos un archivo JavaScript para enviar cartas de noticias, 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 como este:

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

Con esta solución, deberá redirigir al sitio apropiado dependiendo del tipo de dispositivo que usen. No desea un teléfono FLIP, vea una versión para iPhone de su sitio. Aquí hay un par de trucos que puedes 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 configuración .htaccess/apache en el sitio predeterminado:

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 saber qué puede usar para los dispositivos móviles y puede verificar http://validator.w3.org/mobile/ Para asegurarse de que todo se vea bien para su dispositivo móvil.

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

/web/lib/

De esta manera, nadie, excepto usted, 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, lo más fácil de mantener es utilizar una estrategia de desarrollo móvil First. Esto significa escribir el CSS para el tamaño más pequeño (usando tamaños de imagen más pequeños siempre que sea posible), y esto se convertirá en la base, luego utilizando consultas de medios CSS3, anule el CSS base con nuevos estilos.

Por supuesto, IE tendrá algunos problemas, así que use una declaración condicional (LTE IE8) después de la hoja de estilo base (para que sobrescriba los estilos base) para cargar el CSS de escritorio para IE.

En cuanto a JS, asegúrese de que el sitio pueda funcionar bien con JS discapacitado. Un consejo es escribir el sitio por completo sin JavaScript, asegúrese de que funcione y luego agregarlo después para mejorar la funcionalidad existente.

Y en cuanto al contenido principal, manténgalo igual, su PHP no necesita ser diferente para los diferentes dispositivos, deje que el CSS haga todo el trabajo pesado.

Aquí hay una muestra de lo que podría tener

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

Entonces, en este ejemplo, estoy estableciendo un ancho base de 240px (suponiendo que la pantalla más pequeña que se usará es 240px) y que lo centré, luego sobrescribo que depende del tamaño de la ventana a un valor mayor. Lo mismo ocurre con la imagen, de forma predeterminada, sirvo la imagen más pequeña y luego la escala 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 trabajan con un diseño receptivo, ya que reduce la cantidad de imágenes de fondo que un teléfono tiene que cargar.

echa un vistazo a http://mediaqueri.es/ Para ver algunos ejemplos de diseños receptivos

Y busque más información, lo que proporcioné aquí solo rasca la superficie. Una búsqueda del diseño receptivo de First Mobile le dará mucha información sobre este tema.