www.archive-org-2014.com » ES » X » XITRUS

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 145 . Archive date: 2014-05.

  • Title: Pedro Gutiérrez | Diseñador & Desarrollador Web Freelance [Xitrus]
    Descriptive info: .. Pedro Gutiérrez.. Inicio.. Blog.. Utilidades.. Portafolio.. Contacto.. Seguir a @PedroXitrus.. Atributos personalizados en HTML5 con data-*.. Con los atributos personalizados de HTML5 podemos añadir información extra a una web con data-*.. SVG es perfecto para el Responsive Design.. Con las imágenes vectoriales SVG podrás crear diseños con poco peso y fácilmente redimensionables sin perder calidad.. Funciones avanzadas de Console de JavaScript.. Aprende a usar la API Console de JavaScript y sus novedades para visualizar distintos tipos de datos.. Usa la unidad perfecta para Responsive Design.. Disponemos en CSS de varias unidades de medida, descubre como usarlas de la mejor forma en un Responsive Design.. Pseudo-clase Nth-child.. La pseudo-clase Nth-child permite crear completos diseños sin necesidades de líneas extra de código.. Diseñador y desarrollador web freelance.. Consigue tu web con un diseño profesional y.. personalizado.. optimo para.. SEO.. , que cuente con las tecnologías más actuales (.. HTML5.. y.. CSS3.. ).. Correcta maquetación.. Hago una correcta maquetación con código limpio, usando estándares de.. , sin uso de tablas ni elementos obsoletos, mejorando el diseño y haciéndolo más accesible para los buscadores (SEO).. Responsive Design.. Diseño Adaptable.. es el término que se le da a una página que se adapta a todo tipo de tamaños de pantalla (tanto a un.. PC.. , como  ...   necesidad de soluciones obsoletas que ralentizan el navegador.. Contenido gráfico.. Para que una web tenga un buen impacto en el visitante tiene que tener una buena presencia, y una forma efectiva es con un buen.. logotipo.. , que cause una buena reacción y sea dificil de olvidar.. Gracias a.. Photoshop.. e.. Illustration.. puedo crear bonitos logotipos y editar imágenes para que se integren a la perfección con la web y sean de calidad.. De un diseño a HTML.. Muchas empresas o diseñadores tienen hechos diseños de un prototipo de página, en formato.. PSD.. o en.. Imagen.. y necesitan que se lo transformen en una web.. Puedo.. transformar.. ese diseño en una.. página.. totalmente.. funcional.. , con código limpio y optimizado para SEO.. Primero en el buscador (SEO).. Hoy en día la mayoría de la gente que quiere alguna cosa lo busca en.. Google.. Bing.. , entre otros, que es la forma más rápida de encontrar lo que buscas.. Con las técnicas que implemento en las páginas y dando de.. alta.. la dirección en los principales.. buscadores.. en poco tiempo veras tu web entre los primeros resultados.. Design & Development ( 2014).. info@xitrus.. es.. |.. Xitrus.. se encuentra bajo una.. Licencia Creative Commons Atribución 3.. 0 Unported.. Cerrar.. Cerrar sesión.. Usuario:.. Contraseña:.. Enviar..

    Original link path: /
    Open archive

  • Title: Blog [Xitrus - Pedro Gutiérrez]
    Descriptive info: Sígueme.. R.. L.. E.. F.. G.. I.. Buscar.. Cargando.. Lo último del blog.. Twitter.. Tweets de @PedroXitrus.. Hosting.. está alojado en:.. Si quieres aprender algo nuevo sobre diseño o desarrollo web puedes hacer propuestas en mi.. Twitter.. Facebook.. e intentare responder a vuestras preguntas en el blog.. 14.. 5.. ha introducido pocos cambios al lenguaje de etiquetas.. HTML.. , los más destacados ha sido el de la inserción de nuevas etiquetas, inclusión de microdatos y el tema que vengo a explicar:.. los atributos personalizados.. Estos atributos personalizados nos permiten añadir información extra a los elementos de nuestro HTML, simplemente añadiendo un nuevo atributo que comience por.. data-.. y seguido del nombre mediante el cual accedemos a esta información complementaria.. Podemos usar esta información desde.. CSS.. de forma muy cómoda.. li data-edad=.. "21".. data-pais=.. "ES".. Juan Alonso.. /li.. "37".. "IT".. Manuel Alonso.. "34".. "MX".. Raúl Alonso.. "19".. "FR".. Luis Alonso.. "24".. Pablo Alonso.. "23".. Pepe Alonso.. Javier Alonso.. Aunque hay muchos modos de enviar datos a una web, y puede que este sea uno de los menos usados, este método nos permite generar.. páginas HTML con toda la información necesaria.. , sin necesidad de acudir a llamadas mediante.. AJAX.. o a añadir información directamente con JavaScript (mediante.. arrays.. JSON.. Vamos a analizar como manipular y usar estos datos, que pueden ser usados con.. para diferenciar elementos a la hora de aplicar estilos y para añadirlo como texto en.. pseudo-elementos :after y :before.. , además de poder ser usados en.. Leer más.. Twittear.. 01.. 12.. SVG.. (.. Gráfico Vectorial Escalable.. ) es un nuevo formato que soporta.. y nos ofrece imágenes vectoriales que pueden redimensionarse hasta el infinito y no perder calidad.. Vamos a ver cómo usar archivos.. nos ayudarán a reducir el tamaño de nuestra web con este ligero  ...   tablas podemos hacer cosas tan interesantes como comprobar fácilmente los contenidos que nos envía un servidor.. Esta.. API.. es compatible con los principales navegadores, por lo que no tenemos que tener miedo de usarla, nos ayudará a analizar mejor nuestro código.. Anteriromente si se quería depurar un código se tenía que crear una.. pseudo-consola.. o lanzar alertas, que son molestas para cualquier usuario, por eso es tan cómodo este avance.. tiene una serie de unidades de medida distintas, que tienen distintos usos y su función específica.. Muchas de estas unidades están presentes desde hace muchos años, antes de la era informática y otras están pensadas para aprovechar las posibilidades digitales.. Vamos a ver los distintos tipos de unidades y cuales usar mejor en un diseño adaptable o.. , ya sea para dar tamaños a textos o estructuras.. En el diseño web tenemos dos tipos de unidades: las.. absolutas.. (que hacen referencia a medidas reales, como son los centímetros o pulgadas) y las.. relativas.. (que varían según otra medida, como son los píxeles o medidas como.. em.. rem.. 04.. Las.. pseudo-clases.. de.. nos ayudan mucho a crear completos diseños sin necesidad de llenar una web de código, como pasa con.. :nth-child().. , una.. pseudo-clase.. Con.. podemos diferenciar líneas, listas o párrafos cambiando su estilo, para así poder diferenciar más fácilmente distintos elementos.. Esto es muy útil en tablas o líneas de código, para no mezclar filas.. nos permite aplicar distintos estilos a varios elementos iguales, pero discriminándolos por un patrón especifico.. Este patrón es numérico y nos permite diferencias líneas pares e impares o marcar cada 3 o 4 líneas.. Aunque también tenemos un par de palabras reservadas, que son:.. odd.. (impar) y.. even.. (par).. Pero vamos a ver todo el repertorio de posibilidades que ofrece la.. pseudo.. clase.. Siguiente..

    Original link path: /blog/
    Open archive

  • Title: Utilidades [Xitrus - Pedro Gutiérrez]
    Descriptive info: Aquí encontrarás varias documentaciones que pueden serte de interés, aunque si quieres descubrir tutoriales y artículos sobre diseño web frecuentemente.. es mejor que recurras al blog.. Documentaciones.. Hacer un buen diseño.. Con estas funciones y conocimientos podremos crear fantásticos diseños para nuestras páginas web.. Font-Face.. Ver la documentación de Font-Face.. Aprenderemos a cambiar fácilmente la tipografía de nuestras páginas web de una forma compatible con todos los navegadores.. Media en CSS.. Ver la documentación de Media en CSS.. @media.. conseguiremos cambiar rápidamente como se muestra el contenido de nuestra página según el medio con el que lo vemos.. Filtros para imagenes.. Ver la documentación de Filtros para imagenes.. Añade filtros a imágenes o elementos de tu página con.. -webkit-filter..  ...   a.. Flash.. Transiciones.. Ver la documentación de Transiciones.. Con esta documentación intento compartir como crear efectos más suaves en los diseños gracias a la propiedad.. transition.. Animaciones.. Ver la documentación de Animaciones.. Con esta documentación explico como crear animaciones gracias a la propiedad.. animation.. que nos da.. Multimedia con HTML5.. El avance de las tecnologías web nos facilita bastante las cosas, dándonos recursos que en los últimos tiempos eran más fáciles de incrustar en una web con.. y gracias a las novedades de.. podemos evitar recurrir a tecnologías que usan más recursos.. Video y Audio con HTML5.. Ver la documentación de Video y Audio con HTML5.. Esta documentación contiene lo necesario para incrustar multimedia con los elementos que nos proporciona..

    Original link path: /utilidades/
    Open archive
  •  

  • Title: Portafolio [Xitrus - Pedro Gutiérrez]
    Descriptive info: Aquí encontrarás una recopilación de la mayoría de mis trabajos y proyectos, algunos de ellos realizados para empresas y otros como proyectos propios o como prácticas mientras me he estado formado.. Diseño, Desarrollo & SEO.. Diseño de la web de información y de la plataforma online para la gestión interna de.. New Rent Free.. , una empresa dedicada a la gestión de siniestros y préstamo gratuito de coches de sustitución.. Maquetación & Responsive Design.. Colaboración con.. Matías Cazorla.. Maquetación del diseño adaptable (Responsive Design) para una campaña de marketing sobre  ...   Betto.. es un álbum online con un concepto muy diferente al habitual, en lugar de ser social es totalmente privado, a menos que le proporciones una contraseña de invitado a quien quieras.. Formación.. Web dedicada a la artista.. Frida Kahlo.. , hecha solo con HTML.. Web informativa sobre varios sistemas operativos móviles.. SO móviles.. Experimento dedicado a varios de los pintores más importantes de la historia de España.. Artistas Españoles clásicos.. Web realizada con fines didácticos, con información de Coca-cola como compañía, como producto y exponiendo las actividades que promueve.. Coca-Cola..

    Original link path: /portafolio/
    Open archive

  • Title: Contacto [Xitrus - Pedro Gutiérrez]
    Descriptive info: Hola, si quieres conocer mi trayectoria, mi formación y mis aptitudes te recomiendo ver mi.. Curriculum Vitae.. y si necesitas mis servicios puedes mandarme un mensaje.. Ver Curriculum.. Mandame un mensaje.. Puedes enviarme un correo a.. o mandarme un mensaje con este formulario.. Nombre.. opcional.. Correo.. Asunto.. ¿Cuál es tu mensaje?:.. Tu correo electrónico solo será usado para responderte y no será proporcionado a terceros.. Sobre mí.. +.. Me llamo.. Pedro Gutiérrez Puente.. , soy un joven nacido en el 93, y actualmente vivo cerca de Toledo.. Tengo grandes conocimientos en el diseño y el desarrollo de páginas web, con experiencia creando proyectos propios y para empresas.. Ahora estoy buscando expandirme para poder ofrecer mis servicios como.. diseñador.. desarrollador freelance.. con Xitrus, un proyecto para darme a conocer profesionalmente y para compartir mis conocimientos con quien quiera.. ¿Por qué el diseño web?.. Desde hace años mi pasión ha sido el diseño web, en la época que descubrí este mundo se empezaba usar.. DreamWeaver 5.. y la gente quería saber que era eso de ".. Internet.. ".. Desde que vi el primer código.. me llamo la atención, y al pasar algunos años decidí empezar en este mundo.. por el 2007 más o menos.. Desde entonces han habido muchísimos cambios en las tecnologías relacionadas con la web: se empezó a hablar de web 2.. 0, posteriormente el.. boom.. de las redes sociales  ...   me gusta.. A principios de 2011 inicié una Formación Profesional de.. Sistemas Microinformáticos y Redes.. , para ser informático, algo que quise ser desde pequeño.. Pese a llevar unos años en esto del diseño y el desarrollo web, el tener que realizar el módulo de Aplicaciones Web me ayudó a reafirmarme y encaminar mi profesión.. Desde que empecé con Xitrus no he parado de aprender, de realizar proyectos y escribir, ya sea en Xitrus o en.. Genbeta Dev.. (un blog de referencia para programadores, líder en España).. Como soy cuando trabajo.. Detallista.. En este oficio uno no se puede permitir que un detalle le destroce una página entera,.. un simple detalle.. , puede ser el que haga que un usuario abandone una web y eso es algo que no es tolerable cuando pretendes.. hacer llegar un mensaje.. Por ese motivo hay que persistir e intentar no dejar cabos sueltos, sino un diseño no tendrá la calidad que alguien desea cuando contrata a un profesional.. Solidario.. Cuando alguien necesita mi ayuda no se la negaré, ya que.. no cuesta ningún esfuerzo hacer las cosas mejor.. y hacerle las cosas mas fáciles a los demás.. Al hacer una página web el que la recibe espera no tener que complicarse con ella, por ello creo que es bueno intentar dejarselo fácil al cliente y ayudarle a que no tenga que perder el tiempo..

    Original link path: /contacto/
    Open archive

  • Title: Atributos personalizados en HTML5 con data-* - Blog [Xitrus - Pedro Gutiérrez]
    Descriptive info: Manipulación con CSS.. Como hemos visto en la introducción, es muy simple añadir estos datos personalizados, por lo que voy a entrar directamente a su uso.. Lo primero que podemos hacer con este dato, es usarlo en selectores.. , para aplicar un estilo específico a elementos que contengan cierta información.. Siguiendo el ejemplo del inicio, añadiremos el siguiente CSS a varios elementos de la lista.. li.. [.. data-pais.. 'ES'.. ].. ,.. 'MX'.. {.. background.. :.. #FFC425.. ;.. }.. El otro uso que podemos darle a estos atributos consiste en añadir información al diseño mediante.. de forma cómoda y eficiente, sin necesidad de JavaScript ni añadir código.. extra.. Lo haremos mediante.. pseudo-elementos.. :before.. content.. : attr(.. data-edad.. ).. ' años'.. Manipulación con JavaScript.. ya incorpora métodos para manipular el.. DOM.. , incluyendo la capacidad para leer atributos.. Pero estos nuevos atributos personalizados tienen su forma fácil de acceso,  ...   atributos son de lectura y escritura, y se tratan como cualquier otro atributo.. li id=.. "elemento".. data-edad=.. data-lugar-de-nacimiento=.. "Paris".. var.. elemento.. =.. document.. getElementById.. );.. elemento.. edad.. // 19.. pais.. // FR.. lugarDeNacimiento.. // Paris.. = 22.. // Cambiamos.. // 22.. Resumen.. Este es posiblemente la forma de transmitir más información con el.. , pero tenemos que tener varias cosas en cuenta, como que los buscadores ignoran esta información, es simplemente un añadido para la hora de desarrollar.. Y la otra cosa que se debe de tener en cuenta es que sobrecargar una página con muchísimos atributos congestiona la propia web y puede disminuir la fluidez de la página, aunque es algo que también ocurre si se pasa información complementaria de otros modos.. Además los atributos personalizados están soportados por la mayoría de los navegadores modernos y antiguos, por lo que se puede usar sin ningún miedo.. Comentarios..

    Original link path: /blog/124/Atributos_personalizados_en_HTML5_con_data-*
    Open archive

  • Title: SVG es perfecto para el Responsive Design - Blog [Xitrus - Pedro Gutiérrez]
    Descriptive info: Diferencia entre SVG y una imagen normal.. Las imágenes de mapa de bits (como.. jpg.. ,.. png.. gif.. ) almacenan la información de todos sus píxeles, mientras que las imágenes vectoriales (como.. ) almacenan líneas, curvas, degradados y el resto de información necesaria para crear la imagen y el propio programa que lo visualiza es el que crea la información de cada píxel.. Esta característica hace los vectores perfectos para el.. , ya que podemos redimensionar iconos o imágenes sin perder calidad.. Por poner un ejemplo, os voy a mostrar un pequeño esquema de.. la arquitectura de Von Neumann.. , que está hecho con.. y se adapta a cualquier tamaño de pantalla.. Gracias a ello podemos tener imágenes que no pierden calidad al redimensionarse, como podemos ver a continuación comparando una imagen.. con una.. PNG.. En este otro ejemplo se puede ver una imagen vectorial más compleja y que mantendrá su calidad con cualquier tamaño.. Cómo usar una imagen SVG.. Como ya he comentado, hay distintas formas de usar las imágenes vectoriales, pero la más simple es la de usar un  ...   path d=.. "[.. ]".. /.. /svg.. También se puede usar como imagen de fondo a través de CSS, igual que hacemos con otra imagen, lo que nos puede ayudar a reducir el tamaño de los archivos que recibe nuestra página para funcionar (y así no usar grandes imágenes de fondo que son muy pesadas).. Compatibilidad.. tiene un gran soporte por parte de todos los navegadores, pero en algunos antiguos (ya sean de escritorio o móviles) pueden no tener compatibilidad, por lo que es buena idea tener un.. as en la manga.. si esto nos pasa, por ejemplo: usando.. pictografías.. , que son vectores con iconos que actuan como letras (por poner un ejemplo, en la barra lateral de este blog encontraréis los iconos sociales que son pictografías).. Como ya he comentado, es muy buena idea empezar a usar.. en nuestros diseños, lograremos tener una calidad óptima sin incrementar demasiado el tamaño de los archivos descargados.. Y si os preocupa de donde conseguir imágenes vectoriales, las podréis encontrar en plataformas como.. Freepik.. Flat Icon.. , y podréis editarlos con aplicaciones como.. Inskape.. Illustrator..

    Original link path: /blog/123/SVG_es_perfecto_para_el_Responsive_Design
    Open archive

  • Title: Funciones avanzadas de Console de JavaScript - Blog [Xitrus - Pedro Gutiérrez]
    Descriptive info: Mensajes de registro.. Los mensajes de registro o.. nos permiten mostrar textos simples u objetos en la consola de nuestro depurador de código (como es.. Firebug.. las herramientas de desarrollo de Chrome.. Voy a poner varios ejemplos, para verlos hay que abrir las herramientas de desarrollador (normalmente con.. F12.. La función.. nos permite mandar objetos, variables o funciones como argumentos, y serán visualizados en la consola.. // Texto.. console.. "Texto de prueba".. // Objeto DOM.. this.. // Texto y objetos.. "Objeto de prueba:".. , {.. a.. :.. 1.. b.. 2.. n.. :[.. 3.. ]}).. // Limpiar consola.. clear.. ().. Al igual que con.. disponemos de la función de aviso (.. warn.. ) y de error (.. error.. ), que funcionan igual que el ejemplo anterior.. Tablas en la consola.. Una de las novedades que han incorporado las consolas de la  ...   objetos JSON, por lo que esta función es perfecta para mostrar este tipo de datos.. datos.. nombre.. "Juan".. apellido.. "Alonso".. 21.. admitido.. true.. },.. "Pepe".. 23.. false.. "Raúl".. 34.. "Luis".. 19.. // Mostrar la tabla de datos.. table.. (datos).. Estas tablas pueden ser muy útiles para ver el contenido de.. (bidimensionales) de una forma rápida y discreta, sin afectar de ninguna forma al contenido de una página.. de la consola de depuración es un buen avance para depurar JavaScript y es aconsejable su uso, por encima de otras alternativas que pueden afectar a la experiencia de usuario (como las alertas).. Y sin duda es la mejor opción a la hora de construir una web que interactúa con un servidor, ya que hasta ahora debíamos de mostrar de alguna forma previamente esos datos, sin tener gran certeza de que llegan correctamente..

    Original link path: /blog/122/Funciones_avanzadas_de_Console_de_JavaScript
    Open archive

  • Title: Usa la unidad perfecta para Responsive Design - Blog [Xitrus - Pedro Gutiérrez]
    Descriptive info: Unidades absolutas.. Las medidas absolutas son invariables, si quieres que tenga algo un centímetro de alto, lo debería de tener en cualquier dispositivo, tenga le resolución que tenga y la densidad de píxel que sea.. Por eso son útiles cuando hacemos contenidos que serán impresos, ya sean en la web o fuera de ella (por ejemplo en Word o InDesign).. Estas son las más importantes:.. cm:.. representa a los centímetros y deberían de mantener una relación con la realidad en cualquier pantalla.. mm:.. milímetros, es más útil que los centímetros, ya que te permite ser más exacto.. pt:.. los puntos son la medida más usada para representar el tamaño de una fuente cuando su destino es ser impreso (los puntos son usados en Word).. Equivalen a 1 pulgada entre 72.. px:.. los píxeles no son medidas absolutas, pero voy a meterlos en el mismo saco ya que en la práctica son medidas invariables, por lo menos cuando queremos hacer un.. Las medidas absolutas (.. cm.. mm.. pt.. , por ejemplo) no son recomendables usarlas en el diseño web, salvando excepciones como contenidos destinados a ser impresos (por poner un ejemplo mi.. está destinado a tal fin o a que se visualice en tamaño folio en cualquier pantalla).. Estas medidas en el.. debemos de evitarlas en mayor medida, aunque es imposible ya que nos ayudarán a marcar los tamaños relativo en nuestra web, con las siguientes unidades relativas.. Unidades relativas.. Estas unidades relativas  ...   pero depende del tamaño del texto del elemento.. html.. (en el.. En esta medida nos centraremos después.. porcentaje (%):.. esta medida es muy simple de comprender, esta unidad determina el porcentaje del tamaño disponible que se usará.. Es decir, si tenemos un bloque de.. 1000px.. y le aplicamos a un contendor.. 50%.. este se tomará de tamaño.. 500px.. Estas medidas son las ideales para los.. diseños adaptables.. , ya que permiten variar todo un diseño simplemente cambiando el tamaño de un elemento o cambiado el tamaño de la letra de un solo elemento.. Los porcentajes son la base del.. , ya que permiten que las columnas o bloques de una web se redimensionen junto al ancho de una pantalla.. Es por ello que se deben de usar ante todo, aunque no siempre es posible y hay otras formas de conseguir una buena proporción.. Y tenemos el.. , que cada vez está siendo más usado, ya que permite cambiar las dimensiones de todos los texto de una página muy fácilmente, solo cambiando el tamaño del texto del elemento.. Es importante conocer las medidas y es recomendable usar las relativas cuando queremos hacer un diseño que varíe según el dispositivo, pero no debemos de obsesionarnos con estas unidades, ya que algunas veces en muy difícil hacer que estas medidas se adapten bien a nuestras necesidades.. Por ello disponemos de las.. , aunque es mejor, bajo mi punto de vista, recurrir preferentemente a las unidades relativas..

    Original link path: /blog/121/Usa_la_unidad_perfecta_para_Responsive_Design
    Open archive

  • Title: Pseudo-clase Nth-child - Blog [Xitrus - Pedro Gutiérrez]
    Descriptive info: Cómo usarlo.. afecta a elementos con la misma identificación en el.. , ya sea que compartan una misma clase o que sean elementos iguales.. div.. /div.. !-- Coloreado --.. /* Colorea los impares */.. div.. :nth-child.. 2n.. red.. /* También colorea impares */.. En.. se establece un patrón de una forma muy simple, pudiendo interactuar con el de tres formas:.. Número:.. establecemos la posición del elemento que modificaremos de forma numérica.. Intervalo:.. establecemos cada cuantos elementos añadiremos nuestro estilo.. Se usa el valor ".. " como multiplicador, precedido del número que establece el intervalo (como.. 3n.. Intervalo más número:.. también podemos combinar ambas, y establecer un intervalo modificando su inicio, sumando o restando un número.. En la práctica actúa  ...   2 + 1 = 7:.. el séptimo elemento.. Como detalle, os comento que se pueden llevar a práctica su uso con multiplicador de intervalo negativo (.. -2n.. , por ejemplo) y sumarle cierto número para que sea visible, lo que nos permite añadir un intervalo a los primeros de una lista, por ejemplo.. En la siguiente lista muestro como se visualizaría cada patrón.. 4.. 5.. 6.. 7.. 8.. 3n+2.. 3n-2.. -n+4.. -2n+3.. Su uso es muy común y necesario en multitud de ocasiones, te permite ahorrar poner para cada línea par e impar una clase, por poner un ejemplo, o al igual pasa con las listas.. , que nos permite modificar el número o símbolo que las encabeza con facilidad..

    Original link path: /blog/120/Pseudo-clase_Nth-child
    Open archive

  • Title: Introducción al AJAX - Blog [Xitrus - Pedro Gutiérrez]
    Descriptive info: 07.. 2.. Introducción al AJAX.. es una tecnología que nos permite cargar de forma asíncrona contenido en nuestra web desde.. , es decir, que sin recargar la página conseguimos recibir datos nuevos con lo que actualizar el contenido.. Esto se usa para tener páginas dinámicas y no tiene una gran complejidad ponerlo en práctica, todo empieza con.. XMLHttpRequest().. se gestiona desde el objeto.. XMLHttpRequest.. y nos permitirá crear peticiones.. http.. con el servidor (por seguridad no se puede realizar a otros ajenos).. Lo primero de todo es declararlo y asegurarnos de que disponemos de esta.. , aunque está muy establecida y desde hace muchos años tiene total compatibilidad.. // Comprobamos que está disponible.. if.. window.. ) {.. ajax.. = new.. Recuperar la respuesta del servidor.. Una vez que ya tenemos el objeto con el que usaremos.. (que lo hemos almacenado en la variable ".. ajax.. ") lo primero que tenemos que hacer es establecer que hacer cuando recibamos una respuesta tras lanzar una petición, y esto se realiza con la propiedad.. onreadystatechange.. del objeto, que contendrá una función.. // Estructura.. [función].. // Añadimos la función en línea.. function.. (){.. /*.. */.. // Añadimos una función existente.. respuesta.. Una vez establecida la propiedad cuando haya un cambio en una petición.. se ejecutará esta función.. Realizar una petición.. Ahora que ya hemos establecido que pasará con la petición la realizaremos, con la propiedad.. open.. del objeto que contiene la.. , que tiene distintos parámetros muy simples.. "[Método de petición]".. "[URL]".. [Asíncrono].. El.. método de petición.. puede ser ".. GET.. " o ".. POST.. " (que se diferencian en que.. envía datos por separado y.. por la.. URL.. , si es que los manda), el  ...   responda esta función cuando hemos descargado el archivo completo y es correcto, para ello usaremos.. readyState.. status.. que le darán a la función información de si está finalizada la petición o no (así solo se ejecutará al finalizarse).. La propiedad.. (en este caso.. status.. ) nos devolverá tras la recepción del archivo el código del estado de la página (.. 200.. es correcto,.. 404.. es no encontrado.. ).. Y la propiedad.. nos devolverá el estado de la petición, con números del.. 0.. al.. que tienen los siguientes significados:.. Estado "0".. : no se ha inicializado la petición.. Estado "1".. : se esta descargando el contenido.. Estado "2".. : se ha descargado el contenido.. Estado "3".. : se esta procesando la respuesta.. Estado "4".. : petición finalizada.. Por lo que una petición resuelta correctamente nos tiene que devolver el estado de lectura número ".. " y el número de estado de la página ".. ", y es lo que vamos ha hacer en la función de respuesta, solo ejecutar el contenido ante estas condiciones (sino se ejecutaría con cada cambio).. // El contenido del archivo saldrá en una alerta.. (){.. (ajax.. == 4.. == 200.. alert.. responseText.. es la que contiene la respuesta del mensaje, que solo es accesible cuando ha sido totalmente procesada y el estado de la petición es ".. Si queréis probar este mismo ejemplo podéis pulsar el botón.. que abre el contenido de un archivo llamado.. prueba.. txt.. Esta es la introducción a.. , aún queda ver las peticiones del tipo.. y mandar formularios a través de esta tecnología, que nos puede ser de ayuda para evitar recargar muchas veces la misma página, entre otras muchísimas cosas que podemos hacer..

    Original link path: /blog/77/Introducci%C3%B3n_al_AJAX
    Open archive



  •  


    Archived pages: 145