Tema: [APORTE] Modificar diseño web OTF
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/01/2013, 06:34
DoHITB
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años, 1 mes
Puntos: 33
[APORTE] Modificar diseño web OTF
Buenas!

Como siempre (casi siempre) he obtenido buenos resultados buscando y publicando en estos foros, (sobretodo con mis dudas de PHP...), he decidido hacer un pequeño aporte.

Se trata de un sistema que da la opción de modificar el diseño web desde la misma web que está en desarrollo.

Es decir, desde miweb.com puedo modificar su propio estilo...

Este sistema está creado con PHP, JS y AJAX; consta de dos archivos PHP y un agregado de funciones JS.

Esta herramienta crea estilos para navegadores concretos y resoluciones concretas; es decir, si usamos IE 7 y hacemos servir esta herramienta, el estilo solo será para IE 7, con lo que podemos hacer "bugFix" de nuestro CSS.

Para implementar esta herramienta, necesitamos primero crear una tabla:

Código: 
id - int - PK, NN, AI
class - varchar(45)
top - varchar(6)
left - varchar(6)
width - varchar(6)
height - varchar(6)
browser - int(2)
width_screen - int(4)
height_screen - int(4)
Luego, creamos los archivos Style.php y Parser.php, cuyo contenido es el siguiente:

Parser.php
Código PHP: 
Ver original
  1. <?php
  2. if(isset($_POST['f'])){
  3.     if($_POST['f'] == "1"){
  4.         echo(splitCSS());
  5.     }elseif($_POST['f'] == 2){
  6.         echo(getCSS($_POST['e'], $_POST['w'], $_POST['h']));
  7.     }elseif($_POST['f'] == 3){
  8.         echo(putCSS($_POST['c'],$_POST['t'],$_POST['l'],$_POST['w'],$_POST['h'],$_POST['ws'],$_POST['hs']));
  9.     }elseif($_POST['f'] == 4){
  10.         echo(popCSS($_POST['c'],$_POST['ws'],$_POST['hs']));
  11.     }
  12. }elseif(isset($_GET['f'])){
  13.     if($_GET['f'] == 2){
  14.         echo(loadCSS($_GET['w'], $_GET['h'], $_GET['x']));
  15.     }
  16. }
  17.  
  18. function splitCSS(){
  19.     $ret = '<select size="20" name="clases" onchange="put();">';
  20.     $f = fopen("../css/ct_style.css", "r");
  21.     $aux = explode("{", fread($f, filesize("../css/ct_style.css")));
  22.     fclose($f);
  23.     $a = array();
  24.     $a[] = $aux[0];
  25.  
  26.     for($i=1;$i<count($aux);$i++){
  27.         $r = explode("}", $aux[$i]);
  28.         
  29.         if(count(explode(".", $r[1])) == 2){
  30.             $a[] = trim($r[1]);
  31.         }
  32.     }
  33.     
  34.     for($i=0;$i<count($a);$i++){
  35.         $ret .= '<option value="'.$a[$i].'">'.$a[$i].'</option>';
  36.     }
  37.  
  38.     return $ret.'</select>';
  39. }
  40.  
  41. function loadCSS($w, $h, $x){
  42.     include_once "./Style.php";
  43.     
  44.     $s = new Style();
  45.     return $s->getSpecificStyle($w, $h, $x);
  46. }
  47.  
  48. function getCSS($e, $w, $h){
  49.     $con = mysql_select_db("database", $connection = mysql_connect("host", "user", "pass"));
  50.     $res = mysql_query("select `top`,`left`,`width`,`height` from ct_style where browser=".getBrowser($_SERVER['HTTP_USER_AGENT'])." and width_screen=".$w." and height_screen=".$h." and class='".$e."'")or die(mysql_error());
  51.     $row = mysql_fetch_array($res, MYSQL_NUM);
  52.     
  53.     return '<br /><hr />Top: <input type="text" name="t" value="'.$row[0].'" />Left: <input type="text" name="l" value="'.$row[1].'" />Width: <input type="text" name="w" value="'.$row[2].'" />Height: <input type="text" name="h" value="'.$row[3].'" />';
  54.     
  55. }
  56.  
  57. function putCSS($c, $t, $l, $w, $h, $ws, $hs){
  58.     $top = "";
  59.     $left = "";
  60.     $width = "";
  61.     $height = "";
  62.     $browser = getBrowser($_SERVER['HTTP_USER_AGENT']);
  63.     
  64.     if(isset($t)){$top = $t;}
  65.     if(isset($l)){$left = $l;}
  66.     if(isset($w)){$width = $w;}
  67.     if(isset($h)){$height = $h;}
  68.     
  69.     $con = mysql_select_db("database", $connection = mysql_connect("host", "user", "pass"));
  70.     $res = mysql_query("select count(*) from ct_style where class='".$c."' and width_screen=".$ws." and height_screen=".$hs);
  71.     $row = mysql_fetch_array($res, MYSQL_NUM);
  72.     
  73.     if($row[0] == 0){
  74.         mysql_query("insert into ct_style(`class`,`top`,`left`,`width`,`height`,`browser`,`width_screen`,`height_screen`) values('".$c."', '".$top."', '".$left."', '".$width."', '".$height."', ".$browser.", ".$ws.", ".$hs.")");
  75.     }else{
  76.         mysql_query("update ct_style set `top`='".$top."',`left`='".$left."',`width`='".$width."',`height`='".$height."' where `class`='".$c."' and `browser`=".$browser." and `width_screen`=".$ws." and `height_screen`=".$hs);
  77.     }
  78.     
  79.     return '<br /><hr />Top: <input type="text" name="t" value="'.$top.'" />Left: <input type="text" name="l" value="'.$left.'" />Width: <input type="text" name="w" value="'.$width.'" />Height: <input type="text" name="h" value="'.$height.'" />';
  80. }
  81.  
  82. function popCSS($c,$w,$h){
  83.     $con = mysql_select_db("database", $connection = mysql_connect("host", "user", "pass"));
  84.     $res = mysql_query("delete from ct_style where `class`='".$c."' and `width_screen`=".$w." and `height_screen`=".$h." and `browser`=".getBrowser($_SERVER['HTTP_USER_AGENT']))or die(mysql_error());
  85.     
  86.     return '<br /><hr />Top: <input type="text" name="t" />Left: <input type="text" name="l" />Width: <input type="text" name="w" />Height: <input type="text" name="h" />';
  87. }
  88. ?>

Código PHP: 
Ver original
  1. <?php
  2. class Style{
  3.     public function __construct(){}
  4.     
  5.     public function getSpecificStyle($w, $h, $x){
  6.         include_once "../functions/content.php";
  7.         
  8.         $con = mysql_select_db("database", $connection = mysql_connect("host", "user", "pass"));
  9.         $res = mysql_query("select `class`,`top`,`left`,`width`,`height` from ct_style where browser='".getBrowser($_SERVER['HTTP_USER_AGENT'])."' and width_screen=".$w." and height_screen=".$h);
  10.         $str = '';
  11.         
  12.         while($row = mysql_fetch_array($res, MYSQL_NUM)){$str .= '.'.$row[0].'{top:'.$row[1].'px;left:'.$row[2].'px;width:'.$row[3].'px;height:'.$row[4].'px;}';}
  13.         
  14.         if(isset($x)){
  15.             $str .= '.'.$x.'{background-color:#E31E26;border:1px solid #E31E26;}';
  16.         }
  17.  
  18.         return 'css=document.createElement("style");css.innerHTML="'.$str.'";document.getElementsByTagName("head")[0].appendChild(css);';
  19.     }
  20.     
  21.     public function menuLateral(){
  22.         $b = getBrowser($_SERVER['HTTP_USER_AGENT']);
  23.         
  24.         return '<div style="position:relative;"><form name="sstyle" action="#" method="post"><span id="sclases"><select size="20" name="clases" onchange="put();"></select></span><span id="sprop"><br /><hr />Top: <input type="text" name="t" />Left: <input type="text" name="l" />Width: <input type="text" name="w" />Height: <input type="text" name="h" /></span><input type="button" name="s" value="Aplicar" onclick="applyChanges();" /><input type="button" name="no" value="Reset" onclick="resetStyle();"></form><div><br /><hr />Info:<br />Navegador: '.$b.' ('.$this->getBrowserFromNumber($b).')<br /><span id="res"></span></div></div><script type="text/javascript">fillInfo();fillForm();</script>';
  25.     }
  26.     
  27.     private function getBrowserFromNumber($n){
  28.         $ret = array('Chrome', 'IE 9', 'IE 8', 'IE 7', 'FireFox', 'Safari', 'Flock', 'Opera', 'NetScape', 'Otro');
  29.         return $ret[$n];
  30.     }
  31. }
  32. ?>

función getBrowser:

Código PHP: 
Ver original
  1. function getBrowser($ua){
  2.     if(preg_match('/Chrome/i',$ua)){return 0;}
  3.     elseif(preg_match('/MSIE 9.(.+)/i',$ua)){return 1;}
  4.     elseif(preg_match('/MSIE 8.(.+)/i',$ua)){return 2;}
  5.     elseif(preg_match('/MSIE 7.(.+)/i',$ua)){return 3;}
  6.     elseif(preg_match('/Firefox/i',$ua)){return 4;}
  7.     elseif(preg_match('/Safari/i',$ua)){return 5;}
  8.     elseif(preg_match('/Flock/i',$ua)){return 6;}
  9.     elseif(preg_match('/Opera/i',$ua)){return 7;}
  10.     elseif(preg_match('/Netscape/i',$ua)){return 8;}
  11.     else{return 9;}
  12. }

Agregado de funciones JS:

Código: 
function put(){
	s=winSize();
	opener.location.href=getCurrentURL()+'&div='+document.sstyle.clases.options[document.sstyle.clases.selectedIndex].value.substring(1);
	doAjax('./Class/Parser.php','f=2&e='+document.sstyle.clases.options[document.sstyle.clases.selectedIndex].value.substring(1)+'&w='+s[0]+'&h='+s[1],'sprop',0)
}
	
function style(){
	s=winSize();
	u=document.location.href.split("?");
	x='';
	u=u[1].split("&");
	
	for(i=0;i<u.length;i++){
		w=u[i].split("=");
		
		if(w[0]=="div"){x='&x='+w[1]}
	}
	
	script=document.createElement("script");
	script.setAttribute('src','./Class/Parser.php?f=1&w='+s[0]+'&h='+s[1]+x);
	document.getElementsByTagName('head')[0].appendChild(script)
}
	
function applyChanges(){
	s=winSize();
	doAjax('./Class/Parser.php','f=3&c='+document.sstyle.clases.options[document.sstyle.clases.selectedIndex].value.substring(1)+'&t='+document.sstyle.t.value+'&l='+document.sstyle.l.value+'&w='+document.sstyle.w.value+'&h='+document.sstyle.h.value+'&ws='+s[0]+'&hs='+s[1],'sprop',0);
	opener.location.reload()
}



function winSize(){
	if(typeof window.innerWidth!='undefined'){
		return[window.innerWidth,window.innerHeight]
	}else if(typeof document.documentElement!='undefined'&&typeof document.documentElement.clientWidth!='undefined'&&document.documentElement.clientWidth!=0){
		return[document.documentElement.clientWidth,document.documentElement.clientHeight]
	}else{
		return[document.getElementsByTagName('body')[0].clientWidth,document.getElementsByTagName('body')[0].clientHeight]
	}
}

function fillInfo(){
	s=winSize();
	document.getElementById('res').innerHTML='Resolución de pantalla: Width('+s[0]+'px); Height('+s[1]+'px);'
}

function fillForm(){doAjax('./Class/Parser.php','f=1','sclases',0)}

function resetStyle(){
	s=winSize();
	doAjax('./Class/Parser.php', 'f=4&c='+document.sstyle.clases.options[document.sstyle.clases.selectedIndex].value.substring(1)+'&ws='+s[0]+'&hs='+s[1],'sprop',0);
	opener.location.reload();
}
finalmente, en el HTML, antes de acabar la sección head, incluimos:

Código: 
<html>
  <head>
   ...
    <script type="text/css">style();</script>
  </head>
...
Y en el body, un enlace similar a este:

Código: 
<a href="pagina.com/disenyo" target="_blank">Estilos</a>
La página "disenyo" tendría que instanciar "Style.php" y llamar al método "menuLateral".
Última edición por GatorV; 08/01/2013 a las 10:29