Carlos Navarro » ajax http://www.carlosnuel.com Emprendedores, Negocios, Internet y Redes Sociales Mon, 06 Feb 2012 19:02:35 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Errores que no debes cometer al Construir tu sitio Web http://www.carlosnuel.com/errores-que-no-debes-cometer-al-construir-tu-sitio-web.html?utm_source=rss&utm_medium=rss&utm_campaign=errores-que-no-debes-cometer-al-construir-tu-sitio-web http://www.carlosnuel.com/errores-que-no-debes-cometer-al-construir-tu-sitio-web.html#comments Wed, 09 Feb 2011 20:23:25 +0000 Carlos http://www.carlosnuel.com/?p=2570
  1. El usuario debe saber de qué es tu sitio Web en pocos segundos. Cuentas com menos de 10 segundos para impresionar a tu visitante úsa ese tiempo sabiamente.
  2. Haz el contenido “scaneable”. “Los usuarios no leen los sitios, los scanean” (Jakob Nielsen).
  3. No uses tipografías difíciles de leer en textos que quieres que se lean. La fuente Kunstler Script sin duda es muy bonita… pero has intentado leer todo un artículo con ella.
  4. No uses tipografías pequeñas. Recuerda que NO todos tienen una vista privilegiada como la tuya.
  5. No abras páginas nuevas. Porque obligar a los usuarios a tener cientos de ventanas abiertas si ya existen los PopUp Modales con Jquery.
  6. No redimensiones la ventana del navegador. Y menos hagas sitios FullScreen, acaso crees que lo único que quiere ver el usuario es tu página Web.
  7. No solicites regitrarse al usuario a no ser que sea necesario. Regístrese aquí! ¿Para qué? ¿Por que si?.
  8. No uses Flash sin una razón de peso (ojo que hay pocas). Flash es muy útil para darle movimiento solo a algunas secciones de tu Sitio Web… no a todo.
  9. No toques música en el sitio. Acaso crees que el usuario le interesa escuchar tu canción? ¿Crees qué no tiene en su computadora música que preferiría escuchar antes que la tuya?.
  10. Si debes reproducir audio, deja que el usuario lo inicie. No se trata tampoco de hacer un Sitio Web mudo, si eres músico y quieres colocar audio en tu sitio, puedes hacerlo, sólo asegurate que se pueda iniciar y detener por el usuario.
  11. No llenes tu sitio con “badges”. Los Badges son esas estrellas con muchas puntas que aparecieron con el boom del Web 2.0 en el 2005… el tiempo pasa.
  12. Asegúrate de colocar una forma de contacto. ahora cómo puedo comunicarme con ustedes, que?? no hay un formulario de contacto, ni teléfono?.
  13. No uses texto parpadeante. Y texto son palabras que no deberían estar juntas nunca, aparte que cuesta leerlo.
  14. Evita Estructuras de URL complejas. Piensa en que alguien pueda pasarle la URL a otra persona por teléfono, twitter o facebook, evita las URL inintendibles, si lo haces te ayudará incluso en tu SEO.
  15. Prefiere el CSS por sobre las tablas. Las tablas son para información… no para diagramar.
  16. Si estás vinculando hacia un PDF… Házlo saber. El PDF abre el Acrobat en el Browser lo cual consume una cantidad importante de recursos que podrían incluso mstar una PC viejita, deja que usuario decida si quiere verlo o no.
  17. No confundas al visitante con varias versiones del sitio. Haz una sóla, eso de versión flash y HTML son cosas del pasado.
  18. Usa estructuras de navegación simples. Haz que tus menús sean tan claros como para que el usuario pueda intuir fácilmente que hay dentro.
  19. Evita por sobre todas las cosas un Intro. Ya estamos grandesitos para eso, no?
  20. Asegúrate que tu sitio sea compatible en varios Navegadores Web. Inicia con FireFox y luego asegúrate que se vea bien en Internet Explorer y termina probandolo en una netbook, iPhone, Blackberry, etc.
  21. No metaforices los links. “El baúl de disfraces” no es un nombre para una sección, sé directo y claro, la sección es de contacto, llamala “Contacto”.
  22. Haz que los links se noten. Si tus links parecen contenido o parte del diseño, nadie sabrá que puede darlse clic.
  23. No subrayes texto a menos que sea un Link. Está estandarizado que los textos subrayados son links, NUNCA subrayes un texto si no es link, confundirás al usuario.
  24. Haz que los links visitados queden marcados. Personalmente aplico esta decisión sólo en listados de links o en páginas con muchos links, considero innecesario hacerlo en sitios pequeños en donde no hay mas de 5 secciones, simplemente puede terminar confundiendo más que ayudando
  25. No uses Gifs Animados. no hay más que decir…
  26. Asegúrate de colocar los atributos ALT y TITLE en las imágenes. Mejorará la accesibilidad de tu sitio Web y el SEO.
  27. No uses colores molestos. Una cosa es querer ser llamativo, o llamar la atención, otra completamente distinta es hacer de tu sitio el festival del color en donde no se puede leer nada porque la selección amarilla perturba.
  28. No uses Pop-Ups. Aunque tu cliente y tu flojera te lo exijan!!
  29. Evita los Links por JavaScript. Los típicos “on click” que luego son reemplazados por gatos (#) no son reconocidos por los robots de los buscadores por lo tanto no son correctamente indexados en Google.
  30. Incluye links funcionales en tu Footer. Si tus usuarios no encuentran la información en el principio de la página, irán a buscarla al fondo, preocúpate que tu footer tenga info relevante como teléfonos direcciones o accesos a información destacada.
  31. Evita las páginas largas. Google adora las páginas largas, mientras más contenido mejor (con limite eso si) pero a la gente no les gusta tanto, hoy están mas acostumbradas a hacer scroll a lo que lo estaban hace un par de años, sin embargo, recuerda siempre que debes mantener tu contenido lo mas conciso posible, la gente no lee textos enormes.
  32. No uses el Scroll horizontal. Mucha gente ni siquiera notará que tu sitio tiene un scroll horizontal, por lo que posiblemente pierdan contenido importante, ahora si tienes un monitor de 800×600… acostumbrate al scroll horizontal.
  33. Cuidado con los errores de ortografía. Loz herrores de hortografia le kitan credivilidad a lo que escrives.
  34. Si usarás CAPTCHA en los formularios, asegúrate que los textos sean legibles. Si no me crees aqui unos ejemplos de ellos.

Quiza también te puede interesar:

]]> http://www.carlosnuel.com/errores-que-no-debes-cometer-al-construir-tu-sitio-web.html/feed 0 Aprendiendo Ajax – Tutorial Básico http://www.carlosnuel.com/aprendiendo-ajax-tutorial-basico.html?utm_source=rss&utm_medium=rss&utm_campaign=aprendiendo-ajax-tutorial-basico http://www.carlosnuel.com/aprendiendo-ajax-tutorial-basico.html#comments Wed, 02 Feb 2011 22:28:36 +0000 Carlos http://www.carlosnuel.com/?p=2537

Pues les comento que buscando en la red no he encontrado ni un solo tutorial que trate de explicarnos al menos las bases de la programación de Ajax (Asynchronous JavaScript And XML), asi que me decidi a hacer este primer tutorial para que quien desea adentrarse a este mundo lo haga sin problemas. Comencemos:

¿Qué es Ajax?

Es una técnica de desarrollo web para crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones. (http://es.wikipedia.org/wiki/AJAX)

Basicamente Ajax consiste en utilizar el objeto XMLHttpRequest de JavaScript para realizar diversas peticiones asincronas al servidor sin que el usuario tenga que ser redirigido a otra página y sin cambiar el elemento enfocado.

El objeto XMLHttpRequest interactura directamente con los programas que se encuentran del lado del servidor a traves de un objeto y sus metodos. Algunos de ellos son:

  • abort(): Detiene la petición
  • getResponseHeader(“NombreEncabezado”): Para obtener el contenido de algun encabezado HTTP. Si omitimos NombreEncabezado, nos regresa todos los encabezados
  • open(“metodo”, “URL”,”async”,”nombreUsuario”, “clave”): Este metodo es el que nos permite mantener la conexión con algun archivo del lado del servidor. A traves de los metodos POST y GET
  • send (“contenido”): es el metodo que envia la información al programa del lado del servidor

Como todo objeto, XMLHttpRequest cuenta con propiedades, algunas de ellas son:

  • onreadystatechange: Es un “gestor de eventos” que nos permite ejecutar ciertas acciones cuando el estado de nuestra aplicación cambia.
  • responseText: Este se devuelve cuando una petición ha sido completada

Por el momento solo recuerdo esos metodos, si alguien sabe algunos más no olviden hacermelo saber para ir enriqueciendo este tutorial.

Mientras creemos un ejemplo básico con Ajax (lo unico que hará será indicarnos desde que navegador nos estamos conectando).

//var tipo bool con la que comprobaremos que el navegador sea Internet Explorer
var xmlhttp = false;

//si usamos IE
try {
//si la versión de JavaScript que tenemos instalada  es superior a 5
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert ("Estas usando IE con JS superior a 5");
}
catch (e){
//Usamos el objeto tradicional de ActiveX
try {
//si estamos usando IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
//alert ("Estas usando IE");
}
catch (e){
xmlhttp = false;
}
}

//si no es IE
if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
xmlhttp = new XMLHttpRequest();
//alert ("No estas usando IE.");
}

Bien, ese codigo como lo pueden ver es muy básico pero sirve para los fines que estamos buscando, eso lo copiaran dentro de un archivo HTML y entre las etiquetas <head></head> dentro de un bloque de JS <script type=”text/javascript”><!– Todo el contenido va aqui–></script>

y listo ejecutenlo.

Ahora pasemos a la siguiente parte, mostrar diversos archivos con Ajax para ello, solo necesitamos generar una funcion que realizará la conexión al servidor, localice el archivo y si la respuesta es correcta entonces muestra el contenido, a continuación les presento el codigo:

//funcion que carga contenido que se encuentre en serverPage
function MuestraArchivo (serverPage, objID){
var serverPage = "content1.html"; //si deseamos que cargue por default alguna página
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

Esa funcion la colocaremos dentro de la etiqueta <script></script>, como se dan cuenta la variable serverPage es quien se encarga de obtener el nombre del documento del lado del servidor que mostrara del lado del cliente.  Y para asociarlo a un codigo HTML, se realiza de una forma muy fácil, solo tenemos que revisar el siguiente ejemplo. En el cual a traves de diversos vinculos asociados a ID’s podremos realizar las peticiones del lado del server.

<div align="center">
<h1>Mi Sitio Web</h1>
<a href="#" onclick="MuestraArchivo('content1.html', 'MuestraCont');">Pagina 1</a>
<!-- la funcion onclick es quien llama MuestraArchivo donde le pasaremos el archivo a abrir y el Div donde mostraremos el contenido-->
<a href="#" onclick="MuestraArchivo('content2.html', 'MuestraCont');">Pagina 2</a>
</div>
<div id="MuestraCont"></div>

Espero este pequeño tutorial despeje algunas de sus dudas sobre como inicarse con ajax, en el siguiente ejemplo que estoy preparando tratare de explicar como expandir y contraer información

Quiza también te puede interesar:

]]> http://www.carlosnuel.com/aprendiendo-ajax-tutorial-basico.html/feed 0 Como aprender a programar paginas Web http://www.carlosnuel.com/como-aprender-a-programar-paginas-web.html?utm_source=rss&utm_medium=rss&utm_campaign=como-aprender-a-programar-paginas-web http://www.carlosnuel.com/como-aprender-a-programar-paginas-web.html#comments Wed, 26 Aug 2009 00:03:52 +0000 Carlos http://myfaceparty.net/?p=265

El día de hoy he encontrado una excelente herramienta para cuando tenemos problemas para implementar AJAX, Javascript, RSS, XML y alguno que otro lenguaje de programación para web, es el Mozilla Developer Center, donde en español y otros idiomas explican paso a paso como implementar diversos lenguajes y lograr que sean compatibles con Mozila Firefox.

El enlace aqui: Mozilla Developer Center

https://developer.mozilla.org/es/AJAX

Si son programadores este sitio Web debe estar forzosamente en sus favoritos

Quiza también te puede interesar:

]]> http://www.carlosnuel.com/como-aprender-a-programar-paginas-web.html/feed 1