Contenido

Pon marca de agua a tus páginas web con CSS

27 Ago

+ 1

Via Ajaxian, descubro  un método bastante sencillo y práctico para poner una marca de agua a nuestras páginas web mediante CSS. De esta forma podemos hacer que esta marca se vea al imprimir la página y cuando la visitamos desde una navegador aparece completamente invisible.

Reutiliza tags script para cargar js y ejecutar código

27 Ago

+ 7

John Resig, nos muestra una técnica con la que podremos reutilizar los tags <script /> para cargar ficheros JS y además ejecutar código en el mismo tag.

Método tradicional

<script type="text/javascript" src="fichero.js" ></script>
<script type="text/javascript"> funcion_de_fichero("Hola");</script>

Actualmente el sistema usado es el de usar un tag <script /> para cargar el fichero JS que necesitamos con el código que necesite la página y posteriormente usarlo en otro tag <script /> independiente.

Alternativa

John nos propone combinar ambos para conseguir hacer, más semántico el código y además conseguir ahorrarnos tener que volver a definir un tag <script />, a mi parecer innecesario.

<script type="text/javascript" src="fichero.js" >
   funcion_de_fichero("Hola");
</script>

Como podemos ver, queda mucho más elegante, semántico y encima fácil de entender ya que podemos relacionar la función al fichero sabiendo el src del tag en el que está siendo usada.

La mágia

Para hacer posible esto, evidentemente necesitamos tirar de código e implementar la solución nosotros mismo. Los navegadores actuales no permiten este tipo de implementación por lo que es necesario añadir 3 líneas al fichero que carguemos en el src de nuestro tag <script />

var scripts = document.getElementsByTagName("script");
eval( scripts[ scripts.length - 1 ].innerHTML );

El codigo anterior, deberemos insertarlo al final del fichero que indiquemos en el src del tag. Su misión es buscar todos los tags <script /> y evaluar el contenido del último detectado.

Simplemente genial, sería interesante disponer de esto a nivel nativo.

Google Gears para Safari

26 Ago

+ 1

Con esta versión para Safari, tenemos ya Google Gears para:

  • Internet Explorer 6+ y Firefox 1.5+ sobre Windows
  • Firefox 1.5+ sobre Linux
  • Firefox 1.5+ sobre MacOs X
  • Internet Explorer 4.01+ sobre Windows Mobile.
  • Opera Mobile 9.50
  • Opera 9.5*

La lista va creciendo y eso nos acerca a una propuesta realmente interesante para suplantar el almacenamiento DOM hasta que este esté más y mejor implantado en los navegadores futuros.

* Recordaba que la versión 9.50 estaba preparada para trabajar con Google gears, pero buscando información solo he encontrado para la versión Mobile, así que por el momento lo dejo como interrogante. Actualizaré en cuanto tenga más info.

¿La lista definitiva para los usuarios de WordPress?

26 Ago

+ 4

No se si será la definitiva, lo que está claro es que es una de las más completas que he encontrado nunca por internet. En ella encontrarás todos, o casi todos, los artículos que puedas necesitar a medida que vas aprendiendo a usar WordPress y las capacidades de este CMS te van corriendo por la venas. Evidentemente lo encontré gracias a AyudaWordpress 😉 (Al parecer lo han quitado ya que el enlace era un copypaste de Blog En serio, corregido el enlace)

Internet Explorer 8 y su navegación privada

26 Ago

+ 10

Hace días que se viene hablando de las bondades de Microsoft al integrar la posibilidad de navegar de forma anónima desde su nuevo navegador, Internet Explorer 8.  La idea es no guardar ningún tipo de registro, ni dirección de la navegación del cliente en el propio navegador, ideal para que nuestros jefes nunca sepan por donde hemos navegado desde el trabajo.

La gente de IEBlog, ha publicado un artículo en el que intentan aclarar como funcionará el InPrivate Browsing y así explicar en que consiste la navegación privada.

InPrivate Browsing

Activando este modo, no se almacenarán cookies, histórico, ficheros temporales o cualquier otro tipo de dato durante su activación.

inprivatehomepage

Cuando esté activo este modo:

  • Nuevas cookies no serán almacenadas
    • Todas las nuevas cookies serán tratadas como si fueran de sessión
    • Las cookies existentes podrán ser leidas
    • DOM Storage será tratado de igual forma, borrando su contenido al terminar la sessión
  • Nuevas entradas en el histórico no serán guardadas
  • Los fichero temporales serán borradas cuando la ventana se cierre.
  • Los datos de los formularios no se guardará
  • Las contraseñas tampoco se almacenarán.
  • Las direcciones escritas en la barra de direcciones no se almacenarán
  • Las busquedas del «Search Box» del navegador no se almacenará
  • Enlaces visitados no se almacenan

Borrar histórico de navegación

Otra novedad es la posibilidad de borrar selectivamente los datos almacenados durante la navegación, podremos eliminar cookies, datos de formularios, contraseñas o histórico sin afectar a las otras opciones.

deletebrowsinghistory1

Navegadores como Firefox, Opera y Safari, hace años que disponen de esta característica.

InPrivate Blocking y InPrivate Subscriptions

Durante la navegación en modo InPrivate, se tratan las páginas de una forma peculiar, una de estas peculiaridades es la de bloquear contenido que está repetido en varias páginas, por ejemplo scripts JS usados para obtener datos de usuarios. Para personalizar dicho bloqueo tenemos una opción que nos permite incluir o excluir contenido a bloquear.

Muchos usuarios que únicamente quieren proteger su privacidad puede que no quieran tener que tomar muchas desiciones de que contenido bloquear o permitir. Para ello surgen las InPrivate Subscription, un sistema de suscripciones mediante las cuales podemos delegar estas desiciones a los usuarios encargados de mantener estas suscripciones.

inprivateblockingsubscription

Poco a poco parece que van haciendo los deberes, y estas nuevas funcionalidades solo pueden dar lugar a grandes y buenos cambios para Internet.

Cómo ser un diseñador independiente y no perecer en el intento

25 Ago

+ 1

Minid nos deleíta con un post que todo aquel que esté dando el paso, o quiera darlo, para consolidarse como diseñador independiente debe leer.

La primera regla de oro que debes saber que lo tuyo no es la manufactura. No te dan cajas plegadas de cartón e instrucciones para que las armes, encoles y apiles, para luego enviarlas a determinado sitio. Tu trabajo es el de creación, sólo eso. Tu creas, tu ayudas a transmitir. La industrialización es otro rubro que no tiene nada que ver con el de diseño. Por ello, debes valorar tu trabajo basándote en una línea imaginaria, que traza tu creatividad, tu don de diseño, tu gusto por las cosas, tu conocimiento en el lenguaje visual. Nunca debes cobrar por hacer una tarea mecánica y te diré luego por qué.

Comentarios con estilo en tu WordPress

25 Ago

+ 2

Los chicos de CSS-Trick nos muestran un tutorial de como conseguir mostrar los comentarios de cada entrada de una forma bastante elegante y original.

comments

Como podeis ver, hay mucho CSS por delánte. Usando los iconos de calendario de Sotak, y mucho códugo CSS podremos conseguir el mismo efecto de la imagen. Un complemento perfecto para aquel calendario que pusimo hace más de 2 años 😀

Estadísticas de tu WordPress con protoChart

25 Ago

+ 7

Hace unos días estuve testeando librerías JS para mostrar gráficas. Realmente he encontrado librerías geniales, pero protoChart ha sido la que más me ha gustado. Para hacer pruebas, estuve usando datos de aNieto2k, y así de paso veía estadísticas del blog de una forma rápida y clara.

stats

He preparado un zip con el que podreis mostrar vuestras estadísticas de la misma forma. En principio, únicamente mostraría estadísticas relacionadas con los posts, comentarios y pingbacks, comparativas con años anteriores, … y si tienes StatPress tendrás además estadísticas de visitas por horas del día actual y del día anterior, además de las visitas del mes (para ello tendremos que tener la opción de 30 días activada en el plugin).

Modificaciones

Para hacer las pruebas creé una clase a la que le podemos pasar una sentencia SQL con la que poder obtener datos X e Y y componer una gráfica.

var posts = [<?=$stat->getResults('line', "SELECT count(post_date) as data, DAY(post_date) as label FROM ".$wpdb->posts." WHERE MONTH(post_date) = ".$month." and YEAR(post_date) = $year AND post_parent = ''  GROUP BY 2 ORDER BY 2 ASC;")?>];

Simplemente hemos de respetar los valores que devolvemos con nuestra SQL. Los nombre data y label deben mantenerse ya que serán usados para mostrar leer los resultados.

Para añadir un nuevo campo a las estadísticas deberemos añadir el elemento HTML nuevo y las líneas necesarias del JS al final del fichero.

// HTML
<h2>Comparativa de comentarios por meses del año (<?=$year?>)</h2>
<div id="commentYear" style="width:100%; height:300px"></div>

// Javascript
var results1 = [<?=$stat->getResults('line', "SQL1")?>];
var results2 = [<?=$stat->getResults('line', "SQL2")?>];
new Proto.Chart($('commentYear'),
[
    {data: results1, label: "Resultados de SQL1"},
    {data: results2, label: "Resultados de SQL2"}
],
{
	xaxis: {min: 1, max: 31, tickSize: 1, tickDecimals: 0},
	lines: {show: true, fill: true},
	points: {show: true},
	legend: {show: true}
});

Tambien podemos hacer uso de gráficas de «quesitos», para ello pasaremos el parámetro ‘pie’ a la método getResults() de la clase stats.

// HTML
<h2>Navegadores de los usuarios (StatPress)</h2>
<div id="navegadores" style="width:100%; height:300px"></div>

// Javascript
new Proto.Chart($('navegadores'),
[
    <?=$stat->getResults('pie', $sql)?>
],
{
	pies: {show: true, autoScale: true},
	legend: {show: true}
});

Hay una infinidad de opciones para hacer tus gráficos más profesionales.

Instalación

  1. Descargamos el ficheros
  2. Descomprimimos y subimos a la raiz de nuestro WordPress.
  3. Accedemos a la ruta http://tublog/stats.php

Descargar

El fichero se compone de:

  • stats.php
  • js/prototype.js
  • js/protochart.js
  • js/excanvas.js // Para Internet Explorer 6

[Descargar] [Ejemplo]

El selector :not() de CSS3

25 Ago

+ 5

Es un selector del que no se ha hablado mucho y que realmente dará mucho juego en un futuro. Este selector, nos permite negar las busquedas que hasta ahora estabamos haciendo.

La mejor forma de comprender lo que :not() nos ofrece es mediante un ejemplo:

//CSS
/* Todos los elementos input */
input { 
        border:1px red solid;
}

/* El elemento con id #phone */
input#phone {
	background-color:yellow;
}
/* Todos los elemento no #phone*/
input:not(#phone) {
	background-color:green;
}

/* Todos los elementos que no sean Submit */
input:not([type="submit"]) {
	font-size:3em;
}

// HTML
<form id="comments_form" action="" method="post">
	<fieldset>
		<p>
			<label for="name">Nombre: </label>
			<input name="nombre" value="" type="text" id="name" />
		</p>
		<p>
			<label for="surname">Apellido: </label>
			<input name="apellido" value="" type="text" id="surname" />
		</p>
		<p>
			<label for="phone">Teléfono: </label>
			<input name="telefono" value="" type="text" id="phone" />
		</p>
		<p>
			<input type="submit" value="Enviar" />
		</p>
		</fieldset>
</form>

Como podemos ver, nos ofrece otra posibilidad más con la que seleccionar nuestro elementos.

Geolocation Module API, geolocalizando con Javascript

25 Ago

+ 6

Google Gears pone a disposición de los desarrolladores una API realmente interesante, la geolocalización mediante javascript. Con ella podremos conocer la localización de un usuario.

Para conseguir la localización del usuario realiza una serie de comprobaciones y estima la más acertada en base a los resultados obtenidos.

<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var geo = google.gears.factory.create('beta.geolocation');

function updatePosition(position) {
  alert('Current lat/lon is: ' + position.latitude + ',' + position.longitude);
}

function handleError(positionError) {
  alert('Attempt to get location failed: ' + positionError.message);
}

geo.getCurrentPosition(updatePosition, handleError);
</script>

Hasta ahora las soluciones a esta funcionalidad pasaban por tener una importante base de datos con los datos relacionados con las IP’s que frecuentemente se iban actualizando, o el uso de herramientas externas que ofrecían una fiabilidad más bien pobre. ¿Será esto una solución definitiva? ¿Alguien lo quiere probar y comentar?