|
Mostrar Temas
|
Páginas: 1 [2] 3 4
|
11
|
Programación / Desarrollo Web / [Aporte] JQuery
|
en: 3 Enero 2011, 14:53 pm
|
IntroducciónCuando surgió la web 2.0 en conjunto del social media las aplicaciones de Internet se tornaron mas exigentes ya que debían ser mas dinámicas. Esto fue posible con el DHTML ya que combina un conjunto de técnicas para diseñar HTML Dinámico, con apoyo de Javasript, hojas de estilo en cascada CSS y la jerarquizacion del árbol DOM. Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página la misma para todos los usuarios. Entre los usos mas habituales del DHTML, esta la creación de menús desplegables, ventanas modales, validaciones en tiempo real de formularios, estilo personalizados de la aplicación para cada usuario, creación de entornos mas amigables al cliente final entre otra cantidad de opciones y posibilidades. JQueryJQuery es un conjunto de librerías o Framework de javascript, creada inicilamente por John Resig que es trabajador de la Fundación Mozilla. Este Framework permite reducir de manera notoria la interaccion con los documento HTML, como manipular elementos DOM, gestionar eventos, desarrollar animaciones e integrar contenidos con Ajax. jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2,permitiendo su uso en proyectos libres y privativos. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en javascript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio Primeros PasosPara empezar el Framework, podemos ingresar a el su sitio oficial y descargarla desde allí. Contiene una amplia comunidad a nivel mundial lo cual hace que su API este bien documentada. Que lograremos con JQuery: * Reducir lineas y lineas de código * Hace transparente el código a cualquier navegador WEB, este es un problema serio para cualquier aplicación * Creación de animaciones de manera facil * Integración, en el mundo existen miles de programadores que trabajan sobre este Framework y se puede conseguir un buena cantidad de plugin’s Hola MundoUna vez descargado el Framework, lo llamamos desde el HTML de la siguiente forma:
Para ejecutar una función apenas haya cargado todo el Árbol DOM, los podemos hacer de la siguiente forma: $(function(){ alert("Hola Mundo") })
El uso de esta validación, no aseguramos de que Framework empieza a funcionar apenas se haya cargado toda la pagina. FUENTE
|
|
|
14
|
Programación / Desarrollo Web / [javascript] Busco Colaboradores en Proyecto GPL - Minimal JS Framework
|
en: 12 Octubre 2010, 18:01 pm
|
Hola todos, estoy buscando personas interesadas en el medio para que me colaboren en la construccion de Framewaork en JS, yo se que ya hay bastantes pero la idea es hacernos uns propio, para hispanos !!! ... si se le miden le dejo un version del framework analicenla y comentan ... tan sera recibidas sus sugerencias y criticas Les dejo el codigo: /** * @author 4ng3r */ Min={ version: '1.0', name: 'Minimal JS Framework 2010', consola: 1, } /** * @alias Url * @classDescription Clase desarrollada para manejar todas las propiedades del objeto location */ Min.Url = { /** * @method ubicacion * @return Object */ ubicacion:function(){ return window.location }, /** * @method host * @return String */ host:function(){ return this.ubicacion.host; }, /** * @method url * @return String */ url:function(){ return this.ubicacion.href; }, /** * @method hostname * @return String */ hostname:function(){ return this.ubicacion.hostname; }, /** * @method ruta * @return String */ ruta:function(){ return this.ubicacion.pathname; }, /** * @method hash * @return String * @Description retorna un String como todo lo que esta despues del # en la URL */ hash:function(){ return this.ubicacion.hash; }, /** * @method puerto * @return String */ puerto:function(){ return this.ubicacion.port; }, /** * @method protocolo * @return String */ protocolo:function(){ return this.ubicacion.protocol; }, /** * @method variables * @return String * @Description retorna un String como todo lo que esta despues del ? en la URL */ variables:function(){ return this.ubicacion.search; }, /** * @method obtenerVariables * @return Void * @Description Retorna las variables con su respectivo valor */ obtenerVariables:function(){ Url = Min.Url.url(); Url = Url.replace(/.*\?(.*?)/,"$1"); Variables = Url.split ("&"); for (i = 0; i < Variables.length; i++) { Separ = Variables[i].split("="); eval (Separ[0]+'="'+Separ[1]+'"'); } }, /** * @method verResumen * @return String * @Description retorna el resumen del objeto Location */ verResumen:function(){ var cadena = "<b>Nombre del HOST: </b>"+this.host()+"<br>"; cadena += "<b>Ubicacion: </b>"+this.url()+"<br>"; cadena += "<b>Ruta: </b>"+this.ruta()+"<br>"; cadena += "<b>Ver Hash: </b>"+this.hash()+"<br>"; cadena += "<b>Ver Puerto: </b>"+this.puerto()+"<br>"; cadena += "<b>Ver Protocolo: </b>"+this.protocolo()+"<br>"; cadena += "<b>Ver Variables: </b>"+this.variables()+"<br>"; return cadena; }, /** * @method redireccionar * @param String url */ redireccionar:function(url){ if(Min.valiciones.esUrl(url)){ this.ubicacion.assign(url); }else{ if(Min.consola){ alert('URL no valida: '+url); } } }, /** * @method remplezarURL * @param Strin url * @Description remplazar la pagina actual a otra, borrandola del historial */ remplezarURL: function(url){ if(Min.valiciones.esUrl(url)){ this.ubicacion.replace(url); }else{ if(Min.consola){ alert('URL no valida: '+url); } } }, /** * @method recargar */ recargar:function(){ this.ubicacion.reload(); } } Min.valiciones={ /** * @method esString * @param Strin str * @return Boolean */ esNumero:function(str){ return !isNaN(str); }, /** * @method esUrl * @param Strin url * @return Boolean */ esUrl:function(url){ var str = new String(url); var re=/^http:\/\/\w+(\.\w+)*\.\w{2,3}$/; return re.test(str); }, /** * @method validarCampoCorreo * @param String email * @return Booblean */ esEmail:function(email){ var str = new String(email); if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(str)){ return true; }else { return false; } }, /** * @method esHora * @param String hora * @return Booblean * @example var bool = Min.valiciones.esHora("12:00 AM"); //true */ esHora:function(hora){ var er_fh = /^(1|01|2|02|3|03|4|04|5|05|6|06|7|07|8|08|9|09|10|11|12)\:([0-5]0|[0-5][1-9])\ (AM|PM)$/ if( str == "" ){ return false } if(!(er_fh.test(hora))){ return false } return true }, /** * @method esFecha * @param String fecha * @return Booblean * @example var f = Min.valiciones.esFecha("12-11-2009"); //true */ esFecha:function(fecha){ var Fecha= new String(fecha); var RealFecha= new Date(); var Ano= new String(Fecha.substring(Fecha.lastIndexOf("-")+1,Fecha.length)); var Mes= new String(Fecha.substring(Fecha.indexOf("-")+1,Fecha.lastIndexOf("-"))); var Dia= new String(Fecha.substring(0,Fecha.indexOf("-"))); if (isNaN(Ano) || Ano.length<4 || parseFloat(Ano)<1900){ return false; } if (isNaN(Mes) || parseFloat(Mes)<1 || parseFloat(Mes)>12){ return false; } if (isNaN(Dia) || parseInt(Dia, 10)<1 || parseInt(Dia, 10)>31){ return false; } if (Mes==4 || Mes==6 || Mes==9 || Mes==11 || Mes==2) { if (Mes==2 && Dia > 28 || Dia>30) { return false; } } return true; }, /** * @method tieneNumeros * @param String str * @return Booblean */ tieneNumeros:function(str){ var numeros="0123456789"; return this.comparacion(str,numeros); }, /** * @method tieneMinusculas * @param String str * @return Booblean */ tieneMinusculas:function(str){ var letras="abcdefghyjklmnñopqrstuvwxyz"; return this.comparacion(str,letras); }, /** * @method tieneMayusculas * @param String str * @return Booblean */ tieneMayusculas:function(str){ var letras="ABCDEFGHYJKLMNÑOPQRSTUVWXYZ"; return this.comparacion(str,letras); }, /** * @method comparacion * @param String str * @param String patron * @return Booblean * @description Esta funcion busca en la cadena si existe un patron */ comparacion:function(str,patron){ for(i=0; i<str.length; i++){ if (patron.indexOf(str.charAt(i),0)!=-1){ return true; } } return false; } } Min.vector={ /** * @method crearArreglo * @param Object o * @return Array */ crearVector:function(o){ if ((typeof o) == "object") { var tmp = new Array() for(item in o){ tmp[item]=o[item]; } return tmp; } return null; }, /** * @method agregar * @param Array vector * @param String Item || Number Item * @param Object valor (Number, Boolean, String) */ agregar:function(vector,item,valor){ if ((typeof vector)=="object"){ vector[item]=valor; }else{ return null; } }, /** * @method eliminar * @param Array arreglo * @param String Item || Number Item */ eliminar:function(vector,item){ if ((typeof vector) == "object") { vector[item]=null; } }, /** * @method logitud * @param Array arreglo * @return Number */ logitud:function(vector){ if ((typeof vector) == "object") { return vector.length; } }, } Min.DOM={ documento: document, /** * @method obtenerElementoID * @param String id * @return Object */ obtenerElemento:function(id){ return Min.DOM.documento.getElementById(id); }, /** * @method DOMCompleto * @param Function f */ DOMCompleto:function(f){ Min.Ventana.ventana.onload=function(){ f(); } }, /** * @method obtenerPrimerHijo * @return Object */ obtenerPrimerHijo: function(){ return Min.DOM.documento.firstChild; }, /** * @method obtenerUltimoHijo * @return Object */ obtenerUltimoHijo: function(){ return Min.DOM.documento.lastChild; }, obtenerPadre:function(el){ return el.parentNode; }, /** * @method obtenerBody * @return Object */ obtenerBody:function(){ return document.getElementsByTagName('body')[0]; }, /** * @method insertarElemento * @param object padre * @param object hijo */ insertarElemento:function(padre,hijo){ return padre.appendChild(hijo); }, agregarEvento:function(obj,evento,funcion){ var n = Min.Navegador.obtenerNavegador(); if(n==1){ obj.addEventListener(evento,funcion,false); } } } Min.Ventana={ ventana: window, ancho: window.screen.width, alto: window.screen.height, /** * @method moverCapas * @param String el */ moverCapas: function(el){ this.naveador=Min.Navegador.obtenerNavegador(); this.elemento=el; this.comenzarMovimiento=function(){ var elMovimiento=document.getElementById(this.getId()); elMovimiento.style.position="relative"; elMovimiento.onmousedown=function(event){ cursorComienzoX=event.clientX+window.scrollX; cursorComienzoY=event.clientY+window.scrollY; document.addEventListener("mousemove",enMovimiento, true); document.addEventListener("mouseup",finMovimiento, true); elComienzoX=parseInt(elMovimiento.style.left); elComienzoY=parseInt(elMovimiento.style.top); function enMovimiento(event){ var xActual, yActual; xActual=event.clientX+window.scrollX; yActual=event.clientY+window.scrollY; elMovimiento.style.left=(elComienzoX+xActual-cursorComienzoX)+"px"; elMovimiento.style.top=(elComienzoY+yActual-cursorComienzoY)+"px"; elMovimiento.style.opacity="0.4"; evitaEventos(event); } function finMovimiento(){ document.removeEventListener("mousemove", enMovimiento, true); document.removeEventListener("mouseup", finMovimiento, true); elMovimiento.style.opacity="1"; } function evitaEventos(){ event.preventDefault(); } } } this.getId=function(){ return this.elemento; } }, crearVentana:function(titulo,ancho,alto){ alert(alto); var b = Min.DOM.obtenerBody(); var d = document.createElement('div'); d.setAttribute('id','ventana1'); d.setAttribute('style','width: '+ancho+'px; height:'+alto+'px;'); d.setAttribute('class','ventana'); var panel = Min.DOM.insertarElemento(b,d); d = document.createElement('div'); d.setAttribute('id','titulo'); d.setAttribute('class','ventana'); } } Min.Navegador={ obtenerNavegador: function(){ if(navigator.userAgent.indexOf("MSIE")>=0){ return navegador=0; } return navegador=1; }, obtenerSistemaOperativo:function(){ } } Min.Efectos={ /** * @method iluminarElemento * @param Number inicio * @param Number fin * @param Object el */ iluminarElemento:function(inicio,fin,el){ if(Min.valiciones.esNumero(inicio)&&Min.valiciones.esNumero(fin)){ } } }
Les dejo un Ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Min.DOM.DOMCompleto(function(){ var obj = Min.DOM.obtenerElemento('a'); Min.DOM.agregarEvento(obj,"click",function(){ alert("Este es un evento Click en el Objeto: "+this.id); }); })
|
|
|
15
|
Programación / ASM / ASM y Robotica
|
en: 2 Octubre 2010, 17:44 pm
|
Me Meti en un proyecto de mi universidad y es un competencia de Robots y yo soy de la parte de programacion, tengo nociones basicas de ASM pero la verdad no soy tan bueno en este lenguaje, queria perdirles consejo, por donde empiezo?, existen librerias? o si hay otro lenguaje de programacion que me facilite mas el desarrollo !!
|
|
|
16
|
Programación / Programación General / [Fundamentos] Programación Orientada a Objetos
|
en: 2 Septiembre 2010, 20:53 pm
|
Introducción La programación orientada a objetos (POO) nos permite escribir código menos propenso a fallos además de permitirnos la re utilización de código de forma más conveniente. En el siguiente articulo tratare unos conceptos básicos que debemos tener en cuenta a la hora de programar bajo este paradigma y de cómo utilizar los distintos elementos que nos permitirán crear código que sea más fácil de escribir y mantener Los Pilares de la POOLa programación orientada objetos (que aquí en adelante la voy a llamar POO) tiene tres características esenciales y son el alma de este estilo de programación estos son: * Encapsulación * Herencia * Polimorfismo Encapsulación: Es la cualidad de unificar los datos y la forma de manipularlos, de esta forma podemos ocultar el funcionamiento de una clase y exponer solo los datos que manipula (mediante propiedades o atributos), así como proveer de medios para poder manipular dichos datos (mediante métodos). De esta forma solo exponemos al mundo exterior la información y la forma de manipularla, ocultando los detalles usados para manejar esos datos y, lo que es más importante, evitando que nadie manipule de una forma no controlada dicha información. Herencia: Es la cualidad de poder crear nuevas clases (o tipos) basadas en otras clases, de forma que la nueva clase obtenga todas las características de la clase que ha heredado, tanto los datos que contiene como la forma de manipularlos, pudiendo añadir nuevas características e incluso cambiar el comportamiento de algunas de las incluidas en la clase base, (siempre que así se haya previsto). Mediante la herencia podemos crear de forma fácil una jerarquía de clases que comparten un mismo comportamiento básico pero que cada nueva generación puede tener (y de hecho tiene) un nuevo comportamiento. Polimorfismo: es la cualidad de implementar de forma particular algunas de las características que tienen las clases, de forma que cuando necesitemos usarlas no nos preocupe la implementación interna que cada una tenga, lo que realmente nos interesa o nos debe importar es que podemos usar esas características e incluso podamos acceder a ellas de forma anónima. ¿Por Que POO? # Se parece mas al mundo real # Permite Representar Modelos Complejos # Muy apropiada para aplicaciones de Negocio (BPM) # Las dos grandes plataformas del mercado han adoptado este paradigma Java y .NET FUENTE
|
|
|
17
|
Programación / ASM / [Aporte] Hola Mundo en MASM32
|
en: 30 Agosto 2010, 01:13 am
|
Hola Mundo en MASM32
Ahora vamos a empezar programando el Hola Mundo en MASM32, usando la API de Win32. En mi anterior articulo podemos estructurar un programa en este Macro Assembler, en los archivos creador hay un archivo de extensión *.Inc y *.Asm, entonces en el primero archivo contendrá todas las librerías necesarias para ejecutar un programa, recuerden que esta librerias contiene funciones que no hacen las vida mas fácil !!! El archivo *.Inc debe quedar de esta forma: include windows.inc include user32.inc include kernel32.inc includelib user32.lib includelib kernel32.lib ;Sgmeto de datos .data ;Creamos un variable con el contenido de mi mensaje Mensaje db "HOLA MUNDO SOY 4ng3r",0 Titulo db "Saludo en MASM32",0
El archivos *.Asm debe quedar de la siguiente forma: .386 .model flat,stdcall option casemap:none ;llamanos al archivo *.Inc include prueba1.inc .code prueba1: invoke MessageBox,NULL,addr Mensaje, addr Titulo, MB_OK invoke ExitProcess,0 end prueba1
Una vez hallamos terminado, procedemos a ensamblarlo, estructurarlo y ejecutarlo. Este debería ser el resultado:
|
|
|
18
|
Programación / ASM / [Aporte de 4ng3r] MASM32 - RadAsm y Estructura Basica
|
en: 30 Agosto 2010, 01:12 am
|
MASM32 - RadAsm y Estructura Basica IntroduccionMasm32 es un excelente conjunto de herramientas de programación, distribuído por Hutch, que incluye el Macro Assembler de Microsoft, macros, ayudas y todas las librerías (.lib) y archivos 'include' (.inc) necesarios para programar aplicaciones en assembler para Windows. Pagina Principal: http://www.masm32.com/RadASMPara que se nos haga mas fácil la vida, esta a nuestra dispositivo un IDE para Assembler llamado RadASM, una vez lo hayamos descargado e instalado, procedemos a crear nuestro primer proyecto: En la opción de ensamblador escogemos masm y en tipo de proyecto marcamos Win32 App, le asignamos un nombre al proyecto yo escoji prueba1, la ruta donde va ser almacenada y Next Luego escogemos los archivos a crear con el proyecto, en este caso activaremos la casilla de Asm, Inc y Bak Estas opciones las dejamos tal cual y oprimimos Finish Al lado derecho se pueden observar los archivos que hemos creado. Abrimos el archivo Asm y nos ponemos programar Estructura Basica Un Programa para Masm32 debe seguir una estructura que pueda ser entendida por nuestro compilador, por ejemplo: .386 .model flat,stdcall option casemap:none include windows.inc include kernel32.inc includelib kernel32.lib .data .code prueba1: invoke ExitProcess,0 end prueba1
Explicacion:.386 - Esta directiva sirve para establecer el tipo de procesador y sus instrucciones con lo que se va a trabajar .model flat,stdcall - Aquí establecemos el modelo de memoria requerido para nuestro programa option casemap:none - Esta opcion hace sensible las mayucualas de las minusculas, es decir, que B es difetente A include y includelib - Como todo en Windows, Masm32 incluye archivos y librerías para manejar un gran numero de funciones que existen en este sistema operativo, es decir para usar el API. Por ejemplo en la estructura anterior use el ExitProcess. Include lo usamos para agregar o importar archivos *.asm o *.inc en cambio Includelib lo usamos para agregar librerías *.lib. .data - Es el segmento en donde estableceremos los datos a utilizar en el programa, existen dos tipo de información la inicializada y la no inicializada (.data?) .code - Es el segmento en donde le indicamos a Mam32 donde empieza el código y donde termina FUENTE
|
|
|
19
|
Programación / Bases de Datos / Historial de Cotizaciones, optimizacion
|
en: 2 Julio 2010, 19:42 pm
|
Tengo un cliente que requiere lo siguiente, para que opinen cual debería ser la mejor solución optima y me ayuden de paso jejeje . Mi cliente quiere tener el historial de la cotizaciones realizadas por un vendedor, el cual obviamente va tener su estado (pendiente, se llamo al cliente, se cancelo la cotización o se confirmo la cotización) y la información del formulario que tiene la posibilidad de ir cambiando con el paso del tiempo, según la negociación.... que me recomiendan a nivel de modelo entidad relación administrar esto y que es lo mas optimo??? para no estar creando miles y miles de registros
|
|
|
20
|
Programación / Desarrollo Web / [Aporte] Aplicaciones RIA con EXTJS – Introduccion- ¿Que es RIA?
|
en: 2 Julio 2010, 16:38 pm
|
Aplicaciones RIA con EXTJS Es de saber que el Ext Js es uno de lo frameworks mas completos para javascript, con el podemos desarrollar e implementar aplicaciones RIA de alta calidad asi que a continuación dare un abre bocas de este espectacular framework. ¿Que es RIA?
RIA, del acrónimo Rich Internet Aplication o en español Aplicaciones de Internet Enriquecidas, son aplicaciones WEB que contiene la mayoría de características de la aplicaciones tradicionales, estas aplicaciones usan un navegador estándar para ejecutarse y por medio de un plugin se le pueden seguir agregando características. Esto mejor de manera notable la experiencia del usuario y aporta un alto valor de portabilidad ya que él (usuario) puede acceder a sus datos en cualquier momento y en cualquier lugar. Lo mas fastidioso de las paginas WEB, mejor dicho de la aplicaciones en linea es la constantes actualizaciones que debe hacer el usuario para poder realizar cambios a la información persistente del sistema. De esta forma se produce un trafico muy alto entre el cliente y el servidor, y esto puede poner a nuestro usuario de muy mal humor. En los entornos RIA, en cambio, no se producen recargas de página, ya que desde el principio se carga toda la aplicación, y sólo se produce comunicación con el servidor cuando se necesitan datos externos como datos de una Base de Datos o de otros ficheros externos. Otra de las desventajas de las tradicionales aplicaciones Web es la poca capacidad multimedia que posee. Para ver un vídeo es necesario usar un programa externo para su reproducción. Las capacidades multimedia son totales gracias a que estos entornos tienen reproductores internos y no hace falta ningún reproductor del Sistema Operativo del usuario. ArquitecturaEsta es un arquitectura bastante clásica en un desarrollo de software basado en tres capas , alejándonos por completo del inutilizado modelo de dos capas Cliente-Servidor. En el modelo de tres capas podemos encontrar: Capa de Modelo de Usuario: en esta capa encontramos todo el modelo de la interfaz de usuario o GUI, en este punto RIA cobra importancia por es el quien va a administrar cada uno de los compones y todos los llamados a la segunda capa. Se maneja la interacción entre el usuario y la “interfaz del usuario”, el usuario invoca comandos, actualiza vistas y carga datos. Aquí se mantiene el estado de la aplicación, se manejan todas las peticiones de datos hacia el servidor y se controla como se presentan los datos. Capa de Procesos de Negocio: simplemente trabaja paquetes contratados por el cliente, se administra el flujo de trabajo (Work Flow), moldeamiento, reglas de negocio y toda la parte de la Arquitectura Orientada a Servicios. Capa de Datos: aca se encuentra todos los origines de datos, como bases y bodegas de datos, servidores de correo entre otros. Nota: Esto merece mucho mas estudio de fondo pero por ahora no es importante para el articulo. Características clave- Accesibilidad: AJAX en nativo en los “navegadores web” y es el único “RIA framework” que puede ser encontrado por los diferentes motores de búsqueda.
- Comunicaciones avanzadas: con servidores que soporten nuevas tecnologías se puede mejorar la experiencia del usuario al utilizar protocolos de red optimizados y entradas y salidas asíncronas. Se requiere de una conexión de banda ancha confiable
- Instalación y mantenimiento: se requiere de la instalación de “plugin”, “virtual machine” o “sandbox”, que generalmente es más rápida que la instalación de una aplicación tradicional y esta no se puede automatizar. Las actualizaciones son automáticas
- Offline: puede ser soportada reteniendo el estado en la máquina cliente
Funte
|
|
|
|
|
|
|