Es muy comun querer saber como se ve tu diseño de una pagina web en otros navegadores con diferentes versiones, lastima que no todos los navegadores web interpreten igual los codigos html y css.
Afortunadamente hay websites para ese proposito:
- BrowserShots, Es una web dedicada a este proposito, su funcionamiento es asi: introduciomos la url a revizar, despues seleccionamos los navegadores que deseemos y enviamos la peticion, se agregara a la cola y despues de un tiempo se mostrara la captura de pantalla de cada navegador mostrando la salida de nuestra url.
(Navegadores: Todas las versiones de Firefox, IExplorer, Opera, Flock, Safari, muchos mas).
- ie netRenderer, Solo para las versiones de Internet Explorer. Es muy util para ver rapidamente la captura de pantalla de una url. Si no tenemos instalado el ie6 es una alternativa rapida para checkear la compatibilidad.
En este tutorial muy completo vamos a implementar un script para paginar los resultados de una base de datos.
Primeramente, vamos a crear una base de datos y ejecutaremos este SQL, que creara una tabla llamada ‘articles‘ y le agregara algunos registros.
1
2
3
4
5
6
7
8
9
10
11
| CREATE TABLE IF NOT EXISTS `articles` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`titulo` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;
INSERT INTO `articles` (`id`, `titulo`) VALUES
(1, 'Articulo 1'),(2, 'Articulo 2'),(3, 'Articulo 3'),(4, 'Articulo 4'),
(5, 'Articulo 5'),(6, 'Articulo 6'),(7, 'Articulo 7'),(8, 'Articulo 8'),
(9, 'Articulo 9'),(10, 'Articulo 10'),(11, 'Articulo 11'),(12, 'Articulo 12'),
(13, 'Articulo 13'); |
Segundo, crea un archivo llamado ‘explorador.php‘ con este contenido:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
| <?php
/* Creado por nabelcc@gmail.com
* www.abelino.com
*/
$page=(isset($_REQUEST['page']))? $_REQUEST['page']:1;
$maxrows=3;//numero de registros por pagina
$start=(($page-1 )*$maxrows);
/* conexion a la base de datos */
mysql_connect('localhost', 'username', 'password');
mysql_select_db('nombre_db');
$results=mysql_query("SELECT SQL_CALC_FOUND_ROWS * FROM `articles` LIMIT $start,$maxrows ");
//SQL_CALC_FOUND_ROWS es para que mysql cuente todos los resultados encontrados
$rtotal=mysql_query("SELECT FOUND_ROWS()");
if($rtotal=(mysql_fetch_array($rtotal))) {
$found_rows=$rtotal[0 ];//numero total de rows encontrados
$num_rows=mysql_num_rows($results);//numero de rows encontrados solo en esta pagina
}
/* GENERANDO las variables para paginar */
$pagvars=array();
if(isset($found_rows)&&$found_rows>0 ) {
$pagvars['total']=$found_rows;
$pagvars['page']=$page;
$pagvars['xpage']=$maxrows;
$pagvars['limit']=6;//numero maximo de links a paginas a mostrar en la pagination
$pagvars['startindex']=$start;
$pagvars['model']='explorador.php?page=<-p-a-g-e->';
}
/* MOSTRANDO LOS RESULTADOS */
echo '<table width="500" border="1">
<tr>
<th>
<b>id</b>
</th>
<th>
<b>Titulo</b>
</th>
</tr>';
while($article=mysql_fetch_assoc($results)){
echo "<tr>
<td>{$article['id']}
</td>
<td>{$article['titulo']}
</td>
</tr>";
}
/* MOSTRANDO LA PAGINATION */
if (isset($pagvars)) {
echo "<tr><td colspan='2'>";
$pagination =my_pagination ($pagvars);
//print_r($pagination);
?>
<link type="text/css" rel="Stylesheet" href="paginacion.css"/>
<div class="pag">
<div class="pagLftNav">
<span>
<?php if(isset($pagination['back'])) { ?>
<a class="arrowLft" href=" <?php echo $pagination['back']['href']; ?>"> Atras</a>
<?php }else { ?>
<a class="disabled arrowLft"> Atras</a>
<?php } ?>
</span>
</div>
<div class="pagRitNav">
<span>
<?php if(isset($pagination['next'])) { ?>
<a class=" arrowRit" href=" <?php echo $pagination['next']['href']; ?>"> Siguiente</a>
<?php }else { ?>
<a class="disabled arrowRit"> Siguiente</a>
<?php } ?>
</span>
</div>
<div class="pagNums">Pagina:
<?php
foreach($pagination['pages'] as $item) {
if($pagvars['page']==$item['page']) {
?>
<span><a class="disabled"> <?php echo $item['page']; ?></a></span>
<?php }else { ?>
<span><a href=" <?php echo $item['href']; ?>"> <?php echo $item['page']; ?></a></span>
<?php
}
}
?>
</div>
</div>
<?php
echo "</td></tr>";
}
echo "</table>";
?>
<?php
function my_pagination ($vars){
$page=$vars['page'];//pagina actual
$totalitems=$vars['total'];//toral resultados
$xpage=$vars['xpage'];//
$model=$vars['model'];
$limit=$vars['limit'];
$pagination=array();//items;back;next
$start=null;$end=null;
$totalpages=intval($totalitems/$xpage);
if(($totalitems%$xpage)>0 ){$totalpages++;}
$medio=intval($limit/2 );
if(($limit%2 )>0 ){$medio++;}
if($totalpages<=$limit){
$start=1;$end=$totalpages;
} else if($totalpages-$page<=$medio){
$end=$totalpages;$start=$totalpages-$limit+1;
}else if($page<=$medio){
$start=1;$end=$start+$limit-1;
}else{
$start=$page-$medio+1;$end=$start+$limit-1;
}
$items=array();
for($i=$start;$i<=$end;$i++){
$item[]=array();
$item['href']=str_ireplace('<-p-a-g-e->',$i, $model);
$item['page']=$i;
$items[]=$item;
}
$pagination['pages']=$items;
if($page>1 ){
$item[]=array();
$item['href']=str_ireplace('<-p-a-g-e->',$page-1 , $model);
$item['page']=$page-1;
$pagination['back']=$item;
}
if($totalpages-$page>0 ){
$item[]=array();
$item['href']=str_ireplace('<-p-a-g-e->',$page+1 , $model);
$item['page']=$page+1;
$pagination['next']=$item;
}
return $pagination;
}
?> |
Ahora pasare a explicar este codigo ya que es importante:
- En la linea 6, se encuentra a la variable $maxrows, que indica el numero de registros a mostrar por pagina.
- En las lineas 10 y 11, puedes configurar la conexion a la base de datos.
- En las lineas 22 al 31, se prepara la variable $pagvars para pasarle a la funcion my_pagination($pagvars). El parametro $pagvars['limit'], indica el numero maximo de enlaces o paginas a mostrar en la paginacion. El parametro $pagvars['model'], contiene el modelo de la url que se va usar en la pagination, ‘<-p-a-g-e->‘ sera reemplazado por un numero de pagina correspondiente.
- En las lineas 35 al 52 se muestra los registros encontrados en html.
- En la linea 58, se llama a la funcion my_pagination($pagvars), cuya funcion es generar un array con una url asignada a cada pagina.
- Desde las lineas 61 al 94 se muestra la pagination en html.
Tercero, crear un archivo ‘paginacion.css’ con el siguiente contenido, que contiene los estilos css para esta aplicacion:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| /* Pagination by abelino.com
----------------------------- */
.pag {
padding: 6px 0;
background: #CFF7FF;
font-size:12px;
}
.pag span {
padding-left: 7px;
}
.pag .pagLftNav,
.pag .pagRitNav {
float: left;
width: 12%;
}
.pag .pagRitNav{
float: right;
text-align: right;
padding: 0;
}
.pag .pagRitNav a{
margin-right: 7px;
}
.pag .pagRitNav a,
.pag .pagLftNav a {
color: #003D7B;
font-weight:bold;
}
.pag .pagNums{
text-align: center;
}
.pag .pagNums span {
padding: 0 3px;
}
.pag .pagNums span a {
background: #fff;
padding: 1px 4px;
color: #045CB6 !important;
border: 1px solid #ccc;
}
.pag .pagNums span a.disabled {
background: #666;
color: #fff !important;
}
.pag .pagNums span a.showAll {
background: none;
color: #045CB6 !important;
padding: 0;
border: none;
}
/* style para tablas */
th{
background-color:#CFCFCF;
} |
Ahora desde tu navegador entra a “/explorador.php”, se listara los articulos de 3 en 3, y en la parte de inferios estara una paginación.
Espero que este tutorial haya sido provechoso para usted.
Seguramente alguna vez haz querido hacer unos efectos de transparencia en tus diseños con CSS.
En realidad esto se logra de diferentes maneras, veamos las opciones con estilos CSS:
1
2
3
4
| .transparente50 {
filter:alpha(opacity=50);
opacity: 0.5;
} |
En esta estilo CSS tiene el efecto 50% de transparencia,es necesario indicar que la propiedad se llama “OPACITY” (opacidad), y su valor maximo es 1 o 100 en el caso de filter:alpha(opacity=100), con ese valor no hay ninguna transparencia; ahora explico cada propiedad y en los navegadores que funciona:
- opacity: 0.5; es el estandar actual en CSS, y funciona en la mayoria de vesiones de Firefox, Safari y Opera. Esto propiedad seria suficiente si todos los navegadores siguieran los estandares vigentes.
- filter:alpha(opacity=50); para Internet Explorer.
Ahora, tendrias un problema si deseas que el fondo sea transparente pero el texto no, como se muestra en la imagen de arriba. Ya que si tu pones a un contenedor con “opacity:0.5″, todo el contenido del contenedor aplicaria ese efecto.
Aplicando los estilos mencionados anteriormente la solucion aparente seria asi:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <style type ="text/css">
.contenedor {
/*background-color no es necesario pero esta aqui como ejemplo*/
background-color:#000;
/*25% de opacidad osea 75% de transparencia*/
filter :alpha (opacity =25 );
opacity : 0.25;
}
.contenedor .texto {
background:transparent;
color:blue;
/*100% de opacidad osea 0% de transparencia*/
filter :alpha (opacity =100 );
opacity : 1;
}
</style >
<div class ="contenedor">
<div class ="texto">Texto sin transparencia y en azul</div >
</div > |
Esto no funciona en Firefox, el texto se muestra transparente; y en Internet explorer, funciona pero, el texto se muestra distorcionado especialemente las que estan en negrita.
La solución
Create una imagen de tamaño minimo [1 pixel de alto y ancho] en Photoshop, Fireworks o el programa de manipulacion de imagen que utilizes, pintale del color que desees por ejemplo negro, y aplicale el filtro de opacidad al 50%. Ahora guardalo como un archivo PNG con el nombre “transparente50.png”, los archivos PNG tienen la propiedad de conservar su transparencia y es compatible con casi todos los navegadores web.
Entonces, asi quedaria el estilo CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <style type ="text/css">
.contenedor {
/*ruta del archivo PNG con transparencia*/
background:url(transparente50.png ) repeat;
}
.contenedor .texto {
color:blue;
background:transparent;
}
</style >
<div class ="contenedor">
<div class ="texto">
Texto sin transparencia
</div >
</div > |
Espero que halla sido de provecho esta redacción.
Como vereis, inaguro un nuevo diseño mas atrayente y amigable para mi blog. Fue desarrollado integramente por mi.
Inspirado en el arte de las ilustraciones, en texturas de papel antiguo y en otras cosillas.
Espero que sea de su completo agrado.
Hace un tiempo he estado intentando configurar DansGuardian con Squid en Opensuse. Lo cual el filtrado funciona correctamente para ello se necesitaba configurar manualmente el modo de conexion de mi navegador web hacia internet.
Pero mi objetivo era que todas las peticiones pasen por el puerto 8080 de DansGuardian. Por lo que era necesario modificar las iptables del sistema y redireccionar todas las peticiones del puerto 80 al 8080.
Esta fue mi solucion:
1. Se supone que has instalado satisfactoriamente Squid y DansGuardian en Opensuse.
2. Squid escucha en el puerto: 3128 y Dansguardian: 8080 (Configuracion por defecto).
3. Ahora configuraremos el SuseFirewall2 para que cada vez que se inicie modifique los iptables.
En el archivo /etc/sysconfig/SuSEfirewall2 cambia la linea:
FW_CUSTOMRULES=”"
por
1
| FW_CUSTOMRULES="/etc/sysconfig/scripts/SuSEfirewall2-custom" |
Aqui estas diciendo a SuseFirewall2 que importe las funciones de ese archivo.
4. Ahora el codigo de esta funcion fw_custom_before_denyall() en el archivo /etc/sysconfig/scripts/SuSEfirewall2-custom cambialo a:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| fw_custom_before_denyall() {
# Allow Squid outbound access on port 8080 (Dansguardian)
iptables -t nat -A OUTPUT -p tcp -m tcp --dport 8080 -m owner --uid-owner squid -j ACCEPT
# Allow Squid outbound access on port 80
iptables -t nat -A OUTPUT -p tcp -m tcp --dport 80 -m owner --uid-owner squid -j ACCEPT
# Don't redirect root on port 80
iptables -t nat -A OUTPUT -p tcp -m tcp --dport 80 -m owner --uid-owner root -j ACCEPT
# Don't redirect root on port 3128 (Squid)
iptables -t nat -A OUTPUT -p tcp -m tcp --dport 3128 -m owner --uid-owner root -j ACCEPT
# Redirect all requests on port 80 to 8080 (Dansguardian)
iptables -t nat -A OUTPUT -p tcp -m tcp --dport 80 -j REDIRECT --to-ports 8080
# Accept requests on port 3128 from nobody (Dansguardian user)
iptables -t nat -A OUTPUT -p tcp -m tcp --dport 3128 -m owner --uid-owner nobody -j ACCEPT
# Redirect all other requests on port 3128 to 8080 to prevent users from getting around Dansguardian by going directly to Squid
iptables -t nat -A OUTPUT -p tcp -m tcp --dport 3128 -j REDIRECT --to-ports 8080
# Delete the NOTRACK rule that SuSEfirewall2 adds to the raw table of the OUTPUT chain
iptables -t raw -D OUTPUT -o lo -j NOTRACK
true
} |
Ahora reinicia tu SuseFirewall2 y listo.
