Por xploit29
En: Tutoriales
La redirección de páginas web es una práctica muy común en los blogs, cuando migran desde una plataforma a otra y dejan atrás una URL para pasar a ser otra URL, ya sea al adquirir un dominio propio o al migrar de plataforma gratuita (de WordPress a Blogger). Sea como sea, en muchos de éstos casos de hace uso de redirecciones a través de la etiqueta meta y esta redirección es mal vista cuando Google indexa nuestro sitio web, sin embargo existen otros métodos como la redirección a través de JavaScript.
La redirección común a través de la etiqueta meta es la siguiente (la se debe evitar):
<meta http-equiv="refresh" content="5; url=http://www.xploit29.com">
Y respecto a redirección a través de JavaScript tenemos las siguientes opciones:
QUE SE IMPRIMA TEXTO HTML A TRAVÉS DE JAVASCRIPT
Tal y como lo dice el sub-título, podemos realizar una redirección haciendo que java script imprima texto en HTML, ya que al bot de Google se le hace difícil entender JavaScript:
<script type="text/javascript">
var string = (location.href);
var getit = new Array();
var getit = string.split('/');
var result = getit[ getit.length-1 ];
var filename = result.split('.');
document.write("<meta http-equiv='refresh'");
document.write("content='0; url=http://www.xploit29.com/");
if(filename[1]=="html"){
document.write(getit[getit.length-3] + "/");
document.write(getit[getit.length-2] + "/");
document.write(filename[0] + "/");
}
document.write("'/>");
</script>Modificamos el tiempo (segundos) en que deseamos que se genere la redirección y indicamos la URL a la que desee que sus visitantes lleguen luego de la redirección.
ESTABLECIENDO UNA NUEVA DIRECCIÓN A LA PÁGINA
A través del siguiente código, se establece una nueva URL a la página a la cual será redirigida en el tiempo que se establezca:
<script type="text/javascript">
var pagina = 'http://www.xploit29.com';
var segundos = 5;
function redireccion() {
document.location.href=pagina;
}
setTimeout("redireccion()",segundos);
</script>Modificamos la página y el tiempo (segundos)
EXTRA: redirección con PHP
De forma adicional también es posible redireccionar una página web haciendo uso de PHP a través del siguiente código:
<? header("location: http://www.xploit29.com"); ?>Modificamos la URL
Por xploit29
En: Tutoriales
jQuery es una tecnología que simplifica muchas cosas a la hora de realizar el trabajo de estructura de un sitio web, como verán, anteriormente en el desarrollo de esta plantilla, los “TABS” del Sidebar se establecían a través del script de DOMTAB, sin embargo estos me presentaron problemas al incorporarlos a WordPress, así que decidí usar jQuery y en realidad ha sido muy sencillo el insertarlo a la plantilla.
Para iniciar el proceso, entre las etiquetas <head> y </head> debemos añadir las siguientes líneas:
<script src="http://code.jquery.com/jquery-latest.js">
<!--mce:0-->
</script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
<!--mce:1-->
</script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
<!--mce:2-->
</script>
<script type="text/javascript">
<!--mce:3-->
</script>A continuación, insertaremos entre las etiquetas <body> y </body> el contenido del recuadro, más adelante, veremos como agregar más recuadros también.
<div id="EJEMPLO" class="estilo">
<ul>
<li><a href="#tab-1">Título 1</a></li>
<li><a href="#tab-2">Título 2</a></li>
</ul>
<div id="tab-1">
Aquí el contenido</div>
<div id="tab-2">
Aquí el contenido</div>
</div>Podemos agregar tantas pestañas como deseemos sin ningún problema, pero hay que intentar mantener el órden así que es mejor no recargar de pestañas un recuadro. El siguiente paso será la hoja de estilos (el mismo al que uso para esta plantilla) para poder asignarle un diseño al recuadro que contiene la pestañas:
.estilo{
margin:0 0 15px 0;
padding:0;
width:310px;
}
.ui-tabs-nav{
margin:0;
padding:0;
list-style:none;
}
.ui-tabs-nav li {
margin:0 2px 0 0;
padding:0 5px 0 5px;
float:left;
height:30px;
border-top:1px #3399FF solid;
border-right:1px #3399FF solid;
border-left:1px #3399FF solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:30px;
text-transform:uppercase;
}
.ui-tabs-nav li:hover {
background:#EBEBEB;
color:#333333;
}
.ui-tabs-nav li:hover a {
color:#333333;
}
.ui-tabs-nav li {
background:#FFFFFF;
}
.ui-tabs-nav li a {
color:#336699;
text-decoration:none;
}
.ui-tabs-panel {
margin:0;
padding:5px;
float:none;
clear:both;
border:#3399FF solid 1px;
width:298px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
.ui-tabs-panel ul {
margin:0;
padding:0 0 0 15px;
}
.ui-tabs-panel ul li {
margin:0 0 5px 0;
}
.ui-tabs-panel a {
color:#336699;
text-decoration:none;
}
.ui-tabs-panel a:hover {
color:#3399FF;
text-decoration:underline;
}
.ui-tabs-hide {
margin:0;
padding:5px;
float:none;
clear:both;
display:none;
border:#3399FF solid 1px;
width:298px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
.ui-tabs-hide ul {
margin:0;
padding:0 0 0 15px;
}
.ui-tabs-hide ul li {
margin:0 0 5px 0;
}
.ui-tabs-hide a {
color:#336699;
text-decoration:none;
}
.ui-tabs-hide a:hover {
color:#3399FF;
text-decoration:underline;
}El significado de cada una de las etiquetas de estilo CSS:
- estilo: Es el estilo de todo el recuadro con el cual trabajaremos
- ui-tabs-nav: Es la lista que alojará a los títulos de las pestañas
- ui-tabs-panel: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro visible
- ui-tabs-hide: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro oculto que más adelante al pulsar sobre el título del recuadro se verá y convertirá en
ui-tabs-panel
El agregar otro recuadro con contenido no es difícil, simplemente duplicamos el anterior recuadro y realizamos lo siguiente:
Definitivamente, este es un uso básico de esta herramienta y existen uso m´ñas complejos que se le pueden asignar, tal y como se puede observar en el sitio de jQuery.
Actualización: Si tienes un blog en WordPress, puede seguir el siguiente manual para integrarlo.
Por xploit29
En: Web Apps
CSS Text Wrap es una elegante y sencilla herramienta con la que podemos darle casi cualquier forma a nuestros textos a nuestros textos de forma, ya sea la de un circulo, la de un triángulo, un corazón, prácticamente puede formar cualquier polígono con esta herramienta.
La herramienta trabaja a través de nodos algo similar a como se trabaja con Corel Draw al momento de trabar con líneas y editar vectores. El trabajo con CSS Text Wrap es algo similar a la siguiente imagen:
Fácil de usar y lo más importante es que luego de darle forma a nuestro texto, es muy sencillo acoplarlo a nuestro sitio, pues nos da 3 tipos de códigos, ya sea código CSS/XHTML, XHTML con Classes y Javascript.
Enlace | CSS Text Wrap
Vía | Wwwhat’s new
