martes, 9 de diciembre de 2008

AJAX

Hola a todos hoy les traigo algo especial para diseño web; es algo que algunos ya conocen, otros como yo estamos aprendiendo y nos a facinado o por lógica los demás que leen estarán diciendo que demonios es AJAX?

Ajax, siglas de Asynchronous JavaScript and XML, es un término que describe un nuevo acercamiento a usar un conjunto de tecnologías existentes juntas, incluyendo las siguientes: HTML o XHTML, hojas de estilo (Cascading Style Sheets o css), Javascript, el DOM (Document Object Model), XML, XSLT, y el objeto XMLHttpRequest.

Bueno eso es una definición algo rebuscada pero tratara de decirles con mejores palabras(Osea por que poner AJAX en nuestra web).

Un ejemplo: por que poner un frame para recargar contenidos diferentes si podemos poner un div que cambie su contenido?

La respuesta seria obvia asta cierto punto.

Respuesta: ocupemos php.

La respuesta es sencilla pero asta cierto punto no ya que sabrán que si ponemos en php contenidos diferentes con la función "include" tendríamos que recargar toda la pagina.

Lo que nos daría menos puntos como web master y la solución de poner el típico frame seria mas factible.

Respondamos con ajax.

Respuesta 2: "si claro me gusta la idea asincronemos la pagina para mandar por el lado del cliente una respuesta al objeto DOM para actualizar únicamente el div y no la pagina completa".

Algunos diran que? pero es cierto AJAx nos permite actualizar desde un único div asta la posibilidad de hacer inyección sql a nuestra base de datos en mysql sin necesidad de recargar nada mas que la cajita de texto.

Bueno espero que a mas de alguno le aya interesado este apartado mas adelante les daré unos ejemplos de AJAX que he probado y me han encantado para mientras investiguen un poco les va a gustar esta nueva tecnologia.

lunes, 8 de diciembre de 2008

Mandando a llamar diferentes CSS

Hola a todos se que tengo algo de tiempo de no volver a escribir nada para este blog.

Les pido disculpas de antemano pero el trabajo me había absorvido buena parte de mi tiempo, lo único beneficioso es que logre aprender algunos truquitos nuevos que vengo a presentarles.
El siguiente código nos ayudara para poder hacer que nuestra pagina web funcione igualmente en FireFox y en IE.

<script type="text/javascript" language="javascript">

var nav=navigator.userAgent;

if(nav.match("MSIE"))

{

document.write('<link href="maini.css" rel="stylesheet" type="text/css">');

}

else

{

document.write('<link href="mainf.css" rel="stylesheet" type="text/css">');

}

</script>

Espero que les sirva; básicamente es un código que nos dice que browser estamos usando si IE para mandar a llamar un css totalmente diferente o cualquier otro browser como FireFox que sigue los estándares para aplicar un css mas compatible con cualquier otro browser que no sea IE.

viernes, 24 de octubre de 2008

Ocupando radiobutton interactivo.

Este hace lo mismo que el anterior como repito es muy censillo pero útil ya que ocupamos formularios con respuestas variables que nos pueden servir para llenar información o bases para crear nuestra propia pagina web.

<html>

<body>

<form name="proyecto">

<input type="radio" name="rd1" id="rd1" value="1" onClick="cambiar(1)">Hombre

<br>

<input type="radio" name="rd1" id="rd1" value="3" onClick="cambiar(2)">Mujer

<br><br>

<div id="r_1"></div>

<CENTER><input type="reset" onClick="desmarcar(proyecto)" value="Reiniciar"></CENTER>

</form>

</body>

<script language="javascript">

var respuesta;

var tmp_1 = 0;

function desmarcar(documentito)

{

r_1.innerHTML = " ";

tmp_1 = 0;

}

function cambiar(respuesta)

{

tmp_1=respuesta;

if(tmp_1==1)

{r_1.innerHTML="Genero: hombre";}

else

{r_1.innerHTML="Genero: Mujer";}

}

</script>

</html>



Para explicar un poco observemos que ocupamos el evento onClick y ya no el onChange, otra cosa muy importante es que ahora ocupamos la etiqueta form, la cual nos sirve para borrar los radiobuttons.

<form name="proyecto">

De ahí programamos casi igual a excepción de que los radiobuttons deben llamarse iguales para que trabajen en un mismo grupo ojala les sirva.

jueves, 23 de octubre de 2008

Utilizando select en javascript.

Para esta primera ocasión les traigo un código sencillo para que puedan ocupar formularios en web.

En este caso presente el uso de un select en el cual capturaremos el sexo que necesites en una variable para luego mandarlo a imprimir en un div.

A continuación explicare los pasos para crearlo.
Pueden poner al html el nombre que quieran.

<html>

<body>

Parte 1: Elije tu sexo.

<br><br>

<select id="com1" onChange="cambio(this, 1)">

<option> </option>

<option>Hombre</option>

<option>Mujer</option>

</select>

<br>

<br>

<div id="div1"></div>

<br><br>

<input type="reset" name="limpiar" id="limpiar" value="Limpiar" onClick="borrar()">

</body>

<script language="javascript">

var opc=0;

function borrar()

{

var opc=0;

com1.selected = 0;

div1.innerHTML="";

com1.selectedIndex=0;

}

function cambio(com, num) {

var opc = com.selectedIndex;

if(opc==1)

{div1.innerHTML="Eres hombre"}

else

{div1.innerHTML="Eres mujer"}

}

</script>

</html>


Lo primero sera observar que el select consiste en tres campos, uno donde no ay nada para empezar y otras dos donde están los sexos posibles ocuparemos entonces el evento onChange="cambio(this, 1)" para cuando el usuario cambie de opción, observar que en el this capturaremos el nombre del select muy útil cuando se tienen varios, después recurriremos a la función cambio.

En la cual capturamos el valor que trae que puede ser 0 1 ó 2 dependiendo de la selección se dispone a ver con que rellenar el div por eso ocuparemos el innerHTML que nos servirá para poner lo que queramos adentro del div.

Por ultimo limpiaremos para dejar como nuevo con el botón limpiar que manda a traer la función borrar; que es el que vuelve a poner al select en la posición de inicio en 0 y borra lo que contenga el div.

como verán es muy sencillo pero útil cuando se empieza a trabajar con formularios.

miércoles, 22 de octubre de 2008

Primero lo primero...

Bueno quisiera dar paso a lo que es primero y claro no me dejaran mentir cuando digo que Linux es primero.


Como primer aporte a la comunidad quisiera recomendar visitar este blog con FireFox. y olvidarse totalmente de Internet Explorer.

Como diseñador web puedo afirmarles que tener que validar paginas web tanto para explorer como para firefox es muy tedioso; diseñar paginas web para FireFox es mucho mas flexible en comparacion de querer trabajar con un navegador que rompe los estándares.

Y claro no se diga el doble trabajo que se obtiene al poner script en el cual según el navegador que utilizas así sera el archivó .CSS que ocuparas o variar totalmente los códigos al querer ocupar DHTML.

Bueno en conclusión diré: porque no usar un navegador mas atractivo, flexible y que si sigue los estándares además de claro ser gratis.

Bueno luego seguiremos hablando de otras bondades que nos da Linux y para aquellos que aun usan explorer y después de leer esto han recapacitado esta el enlacé oficial para que lo descarguen recuerden es gratis y mas eficiente.

Descargar Mozilla Firefox 3.0