AUMENTAR VISITAS EN MI BLOG

¿Que utilidad tiene posicionar mi web?

Si estás leyendo esto es porque tienes un blog y deseas sacar rendimiento de él bien sea por anuncios o publicitando tu negocio. 

Posicionar un blog es un trabajo largo y nada fácil, si lo que deseas es tener ingresos rápidos y con poco esfuerzo creo que debes de dejar de leer este artículo y buscar otro sitio. Probablemente pasen meses hasta que veas un euro, tendrás que aprender miles de conceptos que suenan a chino. anchor Text, on page, hiperlink, etiqueta, HTML y miles de técnicas de SEO que cuestan comprender. Veras como cuesta que las analíticas  suban, cuestionaras más de una vez si continuar.

Un trabajo bien hecho al final tiene su fruto. Y cuando tu llenas tu blog de contenido, lo aprendes a posicionar y sabes generar los artículos. El funcionará solo y te traerá los ingresos de una forma contínua.

Nociones básicas de Seo para blog

Bueno creo que lo  mejor es empezar por tener algunos pequeños conceptos claros. Para ganar dinero con tu web o blog has de estar entre los primeros en las búsquedas de google y para conseguir eso has de aplicar una serie de técnicas a la hora de escribir tus artículos. a ese conjunto de técnicas los llaman SEO (Search Engine Optimization) lo podemos traducir de forma literal como optimizar motores de búsqueda. Creo que con la traducción queda bien claro que nos enseña el SEO.

¿Como se consiguen ingresos en un blog?

Bien hemos llegado a la conclusión de que deseamos tener trafico en nuestro bloc, ¿para que? puede ser para miles de fines pero creo que el más eficiente de todos es ganar dinero. Para conseguir ganar dinero tendrás que introducir anuncios en tu blog y cuando tus clientes (lectores) hagan un clic en él tu cobraras. En función de la oferta y la demanda cobraras más o menos.  Esto quiere decir que cuantos más followers tengas más goloso serás para ellos, cuanto más trafico tenga tu pagina o blog más fácil será que uno de los lectores haga un clic en un anuncio, bien sea por error o porque le interese el anuncio.

En el siguiente articulo trataremos de ir aclarando algunos conceptos que iras oyendo si sigues leyendo sobre este tema.

¿Que es una palabra clave o Keywords?

Cuando tu realizar una búsqueda en google escribes un texto en el buscador. Esos textos se repiten infinidad de veces, Pero la pregunta es ¿que texto es el más repetido? Aquellos conjuntos de palabras que más se repiten en los buscadores se llaman palabras claves o anchor Text(texto ancla).  Existen muchas paginas en internet en las que puedes ver las palabras más buscadas cuando escribes sobre un tema. Yo suelo utilizar dos gratuitos Ubersuggest y answerthepublic por desgracia en este mundo verás que muchas aplicaciones son de pago y tienes que ir buscándote la vida.

Una palabra clave no es necesario que sea una única palabra, pueden ser un conjunto de varias, pero normalmente hay  contra más larga sea menor porcentaje de gente la buscará.

¿Que una palabra clave de cola larga?

Las palabras clave de cola larga o long tail son conjuntos de palabras muy largos que nos pueden posicionar para un nicho determinado.

Una palabra clave normal sería viajes de novios.

Una Long tail sería viajes de novios en segundo matrimonio buscando aventuras fuertes

En ocasiones la competencia para posicionarse para una palabra clave es muy grande y si luchamos por ella será muy difícil ganar notoriedad. En esas ocasiones tal vez nos interesa luchar por un long tail y cuando vayamos ganando fuerza entonces podremos luchas por las palabras ancla principales.

¿Que es un HyperLink?

Dentro de tu texto realizaras vínculos con páginas propias o ajenas, cuando tu realizar un enlace a otra página estás creando un hipervinculo o Hyperlink. Puedes realizarlos de dos formas follow o nofollow. 

• Follow: Le estás indicando a la araña de google que puede acceder por ese vinculo.La traducción literal es seguir.

• NoFollow: Le estas indicando a la araña de google que debe accedes por ahí.La traducción literal es no seguir.

¿Que es la araña de Google?

Para saber en todo momento la página o blog que posiciona más arriba google tiene programas que acceden a todas las pagina/blog y va entrando por los enlaces Follow que creamos para confeccionar un mapa de las palabras más buscadas. Por eso es muy importante que tus enlaces sean palabras clave o ancortex porque si son palabras muy utilizados por los buscadores google te posicionará mas alto. 

Imagina que tu pagina es el cuerpo humano. Tiene los nervios que transmiten la información desde el cerebro a todas las partes de él. Piensas que has de andar y existe un nervios que comunican la información hacia las piernas. Cuanto más joven eres mejor funciona tu sistema nervioso y tienes capacidad de reacción más rápida ante los estímulos. 

En nuestro caso cada vez que generamos un vinculo bien hecho generamos un nervio nueva por lo que conseguimos ser más ágiles y eso a google le encanta y nos posiciona más arriba.

¿Qué son las etiquetas o Labels?

Google te está preguntando: de las palabras que tú has escrito en tu texto cuáles consideras más importantes para que yo te valore y posicione. Debemos elegir palabras clave o anchor Text que aparezcan en el texto, porque estas son las más buscadas por el público.

Al rellenar las etiquetas o labels no podemos pasarnos de listos y escribir mil palabras porque esto nos penaliza. 

Bien google necesitas organizar todo lo que publicamos para que cuando las personas que buscan información aparezcan aquellas cosas más cercanas a sus frases.  Si google entra en tus etiquetas para poderte clasificar en ese archivo ly vemo muchas etiquetas no sabrá como clasificar tu articulo y ante eso no te clasifica para nada.

¿Que es el HTML?

HTML son las siglas de Hypertext Markup Language traducido como lenguaje de marcas hipertexto. Es el lenguaje con el que esta programada tu página web. Es posible que tu edites árticiculos desde blogger o WordPress pero tu estás utilizando el editor de textos y siempre estarás limitado a lo que te marca. Si deseas poner una casilla verificación o checkbox , un combobox, hacer que una imagen al pasar el ratón se haga más grande... Todo esto lo tenemos que hacer a nivel de código.

¿Que es la descripción de búsqueda o search description?

Es una breve descripción en la que debemos hacer una síntesis de nuestro articulo. Por su puesto utilizaremos palabras clave en ella, pero es muy importante que no pierda el sentido semántico, debemos encontrar el equilibrio para que nuestra descripción contenga palabras clave sin perder legibilidad. 

¿Que es una URL?

Es la dirección donde se encuentra nuestra página. Es el texto que aparece en la parte superior del buscador que utilices, tiene un texto que inicap por https://. Cada URL es única y identifica cada pagina o articulo de blog.

¿Que es el enlace permanente o Permalink?

Es la URL de nuestro artículo. Nuestro editor siempre nos pone una por defecto, si quereis tener exito no deis nada por sentado. No utiliceis la que bien por defecto, crearla siempre vosotros utilizando palabras ancla.

Estos son algunas de las cosas básicas que es importante tener claro para empezar a posicionar nuestro web. 

¿Que es el SEO Black Hat?

El SEO Black hat (SEO sombrero negro) es el seo malo. Es un tipo de SEO que penalizan lo buscadores al ser fraudulento. Posiciona nuestra página de una forma muy rápida pero puedes perder ti cuenta de publicidad.

¿Que son las meta description?

Es la descripción de búsqueda, cuando generamos un articulo tenmos un apartado que nos indica que hagamos una breve descripción de nuestro articulo. Esa descripción es la que aparece en el buscador. Es conveniente incluir en ella al menos una palabra clave pero dándole sentido a las frases.

¿Que es el SEO ON PAGE?

Tal y como dice su nombre son todas aquellas acciones que tú realizas en lu página o blog para conseguir posicionarla.

¿Que es el SEO OFF PAGE?

Son todos aquellos factores externos a tí que influyen con respecto al articulo que estás escribiendo. Repercusión social de lo que estás comentando en tu articulo en ese justo momento. Supongo que todos habréis oído hablar de los virales.

En un momento dado a la gente le da por una noticia determinada. Has de buscar la actualidad y experimentar con diferentes temas.

Si te gusta dale al like 

👍

Scrips para trabajar con html

Acceder al DOM con JavaScript

El DOM bien del ingles Document Objet Model. Cuando nosotros creamos un docuamento con html vamos cargando nodos con las etiquetas que estamos creaando, eso es el DOM. Cuando necesitas acceder a una parte determinada del docuamento con css, js, phputilizaremos el DOM para acceder a la parte del docuemnto que deseamos modificar, selecionar o guardar.

Existen varias formar de acceder pero una de ellas es con los siguientes métodos de JS.

1. getElementById ("id"):Acemos por los Id de los nodos.
2. getElementsByClassName("class"):Accedemos por las clases de los nodos.
3. getElementsByTagName("etiqueta"): Accedemos por las etiquetas de los nodos.
4. getElementsByName("name"):Accederemos por los name.

Script para copiar todas las etiquetas h2 de mi documento

En el siguiente fragmento de código accederemos al DOM de nuestro documento html y buscaremos las etiquetas h2, utilizando getElementsByTagName y el metodo textContent. Una vez obtenidos los textos de mis h2 los cargaré en un alert, en consola y por ultimo los capiare en un div.

Aquí os dejo mi código:

window.addEventListener("load", function(){

 var cargah2, copiar;
 var copiador="";
 //crea un array con los h2 con selector de etiquetas
 cargah2 = document.getElementsByTagName("h2"); 
 //selector de id
 copiar=document.getElementById("REpetir");
  for (var i = 0; i < cargah2.length; i++) {
   //cargar en un mensaje pnatalla
   alert(cargah2[i].textContent);
   //cargar en consola
   console.log(cargah2[i].textContent);
   //cargarlo en otro lugar en este caso en el div con id REpetir
   copiador += "<p>" + cargah2[i].textContent + "</p>";
   copiar.innerHTML = copiador;
  }

}, false);
  

Script para crear un índice con los h2 de mi pagina actual

                    <script type="text/javascript">

window.addEventListener("load", function(){                        
        var cargah2, copiar;
        var copiador="";
        //crea un array con los h2 con selector de etiquetas 
        cargah2 = document.getElementsByTagName("h2"); 
        //Crea un objeto que luego pasaremos a una etiqueta div con id REpetir
        copiar=document.getElementById("REpetir");
        var contadorEtiquetasT=0;
              for (var i = 1; i < cargah2.length; i++) {
                       //cargar en consola
                       console.log(cargah2[i].textContent);
                       //SI EXISTE UNA ETIQUETA H2 CON TEXTO Buscar este blog SAL DEL BUCLE
                       if (cargah2[i].textContent=="Buscar este blog") {breack; }

                     /*cargarlo en otro lugar, en este caso en el div con id REpetir.
                       Cada vuelta de bucle creara una etiqueta lista con una hipervinculo 
                       creado con una etiqueta a y la referencia sera a un id que incrementará 1
                       en cada vuelta, tenemos que dedar todos nuestros h2 con un id = T1, T2, T3...*/

    copiador += "<li id='subindice'><a href='#T" + contadorEtiquetasT + "'>" + cargah2[i].textContent + "</a></li>";
                      //pega copiador en el div con id REpetir
                       copiar.innerHTML = copiador;
                       contadorEtiquetasT++;

                       
              }

  },false);

                    </script>
                    <ol id="indice" class="indice">
                    <div id="REpetir"></div>
                    <ol>


  

Script para llenar un datalist.

Un data list es un conjuto de option, en este caso en lugar de reptir el código, crearemos un array con las diferentes opciones y se lo pasaremosa a un bucle for para cargar nuestro datalist.

Este es el código:

 <input name="DatalistConAray" list="ListaD" />
<datalist id="ListaD">
    <script type="text/javascript">
        var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
        var options = '';
            for(var i = 0; i < lista.length; i++){
                    options += '<option value="'+lista[i]+'" />';
                    document.getElementById('ListaD').innerHTML = options;
            }
 </script>

Script canvas

Tu navegador no soporta canvas

En el siguiente Script podemos ver como generar dos cuadrados, vaciarlos por dentro, crearemos la una función que cargará al cargar la páginay dibujara nuestros dos cuadrados utlizando los métodos:

1. getContext("2d")
2. fillRect(x,y,ancho,alto)
3. strokeRect(x,y,ancho,alto)
4. clearRect(x,y,ancho,alto)
5. fillStyle= "color"
6. strokeStyle= "color"
7. globalAlpha

Este será el código:

   
window.addEventListener("load", function Dibujar(){

    objCanvas1 = document.getElementById("Dibujo");
    var subObjetoCamvas, subObjetoCanvas2;
    var x = 10; var y = 10;var ancho=50;var Alto=50;
        
    subObjetoCamvas =  objCanvas1.getContext("2d");
    subObjetoCamvas2 =  objCanvas1.getContext("2d");

    subObjetoCamvas.fillRect(x,y,ancho,Alto);
    subObjetoCamvas.clearRect(x+10,y+10,ancho-20,Alto-20);

    subObjetoCamvas2.fillStyle="#3B6845";
    subObjetoCamvas2.fillRect(x+50,y+50,ancho,Alto);
   subObjetoCamvas.clearRect(x+60,y+60,ancho-20,Alto-20);
}, false );
  

Cómo crear un degradao de canvas

Para crear un degradado necesitaremos los métodos anteriormente mencionados, los siguientes:

1. createLinearGradient(x1,y1,x2,y2)
2. addColorStop(0, 'color')
3. fillStyle

Este sería el código:

function SegundoDibujo(){
 //construimos el canvas
    const canvas = document.getElementById('Dibujo_2');
    const ctx = canvas.getContext('2d');
    //construimos el degradado
    let gradient = ctx.createLinearGradient(0, 0, 300, 0);

    gradient.addColorStop(0, 'green');
    gradient.addColorStop(0.5, 'red');
    gradient.addColorStop(1, 'yellow');
    //le indicamos que el color de nuestro canvas es el obj. degradado
    ctx.fillStyle = gradient;
    //cargamos un rectangulo con el tamaño de todo nuestro canvas para que se vea.
    ctx.fillRect(0, 0, 300, 300);
}

  

Crear un canvas con degradao circular:

Para crearlo nesitaremos utilizar createRadialGradient(x1,y1,r1,x2,y2,r2): con x1 e y1 designaremos el punto de inico de nuestro primer circulo y con r el radio. Con x2, y2, r2 generamos el segundo circulo.

Este es el código de un degradado radialcon canvas:

window.addEventListener("load", function(){
    //constructor de canvas
    const canvas = document.getElementById("Dibujo_4");
    const Dibujo = canvas.getContext("2d");
    //constructor de estilo degradado circular
    let gradientCircle = Dibujo.createRadialGradient(160,75,50,160,75,200);
    gradientCircle.addColorStop(1,"red");
    gradientCircle.addColorStop(0,"green"); 
    //cargamos estilos a nuestro objeto canvas 2d
    Dibujo.fillStyle= gradientCircle;
    Dibujo.fillRect (0,0,300,300);

}, false);   

  

crear un dibujo líneal con canvas

your browser does not support canvas

Para relizar este canvas hemos necesitado los métodos:

1. beginPath(): Incio
2. moveTo(x,y) : Ir al punto
3. closePath(): Cerar figura
4. stroke(): Mostrar líneas del contorno.
5. fill(): Mostrar interior de la figura.

Este el código JS:

window.addEventListener("load", function Dibujante3(){
    //constructor del obj. Dibujo em  2d
 const canvas = document.getElementById("Dibujo_5");
    const Dibujo = canvas.getContext("2d");
    //Indicamos que inicia el trazado
    Dibujo.beginPath();
    //nos despazamos a la coordenada de incio de nuestro trazado
    Dibujo.moveTo(50,50);
    //indicamos donde finaliza nuestra línea
    Dibujo.lineTo(150,120);
    //marcamos una segunda y tercera línea.
    Dibujo.lineTo(150,50);
    Dibujo.lineTo(200,100);
    Dibujo.lineTo(20,60);

    //cerramos el objeto regresando al punto incial beginPath()
    Dibujo.closePath();
    //hace visible el objeto creado
    Dibujo.stroke();

}, false );

  

Crear una tabla y llenarla con los datos de varios arrays utilizando un bucle for

Esta tabla la hemos creado utilizando JavaScript.

Lenguage programación	Uso

En primer lugar necesitamos crear una estructura html5.

<table>
 <caption>Esta tabla la hemos creado utilizando JavaScript.
        <thead>
            <tr>
                <td>Lenguage programación</td>
                <td>Uso</td>
            </tr>

        </thead>
        <tbody>
        
         *******aquí es donde ira nuestro script

         </tbody>
                        

</table>         

         

Ahora cesesitamos dos arrays de JavaScript, uno por fila

 var funcion = ['html','JavaScript','Sql','Php','Java','JQuery' ];
 var uso = ['FrontEnd', 'FrontEnd','FrontEnd', 'BackEnd','BackEnd','FrontEnd'];
 

Ahora creamos un bucle for para crear las etiquetas y escribir en las celdas

    for (var i = 0; i <funcion.length; i++) {

           document.write("<tr>"+
                            "<td>" + funcion[i] +"</td>"+
                               "<td>"+ uso[i] +     "</td>"+
                          "</tr>"); 

                            } 
 

Así sería nuestro código completo:

 <table>
 <caption>Esta tabla la hemos creado utilizando JavaScript.
        <thead>
            <tr>
                <td>Lenguage programación</td>
                <td>Uso</td>
            </tr>

        </thead>
        <tbody>
         <script type="text/javascript">
          var funcion = ['html','JavaScript','Sql','Php','Java','JQuery' ];
     var uso = ['FrontEnd', 'FrontEnd','FrontEnd', 'BackEnd','BackEnd','FrontEnd'];
              for (var i = 0; i <funcion.length; i++) {

             document.write("<tr>"+
                              "<td>" + funcion[i] +"</td>"+
                                 "<td>"+ uso[i] +     "</td>"+
                            "</tr>"); 

                              }
          <script>
         </tbody>
                        

</table>         
  
 

Articulo de

David Giménez Plaza

2019-04-25

PRACTICA ESTILOS MENÚS CSS

ESTE ES EL H1 DEL HEADER

• nav 1
• nav 2
• nav 3

• aside 1
• aside 2
• aside 3
• aside 4
• aside 5
• aside 6
• aside 7

Articulo 1

Mi etexto escrito en una pagia html

Articulo 2

Mi etexto escrito en una pagia html

Articulo 3

Mi etexto escrito en una pagia html

Articulo 4

Mi etexto escrito en una pagia html

Este es el footer y os dejo mi css

h1.mih1{
 background: #A0C9C4;
 height: 150px;
 text-shadow: 1px 2px;
 text-align: center;
 padding-top: 5vh;
 font: bold 3em sans-serif ;
 color: #1760DD;
 -webkit-transition:all 1.5s;
 -o-transition:all 1.5s;
 transition: all 1.5s;


}

.mih1:active{ 
/*cuando tenga el boton izquierdo 
apretado (al soltar desaparece)*/
 color: black;
}

.menu{
color: white;
 //fuente negrita 10 sanserif
font: bold 2em  sans-serif;
border: 5px solid red;
margin-left: 10px;
border-radius: 3px;
width: 150px;
//quitar estilos de listas
list-style: none;  
padding: 5px;
/*transicion*/
text-transform: uppercase;
box-shadow: 0.2em 0em #4C6795 inset;
-webkit-transition:all 1.5s;
-o-transition:all 1.5s;
transition: all 1.5s;

}

li.menu:hover{
 box-shadow: 12em 0em  #4C6795 inset;
}
.cajaMenu{ 
 display: inline-flex;

   }


nav{ background: #708A9C;
}
aside.Miaside{ float:right;
  width: 39%;
  background: #9CAEBB;
  height:80vh;
  list-style: none;
  margin:20px 0px;
   }
.menuAside{
 list-style: none;
 padding: 5px ;
 margin-top:15px;
 border: 4px solid #103574;
 width: 80px;
 border-radius: 3px 3px;
 box-shadow: 0em 0.2em grey inset;
 -webkit-transition:all .8s;
 -o-transition:all .8s;
 transition: all .8s;

}
.menuAside:hover{

 box-shadow: 0em 2em red inset;
}
.code70{ color: blue; 
 font-size: 0.8em; 
}
section{background: #96E3D9;
 width: 60%;}
body{
 margin:20px;
 padding: 15px;
 border: 3px solid black;
}
footer{
 display: block;
 background: #24CD95;
 padding: 20px;
 margin: 20px 0px;

}
article{

 margin: 20px;
 padding: 10px;
 border: 5px solid red;
 background: grey;
 -webkit-transition:all 1.5s;
 -o-transition:all 1.5s;
 transition: all 1.5s;

}
article:hover{

  background: #9CA3AF;

}

¿Como obtener el valor de un JCoboBox?

JComboBox obtener el ItemEvent.SELECTED

Hoy estaba realizando un ejercicio con java en el que tengo que realizar una aplicación con Layouts libres para generar mensajes de forma automática, en dicha aplicación tiene generado Eventos de ratón MouseListener para JButton , JRadioButton  y JCheckBox para lo que utilice la interface MouseListener.

Todo iba bastante bien hasta que tuve que poner a la escucha mi JComboBox con la interface ItemListener.

¿ Que nos regresa ItemListener?

Cuando utilizamos el método getItem() este nos regresará el item que abandonamos (ItemEvent.LAST) y el que adquirimos en ese momento (ItemEvent.FRIST). Pero a nosotros seguramente nos haga falta el item seleccionado (ItemEvent.SELECTED).

¿Como conseguir que JComboBox nos regrese el registro seleccionado?

Bueno pues tras pelearme con todos los métodos de ItemEvent y dar mil vueltas por la web al final encontré como hacerlo.

Por supuesto lo primero poner a la escucha nuestro objeto.

TipoBotones . comboTipoMensaje .addItemListener ( new elquetodoloescucha ());

Y luego implementaríamos la interface ItemListener y utilizando un if nos quedaremos tan solo con que necesitamos ItemEvent.SELECTED

class elquetodoloescucha implementa ItemListener {

             public void itemStateChanged (ItemEvent e ) {

                   

Artículo de                     cadena ;

                   

                     if ( e .getStateChange () == ItemEvent. SELECTED ) {

item = (String) e .getItem (); Sistema. fuera .println ( artículo );

}     

      

            

            

             }

            

       }

Espero que os pueda ser útil como lo ha sido para mi, si alguien sabe algún método mejor que me lo diga. Muchas gracias.