Finally the help of IT is here

Blog de soluciones informaticas.

Desarrolla JavaScript, HTML y CSS Online.

Escrito por Xavier Xaus Nadal on octubre 28th, 2012

JsFiddle o como ellos lo llaman “parque recreativo para desarrolladores web”, es una gran herramienta web que se puede utilizar de muchas formas, como editor en línea para crear fragmentos de código JavaScript, HTML y CSS, para compartir nuestro código fuente y que otras personas lo testeen y para que vean los resultados directamente ejecutándose en una sencilla y amigable página web.

Con esta web los desarrolladores podrán aislar errores fácilmente y ver los resultados en tiempo real, incluso comprobar si el código JavaScript compila correctamente.

En la interfaz del producto tenemos 3 áreas bien diferenciadas donde trabajar, en la parte superior podemos ver los iconos, para ejecutar el código, guardarlo, compartirlo, en la parte lateral izquierda podemos modificar diferentes opciones para conseguir los paneles de la derecha contengan las herramientas necesarias para conseguir lo resultados deseados, desde modificar los paneles hasta modificar el código de programación, SCSS, CofeeScript, JavaScript, etc..

Y la magia en los 4 paneles de la derecha, HTML, CSS, JavaScript y Result donde al pulsar sobre el botón RUN veremos los resultados de nuestro código.

Os dejo un ejemplo y ya me contaréis si os ha sido útil esta web (http://jsfiddle.net/B6Jsy/50/)

En el ejemplo he creado una parte de código CSS y otra HTML para poder poner 2 módulos de publicidad Adsense en un sólo bloque con márgenes entre ellos y con una alineación centrada.

Como podéis ver en el código HTML llamo a la clase “publidiv” que he creado en la hoja de estilos (CSS) y de esta forma puedo usarla en cualquier punto de la página web únicamente llamando a la clase publidiv o publi para que el contenido de la publicidad adsense que centrada siempre.

JsFiddle JavaScript

El código HTML es el siguiente:

<div class="publidiv">
    <div class="publi">
        <!-- Primera publicidad izquierda 336x280-->
        <script type="text/javascript"><!--
            google_ad_client = "ca-pub-9697841551421870";
            google_ad_slot = "3401809585";
            google_ad_width = 336;
            google_ad_height = 280;
        //-->
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

    </div>
    <div class="publi">
        <!-- Publicidad derecha 300x250-->
        <script type="text/javascript">
        <!--
            google_ad_client = "ca-pub-9697841551421870";
            google_ad_slot = "3208972180";
            google_ad_width = 300;
            google_ad_height = 250;
        //-->
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

    </div>
</div>

 

El código CSS es el siguiente:

.publidiv{
    text-align:center;
    border:1px solid #666;
}
.publi{
    display:inline-block;
    margin:5px 40px;
    padding:5px;
}?

Y el resultado lo podéis ver por ejemplo al principio de este artículo.

Si queréis aprender más sobre esta web pasaros por el siguiente enlace: http://doc.jsfiddle.net/basic/introduction.html

Si tenéis más preguntas sobre como ganar dinero con publicidad, como poner vuestra publicidad adsense en un blog, o como alinear la publicidad, haced-nos las preguntas como un comentario y os las resolveremos en la medida de lo posible cuanto antes.

Espero que os haya gustado, saludos y hasta pronto.

Related Posts Plugin for WordPress, Blogger...
Etiquetas: , , , , ,


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>