tag:blogger.com,1999:blog-160129192024-02-19T06:48:57.789-08:00Jsanca - BlogTecnología, Javajsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.comBlogger260125tag:blogger.com,1999:blog-16012919.post-26384638349305996942015-02-09T09:16:00.002-08:002015-02-09T09:16:58.044-08:00Validaciones con HTML5 sin necesidad de form.submitComo parte de HTML5 existe la posibilidad de agregar información a los inputs de un form, para realizar validaciones; podemos indicar si queremos que sea requerido, con el tipo de datos; number, email, etc restringimos los valores que pueden ser agregados, podemos usar alguna mascara para validaciones, colocar mensajes de error custom, etc (en la red existen muchos ejemplos acerca de como customizar formularios).<br />
<br />
Ahora bien pongamos en contexto, tengo un formulario como este:<br />
<br />
<form name="managerForm" id="managerForm"><br />
<p><br />
Name:<br />
<input id="managerNameText" required="required" placeholder="Write here the new manager name" size="40"/><br />
</p><br />
<br />
<p><br />
Email:<br />
<input id="emailText" required="required" placeholder="myemail@myserver.com" type="email" /><br />
</p><br />
<br />
<br/><br />
<a href="#" id="addManagerLink">Add a new Manager to the List</a><br />
</form><br />
<br />
<br />
Si presta atención al markup, podrá ver que se cuenta con dos inputs; un text normal y un email, el text es requerido al igual que el email, adicionalmente el email precisa que el texto introducido sea acorde a una dirección de correo.<br />
<br />
Si hiciéramos submit al formulario con algún campo vacío veríamos como el browser se encarga de hacer las validaciones y mostrar los popups con los mensajes de errores.<br />
<br />
Ahora bien, el tema es; que sucede si el requerimiento es que el formulario no se envié pero que los errores continúen funcionando de la misma forma. Para ello debemos usar las siguientes funciones en javascript:<br />
<br />
<br />
var managerForm =<br />
document.getElementById("managerForm");<br />
<br />
if (managerForm.checkValidity()) {<br />
<br />
// hacer algo<br />
} else {<br />
<br />
managerForm.reportValidity();<br />
}<br />
<br />
<br />
checkValidity retorna true si no existe ningún error en el formulario, de lo contrario retorna false.<br />
<br />
reportValidity muestra los mensajes de error en los popups sobre los inputs correspondientes en caso que existan, similar a cuando hacemos submit.<br />
<br />
<br />jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-83137475419172389332015-02-09T07:58:00.002-08:002015-02-09T08:51:21.600-08:00JavaScript: Removiendo hijosSupongamos que se desea eliminar una lista de nodos hijos en un elemento particular en el dom; regularmente seguiríamos la siguiente forma<br />
<br />
<br />
// Bajo parent Id los elementos que deseo eliminar tienen un className en común.<br />
var nodes =<br />
document.getElementsByClassName(className);<br />
<br />
var parentNode =<br />
document.getElementById(parentId);<br />
<br />
if (nodes) {<br />
<br />
for (var i = 0; i < nodes.length; ++i) {<br />
<br />
var node = nodes[i];<br />
<br />
if (node) {<br />
<br />
if (parentNode.contains(node)) {<br />
<br />
parentNode.removeChild(node);<br />
}<br />
}<br />
}<br />
}<br />
<br />
<br />
<br />
El problema con el código anterior es que no se eliminan todos los elementos, si no alrededor de la mitad y esto sucede porque el valor nodes.length es alterado cada vez que eliminamos un nodo (o al menos es lo que creo, tampoco me detuve mucho tiempo a comprobar mi teoría), el cambio siguiente me funciono bien (simplemente cambie el siglo del for para que decremente en lugar de incrementar)<br />
<br />
for (var i = nodes.length - 1; i >= 0; --i)<br />
<br />
<br />jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-17308728822055178002014-01-12T11:51:00.003-08:002014-01-12T11:51:35.772-08:00Cache y estrategias, parte 1<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves/>
<w:TrackFormatting/>
<w:HyphenationZone>21</w:HyphenationZone>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>ES</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:DontVertAlignCellWithSp/>
<w:DontBreakConstrainedForcedTables/>
<w:DontVertAlignInTxbx/>
<w:Word11KerningPairs/>
<w:CachedColBalance/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]-->
<div class="MsoNormal">
Cache, en una aplicación medianamente escalable, ni que
decir en una altamente escalable, la cache es un elemento clave en el desempeño
y tiempo de respuesta. Regularmente utilizamos la cache de una manera muy
simple, basado en un conjunto de entradas determinamos si el objeto se
encuentra en cache, si no se encuentra ejecutamos la lógica de negocios para
obtener la información y volver a introducirla en la cache para<span style="mso-spacerun: yes;"> </span>futuros llamados. Regularmente este esquema
es lo suficientemente bueno para la mayoría de sistemas de tamaño regular, pero
un sistema con muchas consultas, un nivel de concurrencia mayor, etc, debemos
empezar analizar el comportamiento de nuestra memoria y determinar las mejores
estrategias de almacenamiento cache.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Que cachear, supercache</b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
En lo personal creo que una estrategia cache muy eficaz (sin
embargo no siempre eficiente) es almacenar a fuerza bruta si es posible toda la
información en memoria, es decir si tenemos un cluster de cache con memoria RAM
lo suficientemente grande como para que <span style="mso-spacerun: yes;"> </span>podamos guardar por ejemplo el catalogo de
productos, mi recomendación sería guardar todo ahí, sistemas como los de redes
sociales, suelen tener clusters gigantes con información guardada en memoria y
hace que las aplicaciones sean más rápidas, en este esquema por lo regular solo
tenemos que tener cuidado con la invalidación de la cache (cuando algo cachado
cambia, debe eliminarse el registro actual de la cache para que<span style="mso-spacerun: yes;"> </span>obtenga los últimos cambios). Podríamos
reducir entonces la estrategia a, si tiene mucho espacio en memoria,
simplemente úselo.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Los más populares</b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
En algunos modelos de negocios conocemos cuales objetos son
los más populares, tanto por conteo estadísticos como heurísticas de negocio;
tomemos por ejemplo el caso de un sistema de comercio electrónico, un agente de
negocios puede conocer de antemano cuales productos son los más vendidos, más
populares, etc. Así pues con este conocimiento podríamos levantar un listado de
productos y al inicio de la aplicación hacer un “warm up” de la cache con estos
objetos, adicionalmente si no se tienen muchas áreas de cache yo recomiendo
crear estos objetos en un área aparte del resto de productos comúnmente
cachados con el fin de monitorear en el futuro el comportamiento de estos
objetos en cache.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
La segunda estrategia siempre dentro del esquema de los más
populares es calcularla programáticamente mediante el análisis estadístico de
la cache (sencillo cuales productos pasan más tiempo en memoria a razón de
mayor cantidad de hits), así pues podemos guardar esta lista en algún mecanismo
de persistencia y cuando se requiera o cuando se inicia la aplicación solicitar
que se caliente la cache con estos elementos también.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Por último se me ocurre una tercera estrategia, esta de la
mano de la heurística; un producto nuevo puede de pronto volverse popular
(incluso uno impopular puede volverse popular), regularmente la gente de
marketing tiene métricas sobre sus expectativas de ventas, por ejemplo una
promoción (un producto nuevo), un sale (productos que se van a colocar en
oferta), un combo (grupo de productos a mejor precio), producto posicionado (un
producto que se va poner por ejemplo en la página de home page o alguna otra página
de alto alcance, etc). Estas acciones tienen un motivo claramente conocido por
marketing y en conjunto, se pueden crear listas de productos para ser cachados
previamente y así hacer la aplicación mas rápida y eficiente (cache implica
menos tiempo de CPU, I/O etc), ante la probabilidad de mayores consultas sobre
estos objetos.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Impopulares y filtros</b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Regularmente dependiendo de las facilidades de hardware con
que contamos (como dijimos antes si tiene mucha memoria y puede cacharlo todo,
simplemente hágalo), filtramos los objetos que vamos a introducir a memoria. La
estrategia más sencilla es limitar el tamaño de los<span style="mso-spacerun: yes;"> </span>objetos, por ejemplo nada mayor a 100kb o un
megabyte, etc. Esto con el motivo de no saturar nuestra cache con objetos
gigantes de manera muy rápida.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Si bien es cierto tener algo en cache ahorra tiempo de CPU y
regularmente I/O, latencia y por ende tiempo de respuesta al usuario, pero también
debemos tener en cuenta que si nuestro espacio de memoria para cache es
limitado debemos evitar incluir objetos que consumirán memoria en forma de
paracito, me explico; la idea de la cache es almacenar un objeto en ella, de
tal manera que reciba al menos un hit antes de que este expire y sea eliminado
de la cache (depende de la estrategia pero regularmente por prioridad o TTL, un
objeto es eliminado de la cache cuando no es invocado por mucho tiempo y la
cache está llena o cuando se vence un el tiempo designado en TTL), así pues
agregar objetos a la cache que nunca son leídos resultará en una mala gestión
de nuestros recursos de hardware.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Por ende, lo que se propone es identificar
que objetos son los más impopulares y filtrar su adicción a la cache, por
ejemplo los frameworks de cache regularmente proporcionan estadísticas acerca
del comportamientos de los entries, pero nosotros podemos hacer un servicio que
sea el helper mediante el cual se entra a la cache y guardar estadísticas propias
acerca de que objetos se llaman y hacen hit, cuales se llaman y no hacen hit y así
determinar cuáles son populares o no, o inclusive determinar si el tiempo de
TTL para un objeto debe ser mayor, por ejemplo si tenemos un TTL parejo de 10
minutos y ciertos objetos son invocados cada 15 minutos, entonces estos vivirán
10 minutos en cache, serán eliminados pasados esos 10 minutos, para que 5
minutos después sean agregados de nuevo en la cache de forma infortunada.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Así pues, tendríamos implementados sobre la capa de
abstracción de cache, una capa de estadísticas y otra de filtrado que nos ayude
a determinar el comportamiento de los objetos en la cache.</div>
<div class="MsoNormal">
Como vemos, existen algunas alternativas para hacer que
nuestra estrategia de cache sea más asertiva y eficiente, mas adelante espero
presentar un diagrama de clases e implementaciones de cómo lograr algunas de
estas para que puedan darse una idea más clara de cómo implementarlas.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Pura vida,</div>
<div class="MsoNormal">
J</div>
<!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
DefSemiHidden="true" DefQFormat="false" DefPriority="99"
LatentStyleCount="267">
<w:LsdException Locked="false" Priority="0" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" Priority="39" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" Name="toc 9"/>
<w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" Priority="10" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" Priority="11" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" Priority="22" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" Priority="59" SemiHidden="false"
UnhideWhenUsed="false" Name="Table Grid"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/>
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Tabla normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}
</style>
<![endif]-->jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com1tag:blogger.com,1999:blog-16012919.post-87366050138798368002013-12-09T21:34:00.001-08:002013-12-09T21:38:13.522-08:00Ordenamiento de numeros flotantes en sistemas de persistencia<b>Contexto</b>
<p>
Necesidad de almacenar numeros flotantes en un sistema de persistencia java (en el caso particular es para Lucene/Solr, pero podria bien ser para MySql, Mongo o cualquier otro sistema de persistencia)
Una vez almacenados esos flotantes, debemos hacer ordenamientos por ellos y a su vez obtenerlos y formatearlos de tal manera que se muestren en una presicion de 2 decimales.
<br/><br/>
Es decir un numero como 12.542323
<br/>
Debera ser presentado como 12.54
</p>
<b>Solución inicial</b>
<p>
Lo normal sería almacenar el valor tal cual en el sistema de persistencia y despues con un objeto Decimal Format darle formato con precisión 2.
<br/>
Sin embargo con numeros flotantes, Java no asegurá total exactitud en este calculo y fue constatado pues a la hora de pasar un flotante cuya mantiza se encuentra cerca de .99 se redonde al siguiente numero, lo cual resultaba en un comportamiento perjudicial.
<br/>
Una solución sería cambiar todo por numero double, estos funcionan bastante bien y el Decimal Format también funciona de forma decente, sin embargo existe una solución un poco mas estable y segura que comentamos acontinuación.
</p>
<b>Solución alternativa</b>
<p>
Pasar el numero flotante a un entero cuyos ultimos dos digitos serían los dos decimales de precisión que se requieren desplegar.
<br/>
Veamos como sería el asunto:
<br/>
Si se tienen numeros como:
<br/><br/>
12.546676 <br/>
12.073847
<br/>
guardariamos numeros tales como:
<br/><br/>
1254 <br/>
1207
<br/>
A la hora de formatear estos numeros, simplemente sacariamos los ultimos de digitos y se mostrarían como:
<br/><br/>
12.54 <br/>
12.07
<br/>
La solución es muy segura, y para los flotantes de 30 bits o menos funciona bien (pues se ocupan dos para los decimales) así que si no tienes numeros muy grandes una buena solución.
</p>
Jjsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-42753117942646486992013-06-13T00:08:00.000-07:002013-06-13T00:08:37.720-07:00Canvas - Dibujando poligonos con Javascript (Herencia y pseudo polimorfismo)En el ejemplo anterior definimos de una manera muy basica varios poligonos, bueno decidi buscar la manera de pintarlos en un lienzo (canvas) y aqui el resultado (ojo necesitas un browser que soporte HTML 5)<br />
<br />
Lo primero el HTML<br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/html4/loose.dtd"><br />
<html><br />
<head><br />
<title>Figure Example</title><br />
</head><br />
<body><br />
<br />
<canvas id="myCanvas" width="300" height="300" style="border: solid 1px black"></canvas><br />
<br />
<br />
<script type="text/javascript" src="figure.js"></script><br />
<br />
</body><br />
</html><br />
<br />
Note q al javascript le hemos dado el nombre de figure.js<br />
<br />
Seguidamente el codigo con el canvas, es bastante sencillo para mas detalles busque la documentacion de cada metodo.
<pre>
<code>
/**
* User: jsanca
* Date: 6/12/13
* Time: 11:10 PM
*/
// Defines a point
function Point (x, y) {
this.x = x;
this.y = y;
} // Point
// Basic definition of a Figure, just a point in nowhere.
function Figure (point, name) {
this.point = point;
this.name = name;
this.render = function (context) {
console.log("figure: " + this.name + " " +this.point);
}
} // Figure.
// the points defines some of the sides
function Square (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.side = function () {
var side =
(this.point2.x == this.point.x)?
this.point2.y - this.point.y:
this.point2.x - this.point.x;
return Math.abs(side);
}
this.area = function () {
var side = this.side();
return Math.pow(side, 2);
}
this.render = function (context) {
// render out the square.
var side = this.side();
context.fillStyle = "rgb(0,0,255)";
context.fillRect (this.point.x, this.point.y, side, side);
console.log("square: " + this.name + ", area = " + this.area());
}
} // Square.
Square.prototype.parent = Figure.prototype;
Square.prototype.constructor = Square;
// the points defines the point angles
function Triangle (point1, point2, point3, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.point3 = point3;
this.area = function () {
var base = 0;
var verticalHeight = 0;
if (this.point2.x == this.point.x) {
base = this.point2.y - this.point.y;
verticalHeight = this.point.x - this.point3.x;
} else {
base = this.point2.x - this.point.x;
verticalHeight = this.point.y - this.point3.y;
}
return 0.5 * Math.abs(base) * Math.abs(verticalHeight);
}
this.render = function (context) {
console.log("triangle: " + this.name + ", area = " + this.area());
// the triangle tooks a base point and them move to the rest of the angle point
context.fillStyle = "rgb(255,0,0)";
context.beginPath();
context.moveTo(this.point.x,this.point.y);
context.lineTo(this.point2.x,this.point2.y);
context.lineTo(this.point3.x,this.point3.y);
context.fill();
}
} // Triangle.
Triangle.prototype.parent = Figure.prototype;
Triangle.prototype.constructor = Triangle;
// the points you pass are the diagonal of the rectangle.
function Rectangle (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.width = function () {
return Math.abs(this.point2.x - this.point.x);
}
this.height = function () {
return Math.abs(this.point2.y - this.point.y);
}
this.area = function () {
return this.width() * this.height();
}
this.render = function (context) {
console.log("rectangle: " + this.name + ", area = " + this.area());
context.fillStyle = "rgb(0,255, 0)";
context.fillRect (this.point.x, this.point.y, this.width(), this.height());
}
} // Rectangle.
Rectangle.prototype.parent = Figure.prototype;
Rectangle.prototype.constructor = Rectangle;
// the points defines the radius
function Circle (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.radius = function () {
var radius =
(this.point2.x == this.point.x)?
this.point2.y - this.point.y:
this.point2.x - this.point.x;
return Math.abs(radius);
}
this.circumference = function () {
var radius = this.radius();
return 2 * Math.PI * radius;
}
this.area = function () {
var radius = this.radius();
return Math.PI * Math.pow(radius, 2);
}
this.render = function (context) {
var radius = this.radius();
console.log("circle: " + this.name + ", area = " + this.area() + ", circumference = " + this.circumference() + ", radius = " + radius);
context.fillStyle = "rgb(255,255, 0)";
context.beginPath();
context.arc(this.point.x, this.point.y, radius , 0,2 * Math.PI);
context.stroke();
}
} // Circle.
Circle.prototype.parent = Figure.prototype;
Circle.prototype.constructor = Circle;
console.log("Running");
var figuresArray = new Array(
new Square (new Point(10,10), new Point(10,30), "Cuadrado 1"),
new Square (new Point(10,50), new Point(20,50), "Cuadrado 2"),
new Triangle(new Point(10,10), new Point(10,20), new Point(0,15), "Mi Triangulito"),
new Triangle(new Point(100,100), new Point(60,160), new Point(160,160), "Triangulo grande"),
new Rectangle(new Point(80,50), new Point(90,80), "Mi Rectangulo"),
new Circle(new Point(200,200), new Point(200,225), "Mi Circulo")
);
var canvas = document.getElementById('myCanvas');
var context = (canvas.getContext)?
canvas.getContext('2d'):null;
figuresArray.forEach(
function(entry) {
console.log(entry);
entry.render(context);
}
);
</code>
</pre>
Ejecutalo para ver el resultado :) cada figura tiene un color diferente
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZHjsZSgvr9or_31xhGzV6eTUZgu7Ke-Q0SRlg2gR877nfVxQikbEjePbDof4wnlBJPh3hsa39K9fZLRt4uw6wsTpvVkEZMbFxgRXfAUMxtRuEF9y-8SAVvxxxkN0Fqy_a7eH_Q/s1600/js-canvas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZHjsZSgvr9or_31xhGzV6eTUZgu7Ke-Q0SRlg2gR877nfVxQikbEjePbDof4wnlBJPh3hsa39K9fZLRt4uw6wsTpvVkEZMbFxgRXfAUMxtRuEF9y-8SAVvxxxkN0Fqy_a7eH_Q/s400/js-canvas.png" /></a></div>
jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com1tag:blogger.com,1999:blog-16012919.post-35724953288068329252013-06-12T23:35:00.002-07:002013-06-12T23:35:55.924-07:00Figuras, poligonos, herencia y polimorfismo en JavascriptActualmente estoy ayudandole alguien muy especial con el aprendizaje de Javascript y OOP. Para tal objetivo le he asignado varios problemas que debe resolver con Herencia y ese pseudo poliformismo que tiene Javascript, pues nada me he inventado la primera parte de lo que seria la definicion de figuras con Javascript tales como un Cuadrado, Triangulo, Circulo, etc; por ahora el pintado solo muestra en la consola el area y algunos datos mas de la figura, pero la idea seria usar canvas en la segunda parte para imprimir las figuras y en el tercera parte algun mecanismo para obtener la informacion de las figuras del usuarios, pues nada aqui el codigo:
<br />
<pre><code>
/**
* User: jsanca
* Date: 6/12/13
* Time: 11:10 PM
*/
// Defines a point
function Point (x, y) {
this.x = x;
this.y = y;
} // Point
// Basic definition of a Figure, just a point in nowhere.
function Figure (point, name) {
this.point = point;
this.name = name;
this.render = function () {
console.log("figure: " + this.name + " " +this.point);
}
} // Figure.
// the points defines some of the sides
function Square (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.area = function () {
var side =
(this.point2.x == this.point.x)?
this.point2.y - this.point.y:
this.point2.x - this.point.x;
return Math.pow(Math.abs(side), 2);
}
this.render = function () {
console.log("square: " + this.name + ", area = " + this.area());
}
} // Square.
Square.prototype.parent = Figure.prototype;
Square.prototype.constructor = Square;
// the points defines the point angles
function Triangle (point1, point2, point3, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.point3 = point3;
this.area = function () {
var base = 0;
var verticalHeight = 0;
if (this.point2.x == this.point.x) {
base = this.point2.y - this.point.y;
verticalHeight = this.point.x - this.point3.x;
} else {
base = this.point2.x - this.point.x;
verticalHeight = this.point.y - this.point3.y;
}
return 0.5 * Math.abs(base) * Math.abs(verticalHeight);
}
this.render = function () {
console.log("triangle: " + this.name + ", area = " + this.area());
}
} // Triangle.
Triangle.prototype.parent = Figure.prototype;
Triangle.prototype.constructor = Triangle;
// the points you pass are the diagonal of the rectangle.
function Rectangle (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.area = function () {
var width = this.point2.x - this.point.x;
var height = this.point2.y - this.point.y;
return Math.abs(width) * Math.abs(height);
}
this.render = function () {
console.log("rectangle: " + this.name + ", area = " + this.area());
}
} // Rectangle.
Rectangle.prototype.parent = Figure.prototype;
Rectangle.prototype.constructor = Rectangle;
// the points defines the radius
function Circle (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.radius = function () {
var radius =
(this.point2.x == this.point.x)?
this.point2.y - this.point.y:
this.point2.x - this.point.x;
return Math.abs(radius);
}
this.circumference = function () {
var radius = this.radius();
return 2 * Math.PI * radius;
}
this.area = function () {
var radius = this.radius();
return Math.PI * Math.pow(radius, 2);
}
this.render = function () {
console.log("circle: " + this.name + ", area = " + this.area() + ", circumference = " + this.circumference() + ", radius = " + this.radius());
}
} // Circle.
Circle.prototype.parent = Figure.prototype;
Circle.prototype.constructor = Circle;
console.log("Running");
var figuresArray = new Array(
new Square (new Point(10,10), new Point(10,30), "Cuadrado 1"),
new Square (new Point(10,10), new Point(15,10), "Cuadrado 2"),
new Triangle(new Point(10,10), new Point(10,20), new Point(0,15), "Mi Triangulito"),
new Rectangle(new Point(10,10), new Point(20,30), "Mi Rectangulo"),
new Circle(new Point(10,10), new Point(10,25), "Mi Circulo")
);
figuresArray.forEach(
function(entry) {
console.log(entry);
entry.render();
}
);
</code>
</pre>
Resultado
<br />
<pre><code>
Running
Square { point=Point, name="Cuadrado 1", more...}
square: Cuadrado 1, area = 400
Square { point=Point, name="Cuadrado 2", more...}
square: Cuadrado 2, area = 25
Triangle { point=Point, name="Mi Triangulito", more...}
triangle: Mi Triangulito, area = 50
Rectangle { point=Point, name="Mi Rectangulo", more...}
rectangle: Mi Rectangulo, area = 200
Circle { point=Point, name="Mi Circulo", more...}
circle: Mi Circulo, area = 706.8583470577034, circumference = 94.24777960769379, radius = 15
</code>
</pre>
jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-35603366708990692022013-04-28T11:27:00.000-07:002013-04-28T11:27:00.485-07:00Expo Construccion 2013<br />
Hola amig@s ayer visite la <a href="http://www.construccion.co.cr/" target="_blank">expo</a> y quisiera comentar brevemente mi experiencia:<br />
<br />
Lo primero la entrada fue relativamente rápida (fluido), debes llevar listos 2000 colones para el parqueo y 2000 mas por cada persona que quiera entrar al recinto.<br />
<br />
La <a href="http://www.construccion.co.cr/" target="_blank">expo</a> resulta bastante grande, en mi caso solamente buscaba una opción de préstamo hipotecario para lote y por el hecho de tener un contrato con el Invu, necesito que el crédito hipotecario sea de una entidad publica (para que el Invu acepte una hipoteca en segundo grado), así que aquí mis impresiones:<br />
<br />
Solicite crédito en dolares porque gano en esa moneda, primero visite el banco popular; este me resulto el menos conveniente a pesar que tiene la menor cuota, 30 años, tienen una tasa variable (aunque no es la pasiva dicen que es una mas estable, sin techo ni piso) mas un 3% fijo. Como dije es la menor pero por ser 30 años se termina pagando poco menos del triple, se hacen pagos al saldo o se cancelan los créditos con antelación antes de los 5 años, se cobra un 3%. Después de ese periodo se puede cancelar o adelantar sin problema.<br />
<br />
Bancredito y BCR, resultan muy similares; uno con 20 y el otro con 25, cubren un 80% del avaluo; mismas políticas para pagos al saldo o cancelación que el popular, la tasa es un poquito mejor en el BCR (pero el periodo es mayor).<br />
<br />
Por ultimo la que yo pienso resulta la mejor opción es el Banco de CR, tiene la menor cuota, periodo de 20 años y puedes hacer pagos al saldo o cancelación desde el inicio del periodo sin penalidad; cubre un 80% de la deuda por crédito hipotecario, pero con uno fiduciario (con un fiador) te prestan hasta un 90% del valor del lote.<br />
<br />
Bueno esta fue mi apreciación, existen muchos proyectos de construcción y materiales que apenas vi; en particular a la pocas que le tire un ojo, los proyectos listos resultan demasiado costosos.<br />
<br />
Un saludo y suerte,<br />
J<br />
jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com1tag:blogger.com,1999:blog-16012919.post-11976517471082784212013-04-18T00:19:00.003-07:002013-04-18T00:19:24.324-07:00Clase Download alpha <br />
En esta ocasión quiero entregarles uno de los códigos mas interesantes del siguiente ejercicio, el administrador de descargar.<br />
<br />
Este administrador de descargas al estilo del viejo FlashGet, nos muestra una primera clase; Download.<br />
<br />
Esta clase primeramente nos muestra su "signature", es un objeto observable y puede ser corrido paralelamente.<br />
<br />
Seguidamente nos muestra el tamaño máximo que el buffer va leer, 1 kb por lectura para el "stream".<br />
<br />
Después vemos el Status, muy auto descriptivo.<br />
<br />
Y las propiedades de la clase, el url a descargar, el tamaño del archivo remoto a descargar, "downloaded" almacena la cantidad de bytes leídos, el estado actual de la descarga y por ultimo un valor opcional "baseDirectory" que se refiere al directorio base de donde almacenar los archivos a descargar.<br />
<br />
A continuación, encontraremos una serie de métodos que nos develan el estado o disparan nuevos estado a la descarga.<br />
<br />
Una vez creada la descarga, se puede invocar al método "startDownload" cuando desee iniciar la descarga.<br />
<br />
Por ultimo el método "run" propio de la clase "Runnable" tiene la mayoría de la lógica, en general se crea un archivo de acceso aleatorio (que nos permite escribir en cualquier parte del archivo local) y establecemos una conexion (indicando en el caso de una reanudación, desde donde iniciar la descarga, ver método "setRangeBytes", del archivo remoto). Por ultimo se lee el contenido completo o restante del archivo y se guarda localmente.<br />
<br />
Como podes ver es extremadamente sencillo, en particular un punto de mejora para la clase es utilizar un ThreadPool y una actividad futura, para no solicitar un hilo de manera abrupta, les dejo el código y un ejemplito trivial probado :)<br />
<br />
<br />
<pre><code>
package cap4;
import javax.naming.spi.DirectoryManager;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.Observable;
/**
* Ckase encargada de descargar un archivo, de forma paralela y con soporte de progreso y eventos.
*
* User: jsanca
* Date: 4/17/13
* Time: 11:27 PM
* @author jsanca
*/
public class Download extends Observable implements Runnable, Serializable {
// Tamano del bloque de descarga un kb
private static final int MAX_BUFFER_SIZE = 1024;
public enum Status {
UNSTARTED,
DOWNLOADING,
PAUSED,
COMPLETE,
CANCELLED,
ERROR
} // Status.
// URL a descargar.
private URL url;
// Tamano del archivo a descargar.
private int fileSize;
// Cantidad de bytes descargados.
private int downloaded;
// Estatus actual de la descarga.
private Status status;
private File baseDirectory;
/**
* Constructor.
* @param url
*/
public Download(final String url) throws MalformedURLException {
this (new URL(url));
} // Download.
/**
* Constructor.
* @param url
*/
public Download(final URL url) {
this.url = url;
this.fileSize = -1;
this.downloaded = 0;
this.baseDirectory = null;
this.status = Status.UNSTARTED;
} // Download.
/**
* Obtiene el porcentaje de progreso (de 1 a 100)
* @return float
*/
public float getProgress () {
return (float) (this.downloaded / this.fileSize) * 100f;
} // getProgress.
/**
* Pause la descarga actual.
* Solo si esta se encuentra en descarga.
*/
public void pause() {
if (Status.DOWNLOADING == this.status) {
this.status = Status.PAUSED;
this.stateChanged();
}
} // pause.
/**
* Reanuda la descarga.
* Solo si esta se encuentra pausada.
*/
public void resume() {
if (Status.PAUSED == this.status) {
this.status = Status.DOWNLOADING;
this.stateChanged();
this.download();
}
} // resume.
/**
* Cancela la descarga, si y solo si, esta no esta descarga o en pausa
*/
public void cancel() {
if (Status.DOWNLOADING == this.status || Status.PAUSED == this.status) {
this.status = Status.CANCELLED;
this.stateChanged();
}
} // cancel.
/**
* Se invoca cuando la descarga fracasa.
*/
protected void error() {
this.status = Status.ERROR;
this.stateChanged();
} // error.
/**
* Es invocado para disparar o reanudar la descarga de forma asincronica.
*/
protected void download () {
final Thread thread = new Thread(this);
thread.start();
} // download.
/**
* Invoque este metodo para iniciar la descarga.
*/
public Download startDownload () {
if (Status.UNSTARTED == this.status) {
this.status = Status.DOWNLOADING;
this.download();
}
return this;
} // startDownload.
/**
* Get the file name (without the path) from the url.
* @param aUrl URL
* @return String
*/
protected String getFileName (final URL aUrl) {
String pathFileName = null;
final String fileName = url.getFile();
if (null != fileName) {
pathFileName = fileName.substring(fileName.lastIndexOf('/') + 1);
if (null != this.baseDirectory) {
pathFileName = this.baseDirectory.getAbsolutePath() + "/" + pathFileName;
}
}
if (null == fileName) {
pathFileName = "unnamed" + System.currentTimeMillis();
}
return pathFileName;
} // getFileName.
public void run() {
RandomAccessFile randomAccessFile = null;
InputStream inputStream = null;
HttpURLConnection httpURLConnection = null;
int contentLength = 0;
byte [] buffer;
int readBytes;
try {
httpURLConnection =
(HttpURLConnection)this.url.openConnection();
this.setRangeBytes(httpURLConnection, this.downloaded);
httpURLConnection.connect();
contentLength = this.checkErrors(httpURLConnection);
// si el tamano no ha sido establecido, lo hago.
if (-1 == this.fileSize) {
this.fileSize = contentLength;
this.stateChanged();
}
randomAccessFile =
new RandomAccessFile(this.getFileName(this.url), "rw");
randomAccessFile.seek(this.downloaded);
inputStream = httpURLConnection.getInputStream();
while (Status.DOWNLOADING == this.status) {
buffer =
(this.fileSize - this.downloaded > MAX_BUFFER_SIZE)?
new byte[MAX_BUFFER_SIZE]:
new byte[this.fileSize - this.downloaded];
readBytes = inputStream.read(buffer);
if (-1 == readBytes) {
break;
}
randomAccessFile.write(buffer, 0, readBytes);
this.downloaded += readBytes;
this.stateChanged();
}
// Marco la descarga como terminada.
if (Status.DOWNLOADING == this.status) {
this.status = Status.COMPLETE;
this.stateChanged();
}
} catch (FileNotFoundException e) {
error();
} catch (IOException e) {
error();
} catch (DownloadErrorException e) {
error();
} finally {
if (null != randomAccessFile) {
try {
randomAccessFile.close();
} catch (IOException e) {
// Quiet,
}
}
if (null != inputStream) {
try {
inputStream.close();
} catch (IOException e) {
// Quiet,
}
}
}
} // run.
private int checkErrors(final HttpURLConnection httpURLConnection) throws IOException {
int contentLength;
if (this.isAnErrorCode (httpURLConnection.getResponseCode())) {
throw new DownloadErrorException("Response error = " + httpURLConnection.getResponseCode());
}
contentLength = httpURLConnection.getContentLength();
if (contentLength < 1) {
throw new DownloadErrorException("Content length invalid, length = " + contentLength);
}
return contentLength;
} // checkErrors.
/**
* Determina si el codigo de respuesta esta en el rango de 200.
* @param responseCode int
* @return boolean
*/
private boolean isAnErrorCode(final int responseCode) {
return responseCode / 100 != 2;
} // isAnErrorCode.
/**
* Especifica desde donde se iniciara la descarga del archivo (por ejemplo se puede iniciar desde la mitad) o reanudar una rescarga
* @param connection HttpURLConnection
* @param bytesSeek int
*/
protected void setRangeBytes(final HttpURLConnection connection, final int bytesSeek) {
connection.setRequestProperty("Range",
new StringBuilder("bytes=").append(bytesSeek).append("-").toString());
} // setRangeBytes.
/**
* Notifica a quien este viendo los cambios de estatos
*/
protected void stateChanged() {
this.setChanged();
this.notifyObservers();
} // stateChanged.
/**
* Asigna el directorio base para salvar el archivo.
* En caso de ser nulo salva en el espacio de trabajo actual.
* @param baseDirectory String
*/
public void setBaseDirectory(final String baseDirectory) {
this.setBaseDirectory(new File(baseDirectory));
} // setBaseDirectory.
/**
* Asigna el directorio base para salvar el archivo.
* En caso de ser nulo salva en el espacio de trabajo actual.
* @param baseDirectory File
*/
public void setBaseDirectory(final File baseDirectory) {
if (null != baseDirectory && baseDirectory.exists()) {
this.baseDirectory = baseDirectory;
}
} // setBaseDirectory.
} // E:O:F:Download.
</code>
</pre>
<b>El ejemplito</b>
Cambie "https://......jpg", por la direccion del archivo a descargar y
/home/mydirectorio al archivo base al cual queremos descargar localmente.
<br />
<pre><code>
public class Main {
public static void main(String args[])
throws java.io.IOException {
Download download = new Download("https://......jpg");
download.setBaseDirectory("/home/mydirectorio");
download.startDownload();
}
} // Main.
</code>
</pre>
jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-70485077994289467392013-04-17T21:55:00.001-07:002013-04-17T21:56:15.736-07:00Analizador de expresiones algebraicas recursivo decendente<br />
Como les mencione en un post previo, estoy leyendo el libro el arte de programar en Java, el primer ejercicio consiste en un analizador de expresiones algebraicas recursivo descendente, el mismo consiste en la posibilidad de tomar una cadena que contenga una expresión matemática, la misma puede contener valores en punto flotante, sumar, restar, dividir, multiplicar, sacar exponente (potencia), uso de paréntesis para priorizar una operación, etc.<br />
<br />
A continuación clase a clase, con una pequeña explicación<br />
<br />
Lo primero que definiremos es una suite de excepciones para reportar errores, no tiene mucha ciencia, hay una para la division entre cero, cuando no existe una expresión valida, error de sintaxis o cuando los paréntesis no se encuentran balanceados, veamos<br />
<br />
<br />
<br />
<pre><code>
package cap2;
/**
* Exception para reportar que hay al intentar dividir entre cero
*
* User: jsanca
* Date: 4/16/13
* Time: 1:30 AM
* @author jsanca
*/
public class DividedByZeroException extends RuntimeException {
public DividedByZeroException() {
}
public DividedByZeroException(String message) {
super(message);
}
public DividedByZeroException(String message, Throwable cause) {
super(message, cause);
}
public DividedByZeroException(Throwable cause) {
super(cause);
}
}
//////
package cap2;
/**
* Exception para reportar que no Hay expresion presente
*
* User: jsanca
* Date: 4/16/13
* Time: 1:30 AM
* @author jsanca
*/
public class NonExpressionDefinedException extends RuntimeException {
public NonExpressionDefinedException() {
}
public NonExpressionDefinedException(String message) {
super(message);
}
public NonExpressionDefinedException(String message, Throwable cause) {
super(message, cause);
}
public NonExpressionDefinedException(Throwable cause) {
super(cause);
}
}
////////
package cap2;
/**
* Exception para reportar que hay un error de sintaxis
*
* User: jsanca
* Date: 4/16/13
* Time: 1:30 AM
* @author jsanca
*/
public class SintaxErrorException extends RuntimeException {
public SintaxErrorException() {
}
public SintaxErrorException(String message) {
super(message);
}
public SintaxErrorException(String message, Throwable cause) {
super(message, cause);
}
public SintaxErrorException(Throwable cause) {
super(cause);
}
}
package cap2;
/**
* Exception para reportar que hay parentesis desbalanceados
*
* User: jsanca
* Date: 4/16/13
* Time: 1:30 AM
* @author jsanca
*/
public class UnbalanceParenthesesException extends RuntimeException {
public UnbalanceParenthesesException() {
}
public UnbalanceParenthesesException(String message) {
super(message);
}
public UnbalanceParenthesesException(String message, Throwable cause) {
super(message, cause);
}
public UnbalanceParenthesesException(Throwable cause) {
super(cause);
}
}
</code></pre>
<pre>Seguidamente veremos el parser; el mismo contiene un constructor donde pasaras la formula a evaluar, seguidamente se normalizara (se eliminan los espacios).
Lo siguiente que podrás ver, es el TokenType. Este enumera los tipos de tokens, delimilador (un operador), variables (no soportadas en este ejemplo), números, fin de ecuación, etc.
Lo tercero son las variables de la clase, la expresión antes mencionada, el índice que se utilizara como veras mas adelante para recorrer la expresión índice a índice, el token (el numero, operador, etc, actual, en análisis) y el tipo de token como antes mencionamos.
Seguimos con la función "getResult" única función publica con la que el usuario puede interactuar, lo primer que hace la función es pedir el primer token, si este es fin de ecuación disparamos un excepción pues no debería ser (en este caso una expresión vacía), seguidamente por recursividad llamamos a evalExp2 (ya veras que lo que hace el algoritmo es encadenas descendentemente del operador de menor prioridad al de mayor, es decir vamos de sumas y restas, hasta multiplicación, exponentes, etc), esta evalExp2 debes conceptualizarla como la evaluacion de una suma si esta existe, pero antes buscara funciones de mayor prioridad; evalExp3.
EvalExp3 presenta un panorama similar, en este vemos como se evalúa las operaciones de multiplicar, division y modulo, sin no antes llamar antes a evalExp4.
La versión 4, evalúa la potencia, el exponente; así mismo este llamara al evalExp5 que evalua los algún signo de un operador como + o - (positivo o negativo).
Por ultimo evalExp6, evaluara paréntesis y valores atómicos, en nuestro caso solo números. En el caso de los paréntesis tomar en cuenta que cuando se encuentra un match, se vuelve a iniciar el proceso a través de un llamado recursivo a evalExp2, que evaluara la expresión dentro de los paréntesis.
No estoy seguro si entendiste la dinámica del algoritmo, pero este se basa en llamar primero a la operación de menor prioridad hasta ir directamente a la de mayor prioridad (paréntesis y números, el eslabón final en la cadena de la ecuación).
Lo ultimo que veras es el nexToken, este analizador resulta muy sencillo básicamente evalúa el carácter actual, en el caso de los delimitadores simplemente lo tome y suma uno mas para ir al siguiente índice en la llamada a nextToken consiguiente, en el caso de los números o variables (no soportadas en el ejemplo); se sacaran todos los digitos hasta encontrar otra cosa (un delimitador en este caso), esta función sera llamada a medida que se necesite analizar el siguiente token.
Pues ahora al código:</pre>
<pre><code>
package cap2;
import java.text.MessageFormat;
import java.util.Arrays;
import java.util.HashSet;
import java.util.Set;
/**
* Representa el parser para las expresiones
* * User: jsanca
* Date: 4/16/13
* Time: 12:29 AM
*
* @author jsanca
*/
public class Parser {
/**
* Constructor.
*
* @param expresion String
*/
public Parser(String expresion) {
this.expresion = this.normalizeExpresion(expresion);
}
// define los tipos de token
private enum TokenType {
NONE, DELIMITER, VARIABLE, NUMBER, EOE
}
private String expresion = null;
private int expresionIndex = 0;
private String token = null;
private TokenType tokenType = null;
private Set<character> delimiters = new HashSet<character>(Arrays.asList(new Character[]{'+', '-', '/', '*', '%', '^', '=', '(', ')'}));
private String normalizeExpresion(String expr) {
return expr.replaceAll("\\s*", "");
}
/**
* Gets the results
*
* @return double
*/
public double getResult() {
double result = 0;
this.expresionIndex = 0;
this.nextToken();
if (this.tokenType == TokenType.EOE) {
throw new NonExpressionDefinedException();
}
// evalua la expresion
result = this.evalExp2();
if (this.tokenType != TokenType.EOE) {
throw new SintaxErrorException();
}
return result;
} // getResult.
/**
* Suma o resta terminos
*
* @return double
*/
private double evalExp2() {
char operator;
double result;
double partialResult;
// llamado decendente a la operacion de multiplicar
result = this.evalExp3();
while ( (this.tokenType != TokenType.EOE) &&
((operator = this.token.charAt(0)) == '+' || operator == '-')) {
this.nextToken();
partialResult = evalExp3();
switch (operator) {
case '-':
result = result - partialResult;
break;
case '+':
result = result + partialResult;
break;
}
}
return result;
} // evalExp2.
/**
* Multiplica y divide
*
* @return double
*/
private double evalExp3() {
char operator;
double result;
double partialResult;
// llamado decendente a la operacion de exponente
result = this.evalExp4();
while ( (this.tokenType != TokenType.EOE) &&
((operator = this.token.charAt(0)) == '*' || operator == '/' || operator == '%')) {
this.nextToken();
partialResult = evalExp4();
switch (operator) {
case '*':
result = result * partialResult;
break;
case '/':
if (partialResult == 0.0) {
throw new DividedByZeroException();
}
result = result / partialResult;
break;
case '%':
if (partialResult == 0.0) {
throw new DividedByZeroException();
}
result = result % partialResult;
break;
}
}
return result;
} // evalExp3,
/**
* Evalua el exponente
*
* @return double
*/
private double evalExp4() {
double result;
double partialResult;
// llamado decendente a la operacion de signo (unitario)
result = this.evalExp5();
if ("^".equals(this.token)) {
this.nextToken();
partialResult = this.evalExp4();
if (partialResult == 0.0) { // x^0.0 = 1.0
result = 1.0; // caso trivial
} else {
result =
Math.pow(result, partialResult);
}
}
return result;
} // evalExp4.
/**
* Evalua el signo de un valor + 0 -
*
* @return
*/
private double evalExp5() {
double result;
String operator = "";
if ((this.tokenType == TokenType.DELIMITER) &&
"+".equals(this.token) || "-".equals(this.token)) {
operator = this.token;
this.nextToken();
}
// decendente parentesis
result = this.evalExp6();
if ("-".equals(operator)) {
result = -result;
}
return result;
} // evalExp5.
/**
* Evalua los parentesis.
*
* @return double
*/
private double evalExp6() {
double result;
if ("(".equals(this.token)) {
this.nextToken();
result = this.evalExp2();
if (!")".equals(this.token)) {
throw new UnbalanceParenthesesException();
}
this.nextToken();
} else {
result = this.getAtomicValue();
}
return result;
} // evalExp6.
/**
* Obtiene un valor numerico atomico
*
* @return double
*/
private double getAtomicValue() {
double result = 0.0;
if (this.tokenType == TokenType.NUMBER) {
result = Double.parseDouble(this.token);
this.nextToken();
} else {
throw new SintaxErrorException();
}
return result;
} // getAtomicValue.
/**
* Obtiene el siguiente token
*/
protected void nextToken() {
this.tokenType = TokenType.NONE;
this.token = "";
if (!isTheEndOfExpresion()) {
// Si es un operador
if (this.isDelimiter(this.expresion.charAt(this.expresionIndex))) {
this.parseDelimiter();
} else if (this.isVariable(this.expresion.charAt(this.expresionIndex))) { // si es una variable.
this.parseVariable();
} else if (this.isNumber(this.expresion.charAt(this.expresionIndex))) { // si es un numero.
this.parseNumber();
} else {
this.tokenType = TokenType.EOE; // caracter desconocido.
}
} else {
this.tokenType = TokenType.EOE;
}
System.out.println(MessageFormat.format("token {0} and type {1}", this.token, this.tokenType));
} // nextToken.
private void parseFactor() {
while (!this.isTheEndOfExpresion() && !this.isDelimiter(this.expresion.charAt(this.expresionIndex))) {
this.token += this.expresion.charAt(this.expresionIndex);
this.expresionIndex++;
}
}
protected void parseNumber() {
this.parseFactor();
this.tokenType = TokenType.NUMBER;
}
protected void parseVariable() {
this.parseFactor();
this.tokenType = TokenType.VARIABLE;
}
protected void parseDelimiter() {
this.token +=
this.expresion.charAt(this.expresionIndex);
this.expresionIndex++;
this.tokenType = TokenType.DELIMITER;
}
private boolean isNumber(final char c) {
return Character.isDigit(c);
} // isNumber,
private boolean isDelimiter(final char c) {
return this.delimiters.contains(c);
} // isDelimiter.
private boolean isVariable(final char c) {
return Character.isLetter(c);
} // isVariable.
private boolean isTheEndOfExpresion() {
return (this.expresionIndex >= this.expresion.length());
} // isTheEndOfExpresion.
} // E:O:F:Parser.
</character></character></code>
</pre>
jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com4tag:blogger.com,1999:blog-16012919.post-68403931004745910302013-04-15T23:01:00.000-07:002013-04-15T23:01:08.519-07:00El arte de programar en JavaTengo mas de una decada programando en Java, siento que me manejo de manera aceptable en el lenguaje, algunos frameworks, librerias y herramientas alrededor; sin embargo esa posicion de "comfort" creo que puede resultar perjudicial para el desarrollador, pues la mayoria de los retos que uno suele encontrar en el trabajo no pasan de ser cosas de gestion de datos, que implican seguridad, escalabilidad, entre otros aspectos muy importantes, pero a la poste algo triviales (ya se han hecho varias veces, algunas ocasiones hay retos interesantes, pero nada super emocionante).<br />
<br />
En ese mundo "perfecto" creo que uno puede debilitar o perder ciertas habilidades cognitivas que solia tener en la Universidad, como un aceptable razonamiento logico matematico, entre otros; por tal razon me he dado a la tarea de volver algunos libros de logica, de la misma manera desempolvar algunos libros de programacion, uno interesante aunque algo viejo es "El arte de programar en Java", un libro que compre hace ya algun tiempo y consiste en una serie de ejercicios llevados en cada capitulo tales como un analizador de expresiones, interpretes, adminitrador de descargas, un cliente de correo electronico entre otros (osea retos que por lo regular no te pediran en el cotidiano trabajo).<br />
<br />
Me gustaria ver si puedo ir haciendo aqui una bitacora con cada capitulo leido y publicar lo mas importante de cada uno, esperemos que no se quede en palabras ultimamente me cuesta trabajo ser consistente con un labor edenica :)<br />
<br />
<br />
<img src="http://www.agapea.com/Editorial-McGraw-Hill/El-arte-de-programar-en-Java-i0n166865.jpg" />jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-2542208288106006962013-04-08T17:48:00.001-07:002013-04-08T17:48:18.033-07:00Links acerca de usabilidad<br />
Bueno esta haciendo un research acerca de usabilidad y decidi compartir algunos de los links mas interesantes:<br />
<br />
Este esta muy cool y dice por que son buenos, gmail #1:<br />
<br />
<a href="http://www.1stwebdesigner.com/design/well-designed-usable-sites/">http://www.1stwebdesigner.com/design/well-designed-usable-sites/</a><br />
<br />
Los mejores menus:<br />
<a href="http://www.kronikmedia.co.uk/blog/website-navigation-menu-design/3580/">http://www.kronikmedia.co.uk/blog/website-navigation-menu-design/3580/</a><br />
<br />
Otro top ten:<br />
<a href="http://www.topsite.com/best/usability">http://www.topsite.com/best/usability</a><br />
<br />
los CMS con mas usabilidad<br />
<a href="http://net.tutsplus.com/articles/web-roundups/top-10-most-usable-content-management-systems/">http://net.tutsplus.com/articles/web-roundups/top-10-most-usable-content-management-systems/</a><br />
<br />
Las grandes companias que incorporan usabilidad en sus sistemas:<br />
<a href="http://www.siteiq.net/7806/the-2013-usability-top-10-ibm-leads-sap-soars-and-apple-screws-up-the-rankings-2">http://www.siteiq.net/7806/the-2013-usability-top-10-ibm-leads-sap-soars-and-apple-screws-up-the-rankings-2</a><br />
<br />
+ Algo interesante:<br />
<br />
top ten de sitios de Universidades<br />
<a href="http://blog.thebrickfactory.com/2010/03/top-11-best-designed-university-websites/">http://blog.thebrickfactory.com/2010/03/top-11-best-designed-university-websites/</a><br />
<br />
Y estos son 10 videitos acerca de usabilidad:<br />
<a href="http://www.usefulusability.com/10-must-see-usability-videos/">http://www.usefulusability.com/10-must-see-usability-videos/</a><br />
<br />
Enjoy!<br />
jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-48213008788635956672012-09-23T05:36:00.001-07:002013-01-29T17:53:54.914-08:00Flash y HTML 5<p>
Bueno mucho tiempo desde mi ultimo post, se que siempre digo lo mismo; pero realmente espero este 2013 revivir un poco mi blog. Sin duda las herramientas sociales han desviado un poco el flujo del contenido y herramientas como los blogs han perdido algo de terreno, sin embargo resultan mas ordenados que el timeline de FaceBook y fáciles de clasificar, buscar, etc.
</p>
<p>
Dicho lo anterior, hoy quiero escribir un poco acerca de Flash y HTML 5; el estandar que aun no se encuentra full implementado, ha tenido una fuerte adopción desde la negativa de los dispositivos apple (los iToys) de incluir un cliente de flash dentro de sus sistema operativo, argumentando que HTML 5 podía ofrecer la misma funcionalidad sin necesidad de utilizar un plugin en nuestro browser (quizás fue una buena decisión a jugar, por lo problemas de seguridad de los java/applet plugins que hemos visto hoy en día), las nuevas versiones de Android tampoco soportan flash x).
</p>
<p>
En lo personal nunca fui muy fan del action script (lenguaje detrás de la animación del viejo programa de Macromedia, adquirido por Adobe hace tiempo), y la apuesta por HTML 5 trae a mi cabeza varias preguntas.
</p>
<p>
<ol>
<li>Cuando tiempo se dará una transición dramática de Flash a HTML 5?</li>
<li>De darse en un tiempo relativamente corto, que va pasar con los desarrolladores de Flash?</li>
</ol>
</p>
<p>
A la primera pregunta, mi opinión personal se basa en otros artículos que he leído, el argumento básico es el siguiente, HTML 5 pinta muy bien y a pesar de su rápida evolución y adopción sigue existiendo una gran brecha entre lo que proporciona Flash y HTML 5; el primero proporciona muchisimas mas funcionalidades, no solo en el campo de la animación, existen muchas otras tecnologías alrededor del ecosistema del hijo de Adobe, Remote Flash, Flex, Adobe air y por ahí va la cuenta, sin embargo algunas animaciones vectoriales ya pueden ser realizadas con HTML 5 y son muy rápidas. Canvas y SVG quizás no proporcionan un sistema RIA en si, pero Javascript y HTML tienen formularios, animaciones y una parafernalia de toolkits, framework y librerías desde hace mucho tiempo y son muy maduras, difundidas, abiertas y con gran soporte! nada mal no :). En definitiva, creo que aun falta tiempo para que Flash desaparezca, al menos los sistemas actuales (es decir una transacción o migracion de sitios hechos en Flash a HTML 5), pero hoy por hoy crear un sitio Web en Flash, es cerrar la puerta a una cantidad de dispositivos móviles increíble (sin manejar datos oficiales, creo que alrededor de la mitad de los accesos en los países de primer mundo, a Internet son por un dispositivo móvil)
</p>
<p>
En cuanto a la segunda cuestión, bueno si lo que argumento en la primera respuesta lo tomamos como una premisa, que debería hacer un desarrollador Flash; bueno he leído artículos de como se da una transición de un lenguaje X a otro mas moderno junto con las dificultades de adopcion, y conozco algunos programadores que aun argumentan que RPG, Cobol y Fox pro son mucho mejores herramientas que las actuales, puede que tengan razón y sus argumentos les justificaran, pero la realidad es que son sistemas legacy que en la mayoría de caso están estancados (es decir no crecen), casi nadie se plantea el desarrollo de un sistema moderno en ellos y bueno, algunos los consideran una bonita pagina en la historia de la programacion estructurada. Así que siguiendo el mismo ejemplo, en el caso que usted sea un programador Flash de hueso colorado, se tienen algunas cosas a favor para una eventual etapa migratoria; regularmente (no siempre) se tienen conocimientos tanto de estructuración de código, como OOP. También se tienen valiosos conocimientos de animación, manipulación de assets entre otras artes graficas, y la experiencia y gusto para implementar full sites, con soporte RIA y Animaciones; otro punto a favor y no menos importante es el hecho de saber ActionScript, pues tiene algún parecido a Javascript, sin embargo, si us tiene algun tiempo de no adentrarse en los fantásticos mundos del Javascript, pues amigo, el lenguaje ha evolucionado mucho y ha crecido, hoy por hoy cuenta con un ecosistema enorme, a parte de todo lo nuevo relacionado con HTML 5, Canvas, SVG, etc. Y amigos, es una realidad, cuando el mercado cambia, el desarrollador no puede cerrarse y volverse una pieza de museo, es bueno dar el paso y evolucionar a nuevos retos.
</p>
<p>
En cuanto a los desarrolladores de Javascript, quizás no cuentan con el background a nivel de animación vectorial que tienen los chicos de Flash, pero sin duda alguna tienen ventaja en cuanto al conocimiento del lenguaje Javascript, los estándares Web y muchas otras cosas relacionadas con el ecosistema de facto, así que no es una mala idea iniciar con el estudio de graficacion con Canvas/SVG, sin duda obtendrán una ventaja competitiva y ya se empiezan a ver, inclusive en nuestro pais algunas empresas solicitando estos conocimientos, inclusive una persona con poca experiencia en el desarrollo Web puede encontrar una ventaja competitiva adentrandose en estos mundos, ya que por mis investigaciones personales, son 4 gatos los que conocen del tema y estoy seguro que la demanda va incrementar exponencialmente en el futuro, así que no hay que llegar primero pero hay que saber llegar.
</p>
<p>
Por ultimo, en lo personal pienso que es un buen cambio, ya existían varios problemas con el soporte de Flash y SEO, además se trataba de un código cerrado y propietario, con las ventajas y desventajas que esto significa; quizas Flash quede relegado para sistemas intranet o empotrados, donde el soporte del mismo este garantizado o limitado, quizas, si es que ya no existe, hagan un migrador de Flash a HTML 5 :D
</p>
<p>
Yo por mi parte estoy leyendo un libro de HTML 5 que incluye algo de animación con Canvas, asi que animencen :)
</p>
jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-47976232527508709682012-05-11T12:20:00.000-07:002012-05-11T12:24:34.265-07:00Javascript y DOM (creando Listas)El siguiente es un ejemplo de Javascript de como crear una lista con parrafos adentro, utilizando para ello unicamente el DOM, adicionalmente se muestra un ejemplo de como usar el getElementByTag, con el cual obtenemos una Array de tag y cambiamos el estilo (color) a azul<br />
<br />
<i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />"http://www.w3.org/TR/html4/loose.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>New Web Project</title><br /><br /> <br /> </head><br /> <body><br /> <div><br /> <ul><br /> <li><p>Uno</p></li><br /> <li><p>Dos</p></li><br /> <li><p>Tres</p></li><br /> <li><p>Cuatro</p></li><br /> </ul><br /> </div><br /> <br /> <hr/><br /><br /> <div id="ulDinamico"><br /> </div> <br /><br /> <a href="#" onclick="cambiarColor(); return false;">Cambiar color a todos los parrafos</a><br /> <br /> <script type="text/javascript"><br /><br /> var ulDinamico = document.getElementById("ulDinamico"); <br /> var ul = document.createElement("ul");<br /> var li = document.createElement("li");<br /> var p = document.createElement("p");<br /> var text = document.createTextNode("Uno");<br /> <br /> p.appendChild(text);<br /> li.appendChild(p);<br /> ul.appendChild(li);<br /><br /> // Campo 2<br /> li = document.createElement("li");<br /> p = document.createElement("p");<br /> text = document.createTextNode("Dos");<br /> <br /> p.appendChild(text);<br /> li.appendChild(p);<br /> ul.appendChild(li);<br /><br /> // Campo 3<br /> li = document.createElement("li");<br /> p = document.createElement("p");<br /> text = document.createTextNode("Tres");<br /> <br /> p.appendChild(text);<br /> li.appendChild(p);<br /> ul.appendChild(li);<br /><br /> // Campo 4<br /> li = document.createElement("li");<br /> p = document.createElement("p");<br /> text = document.createTextNode("Cuatro");<br /> <br /> p.appendChild(text);<br /> li.appendChild(p);<br /> ul.appendChild(li);<br /> <br /> ulDinamico.appendChild(ul);<br /><br /> function cambiarColor () {<br /> <br /> var parrafosArray = document.body.getElementsByTagName("p"); console.log(parrafosArray);<br /> var parrafo;<br /> var i = 0; <br /> for (i = 0; i < parrafosArray.length; ++i) {<br /> <br /> parrafo = parrafosArray [i];<br /> console.log(parrafo);<br /> parrafo.style.color="blue";<br /> } <br /> } <br /> </script><br /> </body><br /></html></i>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-88112072385405505082012-01-23T11:50:00.000-08:002012-01-23T11:54:01.298-08:00Mapped Files en JavaHola, queria compartir este interesante articulo de como tomar ventaja de las plataformas de 64 bits y los Mapped Files en Java, permitiendonos leer agilmente archivos de mas de 4 Gigas en memoria.<br /><br /><br /><a href="http://javarevisited.blogspot.com/2012/01/memorymapped-file-and-io-in-java.html">http://javarevisited.blogspot.com/2012/01/memorymapped-file-and-io-in-java.html</a><br /><br />Tomar en cuenta, que el ejemplo solo va funcionar en plataformas de 64 bits, pues en plataformas de 32 el O.S solo puede direccionar a lo subo 4 GB<br /><br />Un saludo,<br />Jjsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-18808979482661036092012-01-04T20:00:00.000-08:002012-01-04T20:04:40.340-08:002012El 2012 apenas inicia y es hora de plantearse objetivos para mi cada vez menos frecuente blog!<br /><br />Como primer objetivo es la reescritura de un tutorial que habia escrito hace 12 años, <br /><a href="http://www.geocities.ws/jsanca2000/tuto/index.html">http://www.geocities.ws/jsanca2000/tuto/index.html</a> el mismo intentare retomarlo, ver que partes sirven y que otras se encuentran obsoletas con el HTML5 y el CSS 3.<br /><br />Adicionalmente me he planteado la posibilidad de escribir algunos otros tutoriales, como uno de Spring, otro de Apache Wicket y Stripes, asi como Lucene y quizas MongoDB, vamos a ver como pinta este nuevo periodo, en tiempo y ganas para escribir!<br /><br />Un saludo y feliz año nuevo a todos<br />Jjsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com1tag:blogger.com,1999:blog-16012919.post-43598999104597789332011-09-02T15:03:00.000-07:002011-09-02T15:11:56.315-07:00DatePicker con JquerySi ocupa un datepicker, aqui como integrarlo sencillamente;
<br />
<br /><pre>
<br /><code>
<br /> <!DOCTYPE html>
<br /><html>
<br /><head>
<br /> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<br /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<br />
<br /> <script>
<br />
<br />
<br /> $(document).ready(function() {
<br /> $("#datepicker").datepicker({
<br />
<br /> defaultDate: document.forms['myForm'].elements['dateSelected'].value,
<br /> onSelect: function(dateText, inst) {
<br />
<br /> alert (dateText);
<br /> document.forms['myForm'].elements['dateSelected'].value = dateText;
<br /> }
<br /> });
<br /> });
<br /> </script>
<br /></head>
<br /><body style="font-size:62.5%;">
<br />
<br /><form name="myForm" action="algo.do" method="post">
<br />
<br /> <input type="hidden" name="dateSelected" value="10/04/1984"/>
<br /> <div id="datepicker"></div>
<br />
<br /></form>
<br /></body>
<br /></html>
<br />
<br /></code>
<br /></pre>
<br />
<br />
<br />Como funciona, sencillo. Solo tenes que colocar una fecha en el input dateSelected, por ejemplo con jstl seria algo como
<br />
<br /><pre><code> input type="hidden" name="dateSelected" value="${dateSelected} </code></pre>
<br />
<br />Ese seria un binding basico para colocar la fecha (en texto, formateada como MM/dd/yyyy), el javascript funcionara perfectamente con eso no necesita cambios.
<br />
<br />En el servidor, puede recibir el valor con el post del formulario como dateSelected.
<br />
<br />Ocupa mas custom en el plato, aqui esta la carta, sirvase:
<br /><a href="http://docs.jquery.com/UI/Datepicker">http://docs.jquery.com/UI/Datepicker</a>
<br />
<br />Pura vida,
<br />J
<br />
<br />jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-49173577949306179272011-05-31T13:25:00.000-07:002011-05-31T14:57:17.529-07:00Annotation Hell y otros demoniosAcostumbrado a utilizar Spring con una configuración basada en XML, la cual ya en su versión 2.x presentaba algunos coqueteos con el uso de anotaciones para el manejo de su Ioc Engine; he estado utilizando la versión 3 y me ha surgido la necesidad de crear un nuevo post para dar mi humilde opinión al respecto.<br /><br />Anteriormente se hablaba del famoso XML Hell (similar al DLL Hell y otros tantos infiernos que han visto la luz en el mundo de la ingeniería), yo la verdad nunca sentí que fuera tan complicado, aunque reconozco que el desorden puede llevar a un caótico laberinto verbal, de configuración XML. Spring ha intentado "resolver" o cambiar el paradigma, mas no el "approach" de este aberno XMLero, por un nuevo "paraíso" en rojo y lleno de llamas, al cual le otorgare el original nombre de Annotation Hell, este nuevo séptimo cielo permite ahorrarnos unas líneas de XML, anotando nuestro bean con annotaciones tales como Component, Autowired, Qualifier, etc (puede encontrar una pequeña referencia <a href="http://www.developer.com/java/other/article.php/3756831/Java-Tip-Simplify-Spring-Apps-with-Autowired.htm">aquí</a>)<br /><br />Para mi, se sigue teniendo un enfoque muy similar, donde la meta información para el Ioc se incluye en un lugar diferente al XML, muchos diran que el XML es verbose y demás, pero debemos darnos cuenta de las ventajas que se pierden el bendito, Annotation Hell.<br /><br />1) perdida de la centralización, anteriormente uno tenia uno o varios XML (ordenados lógicamente por capas de aplicación o contexto), ahora la meta información esta dispersa, buscar por el ejemplo el bean asociado a tal mapping, implica una búsqueda dentro de nuestros sources o classpath's, implicando inclusive la des-compilación simplemente para conocer, esta meta info.<br /><br />2) totalmente intrusivo, uno de los principios de Spring era evitar la intrusividad de tal manera los POJOS no se dieran cuenta de que Spring existe, reforzado el concepto en gran manera por cosas como los proxies y AOP, claro existen excepciones tales como los templates de los cuales se debe extender, pero estos pueden ser encapsulados por objetos bases de la aplicación logrando encapsular el acople entre estas clases y los daos por mencionar un ejemplo. Como digo es intrusivo, a pesar de que existen algunas anotaciones para declarar meta información de Ioc de parte del estándar de JEE, siempre es necesario acudir a las anotaciones de Spring, lo cual no permite que el cambio de Ioc se posible, o por ejemplo si tenemos unos beans y queremos reutilizar el código en un ambiente no Spring, como Seam entre otros tendríamos que hechar mano al código :(<br /><br />3) @Qualifier sucks<br /><br /><br />Yo creo que las anotaciones son una gran idea, pero el abuso poco inteligente o el uso intensivo de los mismos por la simple razón que están en boga puede introducirnos a un nuevo nivel infernal, basta con ver algunos beans, con anotaciones de Hibernate, JAXB, Struts Validations y alguna otra cosa! No nos alcanzan los 24 inch de la pantallas para ver la siguiente propiedad jajajajajsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com3tag:blogger.com,1999:blog-16012919.post-44209401868232111202011-05-10T14:25:00.000-07:002011-05-10T14:26:23.272-07:00Ejecutar solo un test en maven (test phase)Si desea ejecutar solo uno de los test de maven, use mvn test -Dtest=.....<br /><br /><br />Mas info:<br /><a href="http://maven.apache.org/plugins/maven-surefire-plugin/examples/single-test.html">http://maven.apache.org/plugins/maven-surefire-plugin/examples/single-test.html</a>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-33096101448380059812011-04-07T22:48:00.000-07:002011-04-07T22:52:49.314-07:00Multiples patrones para un servletEstaba buscando como hacer para que un servlet responda tanto a .action como .xml, y esto me funciono en tomcat<br /><br /><pre><br /><br /> <servlet-mapping><br /> <servlet-name>SimpleMVCServlet</servlet-name><br /> <url-pattern>*.action</url-pattern><br /> </servlet-mapping><br /> <br /> <servlet-mapping><br /> <servlet-name>SimpleMVCServlet</servlet-name><br /> <url-pattern>*.xml</url-pattern><br /> </servlet-mapping><br /><br /></pre>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-18304353139912208972011-04-07T22:32:00.000-07:002011-04-07T22:36:05.872-07:00Serializar en XML un object<div><span class="Apple-style-span" style="font-family: Arial, Helvetica, FreeSans, Luxi-sans, 'Nimbus Sans L', sans-serif; font-size: 12px; "><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; ">Existen diferentes tipos de Librerías para hacer Serializacion de objetos a XML y viceversa, tales como </pre><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; ">JAXB, XStream, XMLBeans, etc. De ellos, uno de los que mas me gusta es XStream, aunque se a pura reflexión </pre><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; ">es sencillo de utilizar y puede serializar a XML y Json de manera transparente.</pre><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; "></pre><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; ">Sin embargo si no desean agregar una librería externa y no desean usar las ya conocidas Sax o Dom, puede usar las clases </pre><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; ">XMLEncode y XMLDecoder, un ejemplo.</pre><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; ">XMLEncoder e = new XMLEncoder( new BufferedOutputStream( new FileOutputStream("Test.xml"))); e.writeObject(new JButton("Hello, world")); e.close()</pre><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; "></pre><pre style="font-family: Monaco, Courier, 'Courier New', monospace; color: rgb(68, 68, 68); font-size: 11px; ">Mas info en:</pre></span></div><a href="http://java.sun.com/products/jfc/tsc/articles/persistence4/">http://java.sun.com/products/jfc/tsc/articles/persistence4/</a>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-77533672690328325862011-04-01T10:31:00.000-07:002011-04-01T10:32:48.973-07:00Tipos de datos en OracleEn caso que necesiten saber los tamaños máximos para algunos de los tipos en Oracle, este link me sirvió bastante<div><br /></div><div><a href="http://ss64.com/ora/syntax-datatypes.html">http://ss64.com/ora/syntax-datatypes.html</a></div>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-81931691924149971512011-03-28T09:38:00.000-07:002011-03-28T09:40:01.163-07:00Articulo acerca de annotations en JavaActualmente me encuentro haciendo un Framework en Java y quería agregar annotations al mismo, aquí un articulo al respecto:<div><br /></div><div><a href="http://www.developer.com/java/other/article.php/3556176/An-Introduction-to-Java-Annotations.htm">http://www.developer.com/java/other/article.php/3556176/An-Introduction-to-Java-Annotations.htm</a></div>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-23703041543851173272011-03-07T09:07:00.000-08:002011-03-07T09:12:12.795-08:00Articulo acerca de Spring Social<div>Me encontré este modulo de Spring, Spring Social. La verdad esta muy interesante para integrar Facebook, Twiter y otros frameworks y proporciona una forma muy high level de acceder a las api's rest que proporcionan estas redes sociales.</div><div><br /></div><a href="http://blog.springsource.com/2010/11/03/socializing-spring-applications/">http://blog.springsource.com/2010/11/03/socializing-spring-applications/</a>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-7453184138905927632011-03-01T09:14:00.000-08:002011-03-01T09:24:25.788-08:00Acceso remote en MACHola gente, <div><br /></div><div>En este pequeño post, quiero hablar acerca del acceso remoto en MAC.</div><div>Yo conozco tres formas de acceder a una computadora desde Mac, la primera de ellas es mediante SSH, veamos un ejemplo</div><div><br /></div><div>ssh -l userName IP</div><div><br /></div><div>La anterior, es lo que diríamos la sintaxis del comando, ssh es el comando, userName es el nombre del usuario para acceder ala compu remota y la ip, la dirección IP de la maquina que deseamos acceder.</div><div><br /></div><div>Un ejemplo:</div><div><br /></div><div>ssh -l jsanca 10.45.100.12</div><div><br /></div><div>En este ejemplo, intentamos conectarnos como jsanca, a la computadora con la IP, 10.45.100.12. al ejecutar el comando, el sistema nos solicitara el password y a continuación tendremos una consola remota para navegar por la maquina, ejecutar comandos, etc.</div><div><br /></div><div>Accediendo, vía SSH Client; en Windows solía utilizar SSHClient para acceder al estilo de un cliente FTP a una maquina remota, en MacOS he encontrado <b>Fugu </b><a href="http://rsug.itd.umich.edu/software/fugu/">(http://rsug.itd.umich.edu/software/fugu/)</a>, con esta sencilla aplicación podemos indicar la ip, y el usuario, a continuación solicitara el password y abrirá una ventana con dos exploradores de archivos, el primero (izquierda es el local) y el segundo el remoto, así podemos transferir archivos en ambas direcciones, entre otras cosas :)</div><div><br /></div><div>La ultima y mas sofisticada, es la utilizacion de NXServer y NXClient, este software muy superior a otros que he usado como TeamViewer, simplemente instalamos el NXServer en nuestra maquina remota y corremos el servicio</div><div><br /></div><div>nxserver --start (en Linux)</div><div><br /></div><div>y abriendo la aplicación del NX11 podemos tener control total en la maquina remota, muy útil para programar en una app remota o cosas así!</div><div><br /></div><div>[+] info <a href="http://www.nomachine.com/">http://www.nomachine.com/</a></div><div><br /></div><div>Un saludo,</div><div>J</div>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0tag:blogger.com,1999:blog-16012919.post-38399440393463047342011-02-16T16:05:00.001-08:002011-02-16T16:06:04.736-08:00Como exportar Cvs en postgresql<div>Como le dice el titulo, un articulo de como exportar desde la consola psql una consulta a cvs :)</div><div><br /></div><a href="http://www.mkyong.com/database/how-to-export-table-data-to-file-csv-postgresql/">http://www.mkyong.com/database/how-to-export-table-data-to-file-csv-postgresql/</a>jsancahttp://www.blogger.com/profile/05654773123540648925noreply@blogger.com0