Archive

Archive for the ‘Varios’ Category

Toolkit for web developers.

noviembre 17, 2010 16 comentarios

When develop a website or web app, it is not easy make a great experience for each browser or device that uses it.  It is important to have in mind some general topics like response time, availability and consistency

As Gomez define in their Best of the Web Report (2009):

Response time measures the end-to-end time elapsed while downloading each Web page or the entire multistep transaction process. This includes the base HTML page and any referenced objects, third-party content, JavaScript and Cascading Style Sheets and other Web content. The reported metric represents the average time required to download the homepage or execute the multistep transaction without factoring in user latency.

Availability measures the percentage of successfully completed tests out of total test attempts for the period. Availability rates are dependent upon a number of variables including the ability of our testing agent to access the Website, its ability to process a transaction without error, and its ability to download each step of the transaction within a reasonable 60-second time frame. Reported availability rates do not include errors related to the Gomez measurement system or scripting problems.

Consistency measures the standard deviation of the response times of successful tests. The goal is to have a low number (in seconds), which indicates how consistent the response time is each time a user visits a Website. Highly variable response times (in seconds) indicate inconsistent performance that may be caused by poor Website performance as measured across diverse geographies, issues with Internet peering or an under-powered technical architecture which leads to slowdowns during periods of peak traffic.

In this post I show some tools that help us to improve our work as developers, it covers tools for debug, analyze, document, minify, monitor and test the apps.

Browser Tools

The browser tools are plug-ins or tools that are directly embedded in the browsers, the list with the original description as it appears on the website of each tool.

Firebug

http://getfirebug.com/

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

  • Inspect and edit HTML
  • Tweak CSS to perfection
  • Visualize CSS metrics
  • Monitor network activity
  • Debug and profile JavaScript
  • Quickly find errors
  • Explore the DOM
  • Execute JavaScript on the fly
  • Console logging for JavaScript

Firebug Lite

http://getfirebug.com/firebuglite

Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome, You can extend it and add features to make it even more powerful.

YSlow

http://developer.yahoo.com/yslow/

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages (http://developer.yahoo.com/performance/rules.html).  YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined rule set or a user-defined rule set. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

Smush.it

http://www.smushit.com/ysmush.it/

Image optimization is an art few have mastered. Useful image editing tools exist that allow images to be edited to reduce their file size while retaining image quality. Using these tools is a good start for optimizing images, but more can be done using advanced tools like Smush.it.

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files.

Smush.it is included with YSlow and is no longer available as a separate download. Download YSlow now to get Smush.it and start saving bytes on image files.

Page speed

http://code.google.com/speed/page-speed/

Page Speed is an open-source project started at Google to help developers optimize their web pages by applying web performance best practices. Page Speed started as an open-source Firefox/Firebug add-on and is now deployed in third-party products such as Webpagetest.org, Show Slow and Google Webmaster Tools.

Page Speed is a family of tools for optimizing the performance of web pages.

  • The Page Speed Firefox/Firebug add-on allows you to evaluate the performance of your web pages and to get suggestions on how to improve them.
  • The mod_pagespeed Apache module automatically rewrites pages and resources to improve their performance.

Web Inspector

The Web Inspector from safari, gives you quick and easy access to the richest set of development tools ever included in a browser. From viewing the structure of a page to debugging JavaScript to optimizing performance, the Web Inspector presents its tools in a clean window designed to make developing web applications more efficient. To activate it, choose Show Web Inspector from the Develop menu.

  • Choosing Safari Menu Option
  • Choosing Preferences…
  • Choosing the Advanced Tab
  • Enabling “Show Develop menu in menu bar“

Speed tracer

http://code.google.com/webtoolkit/speedtracer/

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.

Chromium Benchmarking Extension

http://www.chromium.org/chrome-benchmarking-extension

The Chromium Benchmarking Extension is a quick-and-dirty way to test page load time performance within Chrome.

  • Can clear the cache between each page load
  • Can clear existing connections between each page load
  • Works with both SPDY and HTTP
  • Measures time-to-first-paint, overall page load time KB read/written, and several other metrics
  • Can compare performance between SPDY (http://www.chromium.org/spdy)  and HTTP

Internet Explorer Developer Toolbar

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535

The Internet Explorer Developer Toolbar provides several features for exploring and understanding Web pages, is not compatible with Internet Explorer 8. These features enable you to:

  • Explore and modify the document object model (DOM) of a Web page.
  • Locate and select specific elements on a Web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS web feed links.
  • Display image dimensions, file sizes, path information, and alternate (ALT) text.
  • Immediately resize the browser window to a new resolution.
  • Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
  • Display a fully featured design ruler to help accurately align and measure objects on your pages.
  • Find the style rules used to set specific style values on an element.
  • View the formatted and syntax colored source of HTML and CSS.

IE Developer Tools

http://msdn.microsoft.com/en-gb/library/dd565628%28VS.85%29.aspx

Every installation of Internet Explorer 8 comes with the Developer Tools. This tool enables Web site developers to quickly debug Microsoft JScript, investigate a behavior specific to Internet Explorer, or iterates rapidly to prototype a new design or tries solutions to a problem on-the-fly.

Getting started with the tools is simple: press F12 or click Developer Tools from the Tools menu.

Opera Dragonfly

http://www.opera.com/dragonfly/

Opera Dragonfly allows you to develop more quickly and easily by providing tools to debug your JavaScript and to inspect the DOM, CSS, network traffic and data stores. Developing for mobile has never been easier with Opera Dragonfly’s built-in remote debugging. Opera Dragonfly can be activated from the Developer Tools menu or by right-clicking and selecting Inspect Element. Opera Dragonfly’s source is available to view,  it is released on a Apache 2.0 license.

  • Debug JavaScript
  • Inspect the DOM
  • Redefine your style
  • Monitor the Network
  • Dig through your storage
  • Spot your errors
  • Design Utilities
  • The Opera debug menu
  • Debug your phone or TV

Opera Dragonfly allows you to debug web pages from your desktop, that are being displayed on your mobile phone remotely (with opera mobile), to see how go to this article http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick.

Standalone tools

These tools go beyond of the browser tools and give you insights more professionals about what is happening in your web apps.

Dynatrace AJAX Edition

http://ajax.dynatrace.com/ajax/en/Default.aspx

dynaTrace AJAX Edition is the most powerful tool for optimizing your Web 2.0 applications. With so much code executing in the browser, it’s getting more and more difficult to keep your apps light and responsive. AJAX Edition v2.0 is a community-driven release that goes beyond debugging and diagnostics.

  • Analyzes your code and tells you were your hotspots are
  • Recommends proven solutions to common Web 2.0 problems
  • Compares your site’s performance to your competitors’
  • Provides deep insight across AJAX, Javascript, rendering, caching, & more
  • Supports Internet Explorer 6, 7, and 8

Showslow

http://www.showslow.com/

Show Slow is an open source tool that helps monitor various website performance metrics over time. It captures the results of YSlow, Page Speed and dynaTrace AJAX Edition rankings and graphs them, to help you understand how various changes to your site affect its performance.

HTTP Watch

http://www.httpwatch.com/

HttpWatch is an integrated HTTP sniffer for IE and Firefox that provides new insights into how your website loads and performs, has a comprehensive  automation interface that can be used by most programming languages (e.g. C#, Javascript & Ruby). The interface can be used to control the HttpWatch plug-in for IE or Firefox and to access data in HttpWatch log files.

  • HttpWatch captures a wide range of HTTP related data including:
    • Headers and Cookies
    • URLs and method (e.g. GET, POST, etc)
    • Parameters sent in a query strings and POST requests
    • HTTP status codes and errors
    • Redirections
    • The network size of the HTTP response including headers
    • Chunked encoding
  • Integrates With Internet Explorer and Mozilla Firefox
  • Compact & Comprehensive Log Files
  • Includes a Standalone Log File Viewer
  • Summary of Recorded Traffic
    • Performance
    • Page Events
    • Timings
    • Status Codes
    • Errors
    • Warnings
  • Grouping Of Requests By Page
  • Real-Time Page Level Time Charts
  • Request Level Time Charts
  • Page Level Events
    • DOM Load
    • Page Load
    • Render Start
    • HTTP Load
  • Detects Potential Problems

Fiddler

http://www.fiddler2.com/fiddler2/

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language. Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

Monitoring iPhone web traffic (with Fiddler)
You can ‘sniff’ the web traffic coming from an iPhone, to see how go to this link: http://conceptdev.blogspot.com/2009/01/monitoring-iphone-web-traffic-with.html

Mite

http://mite.keynote.com/

Mite is a powerful, desktop-based tool for testing and validating mobile Web content. Mite will reduce your time to market and help you deliver a better end-user experience. With a customizable library of over 1,800 devices and 11,000 device profiles, Mite gives you unequalled access to screen compatibility and application support information.

Keynote Mite lives on your desktop giving you instantaneous feedback. Navigate a site and validate that content appears as you’ve intended while checking that links are functioning properly. Mite also provides a download summary, a performance summary, re-directs, headers, cookies and detailed waterfall graph for further investigation.

Charles Debugger

http://www.charlesproxy.com/

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Charles makes debugging quick, reliable and advanced; saving you time and frustration

  • Records all traffic between your browser and the Internet
  • Reveals the contents of all requests, responses, cookies and headers
  • Supports SSL and HTTPS
  • Saves valuable time
  • Simulates slower internet connections
  • Download statistics
  • Configurable
  • Quickly find and eliminate bugs

With Charles Debugger You can debug iphone web apps, to know how, see: http://blog.mediarain.com/2009/08/iphone-http-connection-debugging/

JSDoc toolkit

http://code.google.com/p/jsdoc-toolkit

JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.

YUIDoc

http://yuilibrary.com/projects/yuidoc

YUI Doc is a tool written in Python that generates beautiful, organized, searchable API documentation for your JavaScript code. You will typically use YUI Doc as part of your build process. YUI Doc is comment-driven and is compatible with a variety of coding styles. You do not need to be using YUI Library JavaScript in order to use YUI Doc.

MS Visual Round Trip Analyzer

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=119F3477-DCED-41E3-A0E7-D8B5CAE893A3&displaylang=en

The Visual Round Trip Analyzer tool helps web developers and testers visualize the download of their page, identify best practices and changes that improve web performance. The network Round-Trip between the client and server(s) is the single biggest impact to web page performance – much greater than server response time. VRTA examines the communications protocol, identifying the causes of excessive round-trips, and recommending solutions. Performance engineers, testers, developers, operations personnel should use VRTA to conduct their web performance analysis.

HTTP Scoop

http://www.tuffcode.com/index.html

HTTP Scoop passively listens for HTTP requests from any browser (or other application for that matter) running on your Mac.

There’s no special configuration needed, no cumbersome proxies required. You just hit the Scoop button and off you go.

  • Capture HTTP conversations
  • View headers, parameters & more
  • View & save responses
  • Any browser/client or server
  • No proxy or browser plug-in
  • Great for AJAX and Web Services

Web tools

These are tools that you use directly on the code or an URL to test your web sites /apps.

Boomerang

http://yahoo.github.com/boomerang/doc/

Boomerang is a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user’s point of view. It has the ability to send this data back to your server for further analysis. With boomerang, you find out exactly how fast your users think your site is. All you have to do is stick it into the bottom of your web pages and call the init() method.

Boomerang is opensource and released under the BSD license.

YUI Profiler

http://developer.yahoo.com/yui/profiler/

The YUI Profiler is a simple, non-visual code profiler for JavaScript. Unlike most code profilers, this one allows you to specify exactly what parts of your application to profile. You can also programmatically retrieve profiling information as the application is running, allowing you to create performance tests YUI Test or other unit testing frameworks.

Perfectomobile

http://www.perfectomobile.com

Test Mobile Applications on Real Devices.

The Perfecto Mobile Handset Cloud system enables you to access and control real mobile devices via the web. Using the system you can quickly and easily operate the phone keys, touch-screen, or QWERTY keyboard to control the device, install applications on the device and verify that your application or service works properly and displays correctly on the phone’s screen.

The Perfecto Mobile system is a hardware and software solution. The mobile handset is mounted on a cradle that holds it in a specific location. A video camera, located in front of the handset’s screen, captures the real user experience as it is displayed on the handset’s screen.

  • Controlling a remote device
  • Typing Text.
  • Installing an application on the handset
  • Keep a record of your actions and collaborate
  • Screen Shots.
  • Video Clips.
  • On-Line.
  • Testing interruptions.
  • Sending SMS.
  • Web-based UI.

The members of the Opera Developer Network get 7 hours of remote access, free of charge.
http://www.perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2

Web Page Test

http://www.webpagetest.org/

WebPagetest is a tool that was orginially developed by AOL for use internally and was open-sourced in 2008. The online version at http://www.webpagetest.org is an industry collaboration with various companies providing the testing infrastructure for testing your site from across the globe.

JSLint

http://www.jslint.com/

JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool.

Minification is the process of eliminating white space, comments, and other nonessential parts of the javascript code to decrease the size of the JS files that need to be transfered from the server to the browser.

YUI Compressor

http://yuilibrary.com/projects/yuicompressor/

YUI Compressor is an open source tool that supports the compression of both JavaScript and CSS files. The JavaScript compression removes comments and white-spaces as well as obfuscates local variables using the smallest possible variable name. CSS compression is done using a regular-expression-based CSS minifier.

Google Closure Compiler

http://code.google.com/intl/es-AR/closure/compiler/

The Closure Compiler reduces the size of your JavaScript files and makes them more efficient, helping your application to load faster and reducing your bandwidth needs.

The Closure Compiler provides warnings for illegal JavaScript and warnings for potentially dangerous operations, helping you to produce JavaScript that is less buggy and and easier to maintain.

The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

To help you work with your transformed code, you can also install the Closure Inspector, a tool that makes it easy to use the Firebug JavaScript debugger with the Compiler’s output.

The Closure Compiler has also been integrated with Page Speed, which makes it easier to evaluate the performance gains you can get by using the compiler.

Conclusion

Web performance monitoring and analysis tools can provide a lot of knowledge about how your end-users uses the website or web app from different perspectives, so it is very important to know the tools that we have to measure different parts of the applications.

Pies de página ajustables multi pantalla

noviembre 12, 2010 2 comentarios

Hace unos días, navegando vi una tecnica para ajustar el pie de página en diferentes pantallas, busque la liga pero no la encontré de todas maneras aqui la comparto porque es un buen tip para hacer pies de página que se ajusten a cualquier tipo de pantalla usando css,

Se crea un documento html con un div que va a ser el pie de la pagina y se le asigna la clase pie:

<div class=”pie”>
<p>
<a href=”#”>Liga 1</a>&nbsp;
<a href=”#”>Liga 2</a>&nbsp;
<a href=”#”>Liga 3</a>&nbsp;
<a href=”#”>Liga 4</a>
</p>
</div>

La clase css pie para que se ajuste a cualquier pantalla es:

.pie {

width:100%;
height:40px;
left:0px;
position:absolute;
top:100%;
margin-top:-40px;

}

Lo interesante son las ultimas 2 líneas  al establecer el top al 100%, el div se ajustará al final del documento desapareciendo, y al ajustar el margen superior negativo del mismo alto que el div se ajustrará siempre al final del documento.

Rápida Introducción a threeJS

septiembre 28, 2010 Deja un comentario

threeJS es una libreria javascript creada por mrdoob con la que se puede  crear contenido 3D directo en el navegador, sin necesidad de un plugin adicional.

Descarga.

threeJS está en  github, para descargarlo hay que visitar esta dirección http://github.com/mrdoob/three.js

Antes de comenzar.

Para ver los ejemplos de este post, es necesario tener un navegador compatible con canvas, y tomar en cuenta que algunos de estos pueden tardar  tiempo en cargar.

Conceptos básicos de 3d.

Para comenzar vamos a definir algunos conceptos básicos para la programación 3d:

Escena.-Es la composición entera de objetos 3d en un espacio 3d, es como el stage en flash con 3 ejes, cualquier objeto que se necesite ver en la escena debe ser agregado, si no son agregados, no se ven.

Sistema de coordenadas.

Código para crear y agregar elementos a una escena 3d.
escena = new THREE.Scene();
escena.addObject( objeto3D);

Camara.- La camara define el punto de visión del cual se esta viendo la escena, la camara no es un objeto visible por lo tanto no se necesita agregar a la escena.

Código para  crear una cámara
camara = new THREE.Camera( fov, aspect, near, far );

Viewport.- Es como el lente de la camara, muestra la salida de lo que la camara ve, es la ventana de una escena 3d. Funciona como una ventana del mundo real, haciendola grande no afecta como se ve el mundo de fuera, pero si afecta que tanto podemos ver.

Objeto 3D.- Es una forma en un espacio 3d, tiene 3 ejes y lo podemos colocar en cualquier parte del escenario 3d.

Con threeJS vienen algunos objetos como el plano, el cubo, el cilindro, la esphera

Material.- El material es la textura que es impresa en un objeto, si un objeto no tiene un material aplicado entonces será invisible.

Con threeJS podemos aplicar colores, imagenes  ó videos como materiales.

Motor de render.- Es como la película de la camara, cuando se ejecuta el render, mostrará información de la escena grabada por la camara al viewport, cuando se para el render el viewport solo muestra la última imagen captada.

Con threeJS podemos renderizar usando <canvas>, <svg> y WebGL, el código para crear un render y renderizar una escena es:
renderer = new THREE.CanvasRenderer(); // se crea el render de tipo canvas
renderer.setSize( 500, 500); // se especifica su tamaño
document.body.appendChild( renderer.domElement );// se agrega al documento
renderer.render( escena, camara );//Se renderea la escena con la camara asignada.

Composición de objetos 3d.- Los objetos 3d están compuestos de  Vertices y triangulos.

Vertices (Vertex, verts).- Un vertice es un punto 3d en el espacio y tiene 3 puntos cardinales (X,Y,Z) el orden siempre es ese.

Triángulos.- Los triangulos son formados por vertices, los triangulos también son conocidos como caras (faces) o caras de triangulo (triangle faces). Cada triangulo es compuesto de 3 vertices, los vértices definen la forma del triangulo y como tienen coordenadas XYZ es posible hacer la cara del triangulo en cualquier dirección.

Triangulos y Vertices

El objeto geometry es el que tiene el arreglo de todos los vertices de un objeto 3d.
geometry.vertices

Proceso general para creación de escenarios 3d.

La secuencia de procesos que suceden al mostrar algo en 3d es la siguiente:

Inizialización.- Es el proceso donde se crea la escena, la camara, los objetos 3d con sus materiales y  el tipo de render.

Proyección.- Convierte las coordenadas 3d en 2d para la pantalla. La proyección solo es en los vertices no con los triangulos o los materiales.

Renderizado.- Es el proceso de dibujar una imagen que se verá en la pantalla combinando los datos de la proyección 2d con la información acerca del material que esta siendo utilizado. Es la tarea mas intensiva del procesador.

Primer ejemplo creación de tres planos.

Este ejemplo muestra como crear planos en una escena 3d. Una vez cargado el ejemplo, se puede mover la cámara con los botones,  para ver la escena  de diferentes ángulos.
Para ver la explicación de la programación,  ver el código fuente del ejemplo.

Ejercicio 1, Creación de planos en 3 ejes

http://www.juan-anzaldo.com/2010/threeJS/1_ejercicio_Planos.html

Segundo Ejemplo creación de un Objeto 3d (cubo)

Este ejemplo muestra como crear un objeto 3d (cubo), además muestra  como asignar colores a cada una de las caras del cubo, una vez cargado el ejemplo, se puede rotar el cubo con los botones, para verlo de diferentes ángulos.
Para ver la explicación,  ver el código fuente del ejemplo.

Ejercicio 2 creación de un cubohttp://www.juan-anzaldo.com/2010/threeJS/2_ejercicio_Cubos.html

Tercer ejemplo esfera de esferas.

Este ejemplo muestra como crear una esfera de esferas, utilizando el arreglo de vertices de la esfera para posicionar esferas mas pequeñas en cada uno de los vertices, una vez cargado el ejemplo, se puede mover la camara con los botones, para ver la escena de diferentes ángulos

Para ver la explicación,  ver el código fuente del ejemplo.

Creación de esfera de esferas

http://www.juan-anzaldo.com/2010/threeJS/3_ejercicio_Esfera_de_esferas.html

Materiales.

Un material es como la textura de un objeto, sin material los objetos son invisibles. La diferencia entre material y textura es que la textura es la fuente (la imagen) que se va a usar por el material, el material es usado para definir propiedades que afectan como es usada la textura en el objeto.

Los archivos de los materiales se encuentran en la carpeta “materials” y constan de LineColorMaterial, MeshBitmapUVMappingMaterial, MeshColorFillMaterial, MeshColorStrokeMaterial, MeshFaceColorFillMaterial, MeshFaceColorStrokeMaterial, ParticleBirmapMaterial, ParticleCircleMaterial, ParticleDomMaterial.

Hay de varios tipos como de malla, de partícula, de imagen, de elementos dom.

Cuarto Ejemplo Aplicación de una imagen como material a una esfera.

Este ejemplo muestra como crear una esfera y aplicar una imagen como material, utilizando MeshBitmapUVMappingMaterial y usando canvas. Una vez cargado el ejemplo, se puede rotar la esfera con los botones.

Para ver la explicación,  ver el código fuente del ejemplo.

Aplicar materiales a una esfera

http://www.juan-anzaldo.com/2010/threeJS/4_ejercicioMateriales.html

Camara.

Una camara representa un punto virtual del cual nosotros vemos una escena y los objetos presentes en esta. En la carpeta cameras se encuentra el archivo camara.js. Una camara se puede rotar y mover en X,Y y Z. Aunque no tiene una representasión visual en la pantalla.

Parámetros para instancear una cámara..

Field of View (FoV), aspect, near, far.

Field of view.- Campo vertical de visión. Se expresa en ángulos.

Aspect.- La proporción entre el ancho y el alto.

Near.- Es la distancia del ojo al  plano cercano, qué es un plano imaginario perpendicular a la camara, cuando los objetos se acercan mas que el plano cercano, desaparecen.

Far.- Es la distancia del ojo al plano lejano, cuando un objeto pasa más lejos que el plano lejano, el objeto desaparece.

CamarasAnimación.

La animación es la ilusión de movimiento, threeJS permite al usuario interactuar libremente con objetos en la escena. Básicamente existen 3 tipos de objetos que podemos mover, Objetos 3d que tienen representación visual en la escena, Camaras  y Luces.

Para animar objetos tenemos estas tres propiedades del objeto Object3D

  • Posición ( position.x, position.y, position.z )
  • Rotación ( rotation.x, rotation.y, rotation.z )
  • Tamaño (scale.x, scale.y, scale.z )

La velocidad de animación con javascript depende  del tiempo, se anima usando un temporizador como el setInterval(), la animación corre a una velocidad constante y es relativamente independiente a la capacidad de cómputo del usuario.

Quinto ejemplo animación de camara.

Este ejemplo muestra como crear un temporizador  y aplicar una animación en los ejes Y y Z de la camara, una vez cargado el ejemplo, se puede tocar la animación presionando el botón. Para ver la explicación del ejemplo,  ver el código fuente del ejemplo.Animación de camara

http://www.juan-anzaldo.com/2010/threeJS/5_ejercicio_Camara.html

Estos son solo los primeros pasos para trabajar con esta librería, en la dirección de github o en el sitio de mrdoob se pueden ver ejemplos mas avanzados de lo que se puede lograr con esta librería.

Todos los ejercicios se pueden descargar de http://www.juan-anzaldo.com/2010/threeJS/ejemplosThreeJS.zip

WURFL (Wireless Universal Resource FiLe) y Tera-WURFL para detección de capacidades de dispositivos móviles

agosto 25, 2010 4 comentarios

Debido a que existe una gran cantidad de navegadores para dispositivos móviles es complicado para los desarrolladores construir aplicaciones que trabajen adecuadamente en la mayoría de los dispositivos, de entrada necesitamos conocer las características que cada dispositivo soporta y las diferencias entre dispositivos; además de que se debe evitar modificar las aplicaciones cuando un nuevo modelo salga al mercado.

Los navegadores y dispositivos son diferentes, pero comparten muchas características en común entre ellos, muchas veces son del mismo fabricante, y son por lo general una evolución del mismo hardware/software, por lo tanto las diferencias entre modelos de un mismo fabricante son mínimas además que los dispositivos de diferentes fabricantes comparten también características y pueden correr la misma aplicación, es por esto que es mejor servir el contenido de nuestras aplicaciones basado en las características que soporta el dispositivo, en lugar de servir el contenido de acuerdo al modelo del dispositivo.

WURFL y Tera-WURFL son depósitos globales de dispositivos móviles y las capacidades que soportan, están orientados para ayudar a los desarrolladores en la construcción de mejores aplicaciones y mejores servicios para los usuarios, mientras que WURFL es un archivo de configuración XML, Tera-WURFL es una base de datos MySQL (SQLServer en su versión beta) que usa WURFL como su fuente de datos, ambas son herramientas muy útiles para detección de dispositivos, sus capacidades y características de manera programática, algunos ejemplos de uso podrían ser:

  • Redirección a versiones móviles de los sitios.
  • Detectar el tipo de video que el dispositivo móvil del usuario soporta.
  • Detectar usuarios iPhone, iPad, iPod y redirigirlos a sitios específicos para estos dispositivos.
  • Detectar la resolución de la pantalla del dispositivo del usuario para servir las imágenes adecuadas para esa resolución.
  • Detectar soporte de javascript, java o flash lite.
  • Detectar si es un dispositivo touch.

WURFL está basado en el concepto de familias de dispositivos. Todos los dispositivos son descendientes de un dispositivo genérico, pero pueden también descender de familias más especializadas, este mecanismo llamado ‘fall_back’, permite a los desarrolladores derivar las capacidades de un teléfono buscando las capacidades de su familia, a menos que una cierta característica sea específicamente diferente para ese teléfono.

Por ejemplo Nokia tiene varias versiones del modelo 7110, algunas de estas no soportan tablas WML,  otras si, WURFL extrae este conocimiento gracias al mecanismo fall_back:

La familia genérica especifica una capacidad llamada “table_support”

<device fall_back=”root” id=”generic” user_agent=””>
<group id=”ui”>
:
<capability name=”table_support” value=”true” />
</group>

Esto se lee como “Dispositivos WAP Genericos soportan tablas WML”

De manera inicial, los telefonos Nokia soportan tablas porque heredan de generic (fall_back=”generic”):

<device user_agent=”Nokia” fall_back=”generic” id=”nokia_generic”>
<group id=”ui”>
<capability name=”Capacidades que acepta este grupo” value=”false” />
</group>
</device>

Tomando en cuenta el soporte de tablas, el codigo anterior implica que para un dispositivo Nokia generico (nokia_generic) debe ser usado el mismo valor que tiene en generico.

<device user_agent=”Nokia7110/1.0 (04″ fall_back=”nokia_generic” id=”nokia_7110_ver1″>
<group id=”ui”>
<capability name=”table_support” value=”false” />
</group>
</device>
<device user_agent=”Nokia7110/1.0 (04.67)” fall_back=”nokia_7110_ver1″ id=”nokia_7110_ver1_sub467″ />
<device user_agent=”Nokia7110/1.0 (04.69)” fall_back=”nokia_7110_ver1″ id=”nokia_7110_ver1_sub469″ />
<device user_agent=”Nokia7110/1.0 (04.94)” fall_back=”nokia_7110_ver1″ id=”nokia_7110_ver1_sub494″ />
<!– 7110 new-age –>
<device user_agent=”Nokia7110/1.0 (05″ fall_back=”nokia_7110_ver1″ id=”nokia_7110_ver2″> <group id=”ui”>
<capability name=”table_support” value=”true” />
</group>
</device>
<device user_agent=”Nokia7110/1.0 (05.00)” fall_back=”nokia_7110_ver2″ id=”nokia_7110_ver1_sub500″ />
<device user_agent=”Nokia7110/1.0 (05.01)” fall_back=”nokia_7110_ver2″ id=”nokia_7110_ver1_sub501″ />

Tomando en cuenta de nuevo el soporte de tablas, el código anterior se lee como “hay una familia de teléfonos de 7110 para la cual las tablas no son soportadas y hay una familia para la cual si son soportadas”, Todos los modelos 7110 están en la lista anterior, pero cada uno hereda de una u otra subfamilia, con esto se puede conocer si un dispositivo soporta tablas o no.

WURFL trabaja por medio de API’s (java y php) y genera un cache para hacer mas rápido las consultas (el archivo XML pesa más de 15MB), por lo que cuando se instala y se ejecuta por primera vez tarda tiempo dependiendo del servidor pero ya las siguientes veces corre considerablemente mas rapido el cache puede ser por medio del sistema de archivos, Memcache, APC, EAccelerator y RDBMS y se especifica el método por medio del archivo de configuración de WURFL (WURFL-config.xml)

Para mas información de como descargar e instalar el api de php hay que visitar esta liga: http://WURFL.sourceforge.net/nphp/
Para descargar el archivo XML visitar esta liga: http://sourceforge.net/projects/WURFL/files/WURFL/

Una vez instalada la api (php), solo se necesita una manera eficiente para leer la información y usarla en las aplicaciones móviles para personalizarlas dinámicamente de acuerdo a las capacidades que soporte los dispositivos y estar al pendiente de actualizar el archivo XML para soportar los nuevos dispositivos que vayan entrando al mercado, el código básico php para utilizarla es:

<?php
$WURFLconfig = ‘/ruta_donde_esta_el_archivo/de_configuracion/WURFL-config.xml’;
$WURFLmanager = WURFL_WURFLManagerProvider::getWURFLManager($WURFLconfig);
$device = $WURFLmanager->getDeviceForHttpRequest($_SERVER);
?>

En el código anterior la primer línea especifica la ruta en donde se encuentra el archivo de configuración, en la segunda se instancia el manejador WURFL que es la interfaz que se usa para hacer las operaciones como crear instancia del dispositivo por medio de una petición HTTP o una cadena de agente de usuario, y en la tercera se instancia la variable $device que regresa un arreglo que contiene una gran cantidad de información acerca del dispositivo por ejemplo:

Array (
[resolution_width] => 770
[resolution_height] => 300
[rows] => 30
[columns] => 77
[max_image_width] => 600
[max_image_height] => 600]
[wbmp] => false
[bmp] => true
[epoc_bmp] => false
[gif] => true
[gif_animated] => true
[jpg] => true
[png] => true
[tiff] => false
[flash_lite] => false
:
)

Para ver completo los valores del arreglo visitar http://WURFLapi.pointbeing.net/

Por otro lado Tera-WURFL es una librería basada en PHP y MySQL que usa usa los datos del archivo XML WURFL y los pone en la base de datos MYSQL para identificar las capacidades de dispositivos móviles, la librería encapsula las consultas a la base de datos y provee una interfaz simple orientada a objetos de los datos además provee una interfaz para obtener la ultima versión del archivo XML de WURFL de sourceforge e importarla a la base de datos.

Una de las principales ventajas sobre WURFL es el rendimiento, normalmente entre 5 y 10 veces mas rápido, como la generación del objeto implica varias consultas, Tera-WURFL guarda el resultado como una cadena serializada en en una tabla dedicada, lo que significa que las siguientes peticiones del mismo agente de usuario es reducida a una sola consulta de esa tabla a la llave primaria (que es el agente de usuario), esto combinado con el cache mismo de MySQL, hace que sea mucho más rápido al ahorrarse muchas las consultas.

El código básico php para utilizarla es:

<?php
require_once ‘/ruta_donde_esta_el_archivo/tera_WURFL/tera_WURFL.php’;
$device = new Tera_WURFL();
$device->getDeviceCapabilitiesFromAgent($_SERVER[‘HTTP_USER_AGENT’]);
?>

En la primer línea se especifica donde está el archivo tera_WURFL.php que es necesario, en la segunda se instancia la clase para poder usar tera-WURFL y en la tercera se obtiene las capacidades del agente de usuario (en caso de no encontrar ese agente de usuario busca en la cabecera HTTP-ACCEPT), en un arreglo que contiene la información acerca del dispositivo, la diferencia con el API de WURFL radica en que el arreglo de Tera-WURFL es multidimensional mientras que el de WURFL API es unidimensional, la librería requiere que pasemos $_SERVER[‘HTTP_USER_AGENT’] como parámetro para el método getDeviceForHttpRequest(), esto es la cabecera de HTTP de agente de usuario basada en la cual las consultas de Tera-WURFL usarán como parámetro en la base de datos para obtener los detalles del dispositivo a diferencia de la API de WURFL que pasa $_SERVER la cual contiene todas las cabeceras de petición del protocolo HTTP.

Para ver un ejemplo del arreglo completo visitar: http://tw.pointbeing.net/

Un ejemplo para detectar si el visitante es un usuario móvil y redirigirlo sería:

<?php
require_once ‘/ruta_donde_esta_el_archivo/tera_WURFL/tera_WURFL.php’;
$wurflObj = new Tera_WURFL();
$wurflObj->getDeviceCapabilitiesFromAgent($_SERVER[‘HTTP_USER_AGENT’]);
if ($wurflObj->getDeviceCapability(“is_wireless_device”)) //detectar si es un usuario movil
header(“Location: http://www.sitioweb.com/movil/&#8221;)//redireccionar
?>

Para descargar tera-WURFL: http://www.tera-wurfl.com/wiki/index.php/Downloads

Un problema de usar la cabecera de agente de usuario como parámetro (HTTP_USER_AGENT) es que algunos operadores cambian el agente de usuario y lo reemplazan con alguna cadena genérica, por ejemplo un usuario de Blackberry puede cambiar en las configuraciones del navegador la identificación de navegador con el que quiere navegar (BlackBerry, Firefox, Internet Explorer) por lo que si lo cambia de su modo normal (Blackberry) no se van a servir las paginas adecuadamente, otro ejemplo es Opera mini que envía su propia cabecera user-agent la cual no especifica los detalles del dispositivo en el cual está corriendo y genera otra cabecera (HTTP_X_OPERAMINI_PHONE_UA) en donde especifica el agente de usuario original, para ver un poco mas sobre esto visitar este link http://www.tera-wurfl.com/Tera-Wurfl_Doc/TeraWurfl/WurflSupport.html

Fuentes:

Pagina principal de WURFL: http://wurfl.sourceforge.net/

Grupo de Facebook de WURFL http://www.facebook.com/group.php?gid=91445168918

Grupo de Yahoo de WURFL http://tech.groups.yahoo.com/group/wmlprogramming/

Página principal de tera-WURFL: http://www.tera-wurfl.com/wiki/index.php/

Introducción a tera-WURFL: http://pointbeing.net/weblog/2008/03/introduction-to-tera-wurfl.html

WURFL Api: http://pointbeing.net/weblog/2009/04/a-first-look-at-the-new-wurfl-api-for-php.html

Otras ligas relacionadas:

Artículo sobre Detección de navegadores: http://www.jibbering.com/faq/notes/detect-browser/

Open Mobile Alliance http://www.openmobilealliance.org/

Opera Mini request headers http://dev.opera.com/articles/view/opera-mini-request-headers/

Tips a tomar en cuenta para diseñar aplicaciones móviles: http://labs.thesedays.com/2010/07/16/10-tips-for-designing-mobile-websites/

Ligas para desarrollo orientado a iPhone http://www.juan-anzaldo.com/2010/iphone/iphoneDev.html

WALL for PHP http://wall.laacz.lv/

Para usar tera-WURFL sin necesidad de instalarlo: http://wurfl.thesedays.com/

Interfaces de Usuario.

Las interfaces de usuario son muy importantes porque es el medio por el cual se comunican el usuario y la aplicación o dispositivo Jef Raskin comenta “Respecto a lo que concierne al cliente, la interface es el producto”, El usuario ve e interactúa con la interfaz de usuario.

Pero, ¿Que propiedades o características debe de tener una interfaz de usuario?, según [the smashing book] toda interfaz de usuario debe de tener 8 características:

1. Ser Clara. La interfaz evita la ambigüedad haciendo todo claro a través de lenguaje, flujo, jerarquía y metáforas para elementos visuales, las interfaces claras no necesitan manuales y además ayudan a los usuarios a que tengan menos errores mientras las usan.

2. Ser Concisa. Es fácil hacer una interfaz clara etiquetando todo, pero se corre el peligro de poner muchos elementos en la pantalla al mismo tiempo, si hay muchas cosas en la pantalla, es difícil encontrar lo que se busca y la interfaz se vuelve tediosa de usar, el reto real en hacer una gran interfaz es hacerla clara y concisa al mismo tiempo.

3. Ser Familiar. Aunque alguien use una interfaz por primera vez, ciertos elementos pueden ser familiares, se pueden usar metáforas de la vida real para comunicar un significado, por ejemplo, los tabs son comúnmente usados para navegación en los sitios web y en las aplicaciones. Las personas los reconocen como elementos de navegación porque la metáfora del folder es familiar a ellos.

4. Tener buen grado de reacción. Esto significa dos cosas: primero velocidad de respuesta, una buena interfaz no se debe de sentir lenta o pausada, segundo la interfaz debe proporcionar buen nivel de retroalimentación al usuario respecto a lo que está pasando y si el input del usuario ha sido procesado exitosamente.

5. Ser Consistente. Mantener la interfaz consistente a través de las aplicaciones es importante porque permite a los usuarios reconocer patrones. Una vez que los usuarios aprenden como trabajan algunas partes de la interfaz, ellos pueden usar este conocimiento en nuevas áreas porque ellos ya conocen el funcionamiento.

6. Ser Estética. No se necesita hacer una interfaz atractiva para que realice su trabajo, pero haciendo algo que se vea bien, hará que el tiempo que los usuarios gastan usando la aplicación sea más placentero, es bueno tener usuarios felices.

7. Ser Eficiente. Tiempo es dinero y una gran interfaz debe hacer al usuario más productivo por medio de atajos y buen diseño, después de todo este es uno de los principales beneficios de la tecnología, permitir desarrollar tareas con menos tiempo y esfuerzo haciendo gran parte del trabajo por el usuario.

8. Ser Tolerante a fallas. Todos cometemos errores, y él como la interfaz los maneja será un test para la calidad. ¿Es fácil deshacer acciones?, ¿es fácil recuperar archivos borrados? una buena interfaz no debe castigar a los usuarios por sus errores, debe proveer formas para remediarlos.

Diseñar una interfaz que incorpore todas estas características es complicado ya que trabajar en una característica a veces afecta a otra, entre más elementos se agreguen a la interfaz, mas cosas los usuarios tendrán que procesar,  por otro lado no proveer suficiente ayuda y soporte puede hacer que ciertas funciones sean ambiguas, crear algo que sea simple, elegante y al mismo tiempo claro y consistente es la principal  meta para el diseñador de interfaz de usuario.

Existen muchos recursos en línea a continuación listo herramientas, videos y plantillas que pueden ayudar a realizar los prototipos de las interfaces.

Fuentes:

the smashing book

http://speckyboy.com/

Ladrones vs Policias

febrero 17, 2009 Deja un comentario
Ladrones contra policias en chihuahua Martes 17 de febrero

Ladrones contra policias en chihuahua Martes 17 de febrero

Saldo

Ladrones 5.

Policias 3.

Categorías:Varios

WWW Pasado, Presente y Futuro. (Breve Historia del World Wide Web)

octubre 9, 2008 Deja un comentario

En este post, incluyo la charla de la conferencia que impartí en el Simposium Internacional de Informática y Computación 2008 (SIINCO 2008) del Instituto Tecnológico de Chihuahua II.

INTRODUCCION

WWW

En La era de la información en que vivimos poco a poco nos hemos ido adaptando al utilizar nuevas tecnologías para mantenernos informados acerca de las circunstancias en que vivimos

En su nivel más básico, todas las actividades que realizamos en esta era de la información son posibles gracias a la generación, procesamiento, transmisión, y obtención de información,  todo esto se hace sobre 5 pilares esenciales según Michael Dertouzos:

1. Toda la información son números.
2. Esos números son unos y ceros.
3. Las computadoras transforman la información ejecutando operaciones aritméticas sobre estos números.
4. Los sistemas de comunicación  transportan la información, moviendo estos números.
5. Las computadoras y los sistemas de comunicación se combinan para formar redes de computadoras, las bases de las infraestructuras de la información.

Conocer esto, es equivalente a saber que las llantas, la gasolina, el motor y el chasis son necesarios para hacer un carro, pero para realmente saber cómo trabaja un carro y cómo podemos hacer uso de él, necesitamos conocer como el motor convierte la gasolina en el poder que rueden las llantas que hace que el chasis se mueva y nos lleve a donde nosotros queramos.

En esta plática conoceremos los pilares del World Wide Web, sus componentes básicos y las tecnologías que se están desarrollando actualmente.

ANTECEDENTES

Hipertexto

El concepto de hipertexto ha sido usado para reagrupar una serie de documentos semejantes sobre la base de semejanzas o diferencias de múltiples maneras

Estudiosos han investigado por milenios la forma para buscar e identificar piezas de información relacionada, con o sin referencias explicitas.
Se han inventado esquemas de referencia como libro/capitulo/numero de verso, también se ha inventado los pies de pagina, índices, tablas de contenido, todos estos inventos han servido como medios  para vincular lugares en un espacio de información.

Hipertexto es la habilidad para expresar relaciones entre lugares en un universo de información, un lugar debe ser una pieza de información o por lo menos cualquier cosa que exista en una forma estable o recuperable.

Vannevar Bush

Un importante científico en la industria militar de los EU en los tiempos de la 2 guerra mundial y la guerra fría, fue un participante importante en la organización del proyecto Manhattan, este proyecto consistió en la elaboración de las bombas atómicas de Nagasaki e Hiroshima.

A VB  se le acredita la noción moderna de hipertexto, en 1945 escribió un artículo llamado As we may think en donde conceptualizó el memex, una maquina fotoelectromecánica  para guardar, consultar y ligar información usando microfilmes y computación análoga. VB,

Doug Engelbart

El primer programa de hipertexto fue NLS (oNLine System) que Doug Engelbart desarrolló en el instituto de Stanford en 1960, la visión de Doug Engelbart era  que las personas utilizáramos el hipertexto como una herramienta de trabajo en grupo, para ayudarse a mover el cursos de la computadora a través de la pantalla y seleccionar las ligas de hipertexto con facilidad invento un bloque de madera con censores y una pelota por dentro el cual hoy en día conocemos como mouse, el fue un gran inventor del siglo pasado algunos de sus inventos fueron el procesador de textos, la primer videoconferencia.
 Sus esfuerzos se centraban en que las personas se  pudieran comunicar con las computadoras de una manera muy natural.

Ted Nelson

Ted Nelson tenia la visión de una sociedad utópica en la cual toda la información del mundo pudiera ser publicada en hipertexto  para que pudiera ser compartida y que toda la gente se comunicara como iguales, a él se le atribuye el termino hipertexto, ha escrito numerosos artículos, también se le atribuye la creación de la disciplina HCI (Interacción Humano-Computadora) y desarrollo Xanadu.  En Xanadu  confluyen las teorías de Vannevar Bush y Douglas Engelbart. Su objetivo es la potenciación del intelecto humano, ser simple y poder ser usado por cualquier ser humano, y además que permita convertirse en programas de gran complejidad.

Por supuesto un gran invento en la conquista por la conectividad global fue el internet, una infraestructura general de comunicaciones  que liga a las computadoras y sobre la cual el web corre, el internet es un conjunto de protocolos estandarizados que dictan como se envían los datos de una PC a otra, estos datos son transmitidos a través de transportadores como líneas de teléfono, cable, canales de satélite.

 

 

 

Tim Berners Lee.

Nació en Londres Inglaterra, graduado del Queens College de la universidad de Oxford, Tim Berners-Lee comenzó con una idea: crear algo para hacer más fácil la vida, y mejorar la manera de compartir ideas entre las personas.  En pocos años esa idea se convirtió en algo indispensable para la mayoría de la gente, que no puede vivir sin ella.  El surgimiento del Web comenzó en 1980 en el CERN, el laboratorio europeo de Física en partículas ubicado en suiza.
En el CERN trabajaban alrededor de 3000 científicos de diferentes nacionalidades, los científicos llegaban al CERN de varias universidades, utilizaban los equipos del CERN y se regresaban a sus laboratorios para analizar los resultados y sacar conclusiones, la primera asignación de Berners Lee en el CERN fue el desarrollo de un sistema para almacenar la información acerca de que computadoras utilizaban cuales científicos y en qué proyectos estaban trabajando, a este sistema lo llamó enquire por una enciclopedia que él veía de niño, y se le conoce como el primer prototipo del web, este sistema no usaba árboles ni estructuras para guardar la información utilizaba ligas de hipertexto.
Las ligas eran de dos tipos internas y externas, la diferencia era que las internas se ligaban a una página (nodo)  dentro de un archivo y las ligas externas se ligaban a otros archivos, otra diferencia era que las ligas internas aparecían en los 2 nodos mientras que las ligas externas solo tenían una dirección.

A Tim Berners Lee, le gustaba la idea de que una pieza de información es realmente definida solo por lo que está relacionado a ella y la manera en cómo está relacionada. Por ejemplo como las neuronas en nuestros cerebros, las neuronas son solo celdas, el cerebro no tiene conocimiento hasta que se forman las conexiones entre nuestras neuronas, todo lo que conocemos y lo que somos viene de la manera en como las neuronas están conectadas.

Posteriormente Berners-Lee termino  su estancia en el CERN pero volvió 4 años después.
En 1989 el CERN era el nodo más grande de internet en Europa y Berners Lee tuvo la visión de unir el Internet con el hipertexto, formuló una propuesta pero no fue muy aceptada, en septiembre de 1990 Berners Lee y su Jefe fueron  a Versalles a una conferencia de tecnologías de hipertexto para conocer los productos que ya estaban en el mercado y se intereso por dos, uno de una compañía llamada OWL LTD un producto que se parecía mucho a lo que TBL había pensado de un navegador Web,  era un programa que abría y desplegaba documentos cuando se le daba clic en una liga de hipertexto, pero la gente de OWL  no se interesó mucho. También le gustó otro de Dynatext Electronic Books ellos tampoco se interesaron en la propuesta de TBL, ellos insistían en una base de datos centralizada de links para asegurarse que no hubiera ligas rotas, aparte querían mandar aplicaciones compiladas en su caso libros completos, cuestión que chocaba con la visión de TBL de un mundo vivo de hipertexto en el cual todas las páginas estuvieran cambiando constantemente, debido a las decepciones decidió crear el Web por sí solo, en octubre de 1990 comenzó a escribir el código para el web.

Lo primero que escribió fue el cliente web, después el protocolo http junto con el URL.

COMPONENTES

URI-URL.

Son cadenas que se utilizan en lugar de instrucciones y contiene todos los detalles esenciales para la obtención de recursos de una manera compacta. En estas cadenas las diagonales son usadas para delimitar sus partes, la primer parte es el esquema o protocolo de comunicación para buscar un documento, la parte siguiente identifica el servidor en donde el documento existe y la siguiente la ubicación del recurso en el servidor.

HTTP  

Es el protocolo para la transferencia de hipertexto y de otro tipo de documentos en el Internet, consiste de un intercambio de mensajes de petición y de respuesta, Los mensajes de petición de un cliente empiezan  con un código de operación (conocido como método) y el URI del objeto. Los mensajes de respuesta de un servidor comienzan con un código de estatus e información acerca del recurso.

HTML

Es una manera sencilla de representar hipertexto, algo importante acerca de HTML es que debe llevar solo la estructura de un documento hipertexto ,  no los detalles de su presentación, esta es la única manera de desplegar razonablemente en cualquier variedad de pantallas diferentes.
HTML está basado en el estándar generalizado de lenguaje de marcado (SGML)  un estándar para publicación de documentos por la comunidad de hipertexto.

HTML está definido como un lenguaje de comunicación el cual corre a través de la red pero no hay un requerimiento de que los archivos sean almacenados en formato HTML. Como los lenguajes dinámicos con otro tipo de formato pero al final convierten su salida a código HTML.

CSS

El principio principal detrás de la independencia de dispositivos y accesibilidad, es la separación entre la forma  en cómo está estructurado un documento y el contenido  del mismo, donde el significado de un documento es guardado por separado de la manera en que debe desplegarse.
La independencia de dispositivos y la accesibilidad son mas fáciles de mantener por medio de las hojas de estilo en cascada o CSS, que son un conjunto de instrucciones de cómo se presenta o transforma la información de una página.

JAVASCRIPT

El primer navegador que existió se llamó otherwise de los estudiantes de la universidad de Helsinki en Finlandia en abril de 1992, después le siguió violaWWW, de la universidad de Berkeley este navegador, podía mostrar HTML con gráficos, animaciones y bajar pequeñas aplicaciones llamadas posteriormente Applets,  después surgió Netscape Navigator y en su versión 2.0 apareció por primera vez javascript, javascript está basado en el estándar ECMAScript.
Una característica muy importante de javascript es su herencia de prototipos, javascript tiene un sistema de objetos libre de clases, en donde los objetos heredan propiedades directamente de otros objetos, esto es realmente poderoso aunque diferente a la programación por clases. Una desventaja muy importante es su dependencia de  variables globales.

DOM

El DOM es un conjunto de estándares para la interfaz de los navegadores.  Define la estructura lógica de los documentos y la manera en que un documento puede ser leído y manipulado. Con el DOM los programadores puede construir documentos, navegar su estructura y agregar, modificar o borrar elementos y contenido. Cualquier elemento (nodo) que esté en un documentos HTML o XML puede ser accesado, cambiado o agregado usando el DOM.
Fue creado como estándar de la W3C para evitar las incompatibilidades de los diferentes navegadores.
Un documento DOM es una colección de nodos, o piezas de información organizada de manera jerárquica. Esta organización permite al desarrollador navegar alrededor del árbol (como esta basado en una estructura jerárquica de información se dice que el DOM es basado en árbol) buscando por información especifica. El DOM es una manera de describir esos nodos, sus métodos y propiedades así como las relaciones que hay entre ellos.

 

XML

XML permite servir, recibir, y procesar SGML genérico  en el Web, de la manera que no es posible con HTML, fue diseñado de una manera en que es sencilla su implementación y para la interoperabilidad entre SGML y HTML.

W3C

Que es

Cuando comenzó la explosión del WWW, Berners Lee se dio cuenta de que se necesitaba de un órgano regulador con el propósito de llevar a el web a su mayor potencial, principalmente desarrollando protocolos comunes para mejorar la interoperabilidad y la evolución del web.

A semejanza del IETF (Internet Enginering Task Force), el W3C desarrollaría especificaciones técnicas abiertas, y a semejanza de un consorcio industrial el W3C representaría el poder y la autoridad de millones de desarrolladores, investigadores, instituciones y usuarios para publicar los más recientes avances en tecnología de información.

Un avance significativo en el desarrollo de internet fue en 1994 cuando Netscape desarrolló SSL un protocolo para proteger las compras con tarjeta de crédito y transacciones electrónicas, y surgió el primer programa que permitió el e-commerce que empezó a ganar credibilidad. Las etapas para crear un estándar son:

1. Proyecto de trabajo
2.Ultima llamada del proyecto de trabajo.
3. Candidato a recomendación.
4. Recomendación propuesta.
5.  Recomendación W3C (Estándar Web)

La w3c define mecanismos no políticas.

 
Quienes pertenecen

La membresía del W3C está abierta a cualquier compañía, DEC, Netscape, HP, IBM, fueron los primeros miembros.
En los inicios del consorcio las cuotas eran de 50 mil dólares para la membresía completa y de 5mil dólares por membresía de afiliado, los beneficios eran los mismos la diferencia es que para la membresía de afiliado tenían que ser una organización sin fines de lucro, gubernamentales o tener ganancias menores a los 50 millones de dólares, los miembros tienen el derecho a asistir gratis a cualquier junta y sentarse a cualquier grupo de trabajo y tener acceso exclusivo a información acerca de todas las actividades del consorcio. Hoy en día las tarifas también consideran la ubicación geográfica del organismo, por ejemplo para México una membresia de  octubre del 2008 a octubre de 2009 es de 68,500 dólares para compañías con ganancias mayores a los 50 millones de dólares anuales,  7,900 dólares para compañías con ganancias entre 30 y 50 millones de dólares, y para todas las demás 3,810 dólares.

USABILIDAD.

Usabilidad.
Todo usuario que accede a un Portal de Internet, esta motivado por una razón específica: buscar, aprender, ejecutar una transacción, monitorear, crear, conversar o simplemente entretenerse.

Estrategias.
Las implicaciones para el diseño de un portal son simples de entender, pero no siempre son fáciles de implementar, reacciones, preferencias, contexto social, creencias, son aspectos generales de los usuarios que se deben de tomar en cuenta para lograr un buen resultado.
Dentro del diseño se deben considerar los indicadores, que son características que ayudan a los usuarios a saber donde están, a donde ir y como llegar de donde esta, o que otras opciones existen dentro del portal, los indicadores mas comunes incluyen páginas y títulos de ventanas, logos, tabs, o indicadores de selección.

Interfaces.
Existen varios temas relacionados con la Usabilidad, patrones de diseño, métodos y procedimientos que requieren de su consideración cuando se desarrolla un Portal de Internet, para asegurar el mayor resultado posible, los desarrolladores deben considerar un rango amplio de temas acerca de interfaces de usuario, y trabajar para crear un Sitio Web que permita el mayor desempeño humano posible.
Las interfaces son muy importantes porque son el medio por el cual los humanos nos comunicamos con las computadoras

HCI
HCI,  es la disciplina que estudia el diseño, implementación, uso y evaluación de los sistemas interactivos, para que los humanos tengamos mejor interacción con las computadoras.
Si ellos no pueden usarlo, no lo usarán.

ACCESIBILIDAD.
Que es
Uno de los principios del web es que las personas puedan enviar o acceder información entre ellas sin importar el sistema operativo, los formatos que las computadoras usen, o las discapacidades de las personas, lo único que tienen que hacer es seguir el mismo esquema simple de direccionamiento de URI, la idea de la universalidad es la llave, no necesariamente se tiene que usar HTTP o HTML pero son herramientas que ayudan a los problemas de incompatibilidad.
Accesibilidad Web significa que gente con discapacidades puedan usar el Web, más específicamente, accesibilidad web significa que la gente con algún tipo de discapacidad, puedan percibir, entender, navegar e interactuar con el web y puedan contribuir al web.

Porque es importante
La interoperabilidad entre dispositivos ha sido una molestia durante mucho tiempo, Como el web se ha convertido en una importante fuente de recursos en diversos aspectos (educación empleo, gobierno, comercio, salud, y más)  Es esencial que el  web sea accesible en orden de proveer  un acceso y oportunidad  equitativo a las personas con discapacidades.

Técnicas
La mayoría de las responsabilidades de la  accesibilidad se centran en los desarrolladores Web.
Hacer un sitio web  accesible puede ser simple o complejo dependiendo de muchos factores tales como el tipo de contenido, el tamaño y la complejidad del sitio, y el desarrollo de herramientas.
Muchas de las características de accesibilidad son fácilmente implementadas si estas son planeadas desde el principio del desarrollo o el rediseño del sitio web, arreglar sitios web inaccesibles  requiere de mucho esfuerzo.

TECNOLOGIAS

Rich Internet Applications.
Del 2001 al 2005 el WWW tuvo un gran crecimiento en términos de tecnologías y metodologías para usarse y cambiar de medios estáticos a contenidos más interactivos.
A medida que los navegadores implementaban innovaciones de tecnología, los desarrolladores web comenzaron a experimentar con nuevas formas de interacción para los usuarios, se acabaron las cargas de páginas completas y se sustituyeron por pequeñas actualizaciones de bloques de información, las primeras compañías que experimentaron con esta nueva forma de desarrollos web, fueron Google,  y Yahoo.

Web Services.
Los web services proveen una manera para intercambiar datos entre aplicaciones y servidores. Para facilitar esta comunicación, los web services usan Internet para mandar mensajes compuestos de datos XML entre un cliente (la aplicación que usa los datos) y un proveedor (el servidor que contiene los datos). SOAP (siglas de Simple Object Access Protocol) es un protocolo estándar que define cómo dos objetos en diferentes procesos pueden comunicarse por medio de intercambio de datos XML. SOAP fue creado por Microsoft, IBM y otros y está actualmente bajo el auspicio de la W3C. Es uno de los protocolos utilizados en los servicios Web.

AJAX.
 En febrero del 2005 Jesse James Garret  de la compañía Adaptive Path, publicó un artículo denominado Un nuevo acercamiento de las aplicaciones Web. En este ensayo explicó como el pensaba como las aplicaciones Web y las aplicaciones de escritorio estaban  acercándose cada vez mas.
AJAX permite comunicarse con el servidor por medio de peticiones más ligeras y especificas, con AJAX no hay necesidad de cargar una página entera solo para actualizar los valores de una determinada sección ya que el cliente es libre de comunicarse con el servidor y obtener información sobre demanda, la ventaja de esto es que los clientes experimentan una mejora de navegación en los sitios o aplicaciones ya que al no tener que cargar todo el contenido nuevamente, las respuestas hacia los usuarios son más rápidas, la desventaja es que debido al incremento de peticiones hacia el servidor se aumenta el desempeño del servidor de aplicación, obviamente este aumento depende del funcionamiento de la aplicación.

FLEX
Flex es un producto de Adobe, para el desarrollo de RIA’s  esta basado en tecnología  Flash, y es una plataforma para las empresas que desean implementar aplicaciones mas interactivas en sus sitios web. Se usa en todo tipo de industria ya que  es muy potente y tiene muy buen manejo de todas las tecnologías web.

Navegadores
Docenas de navegadores web han sido desarrollados por personas  desde hace muchos años, el primer navegador ampliamente utilizado fue NCSA Mosaic que se convirtió en Netscape Navigator, y fue el más utilizado hasta que Microsoft  Internet Explorer tomó el liderato en 1999 debido a la ventaja de distribución. En el 2002 fue liberada una versión de código abierto de Netscape  llamado Mozilla con la idea de que IE era mayor que Netscape pero no mayor que toda la comunidad Web, Mozilla ha ganado mercado particularmente con los usuarios de plataformas que no son Windows, gran parte debido a su fundación abierta, y en 2004 fue liberado FireFox. Amaya es el navegador oficial de el W3C.

WEB SEMANTICA

¿Qué es?
La Web semántica o Web 2.0 es la idea inicial del Web, un ambiente colaborativo en donde se puede publicar información.  La Web Semántica tiene que ver con calidad de la información, privacidad y confianza

WEB ANALITICS

¿Qué es?
Si las ideas de la gente, las interacciones y los patrones de trabajo pudieran ser rastreados usando el web entonces un análisis computarizado nos puede ayudar a ver patrones en nuestro desempeño y de esta manera facilitar nuestro trabajo en grupo.
Las máquinas son capaces de analizar todos los datos del Web, el contenido, ligas y transacciones entre las personas y las computadoras.

AMBIENTES COLABORATIVOS

El web es más una creación social que técnica Berners Lee lo diseñó para un efecto social, para ayudar a la gente a trabajar junta. La esencia de trabajar juntos en una manera de Red, es que nosotros funcionamos en grupos y el Web nos sirve como herramienta para este propósito.

Google

Redes Sociales.
Las redes sociales son la base del Web 2.0 la llave de las redes sociales son la integridad que engloba la privacidad y la confidencialidad. La privacidad envuelve la habilidad de cada persona para dictar que se puede y que no se puede hacer con su propia información personal

CONCLUSIÓN

Para realmente trabajar en el Web, necesitamos de mucho mejores herramientas, mejores formatos para presentar información al usuario, interfaces mas intuitivas  e integración con otros sistemas, poco a poco se están adoptando los sistemas de computación en un mundo de hipertexto global.

 

A %d blogueros les gusta esto: