Un blog acerca de lo que hace ser a los blogs lo que son.
Cuando uno desea mejorar la apariencia de un sitio para maximizar ventas mediante ads o clicks en ciertas partes, siempre es bueno tener una referencia de lo que tus usuarios ven, por esto, les presento una página que nos creará el heatmap (representación gráfica de las áreas que más vistas tienen de nuestro sitio) para darnos cuenta del comportamiento de nuestros usuarios:
[Foto de tfriberg]
Posted on 28-10-2009 | By: Víctor Martínez | 
(No Ratings Yet)
Loading ...
Category : Blog, Customization, HTML, Internet, Links, Soluciones, Tutoriales
Hace poco repasé 10 tips para hacer que tú página o blog cargara más rápido. Uno de los puntos tratados fue el uso de CSS Sprites, que por más difícil que suene son bastante simples y he aquí como utilizarlos:
Posted on 14-10-2009 | By: Víctor Martínez | (No Ratings Yet) Loading ...
Category : Customization, HTML, Internet, Soluciones, Tutoriales
Revisando unos de los artículos ya publicados llegué a la conclusión de que había mucho más que decir del tema, es por esto que ahora mejoro la lista agregando 5 nuevos elementos. La lista original la pueden encontrar aquí.
Tienes tu hermosa página de internet, con decenas de fotos, botones, estilos, colores y todo lo que las páginas de hoy utilizan. El único problema es que le toma más de 30 segundos cargar, lo que realmente minimiza la experiencia de tus usuarios. ¡Pero hay solución! He aquí algunos tips para mejorar el tiempo de carga de una página web o blog:
Continue Reading
Posted on 05-10-2009 | By: Víctor Martínez | (No Ratings Yet) Loading ...
Category : Blog, Customization, HTML, Internet, Soluciones, Tutoriales, facebook, ¿Y Por Qué No?
Cómo ya han de haber notado, con el nuevo sitio, hemos adquirido también nuevas capacidades. Entre ellas he de destacar (pues costó mucho trabajo, y dio lugar a este post) que pueden comentar utilizando su cuenta de facebook. He aquí una guía rápida de como instalar facebook connect en su sitio:
[Foto de b_d_solis]
La última noticia proveniente del famoso complejo localizado en California, es que Internet Explorer, de Microsoft, no cuenta con las características suficientes para ejecutar Google Wave, el futuro del email. Pero no se preocupen usuarios de Internet Explorer, Google también les proveé de cierta solución bastastante original: Google Frame.
Posted on 12-06-2009 | By: Víctor Martínez | (No Ratings Yet) Loading ...
Category : Customization, HTML, Internet, Soluciones
Una de las principales preocupaciones al crear un sitio web es la velocidad de carga, que indica cuánto tiempo le toma al usuario obtener el contenido del sitio y comenzar a interactuar con este. He aquí algunas recomendaciones para mejorar ese tiempo:
[Foto de Will Lion] Siempre es bueno saber que tanto se mejora. Para tener un punto de referencia podemos utilizar YSlow, extensión para Firefox, o bien, Google Page Speed para Firebug. Si son de los que prefieren herramientas en línea, un buen comienzo es WebSiteOptimization.com o StopWatch de Numion. La primera recomendación siempre es la misma, vincular las hojas de estilos y de javascript. Esto no solamente hace más sencilla la codificación, también hace más rápida la descarga de la página por lo que se verá en el 5° punto. Si se van a utilizar imágenes en el sitio web, habrá que usar las menos posibles, además de procurar que el tipo de imagen usada sea PNG o JPG, debido a la capacidad de ser comprimidos sin perder mucho detalle. No utilizar GIF’s y mucho menos los animados. El flash, utilizado para mostrar videos o slideshows u otro tipo de contenido interactivo, es extremadamente pesado y difícil de cargar. Por esto es que se debe evitar. Lo mejor es utilizar más HTML. HTML,CSS y JS, así como ciertos tipos de imágenes, pueden ser comprimidos para reducir la cantidad de datos, lo que deriva en menos transferencia entre usuario y servidor lo que nos lleva a una página más rápida. Ahora bien, si además estos datos se repiten muchas veces, el usuario podrá guardar una copia en cache y evitarse la transferencia de la página, efectivamente reduciendo el tiempo necesario para cargar la página a sólo el tiempo requerido para cargar los cambios. Recuerden que una página más rápida implica que el usuario final accede a su contenido más rápido, también no le hace perder su tiempo ni su paciencia, y hace que le sea fácil regresar al sitio, lo que en un largo plazo implicará mayor número de lectores.
Posted on 07-05-2009 | By: Víctor Martínez | (No Ratings Yet) Loading ...
Category : Blog, Customization, Google, HTML, Internet, Soluciones
Aún en beta, la nueva plataforma de blogger es impresionante (no tanto como la de wordpress, pero que se le va a hacer). Veamos paso a paso que tiene de nuevo: [Foto de a trying youth]
Blogger in Draft nos ofrece la opción de anexar la forma de comentarios tras el contenido de un post, para evitar a los usuarios la gran molestía de tener que cambiarse de página para crear su importantísimo y profundo comentario. Si, el famoso GeoTagging ha llegado a blogger. Con un click se acceden a los google maps para insertar una posición en el globo. Realmente útil para aquellos blogs de viajes. ¡Ahora para publicar algo sólo necesitas mandar el contenido de tu post a un número celular! Claro, tras registrar tu móvil como uno válido para publicar, solamente hará falta mandar el texto a BLOGGR (256447) para mostrarlo al mundo. Desde modificar la fecha de publicación de tu post – así como le hace Windows Live Writer – hasta la manera en que el editor interpretara el HTML escrito. Pero lo mejor, es que ahora al escribir en modo composición cada línea (o sea, cada ‘enter’) puede ser (o no) traducido a HTML utilizando una etiqueta BR. Lástima, y yo que iba a escribir la 3a entrega de el famoso tutorial de HTML. Una bonita añadidura para seleccionar a las personas que deseas que reciban un email avisándoles de algún nuevo comentario en tu blog. Para activar todas estas maravillas sólo hace falta navegar a [Blogger in Draft]. Cómo lo único que cambia es la interfase, ningún post en el blog se ve afectada. Sí se desea dejar de utilizar la nueva plataforma, siempre se puede utilizar la versión anterior en [Blogger] Sí desean más información de los nuevos beneficios de está plataforma, los invito a visitar el blog de Blogger Draft en [Blogger In Draft Blog]
Posted on 07-04-2009 | By: Víctor Martínez | (No Ratings Yet) Loading ...
Category : 31DiasParaMejorarTuBlog, Blog, Customization, HTML
Segundo día, y faltan 29. Hoy, Darren Rowse nos invita a escribir una lista. Algunas de sus razones son:
Lists look ‘neat’ – I don’t know about you but when I surf onto a site that is full of messily formatted text – I don’t tend to stick around for too long.
Lists break down the complicated – one reason I find list posts to be powerful is that they can be great for breaking down complex ideas or tasks.
Aquí en datatraveler ya hemos presentado varias listas. Por ejemplo:
Digamos que con esto pasamos la prueba, ahora a esperar a la de mañana.
Posted on 21-03-2009 | By: Víctor Martínez | (No Ratings Yet) Loading ...
Category : Customization, HTML, Internet, Tutoriales
Cascade Style Sheet, o CSS para los cuates, es el código que se encarga del formato de los elementos en una página de internet.
Sus aplicaciones van desde SVG, XML, y en sus usos más comunes HTML y XHTML. Aquí revisaré rápidamente su uso en HTML para dar formato a texto o imágenes.
Se recomienda apliamente revisar el artículo previo: “A manera de tutorial HTML” En HTML hay 3 maneras de incluir un código de formato: Si se desea utilizar el archivo externo, se vincula dentro de <head></head> de esta manera: Si se desea utilizar css interno, se define de la siguiente manera: /* Su código va aquí */ –>
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css"><style><!–
Sintaxis:
selector {property: value}
Donde selector es alguna etiqueta HTML, o un nombre personalizado iniciando con un punto. Así, si quisieramos establecer el fondo de la página de color rojo:
body {color:red;}
Y si quisieramos que todos los párrafos en la página utilizaran Arial y Negritas:
p {font-weight:bold;font-family:arial;}
Ahora, definamos un estilo propio
.Estilo1 {color:#006699;font-weight:bold;font-family:"sans serif";}
Aplicando el Estilo1:
<p class="Estilo1">¡Este texto tendrá color azul!</p>
Obtenemos ¡Este texto tendrá color azul! de resultado.
Como abran observado, mis inteligentes lectores, en el último ejemplo utilizamos una etiqueta intermedia(<p>) y le asignamos una clase (el estilo que creamos). Este es la manera común de asignar estilos específicos (dicho estilo no se aplica a todos los párrafos, sólo a los que pertenecen a su clase).
Otra manera es definir en la etiqueta misma el código a utilizar. Por ejemplo:
<div class="text-align:center">Este texto estará centrado</div>
Algunos otros ejemplos importantes:
a {text-decoration:none;}
<img style="display: inline"/>
Para alinear con el texto
<img style="display: right"/>
para alinear a la derecha
<img style="display:left"/>
para alinear a la izquierda
body {background-image: url('URL DE LA IMAGEN');background-repeat:no-repeat;}
Por último, algunos elementos comunmente usados:
Dar formato a un texto:
color:color;
direction:ltr (left to right) o rtl
line-height:normal,#,length,%
letter-spacing:normal,#;
text-align:left,right,center,justify;
text-decoration:none,underline,striketrough,overline,blink;
text-shadow:none,color,lenght;
text-transform:none,capitalize,uppercase,undercase
Formato de fuente:
color:color;
font-family:family-name;
font-size:Xpx,%,#;
font-style:italic,normal,oblique;
font-weight:#px,%,bold,normal;
Formato de imagen:
display: inline,left,right;
border:#px;
magin:#px,#px,#px,#px;
(Arriba,Derecha,Abajo,Izquierda)
Una muy pequeña introducción al poderoso lenguaje CSS, si desean consultar más acerca del lenguaje los invito a visitar: W3Schools ó bien, dejen un comentario con sus dudas.
VrmpX se siente feliz de haber pasado el W3Schools CSS Quiz con 90% de los aciertos. Gustará de pasar su tiempo mejorando la plantilla CSS de este sitio.
Posted on 20-03-2009 | By: Marco | (No Ratings Yet) Loading ...
Category : Customization, HTML, Pseudo
<!-- IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<script language="javascript" type="text/javascript"> var randHdr = randRange(1,5 Estos números son el rango de imágenes que quieres poner.);
if (randHdr == 1) {
document.write('<img src="La URL de tu imagen">')
} else if (randHdr == 2) {
document.write('<img src="La URL de tu siguiente imagen">')
} </script>
<!-- FIN DE IMAGEN ALEATORIA -->
Si quieres poner más imágenes, copia la parte del código después de “else if” y hasta “}”, cambia el número e introduce la URL de la imagen. Les recomiendo usar Photobucket o ImageShackUs. Recuerda quitar las anotaciones en rojo
Uno de los primeros posts de este blog (nota mental: arreglar dicho post) es el de Windows Live Writer....
¿Interesado en ver el page rank de tus páginas? ¿Te importa el SEO de tu blog? ¿Buscas atraer más...
Cambiando un poco la temática común, ahora les platicaré de la experiencia que tuve enfrentandome...
MedGeek es estudiante de Medicina y Geek profesional. En esta ocasión participa en este blog con un...
Hablemos un poco de los hackers, aquellas personas de poco corazón (por no decir de poca mad…) que...
(5.00 out of 5) (5.00 out of 5) (5.00 out of 5) (5.00 out of 5) (5.00 out of 5)
