tag:blogger.com,1999:blog-16385653363937132562024-03-05T16:23:02.076-04:00Internet DevelopingNoticias, tecnologias, desarrollos, ejemplos y tutoriales sobre el desarrollo de herramientas para la web.Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.comBlogger57125tag:blogger.com,1999:blog-1638565336393713256.post-78071938975334817322012-07-19T03:32:00.000-04:302012-07-19T03:37:34.415-04:30Un programador/desarrollador ideal<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMN_Dvmkw3RA032JM7fhOM9jslBUomFCaAEXU9vWBvjMRpSpJyrrNgEhl8uAGsBy6GCmIKeSadTwN8zcAMH2Na2q3w1D6iFrdea4bVaeGo1hsizoLFtZFkZqi-GEK5q1jMRlcWfRCJg/s1600/super+developer.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMN_Dvmkw3RA032JM7fhOM9jslBUomFCaAEXU9vWBvjMRpSpJyrrNgEhl8uAGsBy6GCmIKeSadTwN8zcAMH2Na2q3w1D6iFrdea4bVaeGo1hsizoLFtZFkZqi-GEK5q1jMRlcWfRCJg/s200/super+developer.jpeg" width="200" /></a></div>
<span style="background-color: white;">Soy desarrollador desde mi infacia (13 años de edad), trabajé en una empresa como desarrollador, fundé una comunidad de desarrolladores (http://www.4Geeks.co), tengo un startup de tecnología (http://www.societs.com) y he quebrado otros varios.. </span><span style="background-color: white;">Todo este background de tecnología y emprendimiento ha sido una mezcla muy interesante para mí porque he podido ver el perfil que debe tener un desarrollador desde adentro y desde afuera.</span><br />
<div>
<span style="background-color: white;"><br /></span></div>
<div>
<span style="background-color: white;">Quiero escribir un ensayo explicando las 4 premisas que yo considero deben darse para tener un desarrollador "ideal".</span></div>
<span class="fullpost">
<div>
<br /></div>
<div>
<b>Debe ser un solucionador de problemas</b></div>
<div>
<b><br /></b></div>
<div>
No es casualidad que muchas universidades den la carrera de programación como una Ingeniería, después de todo el ingenio del desarrollador es uno de sus mayores valores. El problema esta en el sindrome del "No se puede". </div>
<div>
<br /></div>
<div>
Estoy cansado de escuchar desarrolladores que en lugar de poner soluciones ponen trabas, tal véz por falta de creatividad, desinterés en el problema a solucionar (no lo ven como un reto) o simplemente por estupidez. La cosa es que el departamento de tecnología de cualquier compañía debería ser el último en dar su opinión, y debe tener un lider que este dispuesto a resolver todos los problemas técnicos.</div>
<div>
<br /></div>
<div>
Les recomiendo leer está lectura titulada: <a href="http://wiki.4geeks.co/2012/02/la-carta-a-garcia/">La carta a garcia</a> donde se demuestra la importancia y significado que tiene la palabra "resolver".</div>
<div>
<br /></div>
<div>
<div>
<b>No tener titulo universitario en ninguna carrera afin a la programación</b></div>
<div>
<b><br /></b></div>
<div>
Hay dos razones que me llevan a esta conclusión:</div>
<div>
<ol>
<li><b style="background-color: white;">El modelo de estudio universitario esta errado:</b><span style="background-color: white;"><b><br /></b>Si es verdad que una buena base es necesaria, pero ¿5 años de carrera para tener una base?. Yo considero que la programación debe y puede ser aprendida de forma autodidacta, los modelos universitarios actuales no evolucionan a la velocidad que deberían, ni creo que en algún momento puedan hacerlo, todos los profesores son superados por los alumnos, el modelo de enseñanza para este tipo de carreras debe ser reinventado.</span><span style="background-color: white;"><br />Yo aprendí a programar en el estudio de mi casa, durante varias madrugadas, leyendo </span><a href="http://www.desarrolloweb.com/php/" style="background-color: white;">este curso</a><span style="background-color: white;"> de Desarrolloweb.com. Si yo quisiera estudiar programación hoy en día, probablemente me uniría a una de las miles de comunidades que existen en el mundo de la programación, y seguiría la recomendación de los mejores programadores en esos grupos.</span><span style="background-color: white;"><br />Si te enseñan a programar y no lo aprendes tu mismo como un autodidacta, te están creando malas mañas, tienes que ser autodidacta desde el principio o sino no sobrevives a los cambios.</span></li>
<li><b>La programación no es un fin, sino un medio:</b><br /><span style="background-color: white;"><br />Otro problema que hay en los desarrolladores criados por académicos, es la falta de entendimiento práctico de la programación o falta de visión. Si estudias y ejerces carreras de otras industrias, tienes la ventaja de conocer un pedazo del mundo como es, conoces problemas típicos de esa industria y tu mente se activa a intentar solucionarlos con la programación (que aprendiste de forma autodidacta).<br /><br />Si revisas las historias de éxito de startups más grandes, podrás ver que son muy pocos los casos que deben su éxito a una "muy buena arquitectura técnica", todo lo contrario, estamos acostumbrados a ver ballenitas en twitter, errores 404, etc.<br /><br />Si trabajas en la industria del turismo por muchos años probablemente vas a poder crear una plataforma como despegar.com, si estuviste en 10 escuelas para aprender diferentes idiomas vas a fundar OpenEnglish.com, si te toco ir a las juntas de condominios vecinales todas las semanas (como a mí) fundarás Societs.com, si trabajas en bienes raices, lo tuyo es nestio.com, airbnb.com y así sucesivamente.</span></li>
</ol>
<div>
<b>Ser autodidacta</b></div>
</div>
<div>
<br /></div>
<div>
Este punto ya lo explique un poco en los otros dos puntos que he mencionado, pero vamos a profundizar unas lineas...</div>
<div>
<br /></div>
<div>
Facebook saca un nuevo release de su API todas las semanas, Google App Engine lo hace mensualmente, cada día ocurren cambios más frecuentemente en el mundo de la programación, nosotros hicimos un estudio intenso para conocer la mejor herramienta para realizar el proyecto http://dev.4geeks.co/ivoted, decidimos hacerlo en <a href="http://www.ape-project.org/wiki/index.php/JSF">APE</a>, y cuando lo terminamos (6 meses después) ya <a href="http://nodejs.org/">Node</a>.js era una mejor solución.</div>
<div>
<br /></div>
<div>
Entonces ¿Quién me va a enseñar Node.js? Nadie! Un desarrollador ideal tiene que estar feliz por aprender esa nueva y mejor tecnología y hacer el salto en pocos días.</div>
<div>
<br /></div>
<div>
<b>Debe hablar inglés</b></div>
<div>
<br /></div>
<div>
Tantos lenguajes que hay que aprender: Python, Javascript, HTML (si es un lenguaje aunque algunos digan que no), Ruby, C#, Java, Objective C, etc. Y resulta que descuidamos el idioma mas importante de todos: INGLES!</div>
<div>
<br /></div>
<div>
Todas las documentaciones están en ingles, los foros en inglés, los grupos en inglés, los comentarios del código en inglés. Incluso si instalas tu sistema operativo en inglés, te va a ir mejor, porque vas a poder copiar y pegar los errores en google para obtener más respuestas.</div>
<div>
<div>
<div>
<span class="fullpost">
</span><br />
<div>
<br /></div>
<div>
Bueno para cerrar, les quiero dejar una frase para que recuerden: "La programación no es un problema tecnico", es un medio, un instrumento para resolver problemas no técnicos que existen en la cotidianidad.</div>
</div>
</div>
</div>
</div>
</span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com3tag:blogger.com,1999:blog-1638565336393713256.post-17062828329979035222011-05-26T10:12:00.003-04:302011-05-26T10:27:33.113-04:30Porque no he escrito mas en este blog - Parte I: Mi infancia<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYowPUgg71QRxkYhnDZSu5ewPd0Me-mRiorThWplJrtWDLLb83JZvOnp3Bt4868Dpi-UiYQXh1mpDTnrrUXMdePsqAwBaGZlcAkNR7xFMewZZyXn3DU3pTlV11Ehsx69ssusc5PCfBw/s1600/iniciativa%255B1%255D.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 316px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYowPUgg71QRxkYhnDZSu5ewPd0Me-mRiorThWplJrtWDLLb83JZvOnp3Bt4868Dpi-UiYQXh1mpDTnrrUXMdePsqAwBaGZlcAkNR7xFMewZZyXn3DU3pTlV11Ehsx69ssusc5PCfBw/s400/iniciativa%255B1%255D.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5611038704818870898" /></a><br />Sé que he abandonado bastante este blog, y una de las razones es que hace 1 ano y medio decidí renunciar a mi trabajo como desarrollador en Cinet Solutions y emprender mi propio negocio.<br /><br />Han pasado muchas cosas, ha sido una experiencia increíble, llena de muchos aprendizajes y emociones y quiero compartir un poco con ustedes como es mi vida como emprendedor hoy en día para ver si los motivo un poco a hacer lo mismo.<br /><br /><span class="fullpost"><br />Cuando te encanta la tecnología, y la vives dentro de tus venas en tu día a día, sucede un efecto muy similar al de Neo en Matrix, no ves problemas sino soluciones tecnológicas. Es increíble como la cotidianidad se convierte en una maquina de ideas, no hay un momento donde no estés pensando "Que excelente seria que se pudiera esto, o esto otro".<br /><br />Todo empezó en mi 8vo grado del colegio cuando tenía 13 anos, que logre utilizar Microsoft Front Page para crear mi primera pagina web. De que era la pagina? Obviamente de Dragón Ball! eso era lo que me encantaba, estaba enamorado de Bulma y quería ser como Vegeta! Me pasaba todo el día subiendo imágenes de Dragon Ball a mi pagina y deseando que alguien la leyera. En ese momento había un boom de servicios gratuitos de hosting como geocities.com y lycoos.com, todos te permitían hostear tu pagina gratis con la condición de que dejaras banners de publicidad en el site.<br /><br />Luego de crear miles de páginas y de copiarme otras miles (hice 2 páginas de dragon ball, una de shakira, una de limp bizkit y hasta una de un concurso de haloween que la pagina fortunecity.com estaba publicitando (no llegue ni a los primeros 100 puestos) decidí hacer una página para la gente de mi colegio y cree promo2003stc.tk: Que increíble la acogida de la pagina, me convertí en una mini-celebridad en todo el colegio, incluso en los niveles de mas abajo, todo el mundo me veía como "El chamo que creo la pagina web de los de quinto año".<br /><br />Para ese entonces ya tenía 16 años, la pagina permitía subir las fotos de la promoción, tenia encuestas de los mas sexys, encuestas de los mas simpáticos, una sección de anécdotas (en esos momentos uno se está graduando y entra una melancolía), una sección de caricaturas y montajes, etc. En fin, era una mini red social, aunque en ese momento nadie sabía lo que era ese término, y facebook y Hi5 no habían dado señales de vida en Venezuela.<br /><br />Con esa pagina comprobé una vez más mi pasión por la tecnología y me sirvió para estar REALMENTE CLARO de que era lo que quería estudiar (tenia dudas entre ser guitarrista/músico o ingeniero informático) y empecé mis estudios en ingeniería informática en la UCAB (Universidad Católica Andrés Bello) de Venezuela.<br /><br />Empecé la universidad y empezó mi verdadero emprendimiento! Continuo en un próximo post, déjenme sus comentarios! Y siganme en <a href="http://www.poclu.com/alejandro">www.Poclu.com/alejandro</a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com4tag:blogger.com,1999:blog-1638565336393713256.post-31281108380685190052011-05-01T16:53:00.002-04:302011-05-01T16:56:42.097-04:30Sobre emprendimiento en la web 2.0<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwLRSLGekggtniN0_yPh5BlXPrlvTIQuQqjm3x_YBnInclSttKiW60nvlvtGWHR4MPIEtDlBUnD3uNQ8z1En5dHWsYydKC9E0uxcXVkkpDgK6l0SdCTFufUxLysZOAa7AE0v-wGd5vQ/s1600/young_entrepreneur.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 317px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidwLRSLGekggtniN0_yPh5BlXPrlvTIQuQqjm3x_YBnInclSttKiW60nvlvtGWHR4MPIEtDlBUnD3uNQ8z1En5dHWsYydKC9E0uxcXVkkpDgK6l0SdCTFufUxLysZOAa7AE0v-wGd5vQ/s400/young_entrepreneur.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5601862110538563234" /></a><br /><span class="Apple-style-span" style="font-family: sans-serif, Arial, Verdana; font-size: 15px; line-height: 17px; ">Emprender en la web 2.0 tiene sus caracteristicas muy particulares que lo hacen muy diferente al emprendimiento tradicional:</span><div><span class="Apple-style-span" style="font-family: sans-serif, Arial, Verdana; font-size: 15px; line-height: 17px; "><br />1. Facil desarrollo: Si bien hacer una red social de calidad a nivel tecnico es un reto, lograr pasar de nada a una version beta se puede lograr en muy poco tiempo (en semanas) y con poco esfuerzo. Utilizar las ultimas tenologias (frameworks) puede ser una buena estrategia para acelerar este proceso de desarrollo.</span><div><span class="Apple-style-span" style="font-family: sans-serif, Arial, Verdana; font-size: 15px; line-height: 17px; "><br />2. Rapido feedback: Una vez que la version beta esta lista, obtener feedback de los usuarios es muy sencillo gracias a la viralidad de las redes sociales e internet. Hay que tener herramientas para interactuar con los usuarios y saber cuales deben ser los proximos cambios para lograr ese ansiado "product-market fit".</span><div><span class="Apple-style-span" style="font-family: sans-serif, Arial, Verdana; font-size: 15px; line-height: 17px; "><br />3. Iteraciones cortas: Carlos R Villanueva construllo la UCV completa sin caminos, cuando le preguntaron porque, dijo que esperaria a que la gente caminara por el monte, y cuando el paso de la gente crearan caminos de tierra, el construiria los caminos por esos recorridos. El mismo principio aplica aqui, no trates de construir una mega-aplicacion, sal con una version beta muy limitada y deja que los usuarios te digan hacia donde dirigirte. Ve soltando las funcionalidades que te pidan en tiempos cortos.</span><div><span class="Apple-style-span" style="font-family: sans-serif, Arial, Verdana; font-size: 15px; line-height: 17px; "><br />4. Atraer primeros usuarios: Es uno de los grandes desafios,este articulo de mashable (http://on.mash.to/lcmJ8E) explica como lo lograron las grandes redes sociales de hoy en dia.</span></div><div><span class="Apple-style-span" style="font-family: sans-serif, Arial, Verdana; font-size: 15px; line-height: 17px; "><br />5. Monetizar: Ganar dinero es otro de los retos, este tema lo dejo para mi post de los proximos dias.</span><br /><br /><span class="fullpost"></span></div></div></div></div>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com0tag:blogger.com,1999:blog-1638565336393713256.post-83065805719951074132010-08-06T00:34:00.002-04:302010-08-06T00:41:20.833-04:30Posicionamiento en buscadores - Inscripcion en directorios de páginas<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTYWzLx354TfebQMDgkUYHmDZPyJA4bTVBPc1ny8M6HK1X8gXVsCb4hgDulGNHlvRsxAgaIc_lXuyRBWCqq_vvQIpN7pXraeYwWC_oBSxUX3C2R7GWiEPex06RJNZITAEG8tWhsQNWg/s1600/dmoz2%5B1%5D.gif"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 124px; height: 124px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigTYWzLx354TfebQMDgkUYHmDZPyJA4bTVBPc1ny8M6HK1X8gXVsCb4hgDulGNHlvRsxAgaIc_lXuyRBWCqq_vvQIpN7pXraeYwWC_oBSxUX3C2R7GWiEPex06RJNZITAEG8tWhsQNWg/s400/dmoz2%5B1%5D.gif" alt="" id="BLOGGER_PHOTO_ID_5502159811852457410" border="0" /></a>
<br />Cuando google salió, su gran y recolucionario método de indexación se debió a una técnica fundamental, google decidió tomar los vínculos (links) que existían entre las paginas como una recomendación, es decir, si mi blog tiene un enlace hacia tu blog, entonces, quiere decir que yo considero que tu blog es bueno. Otro factor a tomar en cuenta es la importancia que tiene esa página que me está recomendado, no es lo mismo que la página del periódico New York times tenga un vinculo hacia tu pagina a que el bloginternetdeveloping.blogspot.com, por supuesto que la del NY Times es más importante, lamentablemente para mi . <span class="fullpost">Para entender mejor esto pueden revisar la figura 1.
<br />
<br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZIvszVxQAsPXtTpNNkGlk2F6qLroDq7h5JNLXkEFc6wXb67qJWeqnipHZLxEZoosk8mfr4nFaCWWMqUpzNzn_XzuD5Bhz4qylLevilcpkcfQ8efEbPzVOfjhCJWhZSOmRQNo77hN8cg/s1600/links.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 224px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZIvszVxQAsPXtTpNNkGlk2F6qLroDq7h5JNLXkEFc6wXb67qJWeqnipHZLxEZoosk8mfr4nFaCWWMqUpzNzn_XzuD5Bhz4qylLevilcpkcfQ8efEbPzVOfjhCJWhZSOmRQNo77hN8cg/s400/links.png" alt="" id="BLOGGER_PHOTO_ID_5502159159340743298" border="0" /></a>Figura 1
<br /></div><meta equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 12"><meta name="Originator" content="Microsoft Word 12"><link rel="File-List" href="file:///C:%5CDOCUME%7E1%5COwner%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"><!--[if gte mso 9]><xml> <o:officedocumentsettings> <o:relyonvml/> <o:allowpng/> </o:OfficeDocumentSettings> </xml><![endif]--><link rel="themeData" href="file:///C:%5CDOCUME%7E1%5COwner%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"><link rel="colorSchemeMapping" href="file:///C:%5CDOCUME%7E1%5COwner%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:trackmoves/> <w:trackformatting/> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowplaceholdertext>false</w:AlwaysShowPlaceholderText> <w:donotpromoteqf/> <w:lidthemeother>EN-US</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> <m:mathpr> <m:mathfont val="Cambria Math"> <m:brkbin val="before"> <m:brkbinsub val="--"> <m:smallfrac val="off"> <m:dispdef/> <m:lmargin val="0"> <m:rmargin val="0"> <m:defjc val="centerGroup"> <m:wrapindent val="1440"> <m:intlim val="subSup"> <m:narylim val="undOvr"> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[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]--><style> <!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1107304683 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:purple; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;} span.apple-style-span {mso-style-name:apple-style-span; mso-style-unhide:no;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} --> </style><!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table 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-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin;} </style> <![endif]--> <p style="text-align: center;" class="MsoNormal"><a href="http://es.wikipedia.org/wiki/PageRank"><span style="" lang="ES">Page Rank</span></a><span style="" lang="ES"> : </span><span class="apple-style-span"><span style="line-height: 115%;font-family:";font-size:9pt;" lang="ES" >PageRank (PR) es un valor numérico que representa la importancia que una página web tiene en Internet.</span></span><span style="" lang="ES"><o:p></o:p></span></p>
<br />Cuando uno quiere subir de posición a una página web que no es muy conocida, es probable que tampoco tenga ningún link o vinculo que apunte hacia esa página, entonces, ¿Cómo podemos empezar a obtener vínculos hacia nuestra web? Es muy sencillo:
<br />
<br /><span style="font-weight: bold;">Inscríbanla en todos los directorios de páginas que existen en internet</span> (O por lo menos en los más importantes, es decir, aquellos directorios que estén mejor posicionados en google). El directorio web gratuito y software libre más importante del mundo es <a href="http://www.dmoz.org/">http://www.dmoz.org/</a>, tiene un Page Rank de 7 y para poder ser incluido en ese directorio debes pasar por unas estrictas normas y validaciones por parte de sus editores.
<br />
<br />Mi recomendación es que busquen la mayor cantidad de directorios posibles y se inscriban en todos, es una tarea fastidiosa, pero será muy reconfortante cuando vean su página subir puestos en google rápidamente.
<br /></span>
<br />Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com3tag:blogger.com,1999:blog-1638565336393713256.post-61215387140424534752010-08-06T00:15:00.005-04:302010-08-06T00:33:20.502-04:30Posicionamiento en buscadores - Utilizacion de etiquetas h1, h2, Strong, etc.<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Lt-EvVlZuat-E86ALVTp9BlsT1pkGNT8JYtMi04KilqjUqLAaXSblHDa8pP0Zz9-nrUI6ZhAhI-v2n418aMzEZBdLbjN-Vr3BJctsPcpAEco5QVFu18y4ag6h4CMFn9Qov1fHBpkDA/s1600/etiquetas.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 129px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Lt-EvVlZuat-E86ALVTp9BlsT1pkGNT8JYtMi04KilqjUqLAaXSblHDa8pP0Zz9-nrUI6ZhAhI-v2n418aMzEZBdLbjN-Vr3BJctsPcpAEco5QVFu18y4ag6h4CMFn9Qov1fHBpkDA/s400/etiquetas.png" alt="" id="BLOGGER_PHOTO_ID_5502157261862174578" border="0" /></a><br />Durante los inicios del diseño web, las etiquetas h1, h2 era muy utilizadas para representar títulos y subtítulos de las paginas, esto se debía a que le colocaban un formato al texto que estos elementos HTML tienen un comportamiento especifico, ideal para resaltar textos. Por ejemplo, la etiqueta h1 lo que hace es hace muy grande y negrito el texto que esta contenido dentro de ella.<br /><span class="fullpost"><br />Hoy en día con la utilización de estilos CSS podemos sobre-escribir el comportamiento natural de una h1 y colocarlo del tamaño, color y forma que deseemos, sin embargo, google sigue considerando los textos que se encuentren dentro de las etiquetas h1, h2, h3, etc. Como los textos más importantes de la pagina, los que resumen en cierta manera todo el contenido de la pagina (Los títulos, subtítulos, etc.).<br /><br />Aprovechandonos de estos conocimientos sobre los buscadores, es muy recomendable mantener esa conducta estandar que la comunidad adopto inicialmente, cada vez que veamos un titulo debemos colocarlo dentro de una etiquera h (h1,h2,h3,h4 o h5), despues si queremos le damos el estilo (color, tamaño, grosor, etc.) que queramos.<br /><br />La etiqueta <strong> tambien es entendida por google para resaltar una palabra clave dentro de la pagina, solo que en menor medida que las etiquetas h.<br /><br />Es importante recalcar que no debemos abusar tampoco de estas etiquetas, ya que se puede perder el sentido de la importancia del texto, si colocamos todos nuestros textos dentro de una etiqueta <strong> o <h1> no estamos logrando nada porque google no sabe cuales son los terminos mas importantes, seria como cuando leemos todo un texto en mayuscula, puede aturdirnos y al todo ser importante, en realidad, nada es importante.<br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com1tag:blogger.com,1999:blog-1638565336393713256.post-6314422394220084302010-08-05T01:02:00.008-04:302010-08-06T00:11:54.032-04:30Posicionamiento en buscadores - Tiempo de carga de una pagina web<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSr4Wc5GBumi2-kJcQqs24uqSrBSPMyFWVvyLmTCMc63HaNLYO-d1ul9f8UZdBgc1ICIje22B8hLvUNjntC4cmela1cAuCMI9RoZPPqmf-eBaE6sFZFFGcGhVpayq843I-qyyz7ADapQ/s1600/mp3-clock.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 136px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSr4Wc5GBumi2-kJcQqs24uqSrBSPMyFWVvyLmTCMc63HaNLYO-d1ul9f8UZdBgc1ICIje22B8hLvUNjntC4cmela1cAuCMI9RoZPPqmf-eBaE6sFZFFGcGhVpayq843I-qyyz7ADapQ/s200/mp3-clock.jpg" alt="" id="BLOGGER_PHOTO_ID_5502152489319894674" border="0" /></a><br />Esta es un área muy técnica que debe ser atendida con mucha paciencia por parte del desarrollador, pero cada vez vale más la pena tomarla en cuenta porque según el nuevo motor de google llamado<a href="http://www.genbeta.com/buscadores/google-estrena-oficialmente-su-nuevo-algoritmo-caffeine"> Caffeine</a> este es uno de los factores más importantes al momento de posicionar la pagina en el buscador.<br /><br />Hay miles de factores que perjudican el tiempo de visualización promedio de una página web: Que tan pesadas son las imágenes y recursos, la cantidad de peticiones que hace la pagina, la cantidad de scripts externos que se importan, la velocidad del servidor, la presencia de consultas a la BD muy pesadas, etc.<br /><br />Podríamos estar todo el día nombrando cosas, pero como hay muchos artículos que hablan sobre optimización de consultas SQL, hosting de servidores, etc. Yo les voy a mencionar solo algunos tips que no parecen tan obvios, pero pueden ayudar bastante a disminuir el tiempo de carga de tu página.<br /><span class="fullpost"><br /><ul><li>Bajar el tamaño y calidad de todas tus imágenes de la pagina (Y utilizar la menor cantidad posible).</li><li><span style="font-weight: bold;">Comprimir códigos CSS y Javascript:</span> Comprimir los códigos tiene como inmediata consecuencia lógica que pesen muchísimo menos, y por lo tanto que sean mucho mas rápidos de descargar. Para hacer esto hay un programa muy recomendado llamado <a href="http://developer.yahoo.com/yui/compressor/">YUI Compresor</a>, este programa con un algoritmo logra eliminar todos los espacios en blanco, códigos que sobran, etc. De una página web. </li><li><span style="font-weight: bold;">Unificar tus imágenes en una sola: </span>Una de las metas para hacer más veloz la carga de tu pagina es reducir el número de request que se hacen antes de cargarla o justo al momento de cargarla, si uno tiene 5 imágenes diferentes en una misma página web, es posible unificarlas en una sola imágenes y hacer 5 request a la misma imagen, entonces, como el navegador tiene memoria cache, en realidad solo pide la imagen al servidor la primera vez y de ahí en adelante la carga directamente desde la cache. Para poder poner todo en una sola imagen, deben recorrer la imagen con una propiedad llamada backround-position: 0px 0px; (Primero el movimiento de la posición en X y luego en Y). Por ejemplo ,a siguiente imagen de la figura 1:</li></ul><div><span class="Apple-style-span" style="color: rgb(0, 0, 238);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY07rO5AfinLWfyiEBed9EqbVdEdKoWOtYpqlcEbZBCOdnktr0qzMoYjq7U1TupekUX8pQI52RgkyB68QL_-3nWWDieN6US9-CcH6S6F1nACk2AaV4utL3QZ31rfiNK2Wi6LkUrL3Q9g/s200/iconos-funciones.png" alt="" id="BLOGGER_PHOTO_ID_5501795362083554370" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 96px;" border="0" /></span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: rgb(0, 0, 238);">Figura 1</span></div><div style="text-align: center;"><span class="Apple-style-span" style="color: rgb(0, 0, 238);"><br /></span></div> Tiene 12 imágenes azules diferentes, donde cada una explica algún punto de la herramienta http://www.tucondominio.com.<br /><br />Para optimizar esto debemos realizar una sola imagen que vamos recorriendo con el <a href="http://htmlhelp.com/es/reference/css/color-background/background-position.html">backgroundposition </a>y se le pone el width y height necesario para que la imagen deseada se vea correctamente.<br /><br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xz5_c9epHvye3T67fPhbVuP914d8gKlpAHZWQ_1U9l0PuC9xlYSwYaXOEpnl25BhfjASk5pFS-dacz_i8nQZjwvuEWg2f1ArYGevvmhoM8Pb96KqUT-36i7ph3AqLZr72ckqYBLG2Q/s1600/download.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 156px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xz5_c9epHvye3T67fPhbVuP914d8gKlpAHZWQ_1U9l0PuC9xlYSwYaXOEpnl25BhfjASk5pFS-dacz_i8nQZjwvuEWg2f1ArYGevvmhoM8Pb96KqUT-36i7ph3AqLZr72ckqYBLG2Q/s200/download.jpg" alt="" id="BLOGGER_PHOTO_ID_5501798489536657330" border="0" /></a><br />Figura 2<br /></div><br />El codigo css para lograr una pagina web como la mostrada en la figura 2 es el siguiente:<br /><pre name="code" class="java"><br />.functionTitle{ font-size: 16px;font-weight: bold; padding: 0; margin: 0px;}<br />#content{ position: relative;display: block;}<br />#content ul{padding: 0; margin: 0;}<br />#content li{display: inline-table;width: 350px; margin: 0;margin-left: 50px;padding: 0; font-size: 12px;}<br />div#calendario{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');<br />float: left;width: 60px;background-position: 0px 0px;height: 80px; margin-right: 30px;}<br />div#balances{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;<br />width: 60px;background-position: 60px 0px;height: 80px; margin-right: 30px;}<br />div#votaciones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;<br />width: 60px;background-position: 182px 0px; height: 80px;margin-right: 30px;}<br />div#peticiones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;<br />width: 60px;background-position: 243px 0px; height: 80px;margin-right: 30px;}<br />div#servicios{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;<br />width: 60px;background-position: 60px 90px; height: 80px;margin-right: 30px;}<br />div#condominio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');<br />float: left;width: 60px;background-position: 182px 90px;height: 80px;margin-right: 30px;}<br />div#reglamentos{position: relative; background: url('../../images/tucondominio/iconos-funciones.png');<br />float: left;width: 60px;background-position: 243px 90px;height: 80px;margin-right: 30px;}<br />div#edificio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');float: left;<br />width: 60px;background-position: -60px 0px; height: 80px;margin-right: 30px;}<br />div#espacios<br />{position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;<br />width: 60px;background-position: 1px -80px; height: 80px;margin-right: 30px;}<br />div#cartelera<br />{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;<br />width: 60px;background-position: -60px -80px;height: 80px;margin-right: 30px;}<br />div#asociacion<br />{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;<br />width: 60px; background-position: 121px 88px;height: 80px;margin-right: 30px;}<br />div#perfil{ position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;<br />width: 60px;background-position: 121px 0px; height: 80px;margin-right: 30px;}<br />h2{ color: #F0BC60; font-size: 20px;text-transform: uppercase;<br />background: url(../../images/tucondominio/imagenes-contacto.png) no-repeat; background-position: 0px 18px;}<br /></pre><br /><br /><ul><li><span style="font-weight: bold;">Carga lazy-load de imagenes con JQuery:</span> Jquery es una librería o framework para Javascript que permite programar funcionalidades geniales con unas pocas líneas de código, uno de los “plugins” o componentes que se han desarrollado hasta el momento es llamado laztload. Este plugin permite cargar solo las imágenes de una página web que están siendo visualizadas por el navegador, es decir, si la pagina es muy larga y tiene imágenes por todo el sitio, entonces este plugin no cargará las imágenes si no haz llegado a esa parte de la pagina (haciendo scroll). Esto reduce los tiempos de carga por aunque no haz cargado muchas imágenes, google Jura que ya la pagina termino de visualizarse y lo da por terminado. El mejor ejemplo de lazyload lo consigues en la página web <a href="http://www.mashable.com/">http://www.mashable.com</a></li></ul>Para revisar el tiempo de caga de una web les recomiento <a href="http://www.selfseo.com/website_speed_test.php">esta herramienta</a> gratuita.<br /><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com0tag:blogger.com,1999:blog-1638565336393713256.post-20888918057400768892010-08-05T00:58:00.005-04:302010-08-06T00:09:36.459-04:30Posicionamiento en buscadores - Maquetacion<div>Una vez que tenemos los <a href="http://internetdeveloping.blogspot.com/2010/08/posicionamiento-en-buscadores-url.html">URL amigables</a> implementados debemos elaborar nuestras páginas utilizando <a href="http://internetdeveloping.blogspot.com/2009/09/tutorial-basico-de-css.html">CSS</a>, debemos EVITAR la utilización de tablas en la gran mayoria de nuestros diseños.<a href="http://internetdeveloping.blogspot.com/2009/09/tutorial-basico-de-css.html"> CSS es una tecnología</a> utilizada para visualizar (maquetar, dar format, colorear, etc.) de una mejor manera.</div><div><br /></div><div>Cuando google o cualquier otro buscador entra en tu pagina, no está interesado en saber si es estéticamente agradable, si es usable, ni nada por el estilo, lo único que a un buscador le importa cuando entra a tu pagina es el contenido (de que se trata la pagina, de que habla.). Cuando el robot de un buscador (por ejemplo el <a href="http://es.wikipedia.org/wiki/Googlebot">googlebot de GOOGLE</a>) entra en tu página, lo primero que hace es limpiar todos los CSS que encuentre para concentrarse únicamente en el contenido de la página. Por esta razón la utilización de tablas te perjudica porque las tablas no son ignoradas por los robots de los buscadores, sino que más bien son consideradas parte del contenido, lo que perjudica el posicionamiento de tu página en los buscadores.</div><div><br /></div><div><blockquote></blockquote><blockquote>Es importante acotar que si bien las tablas no son amigables a los buscadores, toadvía son una tecnologia importante y útil para ciertas ocaciones, y tienen propiedades tales como <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: small;"><span class="Apple-style-span" style="line-height: 15px;"></span></span><h3 class="r" style="margin: 0px; padding: 0px; font-size: medium; font-weight: normal; display: inline;"><a href="http://www.idocs.com/tags/tables/_THEAD.html" class="l" onmousedown="return clk(this.href,'','','','1','vRoVHSsdJGsw77RORNFuag','0CBkQFjAA')" style="color: rgb(17, 17, 204); cursor: pointer;"><em style="font-weight: bold; font-style: normal;">THEAD</em>,<span class="Apple-converted-space"> </span><em style="font-weight: bold; font-style: normal;">TBODY</em>, TFOOT</a></h3> que pueden resultar muy prácticas.<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: small;"><span class="Apple-style-span" style="line-height: 15px;"><button class="ws" title="" style="border-width: 0px; background-image: url(http://www.google.co.ve/images/srpr/nav_logo14.png); cursor: pointer; display: inline; margin-right: 3px; height: 14px; vertical-align: 0px; width: 14px; margin-left: 5px; opacity: 0.5; background-position: -117px -117px;"></button></span></span></blockquote></div><div><br /></div><div>Para entender más sobre maquetación en css les dejo <a href="http://internetdeveloping.blogspot.com/2009/09/tutorial-basico-de-css.html">este tutorial</a> que he realizado hace algún tiempo que explica los<a href="http://internetdeveloping.blogspot.com/2009/09/tutorial-basico-de-css.html"> conceptos basicos de CSS</a>.</div>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com3tag:blogger.com,1999:blog-1638565336393713256.post-6020074980961851602010-08-03T23:59:00.005-04:302010-08-04T00:18:05.338-04:30Posicionamiento en buscadores - URL amigable (Frendly URL)<p class="MsoListParagraphCxSpFirst" style="text-indent: -18pt;"><span lang="ES"><span class="Apple-style-span" style="font-size:medium;">¿Qué es el paso de variables por URL? Es una tecnica muy utilizada por todos los desarrollares, frameworks y entornos de desarrollo web que existen en la acutalidad. El protocolo HTTP cuenta con una serie de metodos basicos para garantizar el funcionamiento de una pagina web, uno de ellos es el metodo GET, que sirve para obtener valores de variables a partir de un URL, de esta manera si yo tengo una pagina web con una direccion (URL) como la siguiente:</span></span></p><p class="MsoListParagraphCxSpFirst" style="text-align: center; text-indent: -18pt;"></p><blockquote></blockquote><div style="text-align: center; font-weight: bold;"><span style="color: rgb(51, 51, 255);">http://www.mipagina.com/intex.php?<span style="color: rgb(153, 0, 0);">idioma</span>=es</span></div><p></p><p class="MsoListParagraphCxSpFirst" style="text-indent: -18pt;">Puedo obtener el valor de la variable "idioma" en cualquier momento, y cambiar dinamicamente, en funcion del valor de esa variable, para imprimir el valor de la variable "idioma" en el lenguaje de programacion php no hace falta mas que la siguiente linea de codigo:</p><p class="MsoListParagraphCxSpFirst" style="text-indent: -18pt; text-align: center;"></p><blockquote><span style="color: rgb(102, 0, 0); font-weight: bold;">echo $_GET["idioma"];</span><br /></blockquote><p></p><span lang="ES"><span class="Apple-style-span" style="font-size:medium;">Es muy t</span></span><span lang="ES"><span class="Apple-style-span" style="font-size:medium;">ípico de u</span></span>n programador utilizar el paso de variables por url, haciendo que este url se vuelva difícil de leer para un usuario O BUSCADOR. <br /><span class="fullpost"><br />Por ejemplo: En mi pagina <a href="http://www.recetasdecocteles.com/"><span style="" lang="ES">http://www.recetasdecocteles.com/</span></a><span style="" lang="ES"> para ver los detalles de un coctel se puede ir a cualquiera de los siguientes URL’s:</span> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt;"><span style=";font-family:Calibri;" lang="ES"><span style="">a.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><a href="http://www.recetasdecocteles.com/coctel.php?id_coctel=6"><span style="" lang="ES">http://www.recetasdecocteles.com/coctel.php?id_coctel=<span style="color: rgb(102, 0, 0); font-weight: bold;">6</span></span></a><span style="" lang="ES"><o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle" style="margin-left: 72pt; text-indent: -18pt;"><span style=";font-family:Calibri;" lang="ES"><span style="">b.<span style="font-family: "Times New Roman"; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"> </span></span></span><a href="http://www.recetasdecocteles.com/coctel/6/Cosmopolitan"><span style="" lang="ES">http://www.recetasdecocteles.com/coctel/<span style="color: rgb(102, 0, 0); font-weight: bold;">6</span>/Cosmopolitan</span></a><span style="" lang="ES"><o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle"><span style="" lang="ES"><o:p> </o:p></span></p> <p class="MsoListParagraphCxSpLast"><span style="" lang="ES">¿Notan la diferencia? ¿Si verdad? El primero de estos URL´s esta hecho a la antigua, es evidente para cualquier programador que el desarrollador hace un $_GET[“id_coctel”] para obtener el id del coctel que se desea mostrar, pero, ¿Qué pasa con el buscador? Ni siquiera sabe que coctel es el que tiene id=6, y el usuario final.. Menos!<br /></span></p><p class="MsoListParagraphCxSpLast"><span style="" lang="ES">Para solucionar eso debemos implementar URL´s como el segundo de estos ejemplos que acabo de dar, de esta manera tanto el buscador como el usuario final sabrán que ese url lleva directo a los detalles del coctel “Cosmopolitan”.</span></p><p class="MsoListParagraphCxSpLast">Uno de los principales factores tomados en cuenta por un buscador a la hora de indexar una pagina web, es el contenido de su titulo, si la palabra "Cosmopolitan" esta en el titulo de una de tus paginas, entonces google probablemente te indexe mucho mejor cuando los usuarios coloquen "Cosmopolitan" en google.</p><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com2tag:blogger.com,1999:blog-1638565336393713256.post-60500281607978848902010-08-03T18:46:00.008-04:302010-08-06T00:43:24.553-04:30Posicionamiento en buscadores (SEO)<span style="" lang="ES"><span class="Apple-style-span" style="line-height: 55px; font-size:medium;"><b><br /></b></span></span><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9yu_DutRDVsFDwVB5oljKkZtuE-Kd0MDzSgW97Uy15366m4Em8MK02_1JCUAuT7thQgW9-QJ3mfLppam9wnSIT-LHLOkGlgxZgbrWLkbmIQjq-gFTUM7upa3VG2TpVl_o6cFRDY11Zg/s1600/SeoUK15.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 193px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9yu_DutRDVsFDwVB5oljKkZtuE-Kd0MDzSgW97Uy15366m4Em8MK02_1JCUAuT7thQgW9-QJ3mfLppam9wnSIT-LHLOkGlgxZgbrWLkbmIQjq-gFTUM7upa3VG2TpVl_o6cFRDY11Zg/s200/SeoUK15.jpg" alt="" id="BLOGGER_PHOTO_ID_5501328242433564514" border="0" /></a><span style="" lang="ES">Si eres programador, arquitecto o diseñador web probablemente haz escuchado este término que está muy de moda durante los últimos años. Para una página web que quiere darse a conocer en el mercado esta vía puede ser una de sus mejores armas para publicitarse sin necesidad de un gran presupuesto.<o:p></o:p></span> <p class="MsoNormal"><span style="" lang="ES">Un buen posicionamiento en la web es una tarea de todos los involucrados en el diseño, desarrollo, e implementación de la pagina web, es necesario tomarlo en cuenta desde el mismo momento en que se empieza.</span></p><br /><span class="fullpost"><br /><p class="MsoNormal"><br /><span style="" lang="ES"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES">Para lograr un buen posicionamiento existe una técnica llamada “Optimización en buscadores” o “Search engine optimization (SEO)”, que no es más que la utilización de un mega conjunto de <b style="">mejores prácticas</b> para lograr que tu sitio web suba posiciones en un buscador (Principalmente google).<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES">Yo no soy gurú en esto, pero en varios emprendimientos que he tenido últimamente me he visto en la necesidad de aprender un poco más sobre esto, y los resultados pueden ser increíbles.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES">Para no alargarme más en este tema, quisiera dejarles las mejores prácticas que yo he logrado recolectar en mi mente para que las apliquen en sus páginas lo más rápido que puedan, ¡no hay tiempo ni visitas que perder! En este post voy a colocar solo los titulos de cada una de las secciones, y, luego, voy a ampliarlas en diferentes entradas:</span></p><p class="MsoNormal"></p><ol><li><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><a href="http://internetdeveloping.blogspot.com/2010/08/posicionamiento-en-buscadores-url.html">URL amistosos (Frendly URL’s).</a></span></b></li><li><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><a href="http://internetdeveloping.blogspot.com/2010/08/posicionamiento-en-buscadores.html">Maquetación CSS.</a></span></b></span></b></li><li><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><a href="http://internetdeveloping.blogspot.com/2010/08/posicionamiento-en-buscadores-tiempo-de.html">Tiempo de carga del sitio.</a></span></b></span></b></span></b></li><li><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><a href="http://internetdeveloping.blogspot.com/2010/08/posicionamiento-en-buscadores_06.html">Utilización correcta de las etiquetas</a><span><a href="http://internetdeveloping.blogspot.com/2010/08/posicionamiento-en-buscadores_06.html"> </a></span><a href="http://internetdeveloping.blogspot.com/2010/08/posicionamiento-en-buscadores_06.html">h1, h2, h3, Strong, etc.</a></span></b></span></b></span></b></span></b></li><li><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><a href="http://internetdeveloping.blogspot.com/2010/08/posicionamiento-en-buscadores_3129.html">Inscripción en directorios de páginas.</a></span></b></span></b></span></b></span></b></span></b></li><li><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;">Estudio de las palabras claves.</span></b></span></b></span></b></span></b></span></b></li><li><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;">Ubicacion de los codigos javascript.</span></b></span></b></span></b></span></b></span></b></li><li><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;"><b style="mso-bidi-font-weight:normal"><span lang="ES" style="font-size:12.0pt;mso-bidi-line-height:115%;font-family: "Calibri","sans-serif";mso-ascii-theme-font:minor-latin;mso-fareast-font-family: Calibri;mso-fareast-theme-font:minor-latin;mso-hansi-theme-font:minor-latin; mso-bidi-Times New Roman";mso-bidi-theme-font:minor-bidi; mso-ansi-language:ES;mso-fareast-language:EN-US;mso-bidi-language:AR-SAfont-family:";font-size:11.0pt;">Contenido del sitio.</span></b></span></b></span></b></span></b></span></b></li><li><span class="Apple-style-span" style="font-family:Calibri, sans-serif;"><span class="Apple-style-span" style="font-weight: 900; line-height: 18px;">Google webmaster toolkit.</span></span></li><li><span class="Apple-style-span" style="font-family:Calibri, sans-serif;"><span class="Apple-style-span" style="font-weight: 900; line-height: 18px;">Otras herramientas muy utiles.</span></span></li></ol><div><span class="Apple-style-span" style="font-family:Calibri, sans-serif;"><span class="Apple-style-span" style="font-weight: 900; line-height: 18px;"><br /></span></span></div><p></p><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com1tag:blogger.com,1999:blog-1638565336393713256.post-57719199141314728862009-09-09T18:09:00.007-04:302009-09-09T18:55:22.082-04:30Conceptos Básicos de CSS<p>Una hoja de estilo es un conjunto de especificaciones que declara cómo deben mostrarse los componentes de una página web, es decir, cómo debe interpretar el navegador, a efectos de presentación visual, los distintos elementos presentes en una página web. El formato de cada elemento de una página web se especifica mediante declaraciones de estilo denominadas reglas.<br /></p><p>Los estilos de css se definen en forma de clases, se supone que los estilos que definamos deben estar sincronizados con las definiciones html de la pagina web.</p><p><strong>2. Definiciones<br /></strong></p><p>Una definicion CSS se compone de tres partes:<br /></p><ol style="margin-left: 54pt;"><li>Selector (Clase o codigo)<br /></li><li>Propiedad<br /></li><li>Valor<br /></li></ol><br /><span class="fullpost"><br /><p>Una definicion simple organiza los tres componentes anteriores de acuerdo a la siguiente estructura:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >selector {propiedad: valor;}</span><br /></span></p><p>Por ejemplo, la siguiente definición dice que todos los coponents h1 de la pagina deben tener un grosor normal (de tener un grosor grande sería equivalente a que estuvieran en negritas los textos):<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >h1 { font-weight: normal; } </span><br /></span></p><p>Una definicion puede contener más de una propiedad con sus respectivos valores, separadas entre ellas por punto y coma (se considera una buena práctica añadir también punto y coma al final). Ejemplo:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >h1 { font-weight: normal; color: red;} </span><br /></span></p><p>Una definicion puede dar formato a más de un elemento o componente a la vez, separando estos mediante comas. Ejemplo:<br /></p><p style="margin-left: 72pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >h1, h2, h3, h4 { font-weight: normal; color: red; }</span><br /></span></p><p><strong>3. Declaración<br /></strong></p><p>Las definiciones de las hojas de estilo se pueden declarar en tres sitios distintos:<br /></p><ol style="margin-left: 54pt;"><li>En la página web<br /></li><li>En un archivo externo<br /></li><li>En un elemento<br /></li></ol><p><strong>En la página web<br /></strong></p><br /><p>Este tipo de declaraciones no son recomendadas ni se consideran buenas prácticas dentro de la programación web y por eso no voy a explicarlas.<br /></p><p><strong>En un elemento<br /></strong></p><p>Este tipo de declaraciones no son recomendadas ni se consideran buenas prácticas dentro de la programación web y por eso no voy a explicarlas.<br /></p><p><strong>En un archivo externo<br /></strong></p><p>Las declaraciones se escriben en un archivo de texto con extensión .css sin ningún tipo de preámbulo y deben ser referenciados al principio de las páginas web, específicamente entre los tags <head> </head>.<br /></p><p><span style="font-size:9;"><br /><span style="font-style: italic;font-size:100%;" ><link rel="stylesheet" href="estilo.css" type="text/css" /> </span><br /><br /></span></p><p>Como se puede ver, el atributo rel (relation) advierte que se trata de una hoja de estilo, href aporta el nombre (y el camino si fuera necesario) del archivo y type indica que se trata de un archivo de texto que contiene una hoja de estilo que sigue la norma CSS.<br /></p><p><strong>4. Cajas<br /></strong></p><p>Desde el punto de vista de CSS, todo lo que hay en una página web es una caja. Lo que hace un selector es identificar la caja a la que se aplica el formato.<br /></p><p>Las cajas tienen:<br /></p><ul><li>Contenido (content). El contenido de la caja: texto, imagen, etc.<br /></li><li>Relleno (padding). La distancia entre el contenido y el borde.<br /></li><li>Borde (border). El borde de la caja.<br /></li><li>Margen (margin). La distancia entre el borde y el elemento contenedor (p.e. body) u otro elemento adyacente.<br /></li></ul><p> El siguiente diagrama muestra modelo oficial de cajas de CSS según el W3C:<br /></p><p style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNlQN1TyaJwQPy1L8S6Wm2SZxlxM5GNXRrLsINfszNPGq7J3y9GgZRxQX_bn_rBaP5AAyiJxmeC4VuUtd7zrwzT8K_JJwf8W4SlrgVSbkaurgtyKdCssLcC-ZzMkpOLA9VN5KCLK0_Hg/s1600-h/1.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 287px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNlQN1TyaJwQPy1L8S6Wm2SZxlxM5GNXRrLsINfszNPGq7J3y9GgZRxQX_bn_rBaP5AAyiJxmeC4VuUtd7zrwzT8K_JJwf8W4SlrgVSbkaurgtyKdCssLcC-ZzMkpOLA9VN5KCLK0_Hg/s400/1.PNG" alt="" id="BLOGGER_PHOTO_ID_5379609239544290082" border="0" /></a></p><p>Los componentes de la caja se pueden dividir en cuatro partes: top, bottom, right y left. Por tanto, en la ilustración anterior, las siglas LM, RM, etc., significan LeftMargin, Right Margin, etc.<br /></p><p>Las hojas de estilo pueden aplicar formato (p.e. color, anchura, tipo de línea, etc.) a cualquiera de los componentes de esta caja, así como permite posicionar estas cajas en el conjunto de la página.<br /></p><p> De este modo, si queremos que un elemento muestre el borde en forma de puntos de color azul, podemos generar esta declaración:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >p { border-style: dotted; border-color: blue}</span><br /></span></p><p>A partir de lo anterior, este código en la página:<br /></p><p style="margin-left: 36pt;"><span style="font-size:8;"><span style="font-size:100%;"><span style="font-style: italic;"><p>Ejemplos de hojas de Estilo</p> </span></span><br /></span></p><p>Se mostrará así:<br /></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipYf5ic_kAvscLD2bikPkoCW7b4jfap8z58f-ojh5E3MlsWfBfY_cwZElHZ-ntnYCFKI__nmXQN8wZaFpfsb0qdjw7El1S17CHpMjKWVKTKsp-7-J_NKQpbMHnMafVMFa0ssg9vsh8jA/s1600-h/2.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 39px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipYf5ic_kAvscLD2bikPkoCW7b4jfap8z58f-ojh5E3MlsWfBfY_cwZElHZ-ntnYCFKI__nmXQN8wZaFpfsb0qdjw7El1S17CHpMjKWVKTKsp-7-J_NKQpbMHnMafVMFa0ssg9vsh8jA/s400/2.PNG" alt="" id="BLOGGER_PHOTO_ID_5379609240642746898" border="0" /></a></p><p>Si queremos ampliar el relleno entre el contenido y el borde así como tener un tamaño de punto más pequeño podemos modificar la regla anterior acudiendo a las propiedades de borde (border) y de margen (padding):<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >p { border-style: dotted; border-width: 2px; border-color: blue; padding: 15px; } </span><br /></span></p><p>Ahora, el navegador lo mostrará así:<br /></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpCq6p5WGOctECcusxnDOCKExfM6ml4meV1qM48vhC-SZts2RXpfSRSi-PfmkKED9t0ifcOy2rQcVzAXH0nkiLtXUL1SYCnm28yoKTc3GLI2SpCXO59qq0vtON3lyxRDpxILb8ePGQkA/s1600-h/3.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 50px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpCq6p5WGOctECcusxnDOCKExfM6ml4meV1qM48vhC-SZts2RXpfSRSi-PfmkKED9t0ifcOy2rQcVzAXH0nkiLtXUL1SYCnm28yoKTc3GLI2SpCXO59qq0vtON3lyxRDpxILb8ePGQkA/s400/3.PNG" alt="" id="BLOGGER_PHOTO_ID_5379609249416894674" border="0" /></a></p><p>5. Herencia<br /></p><p>Las cajas están contenidas dentro de otras cajas y heredan los estilos de la caja contenedora si no hay una regla de nivel específico. Por ejemplo, si declaramos un tipo de letra para el elemento body, todos los elementos que están dentro, como h1, h2, p, etc. heredarán este tipo de letra. En el siguiente ejemplo declaramos un color de letra para body y otro distinto para h2. De este modo, todos los elementos, excepto h2, tendrán el color declarado para body, mientras que h2 tendrá su propio color. Veamos. Primero la declaración de reglas CSS:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >body { color: blue }<br />h2 { color: red } </span><br /></span></p><p>Ahora el código html de la página:<br /></p><p><span style="font-size:9;"><span style="font-size:100%;"><span style="font-style: italic;"><h1>Esto es un elemento h1</h1> </span><br /><span style="font-style: italic;"><p>Este es un párrafo</p></span><br /><span style="font-style: italic;"><h2>Esto es h2</h2> </span><br /><span style="font-style: italic;"><p>Más texto marcado como párrafo</p> </span><br /><span style="font-style: italic;"><h3>Esto es h3</h3> </span><br /><span style="font-style: italic;"><ul> </span><br /><span style="font-style: italic;"><li>Item 1</li> </span><br /><span style="font-style: italic;"><li>Item 2</li> </span><br /><span style="font-style: italic;"><li>Item 3</li> </span><br /><span style="font-style: italic;"></ul> </span><br /><span style="font-style: italic;"><p>Apuesto a que todo es azul en esta página menos uno de los elementos</p></span></span></span></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJ7mfb0NU4I6c4eTpFZcK4D8D2ZFq6oOFocqGynpWsjrQ4S2aOJrE6f9hirbKKngyzZKPtOz3flMoSyXjRD1PGFlPepD99zerFJVqJqAcJN6eppkSPHl3C80UQxnmjNPwRNVm1r1e7Q/s1600-h/4.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 215px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJ7mfb0NU4I6c4eTpFZcK4D8D2ZFq6oOFocqGynpWsjrQ4S2aOJrE6f9hirbKKngyzZKPtOz3flMoSyXjRD1PGFlPepD99zerFJVqJqAcJN6eppkSPHl3C80UQxnmjNPwRNVm1r1e7Q/s400/4.PNG" alt="" id="BLOGGER_PHOTO_ID_5379609260838223186" border="0" /></a></p><p><strong>6. Tipos de selectores<br /></strong></p><p>Existen dos grandes categorías de selectores:<br /></p><ul><li>Elementos: son los nombres correspondientes a elementos del lenguaje (X)HTML como body, h1, p, table, etc.<br /></li><li>Nombres propios: son nombres que puede crear el autor de la hoja de estilo. De esta clase de selectores, existen, a su vez dos tipo: de clase (class) y de identidad (id). Por tanto, en realidad tenemos en total tres tipos de selectores que examinaremos a continuación.<br /></li></ul><p><strong>6.1. Selectores de elemento<br /></strong></p><p>Se declaran utilizando como selector un elemento (X)HTML, p.e.:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >h1 { color: blue } </span><br /></span></p><p>De este modo, el aspecto de todos y cada uno de los elementos que forman el lenguaje (X)HTML puede ser modificado mediante un regla. Cabe recordar que los navegadores disponen de una hoja de estilo interna que es la que otorga formato a los elementos (X)HTML cuando no hay ninguna hoja de estilo específica. Por ejemplo, aún sin hoja de estilo la mayor parte de los navegadores aplican negrita a los elementos marcados como strong, así como un tipo de letra superior + negrita a los elementosmarcados con h1, etc.<br /><br /></p><p><strong>6.2. Selectores de clase<br /></strong></p><p>Estos selectores se declaran mediante una palabra propia que asigna el autor de la hoja de estilo. Esta palabra va precedida por un punto. Por ejemplo: supongamos que se necesita una clase de selectores para formatear títulos de películas (pongamos que se trata de una web sobre cinema). El autor de la hoja de estilo puede crear el selector con el nombre tituloFilm para formatear de la misma forma los títulos de los films. Para ello, escribe esta regla:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >.tituloFilm { font-size: 1.5em; font-family: Times New Roman; color: blue;} </span><br /></span></p><p>Se aplica mediante el atributo class seguido por el nombre del selector (sin el punto). Por ejemplo, en el siguiente código fuente solo a uno de los dos elementos de párrafo (p) se le ha añadido esta clase de selector:<br /></p><p style="margin-left: 36pt;"><span style="font-size:8;"> <span style="font-style: italic;font-size:100%;" ><p class="tituloFilm">2001: Una odisea del espacio</p><br /><p>La obra de Kubrick marcó un punto de inflexión en el género de la ciencia-ficción</p> </span><br /></span></p><p> La declaración solamente afectará a uno de ellos y el resultado es que el primer párrafo tendrá un aspecto muy distinto de los demás:<br /></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeayDhToICOGjIAKxeN3re5UCzQGyJCe13AgcQEzHiPbkYDc9hrYKWu40MAZ-LXyAun_paRX8IjLy28o8dW5lKA_bprPnB78pgAawbdLUG-5UNxL-w0gE9xyX4iJXuUp14Fl4Sfmb6eA/s1600-h/5.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 62px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeayDhToICOGjIAKxeN3re5UCzQGyJCe13AgcQEzHiPbkYDc9hrYKWu40MAZ-LXyAun_paRX8IjLy28o8dW5lKA_bprPnB78pgAawbdLUG-5UNxL-w0gE9xyX4iJXuUp14Fl4Sfmb6eA/s400/5.PNG" alt="" id="BLOGGER_PHOTO_ID_5379609263943051682" border="0" /></a></p><p><strong>6.3. Selectores de identidad<br /></strong></p><p>Los selectores de identidad se nombran mediante una palabra propia precedida por el símbolo # (almohadilla). Por ejemplo:<br /></p><p style="margin-left: 72pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >#navegacion { background-color: LightGrey; } </span><br /></span></p><p>Los selectores de identidad solo se pueden aplicar a un elemento en cada página. Dicho al revés, y tomando el ejemplo anterior: en cada página solamente puede haber un elemento #navegacion (en cambio, podemos tener múltiples elementos de clase en una misma página).<br /></p><p>En este caso, hemos supuesto que queremos dar un estilo propio a la zona de navegación de cada página. Se supone que deseamos destacar la barra de navegación mediante un fondo gris y queremos que la fuente del texto en esa zona sea un poco más pequeña. La declaración sería la siguiente:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >#navegacion { background-color: LightGrey; font-size: 0.8em } </span><br /></span></p><p>El código fuente en la página sería el siguiente:<br /></p><p><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" ><div id="navegacion"><br /><ul><br /><li><a href="item1.htm">Item 1</a></li><br /><li><a href="item2.htm">Item 2</a></li><br /><li><a href="item3.htm">Item 3</a></li><br /></ul><br /></div> </span><br /></span></p><p>Se supone que Item 1, Item 2, etc., son opciones de menú. El resultado sería este: </p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBOCuSvLjf6Ek3adFALlm6NU_6ptfpUhxXHoK1Z1VqGLdwDadfnTfiudS_vW_sECCSKSsEYXLhoKm5usFk-RVCJ2BU1cy3mzAagT_tRTPGOLL3ppKHFpZvJn0qMMr5iOa_J3oSZyQiQ/s1600-h/6.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 37px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBOCuSvLjf6Ek3adFALlm6NU_6ptfpUhxXHoK1Z1VqGLdwDadfnTfiudS_vW_sECCSKSsEYXLhoKm5usFk-RVCJ2BU1cy3mzAagT_tRTPGOLL3ppKHFpZvJn0qMMr5iOa_J3oSZyQiQ/s400/6.PNG" alt="" id="BLOGGER_PHOTO_ID_5379610308584479314" border="0" /></a></p><p><strong>7. Uso de div y span<br /></strong></p><p> El lenguaje (X)HTML dispone de dos elementos con gran potencialidad cuando se utilizan junto con las hojas de estilo, y cuya característica principal, a diferencia de elementos como body, p, h1, etc., es que no poseen ningún significado intrínseco. Son los siguientes:<br /></p><ul><li>div<br /></li><li>span<br /></li></ul><p>Mientras el elemento div es de bloque, el elemento span es de línea. Recordemos que los elementos de bloque tienen un salto de línea integrado. El ejemplo más conocido es p. Un elemento de línea, por el contrario no genera ningún espacio a su alrededor, sino que se mantienen en la misma línea que lo contiene. Un buen ejemplo puede ser strong.<br /></p><p>Tanto div como span pueden utilizarse para mejorar la apariencia de una página, pero además contribuyen a añadir valor semántico a la misma.<br /></p><p><strong>7.1. div<br /></strong></p><p>En concreto, div ayuda a crear la estructurar básica de la página. Por ejemplo, podemos imaginar un sitio web cuyas páginas se estructuran en tres grandes secciones, como muestra la figura siguiente:<br /></p><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6gMXBCXyVr6GZPbEhaWOPy49d-yiea8DNIFjBq3PLzS60dTaq5Fa8AEWrI-H68kT7a0pvcv7CV0qiDPnNcmGCb5cB4vFydJBS53JDxo4XMCul7UdR4X12rv-EaWEB8eQmjZRKmmF2w/s1600-h/7.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 258px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6gMXBCXyVr6GZPbEhaWOPy49d-yiea8DNIFjBq3PLzS60dTaq5Fa8AEWrI-H68kT7a0pvcv7CV0qiDPnNcmGCb5cB4vFydJBS53JDxo4XMCul7UdR4X12rv-EaWEB8eQmjZRKmmF2w/s400/7.PNG" alt="" id="BLOGGER_PHOTO_ID_5379610309706585442" border="0" /></a></p><p>Con una estructura como la anterior, el código fuente de cada página puede contener cuatro elementos div, cada uno de ellos identificado con un<br /></p><p>atributo id diferente, de este modo:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"> <span style="font-style: italic;font-size:100%;" ><body><br /><div id="tituloPag"><br /></div><br /><div id="navegacion"><br /></div><br /><div id="contenido"><br /></div><br /><div id="piePag"><br /></div><br /></body> </span><br /></span></p><p>La estructuración anterior permitirá definir estilos para las cuatro secciones de la página sin perjuicio de aplicar estilos más específicos mediante selectores de elemento, de clase, etc. Esta estructuración facilitará el mantenimiento de los estilos del sitio y, en caso necesario, el posicionamiento de los mismos en la página.<br /></p><p><strong>7.2. span<br /></strong></p><p>El elemento span suele utilizarse también combinado con id o con class para especificar con tanto nivel de detalle el aspecto de cualquier elemento de la página. Por ejemplo, podemos desear marcar y tratar de forma distinta el apellido de una lista de nombres, para lo cual podemos usar span de este modo. Definimos un selector de clase apellido para el cual declaramos un estilo:<br /></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >.apellido { font-style: italic; font-weight: bold } </span><br /></span></p><p>Aplicamos entonces span y class a los componentes (li) de la siguiente lista:<br /></p><p><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" ><h1>Realizadores de los años 90</h1><br /><ul><br /><li>Martin <span class="apellido">Escorsese</span></li><br /><li>James <span class="apellido">Cameron</span></li><br /><li>Pedro <span class="apellido">Almodóvar</span></li><br /></ul> </span><br /></span></p><p>El resultado en el navegador será el siguiente:<br /></p><span xmlns=""><p><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHeTIE9ZgzQ2vvUG3pcjcHmEm-HQtssjj8E6G7eVVZk02YhkkoE9kXfM5WIKQBOGl6RO7m4pBRBD1m4HswYBK7JAd7X_xpUlE8CL8DirUQMYrRuHARgAuUOUYJCqVLA3Oo9-TyIWvPA/s1600-h/8.PNG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 102px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHeTIE9ZgzQ2vvUG3pcjcHmEm-HQtssjj8E6G7eVVZk02YhkkoE9kXfM5WIKQBOGl6RO7m4pBRBD1m4HswYBK7JAd7X_xpUlE8CL8DirUQMYrRuHARgAuUOUYJCqVLA3Oo9-TyIWvPA/s400/8.PNG" alt="" id="BLOGGER_PHOTO_ID_5379610320866920098" border="0" /></a><strong>8. Posicionamiento<br /></strong></p><p>Las hojas de estilo proporcionan propiedades que permiten posicionar de forma fija, absoluta o relativa (fixed, absolute, relative) las cajas en una página web. Estas propiedades, junto con los selectores de clase y de identidad que permiten identificar y clasificar las cajas respectivamente, proporcionan al diseñador un dominio total de la estructura de la página sin necesidad de recurrir, por ejemplo, al uso de tablas.<br /></p><p> A título ilustrativo, mostramos un ejemplo típico de código de estilo con indicaciones de posicionamiento:<br /></p><p style="margin-left: 36pt; font-style: italic;"><span style="font-size:100%;">#navegacion { position: absolute; top: 0; left: 0; width: 30%; }<br /></span></p><p style="margin-left: 36pt;"><span style="font-size:9;"><span style="font-style: italic;font-size:100%;" >#contenido { width: 70%; margin-left: 30%; } </span><br /></span></p><p>El código anterior generaría dos secciones como las que muestra la figura siguiente:</p><p><br /></p><p> Lo cierto es que el posicionamiento mediante CSS merece un capítulo aparte y por ello escapa a los objetivos de esta presentación. Pero no hemos querido dejar de señalar su importancia con el fin de animar a todo aquel que, precisamente, quiera avanzar en estos temas.<br /></p><p><br /></p><p><span style="font-size:16;"><strong>Buenas prácticas<br /></strong></span></p><p>1. Declarar la hoja de estilo en un archivo separado (mejor que en la hoja de estilo, salvo necesidad específica).<br /></p><p>2. Utilizar medidas relativas (tanto por ciento en lugar de píxeles, o unidades em en lugar de puntos, etc.).<br /></p><p>3. Usar elementos semánticos (h1, h2, blockquote, etc.) para organizar los contenidos de la página, no para conseguir una determinada apariencia de la misma.<br /></p><p>4. Modificar la apariencia de la página exclusivamente mediante estilos (y no con elementos o atributos desaconsejados como font, center, etc. o usando elementos fuera de lugar).<br /></p><p>5. Limitar al máximo declarar estilos dentro de elementos individuales (es decir, evitar el uso del atributo style dentro de elementos).</p></span></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com2tag:blogger.com,1999:blog-1638565336393713256.post-73763641195167147352009-09-09T08:23:00.008-04:302009-09-11T09:56:32.273-04:30Como definir una propiedad en flex actionscript<ol><li>En este artículo vamos a ver como definir una propiedad en flex, pero primero debemos conocer ¿qué es una propiedad?.</li></ol><br />Una propiedad es una variable que define a una clase, es decir, son variables que se definen al momento de crear una clase para que formen parte de esta, por ejemplo: Si definimos la clase Mesa probablemente le definamos las propiedades altura, anchura, profundidad, etc.<br /><br />Este concepto se aplica a todos los lenguajes de programación orientada a objetos, vamos a ver como sería la definición de esta clase ejemplo en actionscript:<br /><br /><span class="fullpost"><br /><pre name="code" class="java"><br /> public class Mesa<br /> {<br /> public function Mesa()<br /> {<br /> }<br /> <br /> public var profundidad: String;<br /> public var altura : Number;<br /> public var anchura : Number;<br /> <br /> }<br /></pre><br /><br />Otra cosa que debemos saber es la utilizacion de los metodos get y set para tener mucho mas control sobre las propiedades de una clase.<br /><br />¿Qué son los metodos get y set?<br />En el lenguaje de la programacion orientada a objetos se estila mucho la utilización de metodos que te permitan asignar y obtener valores a las propiedades, para explicar mejor les explico implementando los metodos get y set para la clase mesa:<br /><br /><pre name="code" class="java"><br /> public class Mesa<br /> {<br /> public function Mesa()<br /> {<br /> }<br /> <br /> private var _color : String;<br /> private var _altura : Number;<br /> private var _anchura : Number;<br /> <br /> public function get color() : String<br /> {<br /> return this._color;<br /> }<br /> <br /> public function set color(value : String) : void<br /> {<br /> this._color = value;<br /> }<br /> <br /> public function get altura() : String<br /> {<br /> return this._altura;<br /> }<br /> <br /> public function set altura(value : String) : void<br /> {<br /> this._altura = value;<br /> }<br /> <br /> public function get anchura() : Number<br /> {<br /> return this._anchura;<br /> }<br /> <br /> public function set anchura(value : String) : void<br /> {<br /> this._anchura = value;<br /> }<br /> }<br /></pre><br /><br />¿Qué ventajas tiene utilizar los métodos get set?<br /><ol><li>Puedo controlar el acceso a las variables de la clase, por ejemplo pudiera no definir un metodo "set" para una de las variables y de esta manera cualquier instancia de este tipo de clase tendria esa variable de solo lectura.</li><li>Puedo colocar propiedades calculadas, por ejemplo cuando en un arreglo hacemos arreglo.length, a nosotros nos devuelve el numero de elementos del arreglo pero en realidad lo que hace la clase es recorrer todos los items y los cuenta para luego decirnos cuantos fueron. En esta clase Mesa un ejemplo de propuedad calculada seria la propiedad "volumen", que viene siendo la multiplicacion de ancho * alto * profundidad.<br /></li><li>Puedo realizar acciones cuando cambie la propiedad. Como la unica manera de modificar el varlor de esta variable es a través del metodo set, entonces puedo contruir el metodo con sentencias extra o validaciones antes de asignar el valor recibido a la variable, por ejemplo:</li></ol><br /><br /><pre name="code" class="java"><br /> public function set altura(value : String) : void<br /> {<br /> if(value>0)<br /> this._altura = value;<br /> }<br /></pre><br /><br />En este caso solo asignamos el valor introducido por el usuairo a esta varible, en el caso en que sea mayor a cero, despues de todo, una altura no puede ser menor que 0, ya que sino la mesa no se visualizaria.<br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com0tag:blogger.com,1999:blog-1638565336393713256.post-67466703237487026652009-07-12T18:01:00.013-04:302010-08-03T23:58:23.870-04:30Como hacer la pagina web perfecta<style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <!--[endif]--><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:trackmoves>false</w:TrackMoves> <w:trackformatting/> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowplaceholdertext>false</w:AlwaysShowPlaceholderText> <w:donotpromoteqf/> <w:lidthemeother>EN-US</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> <m:mathpr> <m:mathfont val="Cambria Math"> <m:brkbin val="before"> <m:brkbinsub val="--"> <m:smallfrac val="off"> <m:dispdef/> <m:lmargin val="0"> <m:rmargin val="0"> <m:defjc val="centerGroup"> <m:wrapindent val="1440"> <m:intlim val="subSup"> <m:narylim val="undOvr"> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[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]--><style> <!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0in; margin-right:0in; margin-bottom:10.0pt; margin-left:0in; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; margin-top:0in; margin-right:0in; margin-bottom:10.0pt; margin-left:.5in; mso-add-space:auto; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0in; margin-right:0in; margin-bottom:0in; margin-left:.5in; margin-bottom:.0001pt; mso-add-space:auto; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0in; margin-right:0in; margin-bottom:0in; margin-left:.5in; margin-bottom:.0001pt; mso-add-space:auto; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0in; margin-right:0in; margin-bottom:10.0pt; margin-left:.5in; mso-add-space:auto; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.0in 1.0in 1.0in; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:690767173; mso-list-type:hybrid; mso-list-template-ids:607409016 281313448 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l0:level1 {mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-.25in;} @list l0:level2 {mso-level-number-format:alpha-lower; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-.25in;} @list l1 {mso-list-id:1192494811; mso-list-type:hybrid; mso-list-template-ids:104623368 483525440 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l1:level1 {mso-level-start-at:0; mso-level-number-format:bullet; mso-level-text:-; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-.25in; font-family:"Calibri","sans-serif"; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} @list l2 {mso-list-id:1880513535; mso-list-type:hybrid; mso-list-template-ids:-1151434424 67698707 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l2:level1 {mso-level-number-format:roman-upper; mso-level-tab-stop:none; mso-level-number-position:right; text-indent:-.25in;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} --> </style><!--[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:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0in; 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-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin;} </style> <![endif]--><!--[if gte mso 9]><xml> <o:shapedefaults ext="edit" spidmax="1027"> </xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout ext="edit"> <o:idmap ext="edit" data="1"> </o:shapelayout></xml><![endif]--><style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <!--[endif]--><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:trackmoves>false</w:TrackMoves> <w:trackformatting/> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowplaceholdertext>false</w:AlwaysShowPlaceholderText> <w:donotpromoteqf/> <w:lidthemeother>EN-US</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> <m:mathpr> <m:mathfont val="Cambria Math"> <m:brkbin val="before"> <m:brkbinsub val="--"> <m:smallfrac val="off"> <m:dispdef/> <m:lmargin val="0"> <m:rmargin val="0"> <m:defjc val="centerGroup"> <m:wrapindent val="1440"> <m:intlim val="subSup"> <m:narylim val="undOvr"> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[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]--><style> <!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0in; margin-right:0in; margin-bottom:10.0pt; margin-left:0in; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; margin-top:0in; margin-right:0in; margin-bottom:10.0pt; margin-left:.5in; mso-add-space:auto; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0in; margin-right:0in; margin-bottom:0in; margin-left:.5in; margin-bottom:.0001pt; mso-add-space:auto; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0in; margin-right:0in; margin-bottom:0in; margin-left:.5in; margin-bottom:.0001pt; mso-add-space:auto; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0in; margin-right:0in; margin-bottom:10.0pt; margin-left:.5in; mso-add-space:auto; 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:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.0in 1.0in 1.0in; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:690767173; mso-list-type:hybrid; mso-list-template-ids:607409016 281313448 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l0:level1 {mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-.25in;} @list l0:level2 {mso-level-number-format:alpha-lower; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-.25in;} @list l1 {mso-list-id:1192494811; mso-list-type:hybrid; mso-list-template-ids:104623368 483525440 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l1:level1 {mso-level-start-at:0; mso-level-number-format:bullet; mso-level-text:-; mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-.25in; font-family:"Calibri","sans-serif"; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} @list l2 {mso-list-id:1880513535; mso-list-type:hybrid; mso-list-template-ids:-1151434424 67698707 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l2:level1 {mso-level-number-format:roman-upper; mso-level-tab-stop:none; mso-level-number-position:right; text-indent:-.25in;} ol {margin-bottom:0in;} ul {margin-bottom:0in;} --> </style><!--[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:0in 5.4pt 0in 5.4pt; mso-para-margin-top:0in; mso-para-margin-right:0in; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0in; 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-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin;} </style> <![endif]--><!--[if gte mso 9]><xml> <o:shapedefaults ext="edit" spidmax="1027"> </xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout ext="edit"> <o:idmap ext="edit" data="1"> </o:shapelayout></xml><![endif]--><span style="" lang="ES-VE"><span style="font-size:85%;">En esta oportunidad quiero explicar varios conceptios mientras desarrollo una aplicación para la creacion de encuestas o examenes en linea. En cada tutorial separado explicare más detalladamente cada uno de los puntos de esta entrada, ¿Que vamos a aprender mientras creamos esta aplicación? Muy interesante, voy a enseñarles todo lo que yo utilizo a la hora de crear una página web, las mejores prácticas a mi humilde criterio</span>:<br /><br /><o:p></o:p></span> <p class="MsoNormal"><span style="" lang="ES-VE">A la hora de crear la página vamos a tener las siguientes premisas fundamentales:<o:p></o:p></span></p> <p class="MsoListParagraphCxSpFirst" style="text-indent: -0.25in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style="">-<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><b style=""><span style="" lang="ES-VE">Pensar todo el tiempo en el usuario:</span></b><span style="" lang="ES-VE"> Vamos a evitar cualquier actividad extra para el usuario, crear ayudas en todo momento, prevenir en lugar de corregir, darle velocidad a la pagina, interfaz minimalista, etc.<o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -0.25in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style="">-<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><b style=""><span style="" lang="ES-VE">La simplicidad no tiene nada que ver con el tamaño:</span></b><span style="" lang="ES-VE"> Tú puedes tener la página más grande del mundo pero que siga siendo muy simple desde todo punto de vista (arquitectura, organización, usabilidad, etc.)<o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -0.25in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style="">-<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><b style=""><span style="" lang="ES-VE">Estandarizar los procesos:</span></b><span style="" lang="ES-VE"> Hay actividades que son muy repetitivas, hay que tratar de estandarizarlas o incluso tratar de automatizarlas para que cada vez se hagan mas rápido y sin errores.<o:p></o:p></span></p> <p class="MsoListParagraphCxSpLast" style="text-indent: -0.25in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style="">-<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><b style=""><span style="" lang="ES-VE">Patrones de diseño:</span></b><span style="" lang="ES-VE"> Todos los problemas que se nos puedan presentar a la hora de crear una página web ¡ya se le presentaron a otra persona!, busca en internet, utiliza los patrones de diseño, tal vez trabajemos mas al principio pero luego estaremos volando y sin equivocaciones.</span></p> <p class="MsoNormal"><b style=""><span style="" lang="ES-VE"><o:p> </o:p></span></b></p><br /><span class="fullpost"><br /><p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">1.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo diseñar una página con maquetación CSS?<o:p></o:p></span></b></p> <p class="MsoNormal"><span style="" lang="ES-VE">Primero vamos a maquetar la pagina en contenedores </span></p><div> para utilizar estándares de CSS, así vamos a poder diseñar una página pensando en la información y el contenido y luego le daremos un diseño creando hojas de estilos que tendrán clases que se les aplicaran a los contenedores que definimos, algo así:<o:p></o:p></div> <p class="MsoNormal" style="text-align: center;" align="center"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWcAG2TDuvRg0FRcjZCVM5CSucrM1L5S4VyPtaBeTH2loFQ7PgCK7Ezh3LLhMucwd3a8fph3MiZJHMbXDIR9hJfvzKYxQR5tgImUohdCnMM0h6xLDDDr5aPvGjGG-E-Ep06s5NuwPWQ/s1600-h/1.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 362px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWcAG2TDuvRg0FRcjZCVM5CSucrM1L5S4VyPtaBeTH2loFQ7PgCK7Ezh3LLhMucwd3a8fph3MiZJHMbXDIR9hJfvzKYxQR5tgImUohdCnMM0h6xLDDDr5aPvGjGG-E-Ep06s5NuwPWQ/s400/1.JPG" alt="" id="BLOGGER_PHOTO_ID_5357708308712886498" border="0" /></a></p> <p class="MsoNormal"><span style="" lang="ES-VE">Fíjense que la pagina web HTML solo contiene contenedores de información que no tienen ningún diseño (la cabecera de la pagina, el contenido y el pie de la pagina), cuando se le aplica la capa de la derecha (la hoja de estilos) los contenedores cambian de color, tipo de letra, color de letra, sangrías para el texto, etc. Cuando nosotros queramos podemos cambiar la hoja de estilos y nuestra aplicación se verá muy diferente pero seguirá teniendo la misma estructura e información.<o:p></o:p></span></p> <p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">2.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo utilizar plantillas para poder compartir la misma cabecera, menú y pie en todas las paginas sin tener que copiar y pegar el código?<o:p></o:p></span></b></p> <p class="MsoNormal"><!--[if gte vml 1]><v:shape id="Object_x0020_2" spid="_x0000_s1026" type="#_x0000_t75" style="'position:absolute;margin-left:1.45pt;margin-top:1.25pt;" wrapcoords="0 0 353 21088 21308 21088 21661 20765 21661 5191 21308 323 21308 0 0 0" gfxdata="UEsDBBQABgAIAAAAIQC75UiUBQEAAB4CAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbKSRvU7DMBSF dyTewfKKEqcMCKEmHfgZgaE8wMW+SSwc27JvS/v23KTJgkoXFsu+P+c7Ol5vDoMTe0zZBl/LVVlJ gV4HY31Xy4/tS3EvRSbwBlzwWMsjZrlprq/W22PELHjb51r2RPFBqax7HCCXIaLnThvSAMTP1KkI +gs6VLdVdad08ISeCho1ZLN+whZ2jsTzgcsnJwldluLxNDiyagkxOquB2Knae/OLUsyEkjenmdzb mG/YhlRnCWPnb8C898bRJGtQvEOiVxjYhtLOxs8AySiT4JuDystlVV4WPeM6tK3VaILeDZxIOSsu ti/jidNGNZ3/J08yC1dNv9v8AAAA//8DAFBLAwQUAAYACAAAACEArTA/8cEAAAAyAQAACwAAAF9y ZWxzLy5yZWxzhI/NCsIwEITvgu8Q9m7TehCRpr2I4FX0AdZk2wbbJGTj39ubi6AgeJtl2G9m6vYx jeJGka13CqqiBEFOe2Ndr+B03C3WIDihMzh6RwqexNA281l9oBFTfuLBBhaZ4ljBkFLYSMl6oAm5 8IFcdjofJ0z5jL0MqC/Yk1yW5UrGTwY0X0yxNwri3lQgjs+Qk/+zfddZTVuvrxO59CNCmoj3vCwj MfaUFOjRhrPHaN4Wv0VV5OYgm1p+LW1eAAAA//8DAFBLAwQUAAYACAAAACEABIUMyXIHAAAyRQAA HwAAAGNsaXBib2FyZC9kcmF3aW5ncy9kcmF3aW5nMS54bWzsm01v2zgQhu8L7H8QdF2ktj5sKUad AvU2vQRbI273zlKULYSiBJJxnf31O0NSluPGUds02y7KSyKFw+HwFSnP42FevtrVPNgyqapGzMPo xTgMmKBNUYn1PPzw/vIsDwOliSgIbwSbh3dMha8ufv/tJZmtJWk3FQ3Ag1AzMg83Wrez0UjRDauJ etG0TEBb2ciaaLiV61EhySfwXPNRPB5PRzWpRHjRu/qTaBLcyuobXPGG3rBiQcSWKHDJ6ezwLy5G Tp/umczE9q1sV+1SYuT0r+1SBlUxD0E5QWqQKBy5BmcGt6OjXuvewa6UNdo3ZRnsjJc7/Gl8sJ0O KPwxyidZksOToNAWj7MoG8dulM07228yBkFjMAGLJEqTOM07izcDXiA4GwRcHASmWgxLbD+faRp1 U71mFNbGmrMgdSGDHtihm3PXWTm5jmZ7Muqhme9jJrNWKv2WNXWAF/NQQkhmTZHtldI2js7EPIgu FL1bmRnq3eumuMO5foTf8DCl5ouGm0dBBN00ch7qMLCXCw13bqpc6ZW+4wy7Fqxc2gUBV9fghIMs 85CJsw8rfA4Qb2/CtzwCPYKayCs7DF/D5uNhADbvycfVP/PwPErTMSwpCMaYMHIlXssbWAsh+NaV cLdgsoGhYFMtbwWF+Udm8i4KBZ6iHP3cMIn7G7adaVcNr4rLinMM3mxYtuAy2BIYjevIhXzPyowa 6LuWlYTCMv+jFmdc20XGyFEDI7aBqqMGqno5QCejjNMDQ4HLuJcmnWQYcEB+eX1QFKdP0uvTLRKv D4ri9El7faIki6Z+AeGuQlWcQJMDgfI4N68Hv4JQFSfQtBcojnNYQP4VBCsIVXECZQcCZZBreIFw i6EqTqC8FwjVMZ/kfouhKk6g8wOBppPMv6RN6oOq2IzoILU0SSrKZRcQ1dKmVkZK2aea6uzvN5BB VlIbgAhUrRecEcj6XL6qLzSrW0jjGKaj2gxknDBRLIkkx2lr78tl0aZHny7fKrZqkQBsc5dPqy4n 5uKalYBGCDAhPvejPJNQysQ+1zTWaFVCVrrvmAx3dPbYlZUlhLPvHA933vcwIzei71xXopEPOejT 49LaG1ncrEFYy02P0FPW0dMlbz7RDZF6FixlQ5lSQTp1efPXYRQA32ScWvgDpkoTB397jJpAIpRM HUACTU4MP56mqBJCW2BoLjAjxPckqv0y9hTlKeqARZ+VMj1FOW4/QeGeorovNk4I5ClqQCBPUQMC eYoaEMhT1IBAnqIGBHpuitowUjD5nzPUozRj8GoDcdmv8LGuYqgPeQTLcfjtviVLhLLPMOsL+Ow0 ZrmKQjeMjeA+3P0IzIJamK3HPYRZ2VMxK83yaRK7KpzHLF+sCn2xyr5gbAUPXzHwnagvVhlRbDm2 08dj1sAnuMesAYE8Zg0I5DFrQCCPWQMCecwaEOi5MatsGu0xqy9I/aSYdf4YZnVnEL+9mgW1KjzW CCVGKO+5g4wJVLPO4UwGnoaE9nhiima+mOWPBP5KRyZ9McsXs+4dxv3aM7eesgYyHE9ZAwJ5yhoQ yFPWgECesgYE+g6UZf4JxGRGjx4OrJm4/cKi1gMen3xE8P9e3voXAAD//+yXTXPaMBCG/4pG104m 2NjgMDGH0KaXTIcJTe8bWQZPZJmRFAr99d2VhE2YaU+91ReQ8erV7qMPXgn3LOvlPSzqTlOTNdWx 5G2jO8PpZyt2spUrZdgBVMmVS/jt8v62j/dt605Khtbed/Kf+rDZrw09i2+HtUHlkucTzjS0suSP qvspdmDcgq1NJ6S1LLsjbR9OPcM4g4qNasfatBTW1TXDXPN8nibTlLNTyadFPp+lRZCRR8cEBiRJ Np1MCs4ERmBAms9iDWelvbHuq+xaRo2S15jailKLiXkQcHiyLqR0Do8VhxrdceOrdseHrjpRfq/4 jWUbp1YdosPKQYtdZ0ounAkpKus2gR0sKlmvgxS2nrGjAr0tudQ3L5uY7xCiDipBHKwF8xSk1Vbj 9HCGMd/hdfOr5HdJlk1wVEzAh0h40g/mDYFw1HaNjo8YssOhGr1dv2uB9Se+4JiFRaWkIJ03aXCI JMU2lWc71VSPjVL+4U/L5EOUH5W5017WIHANfGr1jXJxtuDqhYTwQtirF8IOOJCTn4XIg1LBZjqg yXC+KXn47/kQlMhnOvA5L5KRD0GJfLKBTzKdJ7NxAdGuIioRUH4BqEgLfzyMK4ioRECzAVCaFriA xiMIVxBRiYDmF4Dm2XQ8o/0fF1GJgIoBENHx/+TjFiMqEdDdBaAZ2r5xi9EhTVSCI7qwlt6YEq6w gHr76VGawWramx9f0EE2xqFTxhPLtm6lJKDrmwQv5pYCrwlSO7oBOD+O15C6WoOBa9c6SEXj7HsM Dvndys3+WYroq88WOl4ncEfo/kaScpr2q9sICIG5BLtqd1DJcEnJ8bj1CWOSfY8AhQRJqEbf2mtH gY8W9qwdMo/x1FXWNWbcd45m+G+d+x5+5H92z7pVYqE68SarFegDWF/h1sB+14jP4ODyefkbAAD/ /wMAUEsDBBQABgAIAAAAIQDhUTcfzwYAAOYbAAAaAAAAY2xpcGJvYXJkL3RoZW1lL3RoZW1lMS54 bWzsWc1v3EQUvyPxP4x8b7PfzUbdVNnNbgNt2ijZFvU4a8/a04w91sxs0r2h9oiEhCiIA5W4cUBA pVbiUv6aQBEUqf8Cb2ZsryfrkLSNoILmkLWff/O+35uvy1fuxQwdECEpT3pe/WLNQyTxeUCTsOfd Go8urHpIKpwEmPGE9Lw5kd6V9fffu4zXfEbTCcciGEckJggYJXIN97xIqXRtZUX6QMbyIk9JAt+m XMRYwasIVwKBD0FAzFYatVpnJcY08daBo9KMhgz+JUpqgs/EnmZDUIJjkH5zOqU+Mdhgv64Rci4H TKADzHoe8Az44ZjcUx5iWCr40PNq5s9bWb+8gteyQUydMLY0bmT+snHZgGC/YWSKcFIIrY9a3Uub BX8DYGoZNxwOB8N6wc8AsO+DpVaXMs/WaLXez3mWQPZxmfeg1q61XHyJf3NJ526/3293M10sUwOy j60l/Gqt09poOHgDsvj2Er7V3xgMOg7egCy+s4QfXep2Wi7egCJGk/0ltA7oaJRxLyBTzrYq4asA X61l8AUKsqHILi1iyhN1Uq7F+C4XIwBoIMOKJkjNUzLFPuTkAMcTQbEWgNcILn2xJF8ukbQsJH1B U9XzPkxx4pUgL599//LZE3R0/+nR/Z+OHjw4uv+jZeSM2sJJWB714tvP/nz0MfrjyTcvHn5RjZdl /K8/fPLLz59XA6F8FuY9//Lxb08fP//q09+/e1gB3xB4UoaPaUwkukEO0S6PwTDjFVdzMhGvNmIc YVoesZGEEidYS6ngP1SRg74xxyyLjqNHn7gevC2gfVQBr87uOgrvRWKmaIXka1HsALc5Z30uKr1w TcsquXk8S8Jq4WJWxu1ifFAle4ATJ77DWQp9M09Lx/BBRBw1dxhOFA5JQhTS3/g+IRXW3aHU8es2 9QWXfKrQHYr6mFa6ZEwnTjYtBm3RGOIyr7IZ4u34Zvs26nNWZfUmOXCRUBWYVSg/Jsxx41U8Uziu YjnGMSs7/DpWUZWSe3Phl3FDqSDSIWEcDQMiZdWYmwLsLQX9GoaOVRn2bTaPXaRQdL+K53XMeRm5 yfcHEY7TKuweTaIy9gO5DymK0Q5XVfBt7laIfoc44OTEcN+mxAn36d3gFg0dlRYJor/MhI4ltGqn A8c0+bt2zCj0Y5sD59eOoQE+//pRRWa9rY14A+akqkrYOtZ+T8Idb7oDLgL69vfcTTxLdgik+fLE 867lvmu53n++5Z5Uz2dttIveCm1XrxvsotgskeMTV8hTytiemjNyXZpFsoR5IhgBUY8zO0FS7JjS CB6zvu7gQoHNGCS4+oiqaC/CKSyw655mEsqMdShRyiVs7Ay5krfGwyJd2W1hW28YbD+QWG3zwJKb mpzvCwo2ZrYJzeYzF9TUDM4qrHkpYwpmv46wulbqzNLqRjXT6hxphckQw2XTgFh4ExYgCJYt4OUO 7MW1aNiYYEYC7Xc79+ZhMVE4zxDJCAcki5G2ezlGdROkPFfMSQDkTkWM9CbvFK+VpHU12zeQdpYg lcW1ThCXR+9NopRn8CJKum6PlSNLysXJEnTY87rtRttDPk573hT2tPAYpxB1qdd8mIVwGuQrYdP+ 1GI2Vb6IZjc3zC2COhxTWL8vGez0gVRItYllZFPDfMpSgCVaktW/0Qa3npcBNtNfQ4vmKiTDv6YF +NENLZlOia/KwS5RtO/sa9ZK+UwRsRcFh2jCZmIXQ/h1qoI9AZVwNGE6gn6BczTtbfPJbc5Z0ZVP rwzO0jFLI5y1W12ieSVbuKnjQgfzVlIPbKvU3Rj36qaYkj8nU8pp/D8zRc8ncFLQDHQEfDiUFRjp eu15XKiIQxdKI+qPBCwcTO+AbIGzWPgMSQUnyOZXkAP9a2vO8jBlDRs+tUtDJCjMRyoShOxAWzLZ dwqzejZ3WZYsY2QyqqSuTK3aE3JA2Fj3wI6e2z0UQaqbbpK1AYM7nn/ue1ZBk1Avcsr15vSQYu61 NfBPr3xsMYNRbh82C5rc/4WKFbOqHW+G53Nv2RD9YbHMauVVAcJKU0E3K/vXVOEVp1rbsZYsbrRz 5SCKyxYDsVgQpXDeg/Q/mP+o8Jm9bdAT6pjvQm9FcNGgmUHaQFZfsAsPpBukJU5g4WSJNpk0K+va bOmkvZZP1ue80i3kHnO21uws8X5FZxeLM1ecU4vn6ezMw46vLe1EV0Nkj5cokKb5RsYEpurWaRun aBLWex7c/ECg78ET3B15QGtoWkPT4AkuhGCxZG9xel72kFPgu6UUmGZOaeaYVk5p5ZR2ToHFWXZf klM60Kn0FQdcsekfD+W3GbCCy24/8qbqXM2t/wUAAP//AwBQSwMEFAAGAAgAAAAhAJxmRkG7AAAA JAEAACoAAABjbGlwYm9hcmQvZHJhd2luZ3MvX3JlbHMvZHJhd2luZzEueG1sLnJlbHOEj80KwjAQ hO+C7xD2btJ6EJEmvYjQq9QHCMk2LTY/JFHs2xvoRUHwsjCz7DezTfuyM3liTJN3HGpaAUGnvJ6c 4XDrL7sjkJSl03L2DjksmKAV201zxVnmcpTGKSRSKC5xGHMOJ8aSGtHKRH1AVzaDj1bmIqNhQaq7 NMj2VXVg8ZMB4otJOs0hdroG0i+hJP9n+2GYFJ69elh0+UcEy6UXFqCMBjMHSldnnTUtXYGJhn39 Jt4AAAD//wMAUEsBAi0AFAAGAAgAAAAhALvlSJQFAQAAHgIAABMAAAAAAAAAAAAAAAAAAAAAAFtD b250ZW50X1R5cGVzXS54bWxQSwECLQAUAAYACAAAACEArTA/8cEAAAAyAQAACwAAAAAAAAAAAAAA AAA2AQAAX3JlbHMvLnJlbHNQSwECLQAUAAYACAAAACEABIUMyXIHAAAyRQAAHwAAAAAAAAAAAAAA AAAgAgAAY2xpcGJvYXJkL2RyYXdpbmdzL2RyYXdpbmcxLnhtbFBLAQItABQABgAIAAAAIQDhUTcf zwYAAOYbAAAaAAAAAAAAAAAAAAAAAM8JAABjbGlwYm9hcmQvdGhlbWUvdGhlbWUxLnhtbFBLAQIt ABQABgAIAAAAIQCcZkZBuwAAACQBAAAqAAAAAAAAAAAAAAAAANYQAABjbGlwYm9hcmQvZHJhd2lu Z3MvX3JlbHMvZHJhd2luZzEueG1sLnJlbHNQSwUGAAAAAAUABQBnAQAA2REAAAAA "> <v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtmlclip1\01\clip_image003.png" title=""> <o:lock ext="edit" aspectratio="f"> <w:wrap type="through"> </v:shape><![endif]--><!--[if !vml]--><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSZ6zrTwnyOSNNxi1100-oSXAbHmdP4P9HB0v_G9qwBwsTtdYn6wJ6nN58ElxMNQfkzuBcl4VEvJukUbqkP3GjXoTK2r6Dy8gOTBlXLOja-Nd640NMqgPEjAQExvSCFntS7fvhz70Dw/s1600-h/2.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 124px; height: 135px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSZ6zrTwnyOSNNxi1100-oSXAbHmdP4P9HB0v_G9qwBwsTtdYn6wJ6nN58ElxMNQfkzuBcl4VEvJukUbqkP3GjXoTK2r6Dy8gOTBlXLOja-Nd640NMqgPEjAQExvSCFntS7fvhz70Dw/s400/2.JPG" alt="" id="BLOGGER_PHOTO_ID_5357708428983524210" border="0" /></a><!--[endif]--><span style="" lang="ES-VE">La idea es crear una archivo “header.php” que será la cabecera de las paginas y lo importaremos cada vez que queramos renderizar o mostrar una página en especifico, de esta manera si realizamos un cambio en esta cabecera no tendremos que ir pagina por pagina realizando el cambio en todas las cabeceras sino que cambiaríamos el archivo header.php y el cambio se reflejaría en todas las paginas. Lo mismo ocurriría en el caso del menú (menu.php) y el pie de la pagina (footer.php).<o:p></o:p></span></p> <p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">3.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo evitar recargar la pagina tan a menudo?<o:p></o:p></span></b></p> <p class="MsoNormal"><span style="" lang="ES-VE">Con las nuevas tecnologías es posible recargar contenedores específicos de las páginas web en vez de recargar toda la pagina, de esta manera aumentamos mucha facilidad de uso y tiempo de espera. Además recargamos menos al servidor ya que realizamos menos peticiones y por ultimo vamos a ver cómo termina siendo incuso ¡Mucho más fácil que antes! Trabajar de esta manera. Nosotros utilizaremos el framework de javascript llamado JQuery para lograr estas funcionalidades.<o:p></o:p></span></p> <p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">4.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo estructurar nuestra página de una manera sencilla y organizada para que siga siendo simple a pesar de que ser bastante grande?<o:p></o:p></span></b></p> <p class="MsoNormal"><span style="" lang="ES-VE">Luego de buscar y probar la gran mayoría de los frameworks de desarrollo yo decidí crear mi propia arquitectura para mis páginas web, siguiendo algunos estándares y patrones de diseño pero sin volverla tan compleja y abstracta como me parece que ocurre en el caso de frameworks existentes como symfony.<o:p></o:p></span></p> <p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">5.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo dividir en capas toda la pagina web para lograr la independencia de cada una de ellas?<o:p></o:p></span></b></p> <p class="MsoNormal"><span style="" lang="ES-VE">En la arquitectura que diseñe la pagina web se divide en 6 capas donde cada una de ellas es completamente independiente, es decir, si quieres cambiar de base de datos solo tienes que cambiar la capa de comandos, si quieres cambiar el diseño de la pagina, solo tienes que cambiar la capa de diseño, etc.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE">En mi arquitectura yo planteo las siguientes capas: <o:p></o:p></span></p> <p class="MsoListParagraphCxSpFirst" style="text-indent: -0.5in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style=""><span style=";font-family:";font-size:7;"> </span>I.<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><span style="" lang="ES-VE">Diseño: Renderiza los datos, les da colores, tamaño, etc. Puras hojas de estilo.<o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -0.5in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style=""><span style=";font-family:";font-size:7;"> </span>II.<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><span style="" lang="ES-VE">Vista: La estructura de los datos, contiene la información y no contienen prácticamente ninguna lógica.<o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -0.5in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style=""><span style=";font-family:";font-size:7;"> </span>III.<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><span style="" lang="ES-VE">Cliente: Creación de componentes DatePicker, Slider, etc. Validaciones, Evitar recargo de la pagina, ayuda de usuario, etc.<o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -0.5in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style=""><span style=";font-family:";font-size:7;"> </span>IV.<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><span style="" lang="ES-VE">Lógica: Transacciones (crudManager), Plantillas (templateManager), Permisos de usuario, Validaciones, etc.<o:p></o:p></span></p> <p class="MsoListParagraphCxSpMiddle" style="text-indent: -0.5in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style=""><span style=";font-family:";font-size:7;"> </span>V.<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><span style="" lang="ES-VE">Comando: Enlace entre el modelo y la lógica para independizar a la página de la estructura de los datos.<o:p></o:p></span></p> <p class="MsoListParagraphCxSpLast" style="text-indent: -0.5in;"><!--[if !supportLists]--><span style="" lang="ES-VE"><span style=""><span style=";font-family:";font-size:7;"> </span>VI.<span style=";font-family:";font-size:7;"> </span></span></span><!--[endif]--><span style="" lang="ES-VE">Modelo: Puede ser una BD, unos web services, o cualquier otra forma de obtener y guardar datos.<o:p></o:p></span></p> <p class="MsoNormal" style="text-align: center;" align="center"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWDGxKZ_o38eZpMmWKo2u-bK3Cgw89N7WiZgkMSpE6bt6czMQGQV_bAnSUqQQ9E8ha2n33jDgGs5nxKLdRhP0gx_8E2w9iQh3ViJZZGP7Ttnn3xCNb9ha0UO60bknY9SuIz8w96mr5Q/s1600-h/3.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 377px; height: 266px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWDGxKZ_o38eZpMmWKo2u-bK3Cgw89N7WiZgkMSpE6bt6czMQGQV_bAnSUqQQ9E8ha2n33jDgGs5nxKLdRhP0gx_8E2w9iQh3ViJZZGP7Ttnn3xCNb9ha0UO60bknY9SuIz8w96mr5Q/s400/3.JPG" alt="" id="BLOGGER_PHOTO_ID_5357708542806920722" border="0" /></a><span style="" lang="ES-VE"><o:p></o:p></span></p> <p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">6.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo crear una ayuda de usuario sobre la pagina?<o:p></o:p></span></b></p> <p class="MsoNormal"><span style="" lang="ES-VE">El problema con las ayudas es que siempre son una sección aparte de la aplicación y el usuario ni siquiera sabe cómo encontrar la ayuda para lo que está buscando. Otra de las ventajas que te da estructurar tu pagina en contenedores </span></p><div> es que tienes la posibilidad de mostrarlos y ocultarlos fácilmente. De esta manera si nosotros consideramos que la pagina actual que estamos creando debemos colocar un espacio de ayuda entonces podemos crear un contenedor con esa información y en cualquier momento el usuario podrá ocultarlo y continuar como si nada. Por ejemplo:<o:p></o:p></div><p></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebEDmvfi8OTvV-tpS6eoXrGzARi1Uwz9pjjdjPYxHJ65RBuAKioiY_b8ffVc9bKNEhYvkuJ2xoBPUu64aIOzm2_VdJ8WPugzRYkEdeJK_N2WUAEjwr8OQR-YWrWNJPXg4jVnivss9og/s1600-h/4.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 129px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebEDmvfi8OTvV-tpS6eoXrGzARi1Uwz9pjjdjPYxHJ65RBuAKioiY_b8ffVc9bKNEhYvkuJ2xoBPUu64aIOzm2_VdJ8WPugzRYkEdeJK_N2WUAEjwr8OQR-YWrWNJPXg4jVnivss9og/s400/4.JPG" alt="" id="BLOGGER_PHOTO_ID_5357708671953413538" border="0" /></a><span style="" lang="ES-VE"><o:p></o:p></span></p> <p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">7.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo prevenir en lugar de corregir?<o:p></o:p></span></b></p> <p class="MsoNormal"><span style="" lang="ES-VE">La parte más importante a la hora de crear una web es como se plantea la interacción del usuario con la aplicación, la mayoría de las paginas utilizan los componentes estándares de formulario que tiene HTML para lograr esta interaccion, pero lamentablemente estos componentes son muy limitados y en un gran porcentaje de las veces dificultan el uso de la pagina. Para eso en la arquitectura que estamos planteando hay un espacio dedicado a la creación o importación de nuevos componentes javascript. ¿Porque introducir una fecha en un TextInputo en una seria de ComboBoxs? Lo más natural seria un calendario, ¿no les parece? Existen una serie de componentes como NumericStepper, Slider, DatePicker, etc. Que hacen que la experiencia de usuario se vuelva mucho más simple y práctica y además evitan muchísimas validaciones hacia nosotros porque no dejan espacio para los errores. Y si además colocas tremenda ayuda, ¡es excelente!<o:p></o:p></span></p> <p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">8.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo hacer una página segura?<o:p></o:p></span></b></p> <p class="MsoNormal"><span style="" lang="ES-VE">Lo primero que debemos tomar en cuenta a la hora de hacer una página segura es que la capa de javascript<span style=""> </span>no puede ser tomada en cuenta para la seguridad en casi nada, ¿Por qué? Porque puede ser desactivada en cualquier momento por los hackers, incluso los navegadores más viejos ni siquiera soportan javascript. ¿Qué quiere decir esto? Pues muy fácil, las validaciones de datos que hacemos en javascript también las debemos hacer en PHP o en cualquier lenguaje que estemos usando del lado del servidor. Pero OJO: Igual debemos seguir haciendo las validaciones del lado del cliente para no recargar al servidor y para seguir con nuestra premisa de PREVENIR en lugar de CORREGIR.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE">Para hacer nuestra arquitectura segura yo decidí dividir toda la interacción con los datos en transacciones, si se fijan en la capa lógica existe el crudManager y el infoManager. El primero de estos se encarga de eliminar, modificar y insertar los datos. El segundo se encarga solo de consultaros, por lo tanto requieren permisos de usuario diferentes para ser utilizados. Los mismo ocurre con el templateManager que se encarga de armar las vistas que el usuario va a visualizar, si el usuario no tiene permisos para visualizarlas entonces lo lleva a una página de error.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE">¿Cómo se cargan los permisos? En variables de sesión, en la arquitectura que vamos a utilizar ya existe un modulo de autenticación que solo debemos realizarle pequeños cambios para adaptarlo a nuestra página, al momento de iniciar sesion te otorga permisos de usuario que luego tu controlas para acceder a las vistas y transacciones desde el crudManager, infoManager y templateManager.<o:p></o:p></span></p> <p class="MsoListParagraph" style="text-indent: -0.25in;"><!--[if !supportLists]--><b style=""><span style="" lang="ES-VE"><span style="">9.<span style=";font-family:";font-size:7;"> </span></span></span></b><!--[endif]--><b style=""><span style="" lang="ES-VE">¿Cómo realizar los CRUD sin recargar la pagina?<o:p></o:p></span></b></p> <p class="MsoNormal"><span style="" lang="ES-VE">Es demasiado común en una página web querer insertar, modificar, eliminar y consultar valores de una entidad en especifico (Persona, Paciente, Profesor, etc.). Con unos pocos conceptos es posible estandarizar estos procedimientos para hacerlos mas fáciles de programar y además se logra a la misma vez evitar recargar la pagina tan a menudo. Si estamos utilizando la arquitectura COCOAS (De la que he hablado durante toda esta entrada) solo debemos crear dos contenedores, uno para visualizar la información y otro para modificarla, por ejemplo: En el siguiente ejemplo se tiene una lista de anuncios publicada por un condominio, y se quiere modificar un anuncio en particular:<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE">Este sería el código del contenedor para visualizar los datos:<br /></span></p><pre name="code" class="html"><br /><div id="showPost1" class="post"><br /> <h1 class="title"><a href="#">Racionamiento de agua</h1><br /> <p>Los dias lunes y martes no entrará agua al edficicio de la calle, por lo tanto se racionará el agua del tanque en el siguiente horario: Lunes: de 8am a 12pm - de 2pm a 8pm. | Martes: de 8am a 12pm - de 2pm a 8pm.</p><br /> <p style="text-align:right;"><br /> <a id="detallesLink" class="editLink" name="Post1>" href="#">editar</a><br /> <a class="deleteLink" name="Post" href="crudManager.php?action=delete_anuncio&codigo=1">Eliminar</a><br /> </p><br /> </div><br /></pre><br />Y este seria el contenedor para modificar los datos:<br /><pre name="code" class="html"><br /><div id="editPost1" class="post" style="display:none;"><br /> <form action="crudManager.php" method="post" id="anuncioForm"><br /> <input name="action" type="hidden" value="edit_anuncio" /><br /> <input name="codigo" type="hidden" value="1" /><br /> <h1 class="title">Titulo: <input name="titulo" type="text" value=” Racionamiento de agua” /></h1><br /> <textarea name="mensaje" cols="" rows="" style="width:500px; height:100px;"> Los dias lunes y martes no entrará agua al edficicio de la calle, por lo tanto se racionará el agua del tanque en el siguiente horario: Lunes: de 8am a 12pm - de 2pm a 8pm. | Martes: de 8am a 12pm - de 2pm a 8pm.</textarea><br /> <p style="text-align:right;"><input name="" type="submit" value="Guardar" /></p><br /> </form><br /> </div><br /></pre><br />Si estamos trabajando con COCOAS, debemos decirle cual contenedor es el que se utiliza para mostrar la información y cual contenedor es el que se utiliza para editar la información, esto lo hacemos con el campo ID de cada uno de los contenedores, colocando la palabra “<span style="color:red;">show</span>” o “<span style="color:red;">edit</span>” (segun el caso) seguida de el <span style="color: rgb(112, 48, 160);">nombre de la entidad</span> que estamos modificando en este caso “<span style="color: rgb(112, 48, 160);">Post</span>” seguida de el <span style="color: rgb(112, 48, 160);">código de la entidad</span> especifica que estamos modificando (can caso de que estemos en una lista de items de la misma entidad).<br /><br />Siempre el contenedor que se creó para modificar la entidad debe tener por defecto en sus estilos la propiedad <b style="">display:none</b> para que la pagina se desempeñe mucho mejor, esta propiedad le dice al contenedor que por defecto el debe estar oculto.<br /><br />Luego debemos irnos al vinculo que hemos definido que se le debe hacer click para modificar la entidad (ocultar el contenedor de visualizar y mostrar el contenedor de modificar) y colocarle en su propiedad class el valor “editLink”,<span style=""> </span>y en su propiedad name el nombre de la entidad y código que este vinculo modifica (en este caso “Post1”) de esta manera COCOAS sabrá lo que tiene que hacer.<br /><br />Por último debemos irnos al vinculo que hemos definido que se le debe hacer click para eliminar la entidad y colocarle en su propiedad class el valor “deleteLink” y de esta manera COCOAS sabrá lo que tiene que hacer.<br /><br />Al final los dos contenedores se verían de la siguiente manera, por supuesto que no se verían al mismo momento, sino que al presionar “editar” se ocultaría el primer contenedor y se mostraría el segundo contenedor:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdu5cxLbKUfWgtMFoAM9LvyLO-4hr8bdus1VH0GPb_RTnVYqhAlC-Dql_plJNEe4d852RnqB5f_F_5RDGzBcgBV5NiRLVW2D1e3Hj16nUdg1ndfmzK6ICpwn_8RzLkYuGcoA7xBdH5mw/s1600-h/5.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 79px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdu5cxLbKUfWgtMFoAM9LvyLO-4hr8bdus1VH0GPb_RTnVYqhAlC-Dql_plJNEe4d852RnqB5f_F_5RDGzBcgBV5NiRLVW2D1e3Hj16nUdg1ndfmzK6ICpwn_8RzLkYuGcoA7xBdH5mw/s400/5.JPG" alt="" id="BLOGGER_PHOTO_ID_5357708798540112114" border="0" /></a><span style="" lang="ES-VE"><o:p></o:p></span><p></p> <p class="MsoNormal"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-LtXH0cO2aSXqNZV82imqG8rkvWX3DnwyedvEkAG0Nhcp5EQs63vLH3RHXmu8w7cXO7ANWAAWVLTMxxxF7mf9s9aXJCSmRgJn8jnrjT2a_xd0buIsFRr_gXcXY9amgLvRs9pP7TFVg/s1600-h/6.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 103px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-LtXH0cO2aSXqNZV82imqG8rkvWX3DnwyedvEkAG0Nhcp5EQs63vLH3RHXmu8w7cXO7ANWAAWVLTMxxxF7mf9s9aXJCSmRgJn8jnrjT2a_xd0buIsFRr_gXcXY9amgLvRs9pP7TFVg/s400/6.JPG" alt="" id="BLOGGER_PHOTO_ID_5357708925992912194" border="0" /></a><span style="" lang="ES-VE"><o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE"><o:p> </o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE">Bueno en las siguientes entradas explicare mucho mejor cada uno de los puntos de los que he hablado en esta oportunidad ya que todavía nos queda muuuuuucho de que hablar y buenas prácticas que seguir para conseguir mucha rapidez, de todas maneras para los que saben leer ingles aquí les dejo un pequeño documento donde explica un poco más detallada la arquitectura COCOAS.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="ES-VE"><o:p></o:p></span></p></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com4tag:blogger.com,1999:blog-1638565336393713256.post-12298522256500131242009-07-11T19:45:00.003-04:302009-07-11T19:56:00.286-04:30Nuevo enfoque de Cairngorm - Universal MindLa gente de <a href="http://umcairngorm.riaforge.org/">Universal Mind</a> ha desarrollado un nuevo enfoque para el framework de contruccion de aplicaciones flex llamado <a href="http://en.wikipedia.org/wiki/Cairngorm_%28Flex_framework%29">cairngorm</a>. Ahora existe la posibilidad, por ejemplo, de controlar el flujo de los datos y llamadas a servicios agregando nuestros propios callBacks para recibir los datos.<br /><br />¿Como se come esto? Pues muy sencillo!<br />Si antes siempre tenias que recibir la respuesta de un servicio desde el comando para luego insertarla en el modelo y que el modelo actualizara la vista. Ahora no!! Ahora simplemente podriamos decidir donde recibir la respuesta del servicio, incluso en la misma vista! Y no tendriamos que pasar por el modelo ni nada por el estilo.<br /><span class="fullpost"><br />Aqui les dejor una explicacion de la nueva manera de trabajar del cairngorm de universal mind que ha publicado mi gran amigo Rene Ramirez: <a href="http://developyourdream.blogspot.com/2009/06/cairngorm-universal-mind-extension.html">http://developyourdream.blogspot.com/2009/06/cairngorm-universal-mind-extension.html</a><br /><br />Para los que no conozcan Cairngorm todavia aqui les dejo este link donde intento explicarlo mucho mas a fondo: <a href="http://internetdeveloping.blogspot.com/2009/04/empezando-con-cairngorm-desarrollando.html">http://internetdeveloping.blogspot.com/2009/04/empezando-con-cairngorm-desarrollando.html</a><br /><br />Tambien he detallado la explicacion de cairngorm durante la realizacion de un ejemplo sencillo:<br /><a href="http://internetdeveloping.blogspot.com/2009/05/ejemplo-cairngorm-agregar-contacto.html">http://internetdeveloping.blogspot.com/2009/05/ejemplo-cairngorm-agregar-contacto.html</a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com0tag:blogger.com,1999:blog-1638565336393713256.post-5130183009762241342009-06-12T18:49:00.001-04:302009-06-12T10:21:18.829-04:30Drag and Drop muy fácil con un DataGrid Flex<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOMGgFMcqAiR6DIqejO_D3t6jm6rKYXkNXWMK1G9c9I9iGmOQqpYTQk_2t9dQ-5Dd5aGZn3CLWVQ3UAwWk4fLLI6sNPF_SFX6oZ3sTp7VmmEVpLyerUgsLGAvV7D-AFMrvtqriW0UDA/s1600-h/datagrid.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 196px; height: 101px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOMGgFMcqAiR6DIqejO_D3t6jm6rKYXkNXWMK1G9c9I9iGmOQqpYTQk_2t9dQ-5Dd5aGZn3CLWVQ3UAwWk4fLLI6sNPF_SFX6oZ3sTp7VmmEVpLyerUgsLGAvV7D-AFMrvtqriW0UDA/s320/datagrid.JPG" alt="" id="BLOGGER_PHOTO_ID_5346452817993224066" border="0" /></a><br />En el siguiente ejemplo vamos a ver como lograr de manera muy fácil la funcionalidad de pasar datos de un <a href="http://livedocs.adobe.com/flex/2/langref/mx/controls/DataGrid.html">DataGrid </a>hacia otro o viceversa con solo realizar el típico "<a href="http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/">drag and drop</a>" del ratón (presionando el botón izquierdo del ratón sobre el dato que queremos pasar y arrastrándolo hasta el <a href="http://livedocs.adobe.com/flex/2/langref/mx/controls/DataGrid.html">DataGrid </a>que deseamos que reciba la información). Para empezar la explicación vamos a ver en funcionamiento del ejemplo que vamos a realizar:<br /><span class="fullpost"><br /><embed pluginspage=" http://www.macromedia.com/go/getflashplayer" src="http://ejemplos.net78.net/swf/SimpleDragAndDrop.swf" height="460" width="362"></embed><br />Existen varias maneras de realizar esta funcionalidad, algunas de ellas requieren mayor dedicación y programación por parte del desarrollador y otras no, así como también las que requieren mayor programación también permiten un mayor control. En este voy a explicar la mas sencilla y fácil de implementar.<br /><br />Todos los objetos que heredan de la clase <a href="http://livedocs.adobe.com/flex/201/langref/mx/controls/listClasses/ListBase.html">ListBase </a>(El <a href="http://livedocs.adobe.com/flex/2/langref/mx/controls/DataGrid.html">DataGrid </a>tambien, por heredar de esta clase) tienen 5 propiedades muy interesantes que permiten contemplar la funcionalidad Drag and Drop de una manera muy sencilla:<br /><br /><ol><li><span style="font-weight: bold;">dragEnabled</span>: Esta propiedad especifica si el componente <a href="http://livedocs.adobe.com/flex/201/langref/mx/controls/listClasses/ListBase.html">ListBase </a>debe permitir que al seleccionar un dato se pueda iniciar el arrastre de la informacion hacia cualquier componente ListBase (incluyendo este mismo componente).</li><li><span style="font-weight: bold;">dropEnabled</span>: Esta propiedad especifica si el componente <a href="http://livedocs.adobe.com/flex/201/langref/mx/controls/listClasses/ListBase.html">ListBase </a>debe permitir que un dato entrante pueda ser soltado sobre este componente.</li><li><span style="font-weight: bold;">dragMoveEnabled</span>: Esta propiedad dice si cuando un objeto es arrastrado a partir de este componente se debe borrar la copia original que inicio el arraste. Es decir, si esta propiedad es falsa y hacemos un drag and drop de algun item de la lista, se mantendrá una copia del item en el lugar donde si inicio el movimiento.</li><li><span style="font-weight: bold;">allowMultipleSelection</span>: Con esta propiedad podemos realizar el drag and drop de multiples objetos (items) en un mismo movimiento.</li><li><span style="font-weight: bold;">allowDragSelection</span>: Esta propiedad nos indica si es posible realizar una seleccion sobre un item para realizar el drag and drop. Si es falsa no podremos seleccionar ningun item para realizar un drag and drop sobr el.</li></ol>Entonces si en este ejemplo nosotros queremos realizar un drag and drop de el datagrid superior al datagrid inferior entonces debemos colocarle al datagrid superior las siguientes propiedades dragEnabled, allowDragSelection y dragMoveEnables como true. Y en el caso del datagrid inferior debemos colocarle la propiedad dropEnabled como true.<br /><br />Si nosotros quisieramos podríamos reemplazar uno de los <a href="http://livedocs.adobe.com/flex/2/langref/mx/controls/DataGrid.html">DataGrid </a>utilizados en este ejemplo por cualquier otro componente que herede de la clase <a href="http://livedocs.adobe.com/flex/201/langref/mx/controls/listClasses/ListBase.html">ListBase</a> (El List, TitleList, Tree, etc.).<br /><br />Bueno eso es todo! Como pueden ver es demasiado simple y fácil de realizar. Cualquier pregunta, si es que las tienen, no duden en realizarlas en los comentarios del post que yo siempre estoy pendiente de responderlas! Para descargar el código fuente del ejemplo presiona <a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=SimpleDragAndDrop.rar">click aquí</a>.<br /><a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=SimpleDragAndDrop.rar" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com6tag:blogger.com,1999:blog-1638565336393713256.post-84695428917893775562009-06-09T08:58:00.005-04:302009-06-09T09:48:22.498-04:30Listado de metatags y sus utilidades en flex<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZS_iRbDYKsvSD1Dj3j_GBszEQo7c35t8EBH8bU-dVsqsBSCcq5JelG1scDrvsHLtUiCzthDY3-ljx0pok6DsKOiFZgCDPm-0V2S3j3oPp0OIyHty1GBU9unlrcjevu-sMhRgfrT7SXQ/s1600-h/FLEXmETADATA.PNG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 199px; height: 128px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZS_iRbDYKsvSD1Dj3j_GBszEQo7c35t8EBH8bU-dVsqsBSCcq5JelG1scDrvsHLtUiCzthDY3-ljx0pok6DsKOiFZgCDPm-0V2S3j3oPp0OIyHty1GBU9unlrcjevu-sMhRgfrT7SXQ/s320/FLEXmETADATA.PNG" alt="" id="BLOGGER_PHOTO_ID_5345326500307847698" border="0" /></a><br /><p><strong><span style="color: rgb(0, 0, 0);"><span style="font-weight: normal;">En el articulo anterior "</span></span></strong><a href="http://internetdeveloping.blogspot.com/2009/06/utilizando-metadata-para-describir-las.html">Utilizando metadata para describir las clases en Flex</a><strong><span style="color: rgb(0, 0, 0);"><span style="font-weight: normal;">" explique un poco la <a href="http://es.wikipedia.org/wiki/Metadato">definicion de Metadata</a> y di un ejemplo de su tipico uso para expecificar a flex un poco más información acerca de los datos, clases y propiedades que estamos utilizando en nuestra aplicación. En este caso voy a describirles un ejemplo de uso y explicación para cada tipo de metatag que podemos definir en Flex, sin hablar mucho más vamos a empezar con los metatags:</span><br /></span></strong></p><p><strong><span style="color: rgb(0, 0, 0);">[ArrayElementType]</span><br /></strong>Para decir que tipo de datos debe contener el ArrayCollection. Por ejemplo:</p><em style="color: rgb(0, 0, 0);">[ArrayElementType("String")]</em><br />public var newStringProperty:Array;<br /><span class="fullpost"><br /><p><strong style="color: rgb(0, 0, 0);">[Bindable] </strong><br />Para utilizar una propiedad como “data binding expression”, este tipo de propiedades son utilizadas para que cuando flex detecte un cambio en ellas actualice todos los destinos que tienen esta propiedad asiganada con el típico “propertyChangeEvent”. Por ejemplo:<br /><br /><span style="color: rgb(0, 0, 0);">[Bindable]</span><br />public var personas:ArrayCollection</p><br /><p> <mx:DataGrid id="dg" dataProvider="{ personas }"><br /></mx:DataGrid></p><br /><p><strong>[DefaultProperty] </strong><br />Se refiere a la propiedad por defecto del componente, esta “defaultProperty” es la que se setea en mxml cuando se coloca entre los tags del componente. Por ejemplo:<br /><mx:DataGrid id="dg" dataProvider="{ personas }"><br /><mx:columns><br /><mx:DataGridColumn dataField="email" headerText="Email"/><br /></mx:columns><br /></mx:DataGrid><br />En este caso la defaultProperty del mx.Control.Datagrid seria un objeto de tipo Columns, que a su vez tiene una defaultProperty de tipo ArrayCollection de DatagridColumn.</p><p><strong>[Deprecated] </strong><br />Se utiliza para que el compilador arroje un warning para notificar al usuario que esa propiedad o clase esta obsoleta.</p><p><br /><strong>[Embed] </strong><br />Le dice al compilador que incluya el recurso dentro de la película al momento de compilarla. Un recurso puede ser una imagen, sonido, video, icono, etc. Por ejemplo:<br /><span style="color: rgb(0, 0, 0);">[Embed(source="com/assets/icono.png")]</span><br />private var icon:Class;</p><p><br /><strong>[Event] </strong><br />Se utiliza para definir un evento que una clase arroja. Por ejemplo, el mx.Control.Button tiene como definido el evento MouseEvent.Click como metadato. De esta manera cuando estamos definiendo un botón en mxml podemos colocar un handler al evento click.<br /><mx:Button click="buttonClickHandler()" /></p><p><br /><strong>[Exclude]</strong><br />Se utiliza para decirle al compilador que no muestre esta propiedad al momento de autocompletar, es como decir que el atributo es privado, por ejemplo:<br /><span style="color: rgb(0, 0, 0);">[Exclude(name="label", kind="property")]</span></p><p><br /><strong>[ExcludeClass]</strong><br />Le dice al compilador que excluya la clase al momento de autocompletar, es como decir que la clase es privada.</p><p><br /><strong>[IconFile] </strong><br />Es el icono que va a tener la clase (componente). Por ejemplo: </p><span style="color: rgb(0, 0, 0);">[IconFile("MyButton.png")]</span><br />public class MyButton extends Button<br />{<br />...<br />}<br /><p><strong>[Inspectable] </strong><br />Se utiliza para decirle al compilador que posibles valores puede tener una propiedad, de que tipo debe ser (String, int, Number, etc.) cual debe ser su valor por defecto, etc. Para más información revisar el siguiente vinculo: <a href="http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=metadata_141_11.html">http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=metadata_141_11.html</a></p><p><br /><strong>[InstanceType] </strong><br />Para decir de que tipo debe ser una propiedad, por ejemplo (Cobra sentido en el caso de que la propiedad haya sido definida como una interfaz o una clase muy general):</p><br />// Define a deferred property for the top component.<br /><span style="color: rgb(0, 0, 0);">[InstanceType("mx.controls.Label")]</span><br />public var topRow:IDeferredInstance;<br /><p><strong>[NonCommittingChangeEvent] </strong><br />Este metatag le especifica a flex que no debe lanzar validadiones de data (commits típicos del data binding) en el evento especificado, por ejemplo:</p><br />[Event(name="change", type="flash.events.Event")]<br />class MyText extends UIComponent {<br />...<br /><br />[Bindable(event="valueCommit")]<br />[NonCommittingChangeEvent("change")]<br />function get text():String {<br /> return getText();<br />}<br />function set text(t):void {<br /> setText(t);<br /> // Dispatch events.<br />}<br />}<br /><p>En este caso cuando el texto (propiedad text) cambie no va a ocurrir ninguna validación, pero en el caso de que se presione la tecla Enter, ocurrirá un valueCommit y entonces si se dispararan las validaciones de datos.</p><p><br /><strong>[RemoteClass]</strong><br />Especifica que esta clase va mapeada contra un objeto en el servidor, le dice a flex que debe incluir la información de la case al momento de serializarla. Por ejemplo: </p><br />[RemoteClass(alias="com.CctVO")] <br />public class Carrito {<br /> public var id : String; <br /> [Inspectable(defaultValue<em>="sin pagar",</em>enumeration="sin pagar,pagado")] <br /> public var estado : String; <br /> public var productos : ArrayCollection;<br /><br /> [Transient] public function get total() : int <br /> { <br /> return productos.length; <br /> }<br />}<br /><p><strong>[Style] </strong><br />Para especificar que una propiedad es de tipo “estilo” para un componente, por ejemplo:</p><br />[Style(name="verticalAlign", type="String", enumeration="bottom,middle,top", inherit="no")]<br /><strong>[Transient]</strong><br /><p>Le dice a flex que debe ignorar cierta propiedad a la hora de serializar una clase para ser mapeada contra un objeto del lado del servidor. Por ejemplo:</p><br />[RemoteClass(alias="com.CctVO")] public class Carrito { public var id : String; public var estado : String; public var productos : ArrayCollection; [Transient] public function get total() : int { return productos.length; }<br />}<br /><p>En este caso no se debe enviar la propiedad “total” al servidor ya que es un atributo calculado en ejecución. Para ver mas información hacer click en el siguiente vinculo: <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html">http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html</a></p><br />Esos son todos los metatags que conozco hasta la fecha que se peuden definir a la hora de programar en flex, espero les sean de mucha utilidad asi como para mi lo han sido. Cualquier cosa les dejo un <a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=MetadatosFlex1.0.pdf">documento en PDF con las definiciones y ejemplo que he dado en este artículo</a>.<br /><br /><a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=MetadatosFlex1.0.pdf" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com1tag:blogger.com,1999:blog-1638565336393713256.post-46534957456352586262009-06-04T11:01:00.007-04:302009-06-09T09:52:15.819-04:30Utilizando metadata para describir las clases en Flex<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6ZlAC9jvRqccRJkchAZeynKpq2z667GK4lDPhWInxziLws4UhMVyJl_bfGJRnKHj6CbKH3xqXiMuHbj22FgGZndRBtbLiYL4w3hyphenhyphenKRE7yPQFGdUCF-Alf5pS7HezegC8LIlFxN1KsQ/s1600-h/FLEXmETADATA.PNG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 199px; height: 128px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp6ZlAC9jvRqccRJkchAZeynKpq2z667GK4lDPhWInxziLws4UhMVyJl_bfGJRnKHj6CbKH3xqXiMuHbj22FgGZndRBtbLiYL4w3hyphenhyphenKRE7yPQFGdUCF-Alf5pS7HezegC8LIlFxN1KsQ/s320/FLEXmETADATA.PNG" alt="" id="BLOGGER_PHOTO_ID_5345322694259493138" border="0" /></a><br />Si nos vamos a la <a href="http://es.wikipedia.org/wiki/Metadato">definicion de wikipedia</a> la metadata no es mas que información "sobre la data", es decir, es describir como es la data. Una metadata esta compuesta de una serie de metatags, donde cada uno de estos ultimos se encarga de describir alguna caracteristica de la clase. En un metadato podemos decile al flex que tipos de datos debe contener un ArrayCollection, si una imagen se debe cargar dentro de la pelicula SWF o cargarla remotamente al momento de ejecutar la pelicula, cuales son los posibles valores que puede tomar una propiedad, etc. Supongamos, en el siguiente ejemplo, que tenemos la clase "Carrito" que viene definida de la siguiente manera:<br /><span class="fullpost"><br /><pre name="code" class="java"><br />package<br />{<br />import mx.collections.ArrayCollection;<br /><br />public class Carrito<br />{<br />public var id : String;<br />public var estado : String;<br />public var productos : ArrayCollection;<br /><br /> public function get total() : int<br /> {<br /> return productos.length;<br /> }<br />}<br />}<br /></pre><br />Esta clase no tiene ningun tipo de "Metatag"y lo unico que conocemos de ella es que tiene tres atributos, sus tipos y sus nombres. Ahora supongamos que queremos utilizar este objeto como un "objeto remoto" para utilizarlo en algun lenguaje del lado del servidor como java, php, c#, etc. Para eso debemos decirle al compilador que este objeto esta representado del lado de java y que debe conservar la informacion de la clase al momento de serializar, para eso utilizamos el <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html"><span style="font-weight: bold;">metatag</span><span style="font-weight: bold; color: rgb(0, 0, 153);"><span style="font-weight: bold;"> </span><span style=";font-family:arial;font-size:100%;" >[</span></span><span style=";font-family:arial;font-size:100%;" ><samp style="font-weight: bold; color: rgb(0, 0, 153);" class="codeph">RemoteClass</samp><span style="font-weight: bold; color: rgb(0, 0, 153);">]</span></span></a>. Tambien debemos decirle entonces que la propiedad "total" no debe ser enviada al servidor por tratarse de una propiedad calculada (seria como por ejemplo la edad, al pasar la fecha de nacimiento se puede calcular la edad), para excluir propiedades de ser enviadas para el servidor utilizamos el <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html"><span style="font-weight: bold;">metatag </span></a><span style="font-size:85%;"><span style="font-weight: bold; color: rgb(0, 0, 153);"><a href="http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html">[Transient]</a>. </span><span style="color: rgb(0, 0, 153);font-size:100%;" ><span style="color: rgb(0, 0, 0);">Ahora supongamos que queremos definir que el estado de el carrito solo puede ser o "pagado" o "sin pagar", para eso debemos utilizar el <a href="http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=metadata_141_11.html"><span style="font-weight: bold;">metatag</span></a></span></span><span style="font-weight: bold; color: rgb(0, 0, 153);"><a href="http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=metadata_141_11.html"> [Inspectable]</a> </span><span style="color: rgb(0, 0, 0);font-size:100%;" >y definir dentro de el los dos valores que puede tomar ese atributo. Con estas tres definiciones la clase nos quedaría de la siguiente manera:<br /><pre name="code" class="java"><br />package<br />{<br />import mx.collections.ArrayCollection;<br /><br />[RemoteClass(alias="com.CctVO")]<br />public class Carrito<br />{<br /> public var id : String;<br /><br /> [Inspectable(<samp class="codeph">defaultValue</samp><i>="sin pagar",</i><samp class="codeph">enumeration="sin pagar,pagado"</samp>)]<br /> public var estado : String;<br /><br /> public var productos : ArrayCollection;<br /><br /> [Transient]<br /> public function get total() : int<br /> {<br /> return productos.length;<br /> }<br />}<br />}<br /></pre></span></span><br />Este es un gran ejemplo de metadatos que podemos utilizar en flex. Si quieres conocer mas sobre los metadatos de flex te invito a entrar e mi articulo "<a href="http://internetdeveloping.blogspot.com/2009/06/listado-de-metatags-y-sus-utilidades-en.html">Listado de metatags y sus utilidades en flex</a>" donde explico de manera mucho más detallada todas las posibles descripciones que podemos realizarle a una clase al momento de programarla. Cualquier pregunta no duden en escribirla en los comentarios de este articulo.<br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com2tag:blogger.com,1999:blog-1638565336393713256.post-60088939943150312822009-06-03T18:36:00.014-04:302009-06-04T19:16:19.446-04:30Extendiendo de el SuperTitleWindow para que todas tus ventanas tengan "Cerrar" y "Aceptar" de forma nativa<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPPuO5cHDexZe20MUcsVb4-9AXIkyAP_2792qpfy0n6ma5grX3M0-xaJiROZ6JGv9xFucu-JSEfXpmyQM8TRp-H26DVeG2v6snOfJXqb2QzZZ0vwNoXtsIejAmhy3y8ykhTNe7RIgiA/s1600-h/SuperTitleWindow.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 86px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPPuO5cHDexZe20MUcsVb4-9AXIkyAP_2792qpfy0n6ma5grX3M0-xaJiROZ6JGv9xFucu-JSEfXpmyQM8TRp-H26DVeG2v6snOfJXqb2QzZZ0vwNoXtsIejAmhy3y8ykhTNe7RIgiA/s200/SuperTitleWindow.JPG" alt="" id="BLOGGER_PHOTO_ID_5343622945918817282" border="0" /></a><br />Desde que empece mi aprendizaje en el desarrollo de aplicaciones con flex, he tenido la necesidad de crear ventanas emergentes con un formato especifico, todas ellas debian tener un botón de "Aceptar" y "Cancelar" para cerrar la ventana en el momento que el usuario lo creyera conveniente. En este ejemplo vamos a ver como se puede estantadrizar el comportamiento de todas las ventanas emergentes de una aplicacion apartir de la clase SuperTitleWindow.cs que tiene inmerso el siguiente comportamiento:<br /><ol><li>Metodo "Aceptar" cuando se presiona el botón "Enter" del teclado.</li><li>Metodo "Cancelar" cuando se presiona el boton "ESC" del teclado.</li><li>Metodo "Limpiar Pantalla" cuando se presionan las teclas "shift" + "Delete".<br /></li><li>Botón cerrar en la parte superior derecha de la ventana (al estilo windows).</li><li>Obliga a definir el foco inicial del mouse dentro que se utilizara al desplegarse la ventana.</li><li>Permite modificar la logica a realizar una vez despachado el evento "Cerrar" o "Aceptar".</li></ol><br /><span class="fullpost"><br />Para que se entienda un poco mejor vamos a ver un ejemplo de ventana emergente que herede del SuperTitleWindow.<br /><embed pluginspage=" http://www.macromedia.com/go/getflashplayer" src="http://ejemplos.net78.net/flex/supertitlewindow/prueba.swf" width="420" height="200"></embed><br />Si observamos el codigo de esta ventana vamos a notar unas pequeñas particularidades con respecto a las ventanas tradicionales:<br /><br /><span class="fullpost"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhyphenhyphen1jpcPgE89Fvx1SJG3XNSrYifpODU21H3RUH63edJb4UE53CCxU3YeUjDn-R5IMdZJPx_b-hHzsV4liK6ia_8hmxf5X64qbvSMGOcWl3h4J2eyyzWAAQL22YQgcNSkE7wgkSTjXLA/s1600-h/code.gif"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhyphenhyphen1jpcPgE89Fvx1SJG3XNSrYifpODU21H3RUH63edJb4UE53CCxU3YeUjDn-R5IMdZJPx_b-hHzsV4liK6ia_8hmxf5X64qbvSMGOcWl3h4J2eyyzWAAQL22YQgcNSkE7wgkSTjXLA/s320/code.gif" alt="" id="BLOGGER_PHOTO_ID_5235648464763975906" border="0" /></a><span style="font-size:180%;"> <span style="color: rgb(0, 0, 102);">Código LoginWindow</span></span></span><span style="color: rgb(0, 0, 102);font-size:180%;" class="fullpost" >.mxml</span><br /><pre name="code" class="java"><br /><?xml version="1.0" encoding="utf-8"?><br /><SuperTitleWindow xmlns="popupClasses.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="174" title="Inicio de sesión"><br /><mx:Script><br /><![CDATA[<br />import popupClasses.SuperTitleWindowEvent;<br />import mx.managers.PopUpManager;<br /><br />private function aceptarClick() : void<br />{<br />//Lanzo el evento SuperTitleWindowEvent.OK_WINDOW para que se llame el metodo okPressed<br />var ev : SuperTitleWindowEvent = new SuperTitleWindowEvent(SuperTitleWindowEvent.OK_WINDOW);<br />this.dispatchEvent(ev);<br />}<br /><br />private function cancelarClick() : void<br />{<br />//Lanzo el evento SuperTitleWindowEvent.CANCEL_WINDOW para que se llame el metodo cancelPressed<br />var ev : SuperTitleWindowEvent = new SuperTitleWindowEvent(SuperTitleWindowEvent.CANCEL_WINDOW);<br />this.dispatchEvent(ev);<br />}<br /><br />override protected function setWindowFocus():void<br />{<br />//Seteo el foco al text input llamado "usuario"<br />//si no implemento esta funcion entonces se disparará una excepcion<br />//de esta manera obligo a que siempre se defina el foco inicial de una ventana emergante<br />usuario.setFocus();<br />}<br /><br />override protected function okPressed(event:SuperTitleWindowEvent):void<br />{<br />//aqui inserto mi logica de aceptar, por ejemplo una validacion.<br /><br /><br />PopUpManager.removePopUp(this);<br />}<br /><br />override protected function cancelPressed(event:SuperTitleWindowEvent):void<br />{<br />super.cancelPressed(event);//Debo remover esto si deseo sobreescribir el comportamiento original al momento de presionar cacelar<br />}<br /><br />override protected function clearPressed(event:SuperTitleWindowEvent):void<br />{<br />//aqui va la logica para limpiar la ventana, se despacha con las teclas "shift" + "delete"<br />super.clearPressed(event);<br />}<br />]]><br /></mx:Script><br /><mx:Label text="Ingrese el nombre de usuario y contraseña"/><br /><mx:HBox width="100%"><br /><mx:Label text="Nombre de usuario:"/><br /><mx:TextInput id="usuario"/><br /></mx:HBox><br /><mx:HBox width="100%"><br /><mx:Label text="Contraseña:"/><br /><mx:TextInput/><br /></mx:HBox><br /><mx:ControlBar horizontalAlign="right"><br /><mx:Button label="Cancelar" click="cancelarClick()"/><br /><mx:Button label="Aceptar" click="aceptarClick()"/><br /></mx:ControlBar><br /></SuperTitleWindow><br /></pre><br />Lo primero que notamos es que la ventanta hereda de la clase SuperTitleWindow, luego notamos que existen 6 funciones principales que las podemos utilizar dependiendo de nuestros requerimientos:<br /><ol><li><span style="font-weight: bold;">okPressed</span>() : Esta funcion se dispará automaticamente cada vez que la ventana esta a punto de cerrarse, en esta funcion debo agregar la logica a realizar justo antes de cerrar.</li><li><span style="font-weight: bold;">cancelPressed</span>() : Ocurre igual que en la funcion okPressed pero en este caso cuando la ventana esta apunto de cerrarse.</li><li><span style="font-weight: bold;">clearPressed</span>() : Esta funcion se ejecuta automaticamente cada vez que la ventana debe limpiarse, se debe introducir aqui la logica de limpiado, por ejemplo en este caso la logica de limpiado es:<blockquote></blockquote><span style="font-style: italic;"> usuario.text = "";</span><br /><span style="font-style: italic;"> clave.text = "";</span></li><li><span style="font-weight: bold;">setWindowFocus</span>(): esta funcion es oblicatoria de sobreescribir, esto se debe a que debemos colocar el foco del mouse sobre el primer campo del formulario que se encuentra en la ventana, de esta manera la aplicacion fluye sin la necesidad de la intervencion del mouse. Si no se sobreescribe esta funcion, entonces ocurre una excepción.</li><li><span style="font-weight: bold;">cancelarClick</span>() : Esta funcion la debemos crear en caso de que queramos colocar un botón de cancelar dentro de la ventana, esta funcion debe despachar al evento SuperTitleWindowEvent de tipo SCANCEL_WINDOW para que sea escuchado por el SuperTitleWindow y volvamos a caer en el metodo cancelPressed().</li><li><span style="font-weight: bold;">aceptarClick</span>() : Esta funcion la debemos crear en caso de que queramos colocar un botón de cancelar dentro de la ventana, esta funcion debe despachar al evento SuperTitleWindowEvent de tipo OK_WINDOW para que sea escuchado por el SuperTitleWindow y volvamos a caer en el metodo okPressed().</li></ol>Por otro lado tenemos 3 propiedades configurables para la confirmacion de las tres acciones tipicas en la ventana Aceptar, Cancelar, Limpiar:<br /><ol><li><span style="font-weight: bold;">askClear</span>: Defino si debo o no debo confirmar la limpieza de la pantalla, por defecto es verdadera para obligar al prigramador a deshabilitarla en caso que lo crea pertienente.</li><li><span style="font-weight: bold;">askOk</span>: Defino si debo o no debo confirmar el cerrado de la pantalla, por defecto es verdadera para obligar al prigramador a deshabilitarla en caso que lo crea pertienente.</li><li><span style="font-weight: bold;">askCancel</span>: Defino si debo o no debo confirmar el cerrado de la pantalla, por defecto es verdadera para obligar al programador a deshabilitarla en caso que lo crea pertienente.</li></ol>Al heredar de esta clase estamos teniendo varias ventajas, la primera de ellas es que estamos estandarizando la implementacion de las ventanas, de esta manera el usuario se acostumbrará a presionar el boton "Enter" para aceptar las ventanas emergentes y "ESC" para cancelarlas. Por otro lado se organiza y estructura el código, se fomenta la reutilizacion del codigo y si se necesita variar algun comportamiento se puede manipular a la SuperTitleWindow.cs en lugar de realizar modificaciones a todas las ventanas por separado.<br /><br />Para descargar este ejemplo pueden hacer click en el siguiente vinculo, cualquier duda no duden en preguntarlo como comentario de este post, espero que les sea de tanta utilidad como a mi.<br /><br /><a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=SuperTitleWindowTest.rar" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com2tag:blogger.com,1999:blog-1638565336393713256.post-81218042545612959092009-05-26T23:19:00.007-04:302009-05-27T00:12:51.240-04:30JQuery - Framework de desarrollo para Javascript<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkm_wzyJK-6JtIbhM1uTRyW82zRuHwVlYm_n65NTEv-zrMu210BMA-04JjTzWBgMfLPVDiyfgSKF4QXampYxKl8wW7r64te4zHCmwJeWySvX_YTBfJo_wlZsdBJbb2VWvgUyMZlO6mKw/s1600-h/jquery-logo.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 236px; height: 85px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkm_wzyJK-6JtIbhM1uTRyW82zRuHwVlYm_n65NTEv-zrMu210BMA-04JjTzWBgMfLPVDiyfgSKF4QXampYxKl8wW7r64te4zHCmwJeWySvX_YTBfJo_wlZsdBJbb2VWvgUyMZlO6mKw/s400/jquery-logo.png" alt="" id="BLOGGER_PHOTO_ID_5340353613563433842" border="0" /></a><br />Probablemente muchos de nosotros queremos entrar con entusiasmo en el mundo del desarrollo de aplicaciones ajax pero nos hemos encontrado con un gran muro debido a la complejidad e inmadurez del los IDE de desarrollo (Es muy dificil encontrar un software que permita debugear paso a paso) y la falta de un gran framework facil de usar como es el caso de otros lenguajes como ActionScript (<a href="http://www.holaflex.com/?p=34">Framework Flex</a>), C# (<a href="http://es.wikipedia.org/wiki/.NET_de_Microsoft">.NET framework</a>), JAVA (<a href="http://es.wikipedia.org/wiki/Java_EE">Java enterprice edition</a>, etc.), PHP (<a href="http://es.wikipedia.org/wiki/Zend_Framework">Zend Framework</a>), etc.<br /><br />Bueno para todas las personas que coincidan conmigo ¡Les tengo buenas noticas! he conocido y empezado a desarrollar con un framework que me ha encantado, es super fácil de usar y con unas pocas lineas puedes crear cosas muy estilizadas, ajax y simples. Ese framework se llama <span style="font-weight: bold;"><a href="http://es.wikipedia.org/wiki/JQuery">JQuery</a> ¡</span>y los invito a todos a probarlo! Para muestra de lo que pueden lograr luego de unas pocas horas de desarrollo y aprendizaje:<br /><span class="fullpost"><br /><ul><li><a href="http://www.flashimagegallery.com/pics/artwork/">Galeria de imagenes on JQuery</a></li><li><a href="http://www.mind-projects.it/projects/jqzoom/demos.php#demo4">Zoom de secciones de imagenes</a></li><li><a href="http://www.ericmmartin.com/simplemodal/">Ventanas emergentes dentro de la pagina</a></li><li><a href="http://php.scripts.psu.edu/rja171/widgets/rating.php">Sencillo ratin o calificacion por estrellas (al estilo youtube)</a></li></ul>Cuando se desarrolla bajo el framework de <a href="http://es.wikipedia.org/wiki/JQuery">JQuery </a>se tiene una arquitectura orientada a componentes al puro estilo de los <a href="http://internetdeveloping.blogspot.com/2009/02/creacion-de-un-componente-flex.html">componentes Flex</a> o los <a href="http://www.desarrolloweb.com/articulos/657.php">ASP.NET Web Controls (Componentes ASP.NET)</a>. Para los que no conozcan ninguna de estas dos arquitecturas tan populares imaginen un diseño de arquitectura como un formulario web, donde cada uno de los objetos del formulario (TexInput, RadioButton, CheckButton, TextArea, Button, etc) seria un componente programable que puede ser reutilizado N veces en el futuro, podrias crear tus propios y componentes mas avanzados. Una muestra de componentes creados con JQuery y muy sencillos de utilizar son los siguientes:<br /><br /><ul><li><a href="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html">Selector de Fecha reutilizable.</a></li><li><a href="http://www.codylindley.com/blogstuff/js/jtip/">Tooltipo al colocar el mouse sobre un vinculo</a> (prueben colocando el mouse sobre el signo de interrogacion)</li><li>Y todos los demas componentes que coloque arriba.</li></ul>Para comenzar a desarrollar y aprender sobre este grandioso Framework de Javascript debemos descargar la ultima version de JQuery e incluirla en el heather de nuestro projecto. Para descargar la ultima version pueden ingresar al <a href="http://docs.jquery.com/Downloading_jQuery">siguiente directorio</a> y seleccionar la version mas resiente o <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js">hacer click directamente en este link</a>. De todas maneras pronto empezare a realizar tutoriales sobre el desarrollo sobre el framework de JQuery y la utilizacion detallada de algunos de los componentes que ya he probado.<br /><br />Vinculos: <a href="http://jquery.com/">Pagina oficial de JQuery</a>.<br /><span></span></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com0tag:blogger.com,1999:blog-1638565336393713256.post-68671510278239050332009-05-24T13:54:00.022-04:302009-05-26T23:10:44.932-04:30Ejemplo Cairngorm - Agregar Contacto<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjroFjlzaULhk3m0Y8aBQgrTOOIE2-UbsHsyXitKCJOCS5Frzuqw6rwlmXM4ZdAGZ6tterdspOkEmq-20t6xWDJseAM5-d33lAKjIwGhImnOmRYbCWbhWdPEDE1euKCjuOGTiyzo9LZw/s1600-h/cairngorm.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 248px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjroFjlzaULhk3m0Y8aBQgrTOOIE2-UbsHsyXitKCJOCS5Frzuqw6rwlmXM4ZdAGZ6tterdspOkEmq-20t6xWDJseAM5-d33lAKjIwGhImnOmRYbCWbhWdPEDE1euKCjuOGTiyzo9LZw/s320/cairngorm.png" alt="" id="BLOGGER_PHOTO_ID_5340333081002511410" border="0" /></a><br />Continuando la explicacion de Cairngorm realizada en la entrada anterior "<a href="http://internetdeveloping.blogspot.com/2009/04/empezando-con-cairngorm-desarrollando.html">Empezando con Cairngorm - Desarrollando aplicaciones Flex</a>" en este post vamos a realizar un ejemplo de agregar un usuario (contacto) a una agenda de contactos.<br /><br />Para empezar debemos descargarnos los códigos del ejemplo en el <a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=CairngormDiagram.zip">siguiente vinculo</a>, y cargarlos a nuestro entorno de desarrollo (En mi caso Eclipse). Una vez hecho esto se encontraran la siguiente ruta de carpetas dentro del directorio source: <span style="font-style: italic;">com.adobe.cairngorm.samples.addcontact. </span>Ubiquense en ese directorio y van a encontrar que el ejemplo esta dividido en varias carpetas: Businees, Command, Control, Model, View, VO. Estas divisiones se hace para darle un poco mas de claridad al codigo, yo agregaria una mas llamada "events" donde colocaria los eventos, pero eso es cuestion de gustos. Vamonos a la carpeta "View" y hacemos doble click sobre la vista AddContactPanel.mxml.<br /><span class="fullpost"><br /><pre name="code" class="java"><br /><p><?xml version="1.0" encoding="utf-8"?><br /><mx:Panel<br />xmlns:mx="http://www.adobe.com/2006/mxml"<br />xmlns:view="com.adobe.cairngorm.samples.addcontact.view.*"<br />title="MyContacts"<br />horizontalAlign="left" height="350"><br /><mx:Script><br /><![CDATA[<br /><br />import com.adobe.cairngorm.control.CairngormEventDispatcher;<br />import com.adobe.cairngorm.samples.addcontact.control.AddContactEvent;<br />import com.adobe.cairngorm.samples.addcontact.model.AddContact;<br />import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;<br />import com.adobe.cairngorm.samples.addcontact.model.ModelLocator;<br />import mx.collections.ArrayCollection;</p><br /><p> [Bindable]<br />public var addcontact : AddContact;<br /><br />[Bindable]<br />public var contacts : ArrayCollection;<br /><br />public function addContact() : void<br />{<br />var contactVO : ContactVO = new ContactVO();<br />contactVO.fullname = fullname.text;<br />contactVO.emailaddress = emailaddress.text;<br /><br />var event : AddContactEvent = new AddContactEvent( contactVO );<br />CairngormEventDispatcher.getInstance().dispatchEvent( event );<br />}<br />]]><br /></mx:Script><br /><mx:HBox height="100%"><br /><mx:VBox><br /><mx:Form id="addcontactForm"><br /><mx:HBox width="100%" horizontalAlign="left"><br /><mx:Text text="Add a Contact:"/><br /></mx:HBox><br /><mx:FormItem label="Name: "><br /><mx:TextInput id="fullname"/><br /></mx:FormItem><br /><mx:FormItem label="Email: "><br /><mx:TextInput id="emailaddress" displayAsPassword="true"/><br /></mx:FormItem><br /><mx:HBox width="100%" horizontalAlign="right"><br /><mx:Button label="AddContact" enabled="{ !addcontact.isPending }" click="addContact()"/><br /></mx:HBox><br /></mx:Form><br /><mx:Text<br />text="{ addcontact.statusMessage }"<br />textAlign="center"/><br /></mx:VBox><br /><mx:VRule height="100%" strokeColor="#DDDDDD"/><br /><mx:VBox paddingTop="15" paddingLeft="15" paddingRight="15" paddingBottom="15"><br /><mx:Text text="List of Contacts"/><br /><mx:List wordWrap="true" dataProvider="{contacts}" width="200" height="220"></mx:List><br /><mx:Button label="DeleteContact" textAlign="right"/><br /></mx:VBox><br /></mx:HBox><br /></mx:Panel></p><br /></pre><br />Esta vista contiene el formulario para que el usuario final introduzca los datos del contacto que quiere agregar, lo importante a destacar en este archivo son las siguientes lineas:<br /><blockquote> public function addContact() : void<br />{<br />var contactVO : ContactVO = new ContactVO();<br />contactVO.fullname = fullname.text;<br />contactVO.emailaddress = emailaddress.text;<br /><br />var event : AddContactEvent = new AddContactEvent( contactVO );<br />CairngormEventDispatcher.getInstance().dispatchEvent( event );<br />}</blockquote><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2rKEz3mk4amQmumBB0nPFr3ryuK67Gs9z29yUOnLVAHSqL-K6XUX4JdF2w0SBgVK1Efy2qc6CmjshsqbBt0TImF16M2xXh0x6XW4-VDo8ScNBTknRqHBTqoKYKx8F_sBXotydZjsFHw/s1600-h/cairngormEvent.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 246px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2rKEz3mk4amQmumBB0nPFr3ryuK67Gs9z29yUOnLVAHSqL-K6XUX4JdF2w0SBgVK1Efy2qc6CmjshsqbBt0TImF16M2xXh0x6XW4-VDo8ScNBTknRqHBTqoKYKx8F_sBXotydZjsFHw/s320/cairngormEvent.png" alt="" id="BLOGGER_PHOTO_ID_5340326764762909042" border="0" /></a>La funcion addContact se encarga de crear un objeto ContactVO llenandolo con la información introducida en el fomulario por el usuario. Luego crea y despacha un evento Cairngorm llamado AddContactEvent. Vamos a ubicarnos con el mismo esquema de la entrada "<a href="http://internetdeveloping.blogspot.com/2009/04/empezando-con-cairngorm-desarrollando.html">Empezando con Cairngorm - Desarrollando aplicaciones Flex</a>":<br /><br /><div style="text-align: left;">En este momento nos encontramos en el paso numero 1 del flujo. Todos los eventos despachados en Cairngorm deben heredar de la clase <span style="font-weight: bold;"><a href="http://www.cairngormdocs.org/docs/cairngorm_2_1/com/adobe/cairngorm/control/CairngormEvent.html">CairngormEvent</a>, </span>y, <span style="font-weight: bold;">al momento de crearlos, debemos especificar en el controlador con que comando va asociado este evento</span>, veamos el codigo de la clase AddContactEvent.cs:<br /></div><pre name="code" class="java"><br />package com.adobe.cairngorm.samples.addcontact.control<br />{<br />import com.adobe.cairngorm.control.CairngormEvent;<br />import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;<br /><br />/**<br />* El evento se dispara cuando el usuario presiona "agregar contacto"<br />*/<br />public class AddContactEvent extends CairngormEvent<br />{<br />/**<br />* El contacto que se desea agregar<br />*/<br />public var contactVO : ContactVO;<br /><br />/**<br />* El contructor, te obliga a especificar el contacto<br />*/<br />public function AddContactEvent( contactVO : ContactVO )<br />{<br />super( AddContactControl.EVENT_ADD_CONTACT );<br />this.contactVO = contactVO;<br />}<br />}<br />}<br /></pre><br />Como pueden ver es un codigo bastante sencillo. Lo unico que debemos tomar en cuenta es heredar de la clase <a href="http://www.cairngormdocs.org/docs/cairngorm_2_1/com/adobe/cairngorm/control/CairngormEvent.html">CairngormEvent </a>y de especificar cualquier información que deseamos que este disponible en el comando o delegado o servicio (en este caso nos interesa tener el contacto que se va a agregar).<br /><br />Para hacer el vinculo entre el comando y el evento ahora debemos ir a la clase AddContactControl para realizar las especificaciones de la siguiente manera:<br /><pre name="code" class="java"><br />package com.adobe.cairngorm.samples.addcontact.control<br />{<br />import com.adobe.cairngorm.control.FrontController;<br />import com.adobe.cairngorm.samples.addcontact.commands.AddContactCommand;<br /><br />public class AddContactControl extends FrontController<br />{<br />public function AddContactControl()<br />{<br />addCommand( AddContactControl.EVENT_ADD_CONTACT, AddContactCommand );<br />}<br /><br />public static const EVENT_ADD_CONTACT : String = "addcontact";<br />}<br />}<br /></pre><br /></span><span class="fullpost"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQA5qr8vVaT_pK1wtUt0aGf18eqR6wUNMWzYxc28coAdVR7zMCTys34qJ7EP9kyGSJi7_YbZUtbNSsJWQ6XFmI-nF0wsflRRmPQJpJVhN5VMIOE1BBgvWEMSYO7xh8QR05goRLMc5MA/s1600-h/caingormControl.png"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 320px; height: 246px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQA5qr8vVaT_pK1wtUt0aGf18eqR6wUNMWzYxc28coAdVR7zMCTys34qJ7EP9kyGSJi7_YbZUtbNSsJWQ6XFmI-nF0wsflRRmPQJpJVhN5VMIOE1BBgvWEMSYO7xh8QR05goRLMc5MA/s320/caingormControl.png" alt="" id="BLOGGER_PHOTO_ID_5340326420251734130" border="0" /></a></span><span class="fullpost">En la linea addCommand( AddContactControl.EVENT_ADD_CONTACT, AddContactCommand ); realizamos el verdadero vinculo entre nuestro evento y el comando. Ahora debemos proceder a crear un comando para manejar las peticiones al servidor. En este momento nos encontramos en el paso dos del flujo Cairngorm, recuerden que <span style="font-weight: bold;">es obligatorio hacer al menos una instancia del controlador en la aplicacion</span>, ademas, este controlador debe heredar de la clase <a href="http://www.cairngormdocs.org/docs/cairngorm_2_1/com/adobe/cairngorm/control/FrontController.html">FrontController</a>.<br /><br />Ahora debemos pasar al siguiente paso (crear un comando). Los comandos implementan las interfaces Command y Responder. <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXC6PmZlwJHB9pIBXG79vM9bMCSiYDJqybJtQm6m_Euy4m2wEcUKCi8ftICBjUwlioyb67WiSu404I4PRzNDWLvvzAQ1JU_QmX_d_txH5rFkTN5z4nRvZYWYQlWhLKSzAgeFVTErJSg/s1600-h/cairngormCommand.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 234px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXC6PmZlwJHB9pIBXG79vM9bMCSiYDJqybJtQm6m_Euy4m2wEcUKCi8ftICBjUwlioyb67WiSu404I4PRzNDWLvvzAQ1JU_QmX_d_txH5rFkTN5z4nRvZYWYQlWhLKSzAgeFVTErJSg/s320/cairngormCommand.png" alt="" id="BLOGGER_PHOTO_ID_5340325915413115394" border="0" /></a>Por ello deben tener tres metodos principales: execute, onResult y onFault. El primero de ellos es ejecutado automaticamente por el controlador cuando se dispara alguna evento que este enlazado con este comando, el segundo se ejecuta automaticamente una vez que el delegado ha concluido la ejecucion del servicio satisfactoriamente, el ultimo de estos metodos es igual al segundo, con la salvedad que se ejecuta cuando ocurrio algun error no controlado durante la ejecucion del servicio. Ese comando debe tener una instancia del modelo para poder insertar la informacion obtenida del servicio durante el paso 9 del diagrama de flujo.<br />A continuacion el codigo del comando:<br /><pre name="code" class="java"><br />package com.adobe.cairngorm.samples.addcontact.commands<br />{<br />import mx.rpc.events.ResultEvent;<br />import com.adobe.cairngorm.business.Responder;<br />import com.adobe.cairngorm.commands.Command;<br />import com.adobe.cairngorm.control.CairngormEvent;<br />import com.adobe.cairngorm.samples.addcontact.business.AddContactDelegate;<br />import com.adobe.cairngorm.samples.addcontact.control.AddContactEvent;<br />import com.adobe.cairngorm.samples.addcontact.model.ModelLocator;<br />import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;<br /><br />public class AddContactCommand implements Command, Responder<br />{<br />private var model : ModelLocator = ModelLocator.getInstance();<br /><br />public function execute( event : CairngormEvent ) : void<br />{<br />model.addcontact.isPending = true;<br />var delegate : AddContactDelegate = new AddContactDelegate( this );<br />var addcontactEvent : AddContactEvent = AddContactEvent( event );<br />delegate.addcontact( addcontactEvent.contactVO );<br />}<br /><br />public function onResult( event : * = null ) : void<br />{<br />model.addcontact.contactVO = ContactVO( event );<br />model.addcontact.isPending = false;<br /><br />//Simplify - Used an array of strings instead of ContactVO's<br />model.contacts.addItem(ContactVO(event).fullname+" "+ContactVO(event).emailaddress);<br /><br />}<br /><br />public function onFault( event : * = null ) : void<br />{<br />model.addcontact.statusMessage = "Could not send contact information to the server.";<br />model.addcontact.isPending = false;<br />}<br />}<br />}<br /></pre><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7SMQpm5WE-zehuqkIFqC34eDJY-uKSLk2KfjrAMUxg7Sv0CZFxOOF9qHy5gZsvWgolYPUDHtE0tzKj5qldl818Ux06kHmY6UtxahZZiWAfWUqBVFWmVuHjJZUHfh4RfNH80lZmIdbg/s1600-h/cairngormDelegate.png"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 320px; height: 234px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7SMQpm5WE-zehuqkIFqC34eDJY-uKSLk2KfjrAMUxg7Sv0CZFxOOF9qHy5gZsvWgolYPUDHtE0tzKj5qldl818Ux06kHmY6UtxahZZiWAfWUqBVFWmVuHjJZUHfh4RfNH80lZmIdbg/s320/cairngormDelegate.png" alt="" id="BLOGGER_PHOTO_ID_5340330452770444674" border="0" /></a>Para el siguiente paso debemos crear nuestra clase delegate (Delegado). Los delegados son los encargados de ejecutar los servicios que se encuentren definidos en el Localizador de servicio (<a href="http://www.cairngormdocs.org/docs/cairngorm_2_1/com/adobe/cairngorm/business/ServiceLocator.html">ServiceLocator</a>).<br /><br />Para crear nuestro delegado debemos crear una clase que tenga los siguientes atributos globales:<br /><blockquote>private var responder : Responder;<br />private var service : Object;</blockquote>El primero de ellos es una instacia del Comando que acabamos de agregar en el paso anterior, nos permitirar llamar a los metodos onResult y onFault dependiendo de la ejecucion del servicio. Debemos crear un metodo para cada servicio asociado con este delegado, en el ejemplo actual no tenemos ningún servicio asociado en el Localizador de Servicios, por lo que vamos a finjir la ejecucion de uno, utilizando un timer de 2 segundos (2000 Milisegundos). A continuacion el codigo de la clase AddContactDelegate.cs:<br /><pre name="code" class="java"><br />package com.adobe.cairngorm.samples.addcontact.business<br />{<br />import com.adobe.cairngorm.business.Responder;<br />import com.adobe.cairngorm.business.ServiceLocator;<br />import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;<br /><br />import flash.utils.setTimeout;<br /><br />import mx.rpc.AsyncToken;<br />import mx.rpc.events.ResultEvent;<br /><br />public class AddContactDelegate<br />{<br />private var responder : Responder;<br />private var service : Object;<br /><br />public function AddContactDelegate( responder : Responder )<br />{<br />//this.service = ServiceLocator.getInstance().getService( "addcontactService" );<br />this.responder = responder;<br />}<br /><br />public function addcontact( contactVO : ContactVO ): void<br />{<br />//var token : AsyncToken = service.addcontact( contactVO );<br />//token.resultHandler = responder.onResult;<br />//token.faultHandler = responder.onFault;<br /><br />//for demo purpose: simulate remote service result<br />setTimeout( addcontactResult, 1000, contactVO );<br />}<br /><br />private function addcontactResult( contactVO : ContactVO ): void<br />{<br />if( 1 )<br />{<br /> responder.onResult( contactVO );<br />}<br />else<br />{<br /> responder.onFault();<br />}<br />}<br />}<br />}<br /></pre><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zCQ9YqIJKldT9V69qY177xBaJgGpCqD8IMirZCqtA5OjI9WEsoauklPGpM9za96jYBFzjtDB2kWiD1N89bOZAEe-szSnWPD0iZV9y2ZeedAIHlhDG7wEIBwKNGCiQpP90oo2-aDW3Q/s1600-h/cairngormServiceLocator.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 320px; height: 234px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zCQ9YqIJKldT9V69qY177xBaJgGpCqD8IMirZCqtA5OjI9WEsoauklPGpM9za96jYBFzjtDB2kWiD1N89bOZAEe-szSnWPD0iZV9y2ZeedAIHlhDG7wEIBwKNGCiQpP90oo2-aDW3Q/s320/cairngormServiceLocator.png" alt="" id="BLOGGER_PHOTO_ID_5340331185429446402" border="0" /></a>Por ultimo nos queda el archivo Services.mxml que hereda de la clase <a href="http://www.cairngormdocs.org/docs/cairngorm_2_1/com/adobe/cairngorm/business/ServiceLocator.html">ServiceLocator</a>, este, es el Localizador de servicios de la aplicacion, debemos tener todos nuestros objetos remotos, metodos remotos, etc. Definidos en este archivo. En el este ejemplo se encuentra comentada una declaracion de un objeto remoto como ejemplo.<br /><pre name="code" class="html"><br /><?xml version="1.0" encoding="utf-8"?><br /><cairngorm:ServiceLocator<br />xmlns:mx="http://www.adobe.com/2006/mxml"<br />xmlns:cairngorm="com.adobe.cairngorm.business.*"><br /><!--commented for demo--><br /><!--<br /><mx:RemoteObject<br />id="addcontactService"<br />destination="addcontactService"<br />showBusyCursor="true"<br />result="event.token.resultHandler( event );"<br />fault="event.token.faultHandler( event );"><br /></mx:RemoteObject><br />--><br /></cairngorm:ServiceLocator><br /></pre><br />Tambien debemos hacer una instancia de este ServiceLocator en el inicio de ejecucion del proyecto. En resumen debemos hacer instancias de los siguientes componentes antes de iniciar la ejecucion de las funcionalidades del proyecto:<br /><ul><li>Controlador: AddContactControl en este ejemplo.</li><li>ServiceLocator: Services en este ejemplo.</li><li>ModelLocator: Se llama ModelLocator tambien en este proyecto.</li></ul>Para que visualizen mejor como hacer las instancias que acabo de mencionar vamos a observar el codigo de la clase Applicacion del ejemplo:<br /><pre name="code" class="html"><br /><p><?xml version="1.0" encoding="utf-8"?><br /><mx:Panel<br />xmlns:mx="http://www.adobe.com/2006/mxml"<br />xmlns:view="com.adobe.cairngorm.samples.addcontact.view.*"<br />title="MyContacts"<br />horizontalAlign="left" height="350"><br /><mx:Script><br /><![CDATA[<br /><br />import com.adobe.cairngorm.control.CairngormEventDispatcher;<br />import com.adobe.cairngorm.samples.addcontact.control.AddContactEvent;<br />import com.adobe.cairngorm.samples.addcontact.model.AddContact;<br />import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;<br />import com.adobe.cairngorm.samples.addcontact.model.ModelLocator;<br />import mx.collections.ArrayCollection;</p><br /><p> [Bindable]<br />public var addcontact : AddContact;<br /><br />[Bindable]<br />public var contacts : ArrayCollection;<br /><br />public function addContact() : void<br />{<br />var contactVO : ContactVO = new ContactVO();<br />contactVO.fullname = fullname.text;<br />contactVO.emailaddress = emailaddress.text;<br /><br />var event : AddContactEvent = new AddContactEvent( contactVO );<br />CairngormEventDispatcher.getInstance().dispatchEvent( event );<br />}<br />]]><br /></mx:Script><br /><mx:HBox height="100%"><br /><mx:VBox><br /><mx:Form id="addcontactForm"><br /><mx:HBox width="100%" horizontalAlign="left"><br /><mx:Text text="Add a Contact:"/><br /></mx:HBox><br /><mx:FormItem label="Name: "><br /><mx:TextInput id="fullname"/><br /></mx:FormItem><br /><mx:FormItem label="Email: "><br /><mx:TextInput id="emailaddress" displayAsPassword="true"/><br /></mx:FormItem><br /><mx:HBox width="100%" horizontalAlign="right"><br /><mx:Button label="AddContact" enabled="{ !addcontact.isPending }" click="addContact()"/><br /></mx:HBox><br /></mx:Form><br /><mx:Text<br />text="{ addcontact.statusMessage }"<br />textAlign="center"/><br /></mx:VBox><br /><mx:VRule height="100%" strokeColor="#DDDDDD"/><br /><mx:VBox paddingTop="15" paddingLeft="15" paddingRight="15" paddingBottom="15"><br /><mx:Text text="List of Contacts"/><br /><mx:List wordWrap="true" dataProvider="{contacts}" width="200" height="220"></mx:List><br /><mx:Button label="DeleteContact" textAlign="right"/><br /></mx:VBox><br /></mx:HBox><br /></mx:Panel></p><br /></pre><br />Fijense que aparte de hacer todas las instancias necesarias, tambien le decimos al datagrid que debe enlazar (Binding) su dataprovider con el objeto "contacts" del ModelLocator (model), esto lo hacemos para que cada vez que actualizamos este modelo de datos, se actualice esta vista (el datagrid se llena con exactamente la misma data que tenga model.contacts).<br /><br />Una vez llamado el servicio y ejecutado correctamente la respuesta de este, nos llegara automaticamente al comando que definimos (AddContactCommand.cs). La respuesta se vera reflejada en el metodo "onResult" donde debemos utilizar la instancia del modelo que tenemos para agregar los datos obtenidos en el modelo de datos, de esta manera la vista se actualizara automaticamente gracias al <a href="http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=databinding_091_02.html">binding automatico</a>. Los pasos 6,7,8 y 9 del flujo se ejecutan muy rápidamente como pueden darse cuenta, todo gracias a las configuraciones y métodos de programacion utilizados en la arquitectura. A continuacion les dejo el ejemplo funcionando y un vinculo para descargar el codigo fuente. Cualquier pregunta no duden de escribirla en los comentarios de este post.<br /><embed pluginspage=" http://www.macromedia.com/go/getflashplayer" src="http://ejemplos.net78.net/swf/CairngormDiagram.swf" height="600" width="600"></embed><br /><a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=CairngormDiagram.zip"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com8tag:blogger.com,1999:blog-1638565336393713256.post-62210149106823612472009-04-29T21:10:00.010-04:302009-05-27T00:14:12.836-04:30Empezando con Cairngorm - Desarrollando aplicaciones Flex<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi806QHyFvRGLcJx3tfcbeBkAp4N6aRHWCAyDJm0e15B-34xHioN1N2anhiy_R8IOYG6JTOtv-gbD1dwlrTcpafiNqkyi95L3IkTPhvdevpMqOoAhersKI3VsIOVdVa3C4hRdYFqMklEA/s1600-h/cairngorm.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 155px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi806QHyFvRGLcJx3tfcbeBkAp4N6aRHWCAyDJm0e15B-34xHioN1N2anhiy_R8IOYG6JTOtv-gbD1dwlrTcpafiNqkyi95L3IkTPhvdevpMqOoAhersKI3VsIOVdVa3C4hRdYFqMklEA/s200/cairngorm.png" alt="" id="BLOGGER_PHOTO_ID_5339127855370152354" border="0" /></a>Probablemente todos los que hemos estado por un buen rato metidos en el mundo de Flex hemos escuchado algunas ves sobre el framwerok para desarrollar a aplicaciones <a href="http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm;jsessionid=E4FE90EABC7DE0B7A710F9076C0419BB"><span style="font-weight: bold;">Cairngorm</span></a>.<br /><br />Para los que no lo han escuchado dejenme explicarles un poco cual es su utilidad: Cuando desarrollas utilizando este framework te vez obligado a cumplir con una serie de normas (<a href="http://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o">Patrones de diseño</a>) que brindan una infinidad de ventajas a largo plazo dentro de tu aplicacion. Por ejemplo: El estar dividido en 8 capaz te permite llevar una mejor organizacion del codigo, permite que varias personas trabajen de manera colaborativa al separar eficazmente la capa de datos de la aplicacion (bien sea con objetos remotos, http service, xml, etc) de la capa de presentacion, permite que nuevos integrantes que conozcan el framework se incorporen mucho mas rapidamente al ser un estandar, se reutiliza mucho el codigo. En fin, muchisimas ventajas, dejen que lo empiezen a usar para que vean que al final no van a poder dejar de usarlo.<br /><span class="fullpost"><br /><span style="font-size:130%;"><span style="font-weight: bold;">¿Como esta dividido Cairngorm?</span></span><br /><br />Una aplicacion realizada bajo Cairngorm tiene 8 capaz principales: Vista, Evento, Controlador, Comando, Delegado, Ubicador de servicios, modelo y los servicios de datos:<br /><ol><li>Vista: Son todos los formularios, la capa de presentacion de la aplicacion, lo que el usuario final ve.</li><li>Evento: Recordemos que lex utiliza la programacion orientada a eventos, son el vinculo entre la vista y el comando.</li><li>Controlador: Enruta los diferentes eventos posibles de la aplicacion con los diferentes comandos.</li><li>Comando: Realiza 3 acciones principales, execute, que ejecuta el metodo del delegado deseado. "result" que se ejecuta cuando se recive la respuesta del servidor correctamente y "fault" que se ejecuta si ocurre alguna exepcion durante la ejecucion del delegado y servicio. En el metodo "result" se debe introducir los datos en el modelo para que las vistas sean actualizadas.</li><li>Delegado: Existen muchos metodos para un objeto remoto, el delegado es el encargado de llamarlos, es un vinculo entre el comando y el servicio.</li><li>Ubicador de servicios: aqui se realizan todas las definiciones de los objetos, metodos o servicios que se van a utilizar. Se coloca la ruta del servidor donde son expuestos estos servicioes, etc.</li><li>Modelo: Contiene todos los datos de la aplicacion, un diagrama de clases, entidades.</li><li>Los servicios: Deben ser creados en un servidor, lenguaje java, php, c#, etc. Ese servidor contiene la BD.</li></ol><span style="font-size:130%;"><span style="font-weight: bold;">Ejemplo de caso de uso con Cairngorm:</span></span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfm2rNqhn1-oD9e_g5zHm2qUHGGe4GU4czMlayzD64PGHDdiSOvgyZffdUOOUJ6rj0AsNnALN9L8GSxobxJsCq0xesH89_viVlcc_y1UC52l-TyanaESyY5bgheKVHygjrEUu5fwPqw/s1600-h/cairngorm.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 310px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfm2rNqhn1-oD9e_g5zHm2qUHGGe4GU4czMlayzD64PGHDdiSOvgyZffdUOOUJ6rj0AsNnALN9L8GSxobxJsCq0xesH89_viVlcc_y1UC52l-TyanaESyY5bgheKVHygjrEUu5fwPqw/s400/cairngorm.png" alt="" id="BLOGGER_PHOTO_ID_5339116308133811874" border="0" /></a><br />Vamos a colocar el siguiente ejemplo basado en la grafica de arriba: El usuario desea guardar un paciente en la base de datos, para que eso suceda debe existir un formulario de introducccion de los datos del paciente (esa seria la "<span style="color: rgb(255, 102, 0); font-weight: bold;">vista</span>"), una vez que el usuario llena los datos del paciente oprime el botón "guardar" (en ese momento el programador debe disparar un "<span style="color: rgb(0, 0, 153); font-weight: bold;">evento</span>" con los datos del paciente), el "<span style="font-weight: bold;">controlador</span>" es el encargado de enrutar ese evento hacia el "<span style="color: rgb(153, 0, 0); font-weight: bold;">comando</span>" mas adecuado (El comando debe manejar las ejecuciones o fallos de los servicios) luego el comando llama a un "<span style="font-weight: bold; color: rgb(0, 102, 0);">delegado</span>"donde se hace un llamado al objeto remoto segun las definiciones que se hayan realizado en el <span style="color: rgb(51, 153, 153); font-weight: bold;">"manejador de servicios". </span><span style="color: rgb(51, 153, 153);"><span style="color: rgb(0, 0, 0);">Luego de recibir la respuesta del servicio (recuerden que la respuesta la debe manejar el "<span style="color: rgb(153, 0, 0); font-weight: bold;">comando</span>"), el "<span style="color: rgb(153, 0, 0); font-weight: bold;">comando</span>" se encarga de agregar dentro del <span style="color: rgb(102, 51, 102); font-weight: bold;">"modelo" </span>la informacion recibida, y como el "<span style="color: rgb(102, 51, 102); font-weight: bold;">modelo</span>" esta sincronizado (binding) con la vista, entonces la vista se actualiza automaticamente sin requerir nungina accion del programador.<br /><br />Probablemente no les haya quedado nada claro, es un poco dificil de entender al principio, y puede parecer que son demasiadas cosas para una accion tan simple como "insertar un paciente en la base de datos". Para entenderlo muchisimo mejor vamos a <a href="http://internetdeveloping.blogspot.com/2009/05/ejemplo-cairngorm-agregar-contacto.html">explicar el ejemplo pero esta vez con el codigo y su ejecucion</a>. Pero eso lo haremos en otro tutorial por razones didacticas (para entrar a el tutorial "<a href="http://internetdeveloping.blogspot.com/2009/05/ejemplo-cairngorm-agregar-contacto.html">Ejemplo Cairngorm - Agregar Contacto</a><span style="color: rgb(51, 153, 153);"><span style="color: rgb(0, 0, 0);">" haz <a href="http://internetdeveloping.blogspot.com/2009/05/ejemplo-cairngorm-agregar-contacto.html">click aqui</a>), no se preocupen que una vez que lo entiendan van a ver que es fácil y útil. Para bajarse la libreria de </span></span>Cairngorm hagan <a href="http://opensource.adobe.com/wiki/display/cairngorm/Downloads">click aqui</a> y seleccionen la última version.<br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com2tag:blogger.com,1999:blog-1638565336393713256.post-11492062459607808002009-04-27T10:33:00.004-04:302009-06-04T13:27:39.768-04:30Expandir, Contraer, Cerrar, cambiar tamaño y mover un Panel<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfX9iF89sxbqgG3pxcOr-wovOJdbpBmuBak8O4o8QgzTupdhEKVBZmu0kfeU4ro5ROkrFWoHC0oD_FLQ8isFmjkq8Wan7aqxc0nowpgTg66UpnuUuzWBYURD52uH_GYeACjAzVO4LyZQ/s1600-h/superpanel.PNG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 224px; height: 203px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfX9iF89sxbqgG3pxcOr-wovOJdbpBmuBak8O4o8QgzTupdhEKVBZmu0kfeU4ro5ROkrFWoHC0oD_FLQ8isFmjkq8Wan7aqxc0nowpgTg66UpnuUuzWBYURD52uH_GYeACjAzVO4LyZQ/s320/superpanel.PNG" alt="" id="BLOGGER_PHOTO_ID_5327905037548402482" border="0" /></a><br />Una de las funcionalidades mas buscadas en un panel son CERRAR, EXPANDIR, CONTRAER Y RESIZE. En este tutorial vamos a explicar su implementacion en un Panel clásico del framework de flex. Utilizando un una clase llamada SuperPanel hecha por <a href="http://www.wietseveenstra.nl/">Wietse Veenstra</a> y publicada en su blog.<br /><br />Para empezar debemos tener en nuestro proyecto la clase SuperPanel.as y cada vez que queramos utilizarla en vez de crear un panel de tipo mx.Containers.Panel debemos crear un panel tipo SuperPanel.<br /><br /><blockquote><span style="font-style: italic;">Es importante resaltar que la clase SuperPanel hereda directamente de la clase panel, por lo tanto es un panel en si mismo y Flex lo reconoce como un panel, con todos sus comportamientos naturales, mas lo que vamos a ver a continuacion.</span><br /></blockquote>Antes de empezar les coloco un demo de la aplicación y el link para que puedan descargar el <a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=SuperPanelDemo.rar">codigo fuente</a> que vamos a estar utilizando en este tutorial.<br /><span class="fullpost"><br /><embed pluginspage=" http://www.macromedia.com/go/getflashplayer" src="http://ejemplos.net78.net/flex/superpanel/SuperPanelDemo.swf" width="600" height="300"></embed><br />Lo pimero que debemos hacer es ir al metodo createChildren(), por ser este, el primer método que se invoca en el ciclo de vida del SuperPanel.<br /><pre name="code" class="java"><br />override protected function createChildren():void {<br />super.createChildren();<br />this.pTitleBar = super.titleBar;<br />this.setStyle("headerColors", [0xC3D1D9, 0xD2DCE2]);<br />this.setStyle("borderColor", 0xD2DCE2);<br />this.doubleClickEnabled = true;<br /><br />if (enableResize) {<br />this.resizeHandler.width = 12;<br />this.resizeHandler.height = 12;<br />this.resizeHandler.styleName = "resizeHndlr";<br />this.rawChildren.addChild(resizeHandler);<br />this.initPos();<br />}<br /><br />if (showControls) {<br />this.normalMaxButton.width = 10;<br />this.normalMaxButton.height = 10;<br />this.normalMaxButton.styleName = "increaseBtn";<br />this.closeButton.width = 10;<br />this.closeButton.height = 10;<br />this.closeButton.styleName = "closeBtn";<br />this.pTitleBar.addChild(this.normalMaxButton);<br />this.pTitleBar.addChild(this.closeButton);<br />}<br /><br />this.positionChildren();<br />this.addListeners();<br />}<br /></pre><br />Lo primero que hacemos en este metodo es definir la apariencia del panel le colocamos un color al header y un color al borde, luego habilitamos que se pueda hacer dobleclick (hay que recordar que el evento doble click solo se dispara si la propiedad<span style="font-family:monospace;"> </span>doubleClickEnabled es igual a true, por eso la estamos haciendo true) al hacer doble click sobre el titulo del panel, este ultimo se contraerá.<br /><br />Luego pueden notar los dos condicionales, uno para saber si esta habilido el comportamiento resize y otro para verificar si esta habilitado el comportamiento de cerrar, espandir y contraer. En el caso de que enable resize este "verdadero" entonces se colocara el botón en la esquina inferior derecha del componente (en el metodo initPos se verifica cuales son las cordenadas de esa esquina). Si la propiedad showControls es verdadera entonces se colocan los botones cerrar y expandir sobre <span style="font-weight: bold;">dentro de la barra de titulo del panel</span>.<br /><pre name="code" class="java"><br />public function positionChildren():void {<br />if (showControls) {<br />this.normalMaxButton.buttonMode = true;<br />this.normalMaxButton.useHandCursor = true;<br />this.normalMaxButton.x = this.unscaledWidth - this.normalMaxButton.width - 24;<br />this.normalMaxButton.y = 8;<br />this.closeButton.buttonMode = true;<br />this.closeButton.useHandCursor = true;<br />this.closeButton.x = this.unscaledWidth - this.closeButton.width - 8;<br />this.closeButton.y = 8;<br />}<br /><br />if (enableResize) {<br />this.resizeHandler.y = this.unscaledHeight - resizeHandler.height - 1;<br />this.resizeHandler.x = this.unscaledWidth - resizeHandler.width - 1;<br />}<br />}<br /><br />public function addListeners():void {<br />this.addEventListener(MouseEvent.CLICK, panelClickHandler);<br />this.pTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, titleBarDownHandler);<br />this.pTitleBar.addEventListener(MouseEvent.DOUBLE_CLICK, titleBarDoubleClickHandler);<br /><br />if (showControls) {<br />this.closeButton.addEventListener(MouseEvent.CLICK, closeClickHandler);<br />this.normalMaxButton.addEventListener(MouseEvent.CLICK, normalMaxClickHandler);<br />}<br /><br />if (enableResize) {<br />this.resizeHandler.addEventListener(MouseEvent.MOUSE_OVER, resizeOverHandler);<br />this.resizeHandler.addEventListener(MouseEvent.MOUSE_OUT, resizeOutHandler);<br />this.resizeHandler.addEventListener(MouseEvent.MOUSE_DOWN, resizeDownHandler);<br />}<br />}<br /></pre><br />El metodo "positionChildren" se encarga de ubicar a los botones de cerrar, expandir, contraer y cambiar tamaño dentro del panel.<br /><br />El el segundo metodo addListeners() se encarga de iniciar los "Listeners" o "Escuchadores" que monitorearán cuando algun click, dobleclick o drag ocurra sobre los botones que recien acabamos de agregar en el metodo createChildren().<br /><pre name="code" class="java"><br />public function panelClickHandler(event:MouseEvent):void {<br />this.pTitleBar.removeEventListener(MouseEvent.MOUSE_MOVE, titleBarMoveHandler);<br />this.parent.setChildIndex(this, this.parent.numChildren - 1);<br />this.panelFocusCheckHandler();<br />}<br /><br />public function titleBarDownHandler(event:MouseEvent):void {<br />this.pTitleBar.addEventListener(MouseEvent.MOUSE_MOVE, titleBarMoveHandler);<br />}<br /><br />public function titleBarMoveHandler(event:MouseEvent):void {<br />if (this.width < screen.width) {<br />Application.application.parent.addEventListener(MouseEvent.MOUSE_UP, titleBarDragDropHandler);<br />this.pTitleBar.addEventListener(DragEvent.DRAG_DROP,titleBarDragDropHandler);<br />this.parent.setChildIndex(this, this.parent.numChildren - 1);<br />this.panelFocusCheckHandler();<br />this.alpha = 0.5;<br />this.startDrag(false, new Rectangle(0, 0, screen.width - this.width, screen.height - this.height));<br />}<br />}<br /><br />public function titleBarDragDropHandler(event:MouseEvent):void {<br />this.pTitleBar.removeEventListener(MouseEvent.MOUSE_MOVE, titleBarMoveHandler);<br />this.alpha = 1.0;<br />this.stopDrag();<br />}<br /><br />public function panelFocusCheckHandler():void {<br />for (var i:int = 0; i < this.parent.numChildren; i++) {<br />var child:UIComponent = UIComponent(this.parent.getChildAt(i));<br />if (this.parent.getChildIndex(child) < this.parent.numChildren - 1) {<br /> child.setStyle("headerColors", [0xC3D1D9, 0xD2DCE2]);<br /> child.setStyle("borderColor", 0xD2DCE2);<br />} else if (this.parent.getChildIndex(child) == this.parent.numChildren - 1) {<br /> child.setStyle("headerColors", [0xC3D1D9, 0x5A788A]);<br /> child.setStyle("borderColor", 0x5A788A);<br />}<br />}<br />}<br /></pre><br />Luego de iniciar todos los listeners y variables del panel tenemos los handlers (métodos) que se ejecutarán cuando ocurran los eventos que empezamos a escuchar. El primero de estos <span style="font-family:monospace;">"</span><span style="font-weight: bold;">panelClickHandler</span>" se encarga de darle el foco al panel que el usuario le acaba de dar "click", lo trae al frente de los otros panels.<br /><br />El segundo método <span style="font-weight: bold;">"titleBarDownHandler" </span>se ejecuta cuando el usuario hace un MOUSE_DOWN sobre el titlebar y se encarga de empezar a escuchar el MOUSE_MOVE para mover el panel junto con el mouse mientras se mantenga presionado el boton de este ultimo (una implementacion de drag and drop).<br /><br />El tercer metodo <span style="font-weight: bold;">"TitleBarMoveHandler" </span>es el encargado de iniciar el drag para mover el panel, se ejecuta cuando el listener recien agregado en el "<span style="font-weight: bold;">titleBarDownHandler" </span>detecta un movimiento del mouse, este método tambien escucha un MOUSE_UP para terminar con el drag and drop y si usuario deja de presionar el botón del mouse.<br /><br />El cuarto metódo <span style="font-weight: bold;">"titleBarDragDropHandler" </span>se encarga de terminer el drag and drop del panel, y se ejecuta cuando ocurre un MOUSE_UP. Por último el metodo "panelFocusCheckHandler" le camiba la apariencia al panel segun si tiene o no tiene el foco del mouse.<br /><pre name="code" class="java"><br /> public function titleBarDoubleClickHandler(event:MouseEvent):void {<br /> this.pTitleBar.removeEventListener(MouseEvent.MOUSE_MOVE, titleBarMoveHandler);<br /> Application.application.parent.removeEventListener(MouseEvent.MOUSE_UP, resizeUpHandler);<br /><br /> this.upMotion.target = this;<br /> this.upMotion.duration = 300;<br /> this.upMotion.heightFrom = oH;<br /> this.upMotion.heightTo = 28;<br /> this.upMotion.end();<br /><br /> this.downMotion.target = this;<br /> this.downMotion.duration = 300;<br /> this.downMotion.heightFrom = 28;<br /> this.downMotion.heightTo = oH;<br /> this.downMotion.end();<br /><br /> if (this.width < height ="=" visible =" false;" visible =" true;"><br /></pre><br />En el código de arriba encontramos la implementación del efecto de minimizar cuando hacemos dobleclick sobre el título del panel. El método titleBarDoubleClickHandler se encarga de definir los valores iniciales para los efectos Resize que se definieron al inicio de la clase, estos efectos cambian la altura del panel hasta contraerlo completamente, quedando solo visible la barra del titulo, o visceversa.<br /><pre name="code" class="java"><br /> public function normalMaxClickHandler(event:MouseEvent):void {<br /> if (this.normalMaxButton.styleName == "increaseBtn") {<br /> if (this.height > 28) {<br /> this.initPos();<br /> this.x = 0;<br /> this.y = 0;<br /> this.width = screen.width;<br /> this.height = screen.height;<br /> this.normalMaxButton.styleName = "decreaseBtn";<br /> this.positionChildren();<br /> }<br /> } else {<br /> this.x = this.oX;<br /> this.y = this.oY;<br /> this.width = this.oW;<br /> this.height = this.oH;<br /> this.normalMaxButton.styleName = "increaseBtn";<br /> this.positionChildren();<br /> }<br /> }<br /><br /> public function closeClickHandler(event:MouseEvent):void {<br /> this.removeEventListener(MouseEvent.CLICK, panelClickHandler);<br /> this.parent.removeChild(this);<br /> }<br /></pre><br />Estos dos metodos son los encarcados de las funciones de expandir, contraer y cerrar el panel, el primero de ellos se ejecuta cuando se hace click sobre el botón "normalMaxButton" y lo primero que hace es detectar si el panel se encuentra expandido o contraido y luego ejecuta el codigo para expandir o contraer el codigo segun el caso. El segundo metodo "closeClickHandler" se llama cuando el usuario hace click sobre el botón cerrar, este metodo elimina el listener sobre el evento click que habiamos definido durante la funcion create children y hace que el panel se auto elimine.<br /><pre name="code" class="java"><br /> public function resizeOverHandler(event:MouseEvent):void {<br /> this.resizeCur = CursorManager.setCursor(resizeCursor);<br /> }<br /><br /> public function resizeOutHandler(event:MouseEvent):void {<br /> CursorManager.removeCursor(CursorManager.currentCursorID);<br /> }<br /><br /> public function resizeDownHandler(event:MouseEvent):void {<br /> Application.application.parent.addEventListener(MouseEvent.MOUSE_MOVE, resizeMoveHandler);<br /> Application.application.parent.addEventListener(MouseEvent.MOUSE_UP, resizeUpHandler);<br /> this.resizeHandler.addEventListener(MouseEvent.MOUSE_OVER, resizeOverHandler);<br /> this.panelClickHandler(event);<br /> this.resizeCur = CursorManager.setCursor(resizeCursor);<br /> this.oPoint.x = mouseX;<br /> this.oPoint.y = mouseY;<br /> this.oPoint = this.localToGlobal(oPoint); <br /> }<br /><br /> public function resizeMoveHandler(event:MouseEvent):void {<br /> this.stopDragging();<br /><br /> var xPlus:Number = Application.application.parent.mouseX - this.oPoint.x; <br /> var yPlus:Number = Application.application.parent.mouseY - this.oPoint.y;<br /> <br /> if (this.oW + xPlus > 140) {<br /> this.width = this.oW + xPlus;<br /> }<br /> <br /> if (this.oH + yPlus > 80) {<br /> this.height = this.oH + yPlus;<br /> }<br /> this.positionChildren();<br /> }<br /><br /> public function resizeUpHandler(event:MouseEvent):void {<br /> Application.application.parent.removeEventListener(MouseEvent.MOUSE_MOVE, resizeMoveHandler);<br /> Application.application.parent.removeEventListener(MouseEvent.MOUSE_UP, resizeUpHandler);<br /> CursorManager.removeCursor(CursorManager.currentCursorID);<br /> this.resizeHandler.addEventListener(MouseEvent.MOUSE_OVER, resizeOverHandler);<br /> this.initPos();<br /> }<br /></pre><br />Estos últimos cuatro metodos se dedican a implementar la funcionalidad de resize para el panel: El primero de ellos se encarga de cambiar el icono del mouse cuando tengamos el cursor sobre la esquina inferior derecha (para indicarnos que podemos hacer un resize del panel). El segundo metodo es muy similiar pero lo que hace es devolver el icono del mouse a su estado natural (la flechita) cuando quitemos el curso de la esquina inferior derecha del panel.<br /><br />El tercer metodo "resizeDownHandler" se ejecuta cuando presionamos el botón izquierdo del mouse sobre el boton "resizeHandler" que habiamos insertado en el createChildren(), este metodo se encarga de inicializar los valores X y Y de la esquina y de iniciar los listeners para el evento MOUSE_MOVE.<br /><br />El metodo "<span style="font-weight: bold;">resizeMoveHandler</span>" se encarga de cambiar el tamaño del panel en funcion del movimiento del mouse. Solo se ejecuta mientras tengamos el boton derecho del mouse preisonado, ya que una de las primeras cosas que hace es agregar un listener para el evento MOUSE_UP para detectar cuando dejamos de apretar el botón.<br /><br />El método <span style="font-weight: bold;">"resizeUpHandler" </span>el ultimo metodo de todos se encarga de eliminar el listener de MOUSE_MOVE para no continuar con el resize (cambio de tamaño) del panel.<br /><br />¡Y eso es todo! Como pueden apreciar es una clase bastante sencilla y facil de usar, por eso me gusta tanto, aunque tiene algunos bugs que iran descubriendo y puliendo sobre la marcha. En los próximos tutoriales publicare modificaciones bastante interesantes que he realizado sobre este u otros panels. Espero que haya sido lo suficientemente claro, cualquier pregunta no duden en preguntarme.<br /><a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=SuperPanelDemo.rar"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com3tag:blogger.com,1999:blog-1638565336393713256.post-66190171759280349332009-04-25T23:25:00.007-04:302009-05-27T00:31:22.884-04:30Tutorial HTTP Service con Flex y PHPExisten dos grandes maneras de comunicarse remotamente a través de aplicaciones web, son dos enfoques que tienen diferencias muy marcadas, y que si aprendemos a utilizarlos bien, podemos explotar los mejores aspectos de cada método y lograr aplicaciones con una capa de datos robusta y veloz.<br /><br />Uno de los enfoques (SOAP) es a través de exposiciones de metodos remotos para que puedan ser llamadas desde otras computadoras, si quieres aprender un poco mas sobre eso puedes entrar a mi tutorial <a href="http://internetdeveloping.blogspot.com/2009/02/webservice-basico-con-php.html">Video tutorial WebService basico con php</a> donde lo explico as detalladamente.<br /><br />El otro enfoque, que utilizaremos en este tutorial, tiene que ver con los metodos mas primitivos que existen en el protocolo http, que seguramente los que han trabajado con formularios web han escuchado algunos de estos: POST, GET, PUT, DELETE, etc. Un ejemplo de arquitectura web que utiliza este enfoque es llamado <a href="http://es.wikipedia.org/wiki/Representational_State_Transfer">REST</a>.<br /><br />Vamos a emprezar, la aplicación que vamos a desarrollar va a tener dos lados, cliente y servidor. Del lado del cliente se creará una aplicacion flex llamada myHTTPService.mxml que se utilizará para visualizar todos los usuarios insertados en una base de datos y existirá un formulario para la insercion de un nuevo usuario. Del lado del servidor se creará una archivo PHP llamado request.php que permitirá acceder a la base de datos para realizar las consultas e inserciones pedidas por el cliente flex.<br /><span class="fullpost"><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KTID06xQkdLSVa0sWhqeoeE_UT-2xX_df1lN5W0-eA13Aqe4nAHiyAYMHXpElXUyjiIiFrChv6vAFWk_P9SuY6gbxq0lvftkjshj_UovRH_8ncyESd3UPZjgXQTdoUiRL1pTTwZx3g/s1600-h/arquitectura.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 303px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KTID06xQkdLSVa0sWhqeoeE_UT-2xX_df1lN5W0-eA13Aqe4nAHiyAYMHXpElXUyjiIiFrChv6vAFWk_P9SuY6gbxq0lvftkjshj_UovRH_8ncyESd3UPZjgXQTdoUiRL1pTTwZx3g/s320/arquitectura.JPG" alt="" id="BLOGGER_PHOTO_ID_5328707226073980722" border="0" /></a><br /><br /><span style="font-weight: bold;font-size:180%;" >El lado del Cliente</span><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhyphenhyphen1jpcPgE89Fvx1SJG3XNSrYifpODU21H3RUH63edJb4UE53CCxU3YeUjDn-R5IMdZJPx_b-hHzsV4liK6ia_8hmxf5X64qbvSMGOcWl3h4J2eyyzWAAQL22YQgcNSkE7wgkSTjXLA/s1600-h/code.gif"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhyphenhyphen1jpcPgE89Fvx1SJG3XNSrYifpODU21H3RUH63edJb4UE53CCxU3YeUjDn-R5IMdZJPx_b-hHzsV4liK6ia_8hmxf5X64qbvSMGOcWl3h4J2eyyzWAAQL22YQgcNSkE7wgkSTjXLA/s320/code.gif" alt="" id="BLOGGER_PHOTO_ID_5235648464763975906" border="0" /></a><span style="font-size:180%;"> <span style="color: rgb(0, 0, 102);">Código myHTTPService.mxml</span></span><br /><pre name="code" class="java"><br /><p><?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="send_data()" height="503"><br /><mx:Script><br /><![CDATA[<br />import mx.utils.ObjectProxy;<br />import mx.collections.ArrayCollection;<br />import mx.controls.Alert;<br />import mx.rpc.http.HTTPService;<br />import mx.rpc.events.ResultEvent;<br />import mx.rpc.events.FaultEvent;<br /><br />private var service:HTTPService </p><br /><p> [Bindable]<br />private var usuarios : ArrayCollection = new ArrayCollection();<br /><br />[Bindable]<br />public var cards: Array = ["PUT","POST","GET","DELETE"];<br /><br />[Bindable]<br />public var selectedItem:Object = "GET";</p><br /><p> public function send_data() : void<br />{<br />var obj : Object = new Object();<br />useHttpService(obj);<br />}<br /><br />public function procesar() : void<br />{<br />if(nombre.text.length>0)<br />{<br />var obj : Object = new Object();<br />obj.nombre = nombre.text;<br />obj.id = codigo.text;<br /><br />useHttpService(obj);<br />}<br />else<br />{<br />Alert.show("El nombre es obligatorio");<br />}<br />}<br /><br />public function traspasar() : void<br />{<br />var a : Object = dg.selectedItem;<br />nombre.text = a.nombre;<br />codigo.text = a.id;<br />}<br /><br />public function useHttpService(parameters:Object):void {<br />service = new HTTPService();<br />//service.destination = "http://localhost/tutoriales/httpservice/request.php";<br />service.url = "http://ejemplos.net78.net/httpservice/request.php";<br />service.method = "POST";<br />service.addEventListener("result", httpResult);<br />service.addEventListener("fault", httpFault);<br />service.useProxy = false;<br />service.send(parameters);<br />}</p><br /><p> public function httpResult(event:ResultEvent):void {<br />var result:Object = event.result;<br />//Do something with the result.<br />if(result.users.user is ObjectProxy)<br />usuarios = new ArrayCollection([{nombre:result.users.user.nombre , id:result.users.user.id}]);<br />else<br />usuarios = result.users.user;<br />}</p><br /><p> public function httpFault(event:FaultEvent):void {<br />var faultstring:String = event.fault.faultString;<br />Alert.show(faultstring);<br />}<br />]]><br /></mx:Script><br /><mx:DataGrid id="dg" x="10" y="10" dataProvider="{usuarios}" click="traspasar()"/><br /><mx:Canvas x="10" y="182" width="260" height="98" backgroundColor="#FFFFFF"><br /><mx:Label x="10" y="10" text="Nombre:"/><br /><mx:Label x="10" y="42" text="Id:"/><br /><mx:TextInput x="90" y="8" id="nombre"/><br /><mx:TextInput x="90" y="40" id="codigo" enabled="false"/><br /><mx:Button x="173" y="66" label="Insertar" click="procesar()"/><br /></mx:Canvas></p><br /><p></mx:Application></p><br /></pre><br /><br />Ahora, que debemos destacar de esta aplicacion, la esencia de todo esta en la funcion<span style="font-family:monospace;"> </span>useHttpService: Esta funcion se encarga de crear una peticion a un servicio http, para eso creamos un objeto de tipo <a href="http://livedocs.adobe.com/flex/201/langref/mx/rpc/http/HTTPService.html">HTTPService </a>que va a simular un comportamiento parecido al que sucede cuando le damos a submit en un formulario web estandar, pero en este caso, en lugar de colocar varios input text, comboboxes, etc. Vamos a armar un objeto (en esta funcion lo llamamos<span style="font-family:monospace;"> </span>"parameters") donde cada atributo de este objeto se comportara como una variable independiente en el lado de php, es decir, si al objeto le colocamos la propiedad nombre, entonces en php haremos $_POST['nombre'] para recibir el valor de esa propiedad.<br /><br /><blockquote>Recuerden que en Flex un objeto de la clase Object puede tener cualquier atributo que nosotros queramos, solo debemos asignarle un valor a ese atributo inventado y a partir de ese momento el objeto contiene ese atributo con ese valor que le dimos.</blockquote><br /><br />Ahora vamos a analizar esa funcion paso por paso:<br /><pre name="code" class="java"><br />public function useHttpService(parameters:Object):void {<br />service = new HTTPService();<br />service.url = "http://ejemplos.net78.net/httpservice/request.php";<br />service.method = "POST";<br />service.addEventListener("result", httpResult);<br />service.addEventListener("fault", httpFault);<br />service.send(parameters);<br />}<br /></pre><br />El objeto service que acabamos de crear debemos pasarle varios parametros:<br /><ol><li>URL: la direccion de la pagina que va a recibir nuestro formulario.</li><li>Method: puede ser POST, GET, PUT, DELETE, ETC.</li><li>send(parameters): Recuerden que el objeto parameters contiene todas las variables que queremos pasar al lado de PHP.</li><li>Por ultimo escuchamos dos eventos "result" y "fault", el primero de ellos se disparará si el servicio se invoca correctamente (si encontro el URL que pusimos arriba y si en el lado del servidor PHP nos devolvio un resultado coherente) y nos llevará a la funcion httpresult donde procesaremos los resultados, el segundo de los eventos se disparará si la llamada al servicio no puede ser procesada y nos llevará al método httpfault.</li></ol><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiLoM1t-CoxXdvobYi8UQVYnLce0I8nFcoiACtzHP-QpYP9-AOMGkvEf9OsJGrSj_I7vaDNPYrmDnuG27xTumV7IninEz4_rOa04xkncLz04e_qvDgtVo3CX92zNJP8gZ66osleMomA/s1600-h/parameters.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 95px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkiLoM1t-CoxXdvobYi8UQVYnLce0I8nFcoiACtzHP-QpYP9-AOMGkvEf9OsJGrSj_I7vaDNPYrmDnuG27xTumV7IninEz4_rOa04xkncLz04e_qvDgtVo3CX92zNJP8gZ66osleMomA/s400/parameters.JPG" alt="" id="BLOGGER_PHOTO_ID_5328707930239470434" border="0" /></a><span style="font-weight: bold;font-size:180%;" >El lado del servidor</span><br /><br />En el lado del servidor vamos a crear un archivo php llamado reques.php, este archivo deberá procesar correctamente las peticios POST que haga el lado del cliente y deberá devolver la lista de usuarios que han sido insertados dentro de la base de datos:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhyphenhyphen1jpcPgE89Fvx1SJG3XNSrYifpODU21H3RUH63edJb4UE53CCxU3YeUjDn-R5IMdZJPx_b-hHzsV4liK6ia_8hmxf5X64qbvSMGOcWl3h4J2eyyzWAAQL22YQgcNSkE7wgkSTjXLA/s1600-h/code.gif"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhyphenhyphen1jpcPgE89Fvx1SJG3XNSrYifpODU21H3RUH63edJb4UE53CCxU3YeUjDn-R5IMdZJPx_b-hHzsV4liK6ia_8hmxf5X64qbvSMGOcWl3h4J2eyyzWAAQL22YQgcNSkE7wgkSTjXLA/s320/code.gif" alt="" id="BLOGGER_PHOTO_ID_5235648464763975906" border="0" /></a><span style="font-size:180%;"> <span style="color: rgb(0, 0, 102);">Código request.php</span></span><br /><br /><pre name="code" class="php"><br /><p>//connect to the database<br />$mysql = mysql_connect("localhost", "root", "");<br />mysql_select_db( "phprestsql" );</p><br /><p>//if the username and email address are filled out<br />if( $_POST["nombre"])<br />{<br />//add the user<br />$Query = "INSERT INTO user VALUES ('".$_POST['nombre']."','')";<br />$Result = mysql_query( $Query );<br />}</p><br /><p>//return a list of all the users<br />$Query = "SELECT * from user";<br />$Result = mysql_query( $Query );</p><br /><p>$Return = "<users>";</p><br /><p>while ( $User = mysql_fetch_object( $Result ) )<br />{<br />$Return .= "<user><id>".$User->id."</id><nombre>".$User->nombre."</nombre></user>";<br />}<br />$Return .= "</users>";<br />mysql_free_result( $Result );<br />print ($Return);</p><br /></pre><br />Como pueden ver el lado de php es muy basico y es similar al que se utilizaria si estubieramos trabajando con formularios comunes y corrientes. Debemos recibir la variable "nombre" que pasamos desde flex y luego realizar una insercion en la base de datos. Luego de realizar la insercion consultamos toda la tabla de usuarios para implimir un xml en la pantalla que sera lo que constituirá el objeto de respuesta de vuelta hacia flex, ese se recibira como parametro del metodo httpresult en caso de que la llamada al servicio se haya ejecutado correctamente.<br /><br />Espero que hayan entendido todo prefectamente, trate de ser lo mas claro posible, cualquier pregunta no duden en preguntarme a través de los comentarios de este blog. Les dejo un ejemplo funcionando de la aplicacion y los codigos fuentes de ambos lados (cliente y servidor).<br /><br /><embed pluginspage=" http://www.macromedia.com/go/getflashplayer" src="http://aalejo.googlepages.com/myHTTPService.swf" height="300" width="300"></embed><br /><br /><a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=HTTPService.rar"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com10tag:blogger.com,1999:blog-1638565336393713256.post-21113509936585783772009-03-15T13:44:00.006-04:302009-05-27T00:51:17.067-04:30Modificando el HAccordion del FlexLib<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOPc2ed7lC0FU0T4dpFsyiX-VlDmSnyz5c12kgcAQhE06w3S-jIFejw4LzDPQpXutDU_YSEOJtkdO85EjEXZr0RtoDgJbcrnR5ItctJ_2lZ_qlb6plvq7n1hg5Fk1phTwPSffRNd4ldQ/s1600-h/bv.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 114px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOPc2ed7lC0FU0T4dpFsyiX-VlDmSnyz5c12kgcAQhE06w3S-jIFejw4LzDPQpXutDU_YSEOJtkdO85EjEXZr0RtoDgJbcrnR5ItctJ_2lZ_qlb6plvq7n1hg5Fk1phTwPSffRNd4ldQ/s200/bv.JPG" alt="" id="BLOGGER_PHOTO_ID_5313498271219912786" border="0" /></a><br />El los ultimos dias he tenido la nacesidad de utilizar el accordion horizontal que trae la librería flexlib que mencione en el <a href="http://internetdeveloping.blogspot.com/2009/02/flexlib-libreria-open-source-con.html">artículo anterior</a>, una vez hecho esto me di cuenta de que por problemas de diseño del framework de flex la cabecera (heather) del acordion no pued ser muy personalizada, nada mas alla de colocarle un texto y un icono deseado, a pesar de que tiene una propiedad llamada headerRenderer para colocarle tu propio renderer. Esto se debe, a que la este renderer debe ser un Button.<br /><br />Para solucionar esto la gente de Flexlib (Especificamente, Doug McCune) tubo una brillante idea y desarrollaro un Canvas que se comporta como botton para poder colocar cualquier cosa que queramos dentro de la cabecera del Vertical u Horizontal accordion, el <a href="http://flexlib.googlecode.com/svn/trunk/docs/flexlib/controls/CanvasButtonAccordionHeader.html">CanvasButtonAccordionHeader</a>, pero todavia hay un problema, el headerRenderer es único para todo el HAccordion. ¿Qué pasa si yo desearía que cada cabecera, de cada sección del accordion, fuera diferente? Diferentes colores, fondo, controles, etc. No unicamente un texto o un icono diferente.<br /><span class="fullpost"><br />Para solucionar eso he decidido colocar un ViewStack con todas las posbles cabeceras del HAccordion y dependiendo de cual quiero visualizar en cada una de las secciones le paso en la propiedad "label" del boton (recordemos que supuestamente la cabecera es un botón) el numero de View que deseo visualizar en ese caso (la propiedad selectedIndex del ViewStack). El codigo del CanvasButtonAccordionHeather quedaria de la siguiente manera:<br /><pre name="code" class="html"><br /><canvasbuttonaccordionheader xmlns="flexlib.containers.accordionClasses.*" mx="http://www.adobe.com/2006/mxml"><br /><mx:script><br /> <!--[CDATA[ [Bindable]--><br /></mx:script><br /> <mx:viewstack id="myViewStack" borderstyle="solid" width="100%" height="100%" selectedindex="{_label}" creationcomplete="init()"><br /> <mx:hbox id="v0" width="100%" height="100%" verticalgap="0" verticalalign="middle" backgroundsize="100%" backgroundimage="assets/accordionBack2.png"><br /> <mx:image source="assets/network.png" width="48" height="48"><br /> <mx:label text="Venezuela!" height="100%" width="100%" fontsize="25" fontweight="bold" color="#FFFFFF"><br /> </mx:label><br /> <mx:hbox id="v1" width="100%" height="100%" verticalgap="0" verticalalign="middle" backgroundsize="100%" backgroundimage="assets/accordionBack.png"><br /> <mx:image source="assets/brush.png" width="48" height="48"><br /> <mx:label text="Turismo en Venezuela" height="100%" width="100%" fontsize="25" fontweight="bold" color="#FFFFFF"><br /> </mx:label><br /> <mx:hbox id="v2" width="100%" height="100%" verticalgap="0" verticalalign="middle" backgroundsize="100%" backgroundimage="assets/accordionBack3.png"><br /> <mx:image source="assets/administrator.png" width="48" height="48"><br /> <mx:label text="Contactanos" height="100%" width="100%" fontsize="25" fontweight="bold" color="#FFFFFF"><br /> </mx:label><br /> </mx:image><br /></mx:hbox><br /></mx:image></mx:hbox></mx:image></mx:hbox></mx:viewstack></canvasbuttonaccordionheader></pre><br />Si se fijan, he colocado tres HBox dentro del ViewSatck, esto se debe a que mi acordion va a tener 3 secciones diferentes (V0, V1 y V2). Aunque esta no es la solucion mas ideal por lo menos me resulve de mis apuros, lo ideal sería tener un ViewStackButtonAccordionHeather, es decir, un ViewStack que se comporte como boton para que yo pueda presonalizarlo desde la aplicacion principal y no tener que crear un componente con todo el codigo cableado. Pero bueno, es un comienzo.<br /><br />El ejemplo definitivo de la pagina que estaba realizando lo pueden ver en <a href="http://ejemplos.net78.net/Venezuela/">este link</a>, de todas maneras aqui les dejo el ejemplo para que se lo descarguen.<a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=VAccordion.rar"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><a href="http://ejemplos.net78.net/Venezuela/" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 145px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTEi9ltA6iXF_DHouIy8q9U2UuerXdDpoc_9pe3RR90tiASqcZx0YMwBl-DxPkFoV9MJy3kiRs2Zu-Vz_W-JLxW1GJblpYRkuJLoUFgKXZpAjVzp80yga80ZiBzghsDhYsvHlPonGLGA/s400/vistaprevia.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459521108642658" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com2tag:blogger.com,1999:blog-1638565336393713256.post-56410176701318108422009-02-20T18:53:00.006-04:302009-04-09T16:49:39.236-04:30FlexLib Librería - Open Source con componentes para Flex<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbVvZOtDqfjlnj8duPfVTTyfr7JkQoAZVAXsv2k3tCRq2zFDyJhhDwu8mc02Si6aB6vtCDzBYz9XD3uNMrgaIgVatqQ3be00FRXzkr9wrdrgvl-4Y2iwcl6p-qomveT2SF8N6jmU7vyA/s1600-h/flexlib_logo.jpg"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 319px; height: 90px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbVvZOtDqfjlnj8duPfVTTyfr7JkQoAZVAXsv2k3tCRq2zFDyJhhDwu8mc02Si6aB6vtCDzBYz9XD3uNMrgaIgVatqQ3be00FRXzkr9wrdrgvl-4Y2iwcl6p-qomveT2SF8N6jmU7vyA/s320/flexlib_logo.jpg" alt="" id="BLOGGER_PHOTO_ID_5305038993188046082" border="0" /></a><br />Todos conocemos la importancia que tienen los componentes a la hora de realizar un diseño web (viene siendo uno de los aportes mas importantes de Flex sobre Flash). La comunidad desarrolladora de Flex se unó para realizar una librería llamada <a href="http://code.google.com/p/flexlib/">FlexLib</a> con los mejores componentes de los mejores programadores de flex conocidos. Entre algunos de los componentes (solo con los que yo he trabajado) que se incluyeron se encuentran:<br /><span class="fullpost"><br /><ol><li>Horizontal Accordion: Es similar al Vertical Accordion del framework original de flex pero permite deslizar los contenedores de izquierda a derecha en lugar de arriba hacia abajo.</li><li>DragScrollingCanvas: Algo parecido a lo que sucede en google maps, podemos arrastrar el contenido interno del canvas sin la necesidad de usar un ScrollBar o la ruedad del mouse, solo haciendo un drag sobre el contenido.</li><li>ButtonScrollingCanvas: Coloca botones en los extremos del contenedor, al presionarlos, colocar el mouse sobre ellos, etc. Se realiza un Scroll del contenido.</li><li>CanvasButton: Es un contenedor canvas que hereda de la clase Button, por lo que permite ser utilizado como HeatherRenderer de un Horizonal o Vertical Acorrdion.</li></ol>En Fin, si quieren conocer todos los componentes que tiene la librería los invito a entrar a la <a href="http://code.google.com/p/flexlib/wiki/ComponentList">siguiente direccion de FlexLib en Google Codes</a>. De todas maneras les dejo un vinculo para descargar la librería.<br /><a href="http://flexlib.googlecode.com/files/flexlib-.2.4.zip"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com5tag:blogger.com,1999:blog-1638565336393713256.post-43482970349613917032009-02-16T20:34:00.010-04:302009-05-27T00:42:15.208-04:30Utilizando un ItemEditor para modificar las filas de un DataGrid<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR093uASX8TTLMJAIU462x7hrZqId8r6FFNpISg26oQQNH50z_0Infs-W0niwlttQ317YLWFmdaDLfIVp25vQ7DG2lcgk8zSp4niDzg4V1h2ZQMFOXPkLvHzTVbo5I1QKEj4TEtsn1xA/s1600-h/DatagridItemEditorRender.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 200px; height: 101px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR093uASX8TTLMJAIU462x7hrZqId8r6FFNpISg26oQQNH50z_0Infs-W0niwlttQ317YLWFmdaDLfIVp25vQ7DG2lcgk8zSp4niDzg4V1h2ZQMFOXPkLvHzTVbo5I1QKEj4TEtsn1xA/s200/DatagridItemEditorRender.JPG" alt="" id="BLOGGER_PHOTO_ID_5303573679039709522" border="0" /></a><br />Este post lo voy a realizar como una continuacion del post anterior <a href="http://internetdeveloping.blogspot.com/2009/02/utilizando-un-itemrender-en-un-datagrid.html">Utilizando un ItemRender en un DataGrid</a> pero en este caso vamos a ampliar el ejemplo utilizando una propiedad llamada <a style="font-weight: bold;" href="http://www.google.co.ve/url?sa=t&source=web&ct=res&cd=1&url=http%3A%2F%2Flivedocs.adobe.com%2Fflex%2F3%2Fhtml%2Fcelleditor_8.html&ei=RxSaSd2SHdKgtweZmailCw&usg=AFQjCNGK3uQKabfBHB3fwIP553RinUbIdQ&sig2=fPiw0KfIQWj93WMwR7I4zQ">itemEditor</a>.<br /><br />Un <a style="font-weight: bold;" href="http://www.google.co.ve/url?sa=t&source=web&ct=res&cd=1&url=http%3A%2F%2Flivedocs.adobe.com%2Fflex%2F3%2Fhtml%2Fcelleditor_8.html&ei=RxSaSd2SHdKgtweZmailCw&usg=AFQjCNGK3uQKabfBHB3fwIP553RinUbIdQ&sig2=fPiw0KfIQWj93WMwR7I4zQ">itemEditor </a>es un componente que se utiliza para modificar informacion, a diferencia de un <a href="http://www.google.co.ve/url?sa=t&source=web&ct=res&cd=8&url=http%3A%2F%2Flivedocs.adobe.com%2Fflex%2F2%2Fdocs%2F00000827.html&ei=cRSaSYqfCY-EtgeO05GhCw&usg=AFQjCNGMVcfdqkql5c1Y3yEX1ZqeH6knvA&sig2=Unbe5j5Hdz-wFAs7Ja0vMw">itermRenderer </a>(que se utiliza unicamente para mostrar informacion) el <span style="font-weight: bold;">itemEditor </span>es ideal para realizar modificaciones a datos utilizando los componentes mas idoneos para facilitar la modificacion.<span class="fullpost"> La mejor manera de que se vea lo que trato de decir es mostrando el ejemplo que vamos a realizar:<br /><embed pluginspage=" http://www.macromedia.com/go/getflashplayer" src="http://aalejo.googlepages.com/DataGridItemEditor.swf" height="210" width="370"></embed> Como pueden notar al hacer click sobre alguna de las celdas los datos que se visualizaban ahora se renderizan de otra manera ideal para su manipulacion.<br /><br />Para lograr esto debemos colocar en cada columna una propiedad llamada itemEditor que contendrá la ruta hacia la clase o componente que queremos utilizar para renderizar los datos en el momento de la modificacion de la celda. En el caso de este ejemplo la estructura del <a href="http://www.google.co.ve/url?sa=t&source=web&ct=res&cd=1&url=http%3A%2F%2Flivedocs.adobe.com%2Fflex%2F2%2Flangref%2Fmx%2Fcontrols%2FDataGrid.html&ei=uhSaSdebE4H8tge-oZybCw&usg=AFQjCNEIm91y5FVA7kduhRgAYkMHn5hAog&sig2=ZLWUVBx_B1f3LJE9PmXhNw">DataGrid</a> queradía de la siguiente manera.<br /><pre name="code" class="html"><br /><mx:DataGrid id="dg" x="10" y="10" columnWidth="20" dataProvider="{datos}" rowHeight="25" editable="true" width="357"><br /><mx:columns><br /><mx:DataGridColumn headerText="RadioButton" dataField="radioValue" editable="false" itemRenderer="mx.controls.RadioButton"/><br /><mx:DataGridColumn headerText="NumericStepper" dataField="numeriValue" editorDataField="value" itemEditor="mx.controls.NumericStepper"/><br /><mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image" itemEditor="mx.controls.TextInput"/><br /><mx:DataGridColumn headerText="CheckBox" dataField="checkBoxValue" editable="false" itemRenderer="mx.controls.CheckBox"/><br /><mx:DataGridColumn headerText="TextInput" dataField="textValue" editable="true" itemEditor="mx.controls.TextInput"/><br /></mx:columns><br /></mx:DataGrid><br /></pre><br />Si no queremos que una columna en especifica se pueda editar debemos asignarle la propiedad editable=false.<br /><br />Bueno esto es todo en este ejemplo, como pueden ver es muy facil utilizar estos itemEditors para modificar las filas del DataGrid. Cualquier duda no duden en escribirme al correo aalejo@gmail.com.<br /><a href="http://ejemplos.net78.net/downloads/cont_descargas.php?archivo=DataGridItemEditor.rar"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 105px; height: 125px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE5kYqNBj9VJKVNKszoAO-KrqsR-JmseHKLzY_C_wMP4xJGghjAn89koH1AI2fCAfCn8e23B4Ss41-uwXjjsakBxn21lliPGJAFDlcFf5E6FdwrQbC4ZQvm2sLRFa8JVwatnsMQscCA/s400/descargar.jpg" alt="" id="BLOGGER_PHOTO_ID_5269459437839645906" border="0" /></a><br /></span>Alejandro Sanchezhttp://www.blogger.com/profile/01858272008297109735noreply@blogger.com2