Cosas a tener en cuenta:

1- Utilizar palabras claves formadas por un conjunto de 3 o 5 palabras muy especificas ej: ( Jogar bingo gratis online ).

2- Escribir siempre para personas (NUNCA SOLO PARA BUSCADORES).

3- Si el artículo es muy largo, resumir todo al final.

4- Poner en Negrita, las palabras y/o frases importantes o destacadas.

5- Organizar el artículo en Puntos.

6- Explicar los puntos en párrafos cortos

7- Poner la información mas importante al principio

8- Los párrafos cortos son mas fáciles de leer

9- 3 o 4 frases por parrafo.

En esta oportunidad y luego de buscar un poco mucho, pude solucionar un problema que tenía en un e-commerce que estoy armando hace ya un par de meses.

El problema que tenía es que al no querer utilizar algún plugin de slider que sea poco estilizable, me decidi por incluir el bxslider, que es el slide que utilizo siempre a la hora de poner un slide en algun sito para algun cliente, me parece súper eficiente, fácil de integrar y súper cuztomizable.

Al intentar incluir esto me encontré con el primer problema, "Prototype", si magento usa prototype, y esto es todo un tema para la gente que usa jquery ya que al tener los dos frameworks en el mismo sitio se arma un conflicto entre ellos, debido a que los 2 utilizan "$" para definir las funciones.

Para poder solucionar esto modifique el "jquery.js" y cambie "$" por "$j"

Después modifique también el "jquery.bxslider.js" haciendo lo mismo cambiando el "$" por el "$j"

Para insertarlo en magento abrí el archivo head.phtml e inserte el siguiente código:

<script type="text/javascript" src="http://(TUSITIO)/html/js/lib/jqueryprototipe/jquery.js"></script> //ACA INCLUIMOS EL JQUERY MODIFICADO
<script>
var $j = jQuery.noConflict(); // ACA INCLUIMOS EL "noConflict();" para no tener conflico con prototype
</script>
<script type="text/javascript" src="http://www.nexostudios.com/nexostudios.com/html/js/lib/jqueryprototipe/jquery.bxSlider.js"></script> // ACA INCLUIMOS EL BXSLIDER MODIFICADO
<script type="text/javascript"> // ACA INCLUIMOS EL SCRIPT PARA QUE FUNCIONE EL BXSLIDER
$j(document).ready(function(){
$j('#slider1').bxSlider({
auto: true,
pager: true,
speed: 500,
pause: 3000,
});
});
</script>

Y listo nuestro slider quedo funcionando en magento y sin conflictos.

Espero les sea de utilidad.

Acá les dejo los JS modificados:

jquery
jquery.bxSlider

Cualquier cosa comenten y les contestare en elo momento

Hace ya mas de una semana esta en la red un nuevo sitio armado integramente en NexoStudios.com.

El Cliente necesitaba un sitio activo y dinamico, ya que el proyecto consta de un diario digital, automantenido por publicidad y donaciones.

Luchadoresdeltejido.com.uy es un diario digital con las ultimas actualizaciones semana a semana del Club Atletico Floirda pero visto desde un lado mas "Hincha"

Con la participacion de varios periodistas y reconcocidos seguidores de todos los tiempos del club, Luchadores es un sitio lleno de informacion para el hincha de el club atletico en floirda y el mundo, en el que se podran encontrar: Noticias, fotos, reportajes, galerias etc etc.

Desde NexoStudios.com les deseamos el mejor de los exitos.

URL del sitio: http://www.luchadoresdeltejido.com.uy

http://manuelalvarez.tk

Como muchos saben y experimentan a diario cuando tenemos 2 bloques de contenido dentro de uno exterior Ej.:

<div class="content">
<div class="block-left">
</div>
<div class="block-right">
</div>
</div>

Lo que naturalmente se utiliza es para que queden un bloque flotado a la izquierda y el otro a la derecha se les agrega el estilo: float: left o float:right; según sea el caso.

El problema que esto nos trae es que el div que esta por afuera no se dibuja en los navegadores como tendría que hacerlo ya que como los bloques internos están flotados, el navegador supone que el contenido no tiene alto, un solución muy conocida es utilizar un div vacío con un style="clear:both" que soluciona a la perfección pero a la hora de un sitio complejo en el que se utilizan muchas cosas flotando se generan muchos divs vacíos tornando nuestro código en un poco confuso y entreverado.

Una buena solución a este problema es como dice el titulo usar el style="overflow:auto;" en el bloque que en este caso llamamos con una class="content" esto lo que hace es que el navegador independientemente de si los divs internos a este estén flotados o no toma el alto de estos para así dibujarse.

Una de las cosas a tener en cuenta es que si le agregamos un alto fijo al contenedor menor que el alto de los div internos esto nos generara una barra de scrool a la derecha.

Otro de los problemas es que si queremos sacar un div para afuera con un position: absolut; o algún tipo de estilo así también nos generara un scroll.

A pocos días del estreno oficial de la suite CS5, Adobe ha dado a conocer una nueva función dentro de Flash CS5, muy arriesgada pero muy inteligente a la vez.

Se trata de una herramienta que convertirá las animaciones Flash a HTML5 Canvas. Un audaz movimiento de parte de Adobe pues vendría siendo, por decirlo de una forma simple, matar definitivamente el plugin flash pero mantener el lenguaje de programación para desarrolladores y a la vez seguir imprimiendo dinero para la firma.

Es una situación win-win para Adobe, desarrolladores y usuarios.

Flash CS5 permitirá, entonces, a los desarrolladores, exportar sus antiguas o nuevas animaciones directamente a código HTML5 con un simple copy/paste. Por otro lado, mientras los usuarios tengan un browser compatible con HTLM5 podrán navegar felizmente por cualquiera de estas páginas sin necesidad de tener Flash instalado.

Ahora que todos los navegadores importantes soportan HTML5, y con IE9 en camino (si es que alguien lo estuviera esperando) con soporte para el nuevo estándar, los desarrolladores se irán de juega con esta noticia, podrán hacer viables sus antiguas animaciones y páginas hechas en flash sin preocuparse si el visitante tendrá instalado el plugin.

A continuación un video demostrativo (a partir del minuto 3 en adelante), aunque ojo, el inglés del presentador deja harto que desear:Flash CS5 will export to HTML5 Canvas

Sencha Touch es el primer framework HTML5 pensado para desarrollar aplicaciones web para dispositivos móviles con efectos que aparentan ser los nativos de los sistemas operativos IOS y Google Android, se trata de la primera aplicación que nace desde la unión de Ext JS con jQTouch y Raphaël con el nombre de Sencha.

Este framework te proporcionará un librería con múltiples widgets de usuario, control para los eventos táctiles de los dispositivos móviles con efectos muy agradables gracias a CSS3, está creada para aprovechar al máximo el potencial de HTML5, CSS3, y Javascript permitiendo la introducción de vídeo y audio así como también dispone de un proxy local para guardar datos sin conexión, los desarrolladores que utilicen esta herramienta podrán solicitar los datos mediante Ajax, JSONp o YQL.

Sencha touch se aprovecha de la tecnología SASS para que con solo cambiar unas variables podamos cambiar totalmente la presentación de la aplicación, además el propio Framework se adaptará a las resoluciones de cada pantalla para que se pueda visualizar correctamente en la gran variedad de dispositivos del mercado.

Si estás pensando en desarrollar una aplicación web para móviles te recomiendo que lo pruebes, solo pesa 80kb y te permite ofrecer al usuario una interfaz muy amigable y sencilla.

Página oficial: Sencha Touch

Damas y caballeros lo que muchos consumidores intensivos de Internet veníamos esperando desde hacía algún tiempo acaba de llegar, me estoy refiriendo a la primera versión Beta del navegador web Firefox 4 la cual Mozilla ha liberado hace unas pocas horas (tanto para Windows como para Mac y Linux). ¿Y qué trae de nuevo esta primera Beta de la versión 4 de Firefox? Pues bastantes cosas -aunque no todas las que llevará la versión final obviamente- y de entre todas dos destacan sin duda sobre el resto.

Lo primero que uno nota nada más que empieza a cacharrear con esta primera Beta, al menos en mi caso, es que realmente va mucho más fluida que los anteriores Firefox (a pesar de que el consumo de recursos sigue siendo demasiado alto). El segundo punto que más destaca de la Beta 1 es el rediseño completo que han realizado de la interfaz -en la versión de Mac y Linux sigue implementada la anterior- el cual personalmente me gusta y me parece mucho más usable que el de antes (por ejemplo las pestañas pasan a estar en la parte de arriba o ahora en cada pestaña hay un indicador del progreso de carga de la web que estemos abriendo). Además de estos dos “pilares principales” Firefox 4 Beta 1 viene con un montón de mejoras más, algunas de ellas enumeradas rápidamente:

• El gestor de complementos cambia por completo
• Soporte nativo para WebM y aceleración de vídeo por hardware
• Mejora el soporte de HTML5 y CSS3
• Añaden “protección contra fallos”, es decir que cuando se bloquee un plugin o similares el navegador no romperá del todo y podremos eguir navegando
• Mejoras en la gestión de privacidad
• Para los desarrolladores añaden un montón de cosas interesantes como soporte para WebSockets, IndexedDB o JetPack SDK

Aunque no he probado lo suficiente todavía esta Beta como para soltar una valoración contundente sobre la misma, si que creo que los de Mozilla han conseguido, o como poco van por buen camino, solucionar uno de los aspectos en los que sin duda estaban fallando y que más daño les estaba haciendo: la mala velocidad de apertura-cierre-navegación. Por otro lado también hay que tener en cuenta antes de empezar con los juicios que estamos ante una primera Beta de lo que se desprende que a Firefox 4 todavía le queda bastante camino por recorrer.

Termino con la pregunta que el tema claramente está pidiendo a gritos: ¿a ti que tal te está funcionan Firefox 4 Beta 1? Quedan abiertos los comentarios como siempre.

Vía: Bitelia

En este post se presenta una nueva forma rápida de escribir código HTML utilizando la sintaxis de selector CSS-como - un conjunto de herramientas útiles para la alta velocidad de codificación HTML y CSS. Ha sido desarrollado por nuestro autor,  Serguéi Chikuyonok.

¿Cuánto tiempo le dedicas a escribir código HTML: todas esas etiquetas, atributos, citas, tirantes, etc Usted tiene más fácil si su editor de elección ha completado con el código, pero aún así hacer un montón de escribir.

Tuvimos el mismo problema en el mundo de JavaScript al que queríamos tener acceso a un elemento específico en una página Web. Teníamos que escribir mucho código, que se convirtió en realmente difícil el apoyo y la reutilización. Y entonces llegó frameworks de JavaScript, CSS, que introdujo los motores de selector. Ahora, puede utilizar expresiones CSS sencilla de acceder a los elementos DOM, que está muy bien.

Pero ¿qué pasa si usted podría utilizar no sólo para los selectores CSS estilo y elementos de acceso, pero para generar el código? Por ejemplo, ¿qué pasa si usted podría escribir esto ...

div # content> h1 + p

... Y ver esto como la salida?
ver el código fuente
de impresión?
1 <div id="content">
2 <h1> </ h1>
3 <p> / p>
4 </ div>

Hoy voy a presentar a Zen codificación de mercancías, un conjunto de herramientas para la alta velocidad de codificación HTML y CSS. Originalmente propuesto por Vadim Makeev (artículo en ruso) en abril de 2009, se ha desarrollado para su seguridad (es decir yo) de los últimos meses y finalmente ha llegado a un estado maduro. Codificación Zen consiste en dos componentes principales: un expansor abreviatura (abreviaturas son selectores CSS-similar) y Matcher-par de etiquetas HTML independiente del contexto. Vea este vídeo de demostración para ver lo que pueden hacer por usted.

Si desea omitir las instrucciones detalladas y una guía de uso, por favor, eche un vistazo a la demo y descargar el plugin de inmediato:

Demo

• Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)

Downloads (Full Support)

• Aptana (cross-platform);
• Coda, via TEA for Coda (Mac);
• Espresso, via TEA for Espresso (Mac);

Downloads (Partial Support, “Expand Abbreviation” Only)

• TextMate (Mac, and can be used with E-text editor for Windows);
• TopStyle;
• Sublime Text;
• GEdit;
• editArea online editor;

Now, let’s see how these tools work.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Expand Abbreviation

The Expand Abbreviation function transforms CSS-like selectors into XHTML code. The term “abbreviation” might be a little confusing. Why not just call it a “CSS selector”? Well, the first reason is semantic: “selector” means to select something, but here we’re actually generating something, writing a shorter representation of longer code. Secondly, it supports only a small subset of real CSS selector syntax, in addition to introducing some new operators.

Here is a list of supported properties and operators:

• E
  Element name (div, p);
• E#id
  Element with identifier (div#content, p#intro, span#error);
• E.class
  Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;
• E>N
  Child element (div>p, div#footer>p>span);
• E+N
  Sibling element (h1+p, div#header+div#content+div#footer);
• E*N
  Element multiplication (ul#nav>li*5>a);
• E$*N
  Item numbering (ul#nav>li.item-$*5);

As you can see, you already know how to use Zen Coding: just write a simple CSS-like selector (oh, “abbreviation”—sorry), like so…

…and then call the Expand Abbreviation action.

There are two custom operators: element multiplication and item numbering. If you want to generate, for example, five <li> elements, you would simply write li*5. It would repeat all descendant elements as well. If you wanted four <li> elements, with an <a> in each, you would simply write li*4>a, which would generate the following output:

The last one–item numbering is used when you want to mark a repeated element with its index. Suppose you want to generate three <div> elements with item1, item2 and item3 classes. You would write this abbreviation, div.item$*3:

Just add a dollar sign wherever in the class or ID property that you want the index to appear, and as many an you want. So, this…

would be transformed into:

You’ll see that when you write the a abbreviation, the output is <a href=""></a>. Or, if you write img, the output is <img src="" alt="" />.

How does Zen Coding know when it should add default attributes to the generated tag or skip the closing tag? A special file, called zen_settings.js describes the outputted elements. It’s a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntaxes, such as HTML, XSL, CSS, etc.). The common language abbreviations definition looks like this:

Element Types

Zen Coding has two major element types: “snippets” and “abbreviations.” Snippets are arbitrary code fragments, while abbreviations are tag definitions. With snippets, you can write anything you want, and it will be outputted as is; but you have to manually format it (using \n and \t for new lines and indentation) and put the ${child} variable where you want to output the child elements, like so: cc:ie6>style. If you don’t include the ${child} variable, the child elements are outputted after the snippet.

With abbreviations, you have to write tag definitions, and the syntax is very important. Normally, you have to write a simple tag with all default attributes in it, like so: <a href=""></a>. When Zen Coding is loaded, it parses a tag definition into a special object that describes the tag’s name, attributes (including their order) and whether the tag is empty. So, if you wrote <img src="" alt="" />, you would be telling Zen Coding that this tag must be empty, and the “Expand Abbreviation” action would apply special rules to it before outputting.

For both snippets and abbreviations, you can ad a pipe character (|), which tells Zen Coding where it should place the cursor when the abbreviation is expanded. By default, Zen Coding puts the cursor between quotes in empty attributes and between the opening and closing tag.

Example

So, here’s what happens when you write an abbreviation and call the “Expand Abbreviation” action. First, it splits a whole abbreviation into separate elements: so, div>a would be split into div and a elements, with their relationship preserved. Then, for each element, the parser looks for a definition inside the snippets and then inside the abbreviations. If it doesn’t find one, it uses the element’s name as the name for the new tag, applying ID and class attributes to it. For example, if you write mytag#example, and the parser cannot find the mytag definition among the snippets or abbreviation, it will output <mytag id="example"><mytag>.

We have made a lot of default CSS and HTML abbreviations and snippets. You may find that learning them increases your productivity with Zen Coding.

HTML Pair Matcher

Another very common task for the HTML coder is to find the tag pair of an element (also known as “balancing”). Let’s say you want to select the entire <div id="content"> tag and move it elsewhere or just delete it. Or perhaps you’re looking at a closing tag and want to known which opening tag it belongs to.

Unfortunately, many modern development tools lack support for this feature. So, I decided to write my own tag matcher as part of Zen Coding. It is still in beta and has some issues, but it works quite well and is fast. Instead of scanning the full document (as regular HTML pair matchers do), it finds the relevant tag from the cursor’s current position. This makes it very fast and context-independent: it works even with this JavaScript code snippet:

Wrapping With Abbreviation

This is a really cool feature that combines the power of the abbreviation expander with the pair tag matcher. How many times have you found that you have to add a wrapping element to fix a browser bug? Or perhaps you have had to add decoration, such as a background image or border, to a block’s content? You have to write the opening tag, temporarily break your code, find the appropriate spot and then close the tag. Here’s where “Wrap with Abbreviation” helps.

This function is pretty simple: it asks you to enter the abbreviation, then it performs the regular “Expand Abbreviation” action and puts your desired text inside the last element of your abbreviation. If you haven’t selected any text, it fires up the pair matcher and use the result. It also makes sense of where your cursor is: inside the tag’s content or within the opening and closing tag. Depending on where it is, it wraps the tag’s content or the tag itself.

Abbreviation wrapping introduces a special abbreviation syntax for wrapping individual lines. Simply skip the number after the multiplication operator, like so: ul#nav>li*>a. When Zen Coding finds an element with an undefined multiplication number, it uses it as a repeating element: it is outputted as many times as there are lines in your selection, putting the content of each line inside the deepest child of the repeating element.

If you’ll wrap this abbreviation div#header>ul#navigation>li.item$*>a>span around this text…

About Us
Products
News
Blog
Contact Up

You’ll get the following result:

You can see that Zen Coding is quite a powerful text-processing tool.

Online Demo

You’ve learned a lot about how Zen Coding works and how it can make your coding easier. Why not try it yourself now, right here? Because Zen Coding is written in pure JavaScript and ported to Python, it can even work inside the browser, which makes it a prime candidate for including in a CMS.

• Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)

Supported Editors

Zen Coding doesn’t depend on any particular editor. It’s a stand-alone component that works with text only: it takes text, does something to it and then returns new text (or indexes, for tag matching). Zen Coding is written in JavaScript and Python, so it can run on virtually any platform out of the box. On Windows, you can run the JavaScript version of Windows Scripting Host. And modern Macs and Linux distributions are bundled with Python.

To make your editor support Zen Coding, you need to write a special plug-in that can transfer data between your editor and Zen Coding. The problem is that an editor may not have full Zen Coding support because of its plug-in system. For example, TextMate easily supports the “Expand Abbreviation” action by replacing the current line with the script output, but it can’t handle pair-tag matching because there’s no standard way to ask TextMate to select something.

Full Support

• Aptana (cross-platform);
• Coda, via TEA for Coda (Mac);
• Espresso, via TEA for Espresso (Mac);

Partial Support (“Expand Abbreviation” Only)

• TextMate (Mac, and can be used with E-text editor for Windows);
• TopStyle;
• Sublime Text;
• GEdit;
• editArea online editor;

Aptana is my primary development environment, and it uses a JavaScript version of Zen Coding. It also contains many more tools that I use for routine work. Every new version of Zen Coding will be available for Aptana first, then ported to Python and made available to other editors.

The Coda and Espresso plug-ins are powered by the excellent Text Editor Actions (TEA) platform, developed by Ian Beck. The original source code is available at GitHub, but I made my own fork to integrate Zen Coding’s features.

Conclusion

Many people who have tried Zen Coding have said that it has changed their way of creating Web pages. There’s still a lot of work to do, many editors to support and much documentation to write. Feel free to browse the existing documentation and source code to find answers to your questions. Hope you enjoy Zen Coding!