NeytorTec Tutoriales Web

Plugin Yoast Seo Premium, Yoast Local para Webmasters

2018-06-21T20:34:00.001-07:00

Hola les traigo Yoast Premium, Yoast Local, Yoast Video y Yoast WooCommerce totalmente gratis para todos los que quieres disfrutar de este excelente plugin, mejor de todo esto es que lo puedes utilizar sin inconvenientes.

Dsifruta de las ventajas de Yoast seo Premium, Yoast Local, Yoast Video y Yoast WooCommerce

Para los que quieran obtener el Yoast Seo pueden hacerlo desde aquí : Yoast

Si quieres obtener mas beneficios, y otras cosas mas como plugins y plantillas para blogger o wordpress. Solo tienes que escribirnos a nuestros correos de contacto.

Extraer email de una Base de datos con PHP

2018-03-08T11:42:00.002-08:00

Hoy veremos un ejemplo muy práctico sobre como extraer un email de una base de datos utilizando PHP, para aquellos que recién se están iniciando en el mundo del desarrollo web de aplicaciones de seguro que este pequeño ejemplo les servirá de mucho.

Aprenda como Extraer email de una Base de datos con PHP

Una típica consulta a una base de datos consiste en extraer todos los datos de una columna (el e-mail por ejemplo) para enviar un boletín de noticias a todos los usuarios registrados en nuestra Web.

Ahora veremos como se extraen los e-mail de la tabla de la base de datos, posteriormente veremos como se envía en e-mail con PHP.

Vayamos a crear una pequeña consulta :

<?php
// Recuperamos todos los valores de un campo de una base de datos y los guardamos en una varaible.

include('../abre_conexion.php');

// Consulta para extraer los email

$query_recupero = "SELECT email FROM $tabla_db1";

$recupero = mysql_query($query_recupero, $conexion_db) or die(mysql_error());

// ------ Es el elemento que usaremos para separar los diferentes elementos de cada campo
$separador = ", ";

// ----------------- Creamos una cadena con todos los elementos del campo
$lacolumna="";
while ($row_recupero=mysql_fetch_assoc($recupero)) {
$lacolumna .= ($row_recupero['email']."$separador");
}

$largo = strlen($lacolumna);
if ($largo > 2)
{
// ----------------- Eliminamlos el ultimo separador $separador
$lacolumna = substr($lacolumna,0,$largo-2);
}
else
{
echo "No hay e-mail en esta tabla!";
die();
}
include('../cierra_conexion.php');

echo "$lacolumna";
?>

Créditos : www.uterra.com

Como hacer botón para imprimir página con JavaScript

2018-02-07T18:31:00.001-08:00

Hoy veremos algo sencillo en nuestro tutorial, porque vas a aprender como hacer botón para imprimir página con JavaScript, un simple código que hace algo importante para personas que están buscando una solución muy rápida para dejar que sus usuarios puedan imprimir los contenidos de su web.

Aprendiendo como hacer botón para imprimir página con JavaScript

Lo único que haremos será crear un input tipo botón y con el evento onclik de JavaScript haremos que funcione a la perfección.

Veamos pues entonces como hacer funcionar este pequeño código :

<input type="button" value="Imprime esta página" onclick="window.print()">

Como puedes ver imprimir una página con JavaScript es muy fácil, tan solo necesitas esa pequeña línea de código para hacer que funcione a la perfección este evento.

Si deseas muchos mas tutoriales JavaScript, por favor puedes solicitarlo en nuestros comentarios, o también puedes dejarnos algún tema en especial que quieras que toquemos. Gracias

Solucionar Miniatura de las Entradas borroso blogger

2018-01-18T14:53:00.001-08:00

Hoy vamos a aprender a solucionar un problema con las miniaturas de las entradas borroso en blogger, se que a muchos les a pasado puesto que hay muchas plantillas que tienen este pequeño inconveniente debido a una validación en el thumb de las imágenes.

Como Solucionar Miniatura de las Entradas borroso blogger

Como ya les he mencionado, este problema radica en el diseño de plantillas para blogger, puesto que se han validado en muchas ocasiones de la forma incorrecta.

Vayamos entonces a hacer lo siguiente :

Si aún no estas muy relacionada con la búsqueda de código de la plantilla de tu blog, puedes empezar por presionar CTRL + F, dentro del código XML, de esta manera se te será muy fácil encontrar lo que quieras.

Entonces entraremos a buscar el siguiente código :

<div class='block-image'>
<div class='thumb'>
<a href='<data:post.url/>' style='background:url(<data:post.thumbnailUrl/>) no-repeat center center;background-size:cover'><span class='thumb-overlay'/></a>
</div>

Explicación para solucionar el problema de la imagen borrosa en blogger

De seguro dentro del código vas a encontrarlo así data:post.thumbnailUrl , solo necesitaras hacer un pequeño cambio ya que lo reemplazaras por este último data:post.firstImageUrl

El problema de todo esto radica en que el thumb te saca de la imagen en miniatura, cuando en realidad debería sacar un thumb de la imagen original.

Recomendaciones:

Recuerda siempre hacer un backup de tu blog cuando vayas a modificar algún código, no obstante también recuerda poner comentarios dentro de tu blog para que códigos estas modificando. Yo lo hago de esta manera  y así es necesario ponerlas ya que de esta manera no pierdes ningún código.

Esquinas redondeadas con Css compatible todos los navegadores

2018-01-18T12:48:00.001-08:00

Hola fanáticos del diseño web, esta vez aprenderemos como hacer esquinas redondeadas con Css compatible para todos los navegadores, una forma muy buena para que muchas cosas en nuestro blog se vean mas chulas e interesantes.

Como hacer esquinas redondeadas con Css compatible para todos los navegadores ( Firefox, Google Chrome y Safari, CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores)

Generalmente hay muchos frameworks que han venido utilizando todas estas funcionalidades, pero si vamos a empezar a entrar a este tema, entonces no vamos a aprender nada pues una idea muy interesante es que tu puedas hacer uso de este código de acuerdo a tus exigencias.

Redondear todos los bordes con CSS

Veamos la única forma mas básica y necesaria, la que generalmente utilizamos por obvias razones de ganar mucho tiempo, o quizás porque aún somos muy novatos y preferimos utilizar de acuerdo a lo que este a nuestro alcance.

border-radius: 20px 20px 20px 20px;

Un único tamaño para todos los bordes, si queremos hacerla variar ya de acuerdo a nuestras exigencias podemos empezar haciéndola variar de tamaño. Pero quizás esta tan solo sea soportado por algún navegador, y no sea visto de la misma manera en otros navegadores, ya que para ello necesitamos aumentar otro tipo de funcionalidades. Veamos entonces :

.bordesredondeados {
-moz-border-radius: 20px; /*Soportado para navegador Firefox */
-webkit-border-radius: 20px; /* Soportado para navegadores Google Chrome y Safari */
border-radius: 20px; /* CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores) */
}

Como puedes ver es realmente muy fácil poder hacer los bordes redondeados con css, y puedes incluso poner color al borde de esta manera.

border: 1px solid #6a6a6a;

Podemos también alejar el texto que esta contenido dentro del cuadro de esta manera:

padding-left: 20px;
padding-right: 20px;

De izquierda a derecha, o también la puedes hacer de arriba y hacia abajo, eso ya depende de tu criterio o de lo que en ese momento vayas a necesitar.

Si quieres mas tutoriales de CSS, ya sean avanzados o básicos, tan solo necesitas decirnos en los comentarios sobre que temas hablar y nosotros con gusto te estaremos brindando mucha mas información.

Mostrar mensajes de Bienvenida con JavaScript utilizando ONLOAD y ONUNLOAD.

2018-01-14T20:15:00.001-08:00

Hola mis amigos hoy aprenderemos un poquito mas sobre javascript, pues lo que haremos será Mostrar mensajes de Bienvenida con JavaScript utilizando ONLOAD y ONUNLOAD algo que realmente debes aprender si quieres tener este pequeño efecto en tus paginas web o blogs.

Aprendiendo a utilizar las funciones Onload y Onunload de JavaScript

Muchos no saben que tanto la función Onload y Onunload son muy utilizadas para mostrar un saludo o bienvenida cuando el usuario carga la página y es opcional mostrar otro cuando sale de la página o cierra el navegador.

Veamos entonces que utilizamos la función onload de javascript para dar un mensaje de bienvenida, muy fácil de utilizarlo verdad.

<script type="text/javascript">
window.onload=function(){alert('Bienvenido a esta pagina');}
window.onunload=function(){alert('Vuelva en otro momento');}
</script>

Así mismo tenemos la función onunload que hace el efecto de cerrar la función onload.

Nota importante sobre la función onload de JavaScript

Si la pagina utiliza el evento onload para iniciar otras funciones es necesario incluir la anterior de la siguiente forma: párrafo con un identificador nombrado: 'link1' (puedes darle otro nombre):

window.onload = function()

{

funcion1(){alert('Bienvenido a esta pagina');}

funcion2();

funcion3();

}

</script>

Espero que te haya gustado mucho este pequeño tutorial sobre como utilizar la funcion Onload y Onunload de Javascript, si tienes mas dudas o preguntas por favor escríbenos para que el creador de este tutorial pueda responderte. Gracias

Como hacer caja de suscripción para blogger

2017-12-24T14:01:00.004-08:00

Seguramente muchas veces te paso por la mente sobre como poner una caja de suscripción para blogger ya sea en la parte de los widgets de tu blog o simplemente debajo de cada entrada o post que realices ... No te preocupes porque hoy te he venido a enseñar como vas a lograr hacer esta pequeña pero útil herramienta para que tus seguidores estén actualizados con lo mejor de tus contenidos.

Aprendiendo a como crear una caja de suscripción en las entradas de blogger.

Quizás esto te suene familiar, pues de seguro lo has visto en muchas webs ... Claro que las debiste ver .. Pues bien se tratan de estas pequeñas cajitas que están muchas veces debajo de las entradas o artículos de los blogs...Una simple forma de captar muchas veces la audiencia y fidelizarlas con notificaciones en sus correros electrónicos para que les llegue tu material actualizado ... Pues claro... Super actual ya que estas actúan de manera extraordinaria llevando información de cada actualización que hagas en tu blog.

Configurando caja de suscripción para blogger

Bueno lo primero que vamos a tener que hacer será seguir los siguientes pasos que te voy a mostrar a continuación.

Vamos entonces a la parte de diseño - Y añadiremos un nuevo gadget.

Ahora vamos a añadir un widget para colocar el siguiente código Js, Html que te voy a dar a continuación.

<style>
.ayudadeblogger-subscribe-box-email-field {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Jm9J-p2WdqtO8dbaH8l2ot1ir8mnSA3SHkLDGgcO6PFH276BkM-WZNr-W-agZRGy84usfZOgZCSqLcvDYNpKGB7kYAxqxBbwatdj3-RoDEXPfZhfGk6l9JFcI4zEXqvLW4Fd7rUS5V1t/s1600/sprites.png) no-repeat 0 -28px;
width: 280px;
float: left;
color: #777;
margin: 0 0 10px 0;
padding: 10px 30px;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

}
.ayudadeblogger-subscribe-box-email-button {
background: #09f;
width: 280px;
float: left;
color: #fff;
font-family: 'Verdana, Arial;
font-size: 16px;
font-weight: bold;
padding: 10px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-transform: small-caps;

}
.ayudadeblogger-subscribe-box-email-button:hover {
background: #303030;
}
</style>

<div id='social' style=' background: #d2ebff; width: 301px; padding: 10px 0 0 0px; margin: 0 0 0 0px; float: left;'>
<a href='http://feeds.feedburner.com/tublog' imageanchor='1' target='_blank' title='Suscríbete a nuestro Feed de Noticias'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2scURt6gV9eDxFj-8KTBDRxb4iJxjA-8FTei748cjQfe92nux7dpwYn__uX1f81fr6KChiruk3DeaYGQElryk6zAy6a_AXkb6BrWoe-TB3KtJLv3OERvscDUwlqESPvYuifORdsmbgY5/s1600/rss-feed-icon.png' style='margin-right:3px; margin-left: 4px;'/></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tublog&loc=es_Es' imageanchor='1' rel='nofollow' target='_blank' title='Suscríbete via Email'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW11VkezL_PDGmtux-dQ6Axeao7snTQRzM1S4xNgVokdymNm1pOHyEYCrHfxW-KXjpRRjUFew-wiMTVmL98Z_44K1llDfM1SvD2AhgWLZh5dbsvI4D7NlmNE7TU_JUBeSvT8ZmYqQDbAd5/s1600/Email-rss-feed-icon.gif' style='margin-right:3px;'/></a>
<a href='http://www.facebook.com/tublog' imageanchor='1' rel='nofollow' target='_blank' title='Síguenos en Facebook'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPONPzUK3dUW4___kM22b2gJhUL1FN0HemeM2CFjOLfRgnmXSozBoWkORXdA-Zen-Zc2hN7qYcRbe1RXTPDsNUcnFgmIP7DnRoDhLXooaVTBL6hKGnoF1_hhg9Di6sV8yMDBJtGdb36hRT/s1600/facebook-icon.gif' style='margin-right:3px;'/></a>
<a href='http://twitter.com/ayudadeblogger' imageanchor='1' rel='nofollow' target='_blank' title='Síguenos en Twitter'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgBfVRpja_qVT-e_77VX6_mu8Dlc9tlYL2oZ-lmcmfWxy7FtjyA5wNoxT8b_-zLNXl8ljiUm_ML0Vlw4AAw2g67jcS_RUycMYyFzLPwemUy2e5NoHzi7JdIXaYBxoK9skBfLDjDldn8Wh/s1600/twitter-icon.gif' style='margin-right:3px;'/></a>
<a href='https://plus.google.com/+tublog' rel='nofollow' target='_blank'><img alt='Síguenos en Google Plus' height='43' src='http://www.dcddesign.com/images/social-media/google-plus-icon.jpg' style='margin-right:3px;' width='43'/></a>
<a href='http://pinterest.com/' rel='nofollow' target='_blank'><img alt='Síguenos en Pinterest' height='43' src='http://passets-cdn.pinterest.com/images/big-p-button.png' style='margin-right:3px;' width='43'/>
</a>

<center>
<a href='http://feeds.feedburner.com/tublog'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/tublog?bg=088A4B&fg=444444&anim=1' style='border:0' width='80' float='right' margin-right='5px'/></a></center>
</div>



<div style="background: #d2ebff; width: 280px; float: left; padding: 10px 15px 10px 5px; margin: 0px; border-bottom: 1px solid #f2f2f2;">
<a href="https://twitter.com/tublog" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Seguir @ayudadeblogger</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js?a4185c";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>


<div style='background: #d2ebff; width: 280px; float: left; padding: 10px; margin: 0 0 10px 0px; border-bottom: 1px solid #f2f2f2;'>
<div class='fb-like' data-href='https://www.facebook.com/tublog' data-send='true' data-show-faces='false' data-width='280'/>
</div>


<div style='background: #d2ebff; float: left; margin: 10px 0 10px 0px;'>
<div class="g-person" data-width="280" data-height="70" data-href="//plus.google.com/+tublog" data-layout="landscape" data-rel="author"></div>
</div>
<div style='background: #d2ebff; float: left; margin: 0 0 10px 0;'>
<div class="g-page" data-width="280" data-height="70" data-href="//plus.google.com/+tublog" data-layout="landscape" data-rel="publisher"></div>
</div>


<center>
<div class="tublog-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=tublog" class="ayudadeblogger-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tublog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="tublog" /><input name="loc" type="hidden" value="es_ES" /><input class="tublog-subscribe-box-email-field" name="email" autocomplete="off" onblur="if (this.value == '') {this.value = 'Ingrese su email';}" onfocus="if (this.value == 'Ingrese su email')
{this.value = '';}" value="Ingrese su email"/><input class="tublog-subscribe-box-email-button" title="" type="submit" value="Suscribir para recibir ayuda !" /></form></div>
</center></div>


Bueno este método es lo mas fácil para hacer que tu blog tenga una caja de suscripción, ya que también lo puedes hacer desde la edición HTML de la parte del código fuente de la plantilla.

Hay partes donde tienes que cambiar muchas cosas, en la parte donde dice tublog tienes que cambiarlo por el enlace feedburner de tu web, así como también los enlaces de google plus, facebook twitter ... Espero que te haya sido de mucha ayuda.

Ya sabes como siempre puedes compartir nuestros artículos o simplemente escribirnos dentro de los comentarios para poder ayudarte.

Lanzar popup una sola vez utilizando cookies en JavaScript

2017-12-22T11:44:00.002-08:00

Siguiendo con nuestra línea de tutoriales, hoy vamos a mostrar como Lanzar popup una sola vez utilizando cookies en JavaScript, un excelente método para las personas que utilizan mucho el tema del tráfico web compartido.

Aprendiendo a crear un popup con cookies en JavaScript

Utilizando este popup hecho en javascript vamos a hacer que este sea lanzado una sola vez cuando el usuario haga click en cualquier lugar permitiendo así llevar tráfico web a otros sitios. Recuerda que para muchos usuarios esto puede ser muy fastidioso, pues te recomiendo tan solo utilizarlo con mucha discreción.

En ciertas ocasiones tan solo habíamos visto que se utilizan popup sin ninguna validación utilizando las cookies, esto es muy molesto ya que al no estar validado correctamente los popup salen continuamente al darle clicks a la página web.

Ejemplo para crear popup una sola vez con cookies

Lo primero que haremos será crear una función con el nombre openpopup() , esta a su vez contendrá la operación que hará dicha función, para ello utilizaremos window.open que nos permitirá abrir la ventana conteniendo la url de la página web a la que queremos llegar.

Como vamos a ver podemos hacerlo de esta forma, especificar la altura y tamaño de la ventana, así como por ejemplo meterle un scrollbars que no es mas que cuando hagamos rodar la ruedita del mouse esta empiece a deslizarse.

Ejemplo 01 :
window.open("http://www.neytutoriales.com/","tupopup","width=120,height=300,scrollbars=NO")

Ejemplo 02:
window.open("http://www.neytutoriales.com/","_blank")

Como ya tenemos los ejemplos de window.open tu puedes utilizar cualquiera de los dos reemplazando tu web por la mía.

En este caso yo utilizaré la segunda opción y lo añadiré a la función get_cookie como puedes ver ya completamente programado.

Para utilizar este JavaScript vamos a irnos a la etiqueta </head> donde cerramos la cabecera, y antes de ello pegamos lo siguiente.

<script>
function openpopup(){
window.open("http://www.neytutoriales.com/","_blank")

}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // verifico si la cookie existe
offset += search.length

// set index of beginning of value

end = document.cookie.indexOf(";", offset);

// set index of end of cookie value

if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function loadpopup(){
if (get_cookie('popped')==''){
openpopup()
document.cookie="popped=yes"
}
}
</script>

Luego de haber hecho lo siguiente buscamos el comienzo de la etiqueta <body> y pegamos a continuación la siguiente línea de código donde llamaremos a la función loadpopup() de las cookies que contiene la otra función openpopup().

<body onclick='loadpopup();'>

Como podrás observar algo muy fácil y didáctico para ir aprendiendo a utilizar las cookies con popups.

Test para Verificar pagina web optimizada para móviles

2017-12-22T10:42:00.000-08:00

Hola amigos hoy les he venido a mostrar una excelente herramienta de google que nos ayuda mucho por el medio de un test para verificar si una pagina web esta optimizada para móviles, esto con la finalidad de ver que estas se carguen correctamente en los dispositivos.

Conociendo un poco mas sobre optimizacion web para moviles

¿Como verificar si mi página web esta optimizada para móviles ?

Como ya les mencione, google siempre innova mucho en temas de optimización ... por lo general ellos tendrán sus motivos, ya que en el mundo del desarrollo web todo va cambiando continuamente.

Test Mobile friendly de google

Así lo llama google, como test amigable para móviles o prueba de optimización para móviles de google, esta herramienta actualmente esta siendo la sensación para muchos webmasters, pues es una super herramienta muy útil, que no requiere de costos elevados para poder usarlo ... y lo mejor de todo es que es totalmente gratis.

Cómo optimizar el SEO móvil de una web

Quieres usar la herramienta para optimización una web para móviles ... Solo tienes que seguir el siguiente enlace test mobile friendly de google esta herramienta es realmente importante, te sugiero mucho que la puedas usar, ya que te ayudará a tomar decisiones muy inteligentes sobre que cosas andan bien o mal en tu página web.

Como podrás observar tengo la página web completamente optimizada para móviles, esto debido a que utilizo una plantilla responsive optimizada seo que me ayuda tanto en temas de posicionamiento web, así como también en otras cosas muy interesantes como por ejemplo el tiempo de carga.

Propiedades Ancho y altura con CSS

2017-12-18T09:33:00.002-08:00

Hola amigos hoy aprenderemos un tema básico de CSS, vamos a ver las propiedades Ancho y altura, para todos los que recién se están iniciando en el mundo del diseño web. Espero que este pequeño tutorial sea de mucha ayuda para todos ustedes.

Aprendiendo propiedades Ancho y Altura con CSS

Estableciendo propiedad Width (Ancho) en CSS

Esta propiedad es quizás la mas utilizada cuando hagas el diseño CSS de tus paginas web, pues porque no decirlo que es tan indispensable como otras propiedades que a diario siempre utilizamos.

Como usar la propiedad Width css

Veamos entonces que la propiedad width nos va a permitir establecer una anchura directamente mediante una medida que nosotros le proporcionaremos ya sea en pixeles o porcentajes.

Entonces veamos unos pequeños ejemplos de como se establece la anchura a un <div>, de modo que no ocupe todo el sitio disponible:

div { width: 250px; }

Si utilizaríamos una clase o un identificador tuviéramos que hacerlo de esta manera :

#ancho { width : 250px; }

.ancho { width: 250px; }

Como ya sabrás los identificadores se representan con un signo de numeral (#), mientras que las clases lo hacemos con un punto.

Algunas aclaraciones sobre el uso del width css

Si bien es cierto cuando hagamos varios div ya sea con identificadores o clases, y si ya desde luego utilizamos pixeles, por lo general tenemos que saber que es un elemento de bloque, lo que significa que si se coloca seguido otro <div> idéntico, se mostrarán uno debajo de otro:

Otras aclaraciones sobre el uso del width css con porcentajes

Debemos también tener en cuenta de que no es lo mismo utilizar un estilo width con px y otro estilo Width con % , son dos cosas distintas ya que una por lo general tiene otras dimensiones que la otra.

Estableciendo propiedad Height (Altura) en CSS

Como podemos apreciar esta también es una de las propiedades en CSS muy utilizadas.

Tomemos en cuenta lo siguiente que esta propiedad height también no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura.

El valor inherit indica que la altura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

Veamos este pequeño ejemplo sobre como utilizar esta pequeña propiedad :

#altura{ height: 60px; }

<div id="altura">
...
</div>

Como personalizar cursor puntero en blogger

2017-11-30T18:23:00.002-08:00

Hola blogueros hoy vamos a aprender a personalizar cursor o puntero en blogger, una enchulada muy bonita o una forma de que nuestra web se vea muy atractiva para el usuario, pues para ello he traído este pequeño tutorial básico de CSS que muchos de los usuarios deberíamos saber.

Personalizar cursor en una pagina de blogger

En realidad esta pequeña parte del tutorial les encantará, pues muchos usuarios a medida que van llegando a tu web se van llevando una impresión sobre las novedades que puedas tener, de acuerdo a todo esto muchos de ellos vuelven a visitarte y se convierten en usuarios activos en tu blog.

Entonces como ya estamos acá vayamos a aprender cómo cambiar el cursor con css al pasar el ratón sobre elementos de la página.

Aprendiendo Pseudoclase CSS cursor.

En muchos sistemas operativos hemos encontrado gran variedad de cursores, pues esto nos ha llevado a tener una gran curiosidad sobre como aplicarlos a las páginas web, teniendo que recalcar gran parte muchas funcionalidades no tan importantes pero si estéticas en tal punto que son muchos los editores web que quieren tener este pequeño efecto del cursor en sus paginas web.

Ventajas de la propiedad cursor

Quizás una de las ventajas de la propiedad cursor es que este nos permite seleccionar un puntero entre los disponibles en el sistema operativo (flecha, mano, reloj de arena, redimensionar, etc.) sino que incluso permite indicar la URL de una imagen que se quiere mostrar como puntero personalizado.

Creando nuestro propio cursor o puntero en blogger

Bueno vayamos a lo que hemos venido, como puedes observar son muchos los punteros o cursores como lo quieras llamar, para ello utilizaremos propiedades CSS muy conocidas entre los desarrolladores y diseñadores web.

Si quieres puedes entrar a nuestro blog de pruebas para ver los múltiples ejemplos de cursores y/o punteros que puedes utilizar en tu blog.

Cursores y/o punteros

Utilizando la propiedad Cursor en CSS

Veamos pues en el siguiente ejemplo muestra el caso de un puntero definido con varias URL y un valor estándar:

:link, :visited { cursor: url(puntero.svg), url(puntero.cur), pointer }

Supongamos en el mayor de los casos que desees aplicar dicha propiedad a todo el documento HTML, para ello haremos lo siguiente :

body {cursor: pointer}

En muchos casos se utilizan cursores personalizados esto si es que se da el caso de que el navegador soporte las imágenes en formato SVG, el puntero del ratón cambia su aspecto por la imagen puntero.svg.

Pero supongamos en el peor de los casos que el navegador no soporta el formato SVG, intenta cargar la siguiente URL que define un puntero en formato .cur. Si no se puede cargar correctamente, se mostraría el valor preestablecido pointer.

Mira el ejemplo para ver como lo puedes hacer tu mismo :

body {cursor : url("find.cur")}

Lo puedes definir de cualquier forma, así tal y como lo explican muchos autores y te lo explicamos por experiencia propia.

body {cursor : url("puntero.svg")}

Creando mi cuenta de Adsense

2017-11-21T13:12:00.001-08:00

Muchos de los que tenemos un sitio Web, buscamos generar ingresos a través de estos, podemos utilizar diversos métodos, pero es sin duda las publicidades, uno de los métodos mas conocidos a la hora de maximizar nuestros ingresos.

Existen muchas empresas que ofrecen publicidades para tu sitio, pero es Google Adsense la mas conocida en el mercado, pero como acceder a ser parte de las publicidades que Adsense nos brinda, aunque parezca increíble, es muy fácil acceder a los servicios que nos brinda, en esta entrada aprenderemos como encaminarnos con AdSense de una manera muy explicada y completa a la ves.

Repartiremos este tutorial en 2 partes, una en la que hablamos de la afiliación a Adsense a partir de un Blog creado en Blogger y la otra forma sera de como afiliarnos a través de cualquier otro sitio Web, tengamos algo bien claro, para afiliarnos a Adsense y que nos den de alta, tenemos que contar con un sitio web de referencia, ya que este sera examinado para ver si cumple las políticas de privacidad que requiere la empresa para ser parte de su servicio.

Usar Adense Para mi Blog creado en Blogger:

Si ya tenemos un Blog creado en la plataforma Blogger, se nos sera mucho mas fácil acceder al servicio que Adsense nos brinda, con fácil me refiero a la rapidez con lo que podemos hacerlo desde Blogger, ya que es la misma empresa de google adsense que te ofrece monetizar tu blog si cumples con los requisitos que ellos te mencionan.

No es tan complicado como podrás ver, tan solo necesitas ir a la pestaña ingresos y marcar el check con la opción de si deseas mostrar anuncios en tu blog.

Una vez que hayas hecho tu decisión, luego pasaras a añadir un Gadget, para ello vas a la pestaña diseño y haces lo siguiente.

Para encontrar la pestaña de agregar los anuncios en tu blog, tan solo necesitas ir a la parte de diseño, es allí donde en la opción añadir un gadget buscas la opción adsense, le das click y mas o menos debe de salirte una pestaña como esta, que no es nada menos que la configuración de los anuncios.

Una vez que hayas hecho todo lo que te indique, pasarás a ubicar tus anuncios en la parte donde mas te convenga, donde mas quisieras eso ya depende del gusto de cada persona.

Creando adsense para dominios.

Esta es nuestra segunda parte del tutorial, adsense para dominios , básicamente como su nombre mismo lo dice es necesario tener un dominio para poder pedir un adsense, para ello debemos tener una cuenta Gmail que no haya sido usada para cosas malas entre ellas black hat, así como también un dominio que no haya sido impedido por adsense para publicar la publicidad.

¿ Cuanto tiempo aceptan los adsense para dominios. ?

En realidad eso depende de adsense, por lo general no se sabe en cuanto tiempo los anuncios pasarán a estar activos en tu web ya que tienen que pasar un periodo de revisión, verificar la procedencia de tu tráfico web, y así entre otras cosas.

Dudas y preguntas

Si tienes alguna cosa mas que preguntar, o si deseas que te ayudemos a desbloquear una cuenta hosted account de youtube o blogger para poderla utilizar en tus dominios, puedes escribirnos o dejarnos tus comentarios que muy gustosos pasaremos a responder todas tus dudas y ayudarte lo mas pronto posible.

Tutorial - Crear SEO amigable en blogger

2017-11-16T13:41:00.002-08:00

Hola nuevamente amigos blogueros, hoy veremos un tutorial para crear seo amigable en blogger, en realidad son aspectos muy importantes e interesantes que nos ayudarán de una y otra forma a ganar un poquito mas de optimización en nuestro blog, ya que no tenemos la forma de hacerlo con un plugin al igual que wordpress, pero con estas pequeñas modificaciones si que le daremos al clavo en algunos aspectos para posicionar nuestro blog de blogger en las posiciones que derrepente algún momento hemos deseado estar. Recordar ademas que debes guardar una copia de tu plantilla antes de empezar con cualquier modificación, pues es una de las reglas básicas para cualquier blogger.

Tutorial (Creando un seo amigable para blogger)

Vayamos al punto y a lo que hemos venido, se que a ustedes no les gusta mucho palabreo, pues pasaré a explicar paso a paso estas pequeñas modificaciones en el caso de que no comprendas muchas cosas.

I .- Tener una plantilla responsive : Estamos en la era de la modernidad, y muchas cosas definitivamente han cambiado, nos hemos mudado a aplicaciones que tienen en gran medida mucha demanda por medio de dispositivos mobiles como celulares, tables, etc.

Para ello te sugiero que utilices plantillas con versiones Responsive, que hayan sido desarrolladas netamente para blogs muy bonitos.

Si gustas aquí puedes encontrar muchas plantillas : Plantillas Responsive para blogger

Modificar plantilla simple a una plantilla SEO optimizada responsive

Bueno empecemos con nuestro tutorial, y para ello te sugiero hacer los siguientes cambios, pero hacernos la vida mas fácil y encontrar los códigos con mucha facilidad presionaremos CTRL + F , que es necesariamente el atajo para darle buscar a cualquier cosa, así que empecemos.

Optimizando el título de la página

Buscamos el siguiente Código:

<title><data:blog.pageTitle/></title>

¡ Encontraste el código ! ... ! Genial ¡ ... Ahora reemplazaremos por este otro código con el cual pasaremos a optimizar la parte de los títulos.

<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> | <data:blog.title/></title><b:else/>
<title><data:blog.pageTitle/>
</title></b:if>

Con esto pretendemos que la parte de las entradas vayan juntas al titulo principal de nuestra página, por ejemplo.

Tutorial - Crear SEO amigable en blogger - Neytortec tutoriales Web

Optimizacion de Meta Tags

Muchos navegadores todavía hacen uso de meta tags, de igual manera si queremos valernos con algo extra pues no estaría nada mal probar este simple código y lograr un poquito mas de optimización con algunas palabras claves que nosotros creamos relevantes.

Buscaremos </b:if> y justo arriba de esta agregaremos el siguiente código que tenemos abajo, tu puedes modificarlo según tu conveniencia.

Pega el siguiente código donde te indique anteriormente.

<meta content='Aquí tus palabras claves, OJO que google ya no los toma en cuenta, pero si tienes tu web indexada en otros buscadores, de seguro que te irá de maravilla' name='keywords'/>
<meta content='Autor' name='author'/>
<meta content='Tu@dominio' name='Email'/>
<meta content='global' name='distribution'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='es' name='language'/>
<meta content='ES' name='country'/>
<meta content='blogger' name='generator'/>
<meta content='Autor' name='owner'/>
<meta content='@2017' name='copyright'/>

Optimiza el caché en tu blog

Bueno en lo particular suelo utilizar mucho el caché, hace que mi web aumente el rendimientoen diferentes aspectos, así también influye en la optimización de los motores de búsqueda esto quiere decir que a google entre otros buscadores les agrada la velocidad que tiene nuestro sitio.

Mejorando el Seo en una plantilla blogger:

Vayamos a buscar </head> y antes de ella pegaremos el siguiente código que de seguro hará muchas cosas interesantes con respecto a la optimización de tus tags.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[
jQuery('a').each(function(){// Let's make external links open in a new tab. var href=jQuery(this).attr('href');if (typeof href !='undefined' && href !="" && (href.indexOf('http://') !=-1 || href.indexOf('https://') !=-1) && href.indexOf(window.location.hostname)==-1){jQuery(this).attr("target", "_blank");}});//]]></script>

<script type='text/javascript'>//<![CDATA[
jQuery('a').each(function(){// Let's make external links nofollow. var href=jQuery(this).attr('href');if (typeof href !='undefined' && href !="" && (href.indexOf('http://') !=-1 || href.indexOf('https://') !=-1) && href.indexOf(window.location.hostname)==-1){jQuery(this).attr("rel", "nofollow");}});//]]></script>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){$('img').each(function(){var $img=$(this);var filename=$img.attr('src') $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));});});//]]></script>

Lo único que decimos con este código es que queremos que nuestras etiquetas alt se vean en las imágenes, etiqueta nofollow en los enlaces externos y Apertura de enlaces externos en una nueva pestaña, así haremos las cosas mas interesantes y podemos obtener seo en blogger.

Bueno los espero mas adelante con un nuevo tutorial, y si tienen alguna duda o consulta por favor nos escriben que muy pronto resolveremos todas sus dudas.

propiedad opacity transparencia en CSS

2017-11-09T22:11:00.001-08:00

Hola amigos desarrolladores hoy vamos a hablar de la propiedad opacity, y transparencia en CSS, haremos unos pequeños ejemplos en los cuales te serán muy fácil guiarte para lograr crear tus propios estilos personalizados.

Conociendo la propiedad opacity transparencia en CSS

Dependiendo de lo que quieras hacer o como quieres que se vean tus imágenes, podemos empezar a trabajar de esta manera.

La propiedad opacity o transparencia en CSS puede tomar un valor de 0.0 - 1.0. El valor más bajo, siempre será el mas transparente.

Se han visto casos en que en muchas situaciones, y eso lo dice el propio w3schools que en IE8 y uso anterior filter:alpha(opacity=x). La x puede tomar un valor de 0 a 100. Un valor inferior hace que el elemento sea más transparente.

imagen {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

Como crear el efecto de desplazamiento transparente con Hover y Opacity

Cuando se trata de diseñar, pues se inventan otro tipo de métodos con elementos que sean necesarios para maquillar un poco la situación dependiendo de que tan exigente sean tus diseños. Bien en este caso utilizaremos el elemento hover para hacer un pequeño efecto con el elemento opacity.

En este caso tenemos que definir una clase para nuestra imagen, para esto tendremos que hacer lo siguiente :

img.hola {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

img,hola:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

Donde la palabra hola viene a ser la clase que hemos puesto dentro de nuestra imagen de la siguiente manera.

<img class="hola" src="tuimagen.jpg" />

Tu también puedes jugar con muchas formas para poder utilizar la propiedad opacity de CSS, o también conocido como la propiedad transparencia de CSS, espero que te haya gustado mucho este pequeño tutorial.

Si tienes alguna otra duda por favor escribenos para obtener una mayor información, en nuestra bandeja de comentarios o también vía e-mail.

Propiedad Border Radius en CSS con ejemplos

2017-11-02T21:32:00.001-07:00

Hola hoy hablaremos sobre la propiedad border radius en css, toda la teoría lo pasaremos a la práctica por lo que te recordamos que prestes mucha atención al siguiente tutorial CSS que vamos a brindarte a continuación, esto con la finalidad de que no tengas problemas con los navegadores al momento de codificar.

Propiedad Border Radius en CSS con ejemplos prácticos y sencillos

Si bien es cierto esta es una propiedad muy sencilla, queremos mencionarte que puedes jugar con muchas situaciones, afortunadamente como ya hemos mencionado en otros artículos puedes valerte del inspeccionar elemento de tu navegador, ya sea chrome, firefox, etc ... Esto te hará ver como un gran diseñador web.

Agregar bordes redondeados a un elemento div

Un elemento div es muy importante para poder hacer nuestros diseños, para los que recién se inician es recomendable que puedan leer que son identificadores y clases con los que se trabajarán pues estos son muy útiles al momento de programar nuestro sencillo CSS.

Vayamos a ver un pequeño ejemplo :

Utilizando una clase:
.borde {
border: 2px solid;
border-radius: 25px;
}
Utilizando un identificador :
#borde {
border: 2px solid;
border-radius: 25px;
}

En ambas situaciones los dos tienen un comportamiento impresionante, pero en mayoría de los casos muchos recomiendan utilizar clases, pero yo creo que ello ya depende del gusto de cada diseñador.

Como usar el border radius

Vayamos a ver una pequeña definición para luego pasar a unos pequeños ejemplos, espero que todo esto sea de mucha ayuda para usted.

Si estas aquí es porque tienes la necesidad de aplicar la propiedad border-radius esto se usa para establecer bordes redondeados, dándole un aspecto muy bonito a todos nuestros diseños.

A tener en cuenta :

" La propiedad border-radius es una propiedad abreviada para establecer las cuatro propiedades de borde - * - radius. "

Debemos saber que el utilizar border radius conlleva estas dos pequeñas reglas :

Si especifica solo un valor para la propiedad border-radius, este radio se aplicará a las 4 esquinas.
Sin embargo, puede especificar cada esquina por separado si lo desea.

Estas son las reglas:

Cuatro valores: el primer valor se aplica a la parte superior izquierda, el segundo valor se aplica a la parte superior derecha, el tercer valor se aplica a la parte inferior derecha y el cuarto valor se aplica a la esquina inferior izquierda.
Tres valores: el primer valor se aplica a la parte superior izquierda, el segundo valor se aplica a la parte superior derecha e inferior izquierda, y el tercer valor se aplica a la parte inferior derecha
Dos valores: el primer valor se aplica a la esquina superior izquierda y la esquina inferior derecha, y el segundo valor se aplica a la esquina superior derecha e inferior izquierda.
Un valor: las cuatro esquinas se redondean por igual.

En cualquiera sea la circunstancia todo es válido, puedes utilizar las medidas que sean necesarias, todo ya depende de tus gustos.

1.- Utilizando cuatro valores en border radius

.border {
border-radius: 15px 50px 30px 5px;
height: 150px;
padding: 20px;
width: 200px;
}

Como podrás observar en la primera imagen se utilizo la propiedad border-radius en todos los lados del cuadrado, tu también puedes jugar con los valores, fíjate en la parte superior donde van cada uno de estos valores para que sepas cual de ellos vas a utilizar.

Si deseas que aumentemos el tema con otros ejemplos, por favor escríbenos o deja tus comentarios para poder explicarte en otro pequeño tutorial otras cosas mas que debes saber con respecto a estas propiedades. Muchas gracias.

Ejemplos de HTML con CSS

2017-09-16T00:41:00.000-07:00

Hola amigos de la comunidad, hoy aprenderemos ejemplos de Html con Css, muy prácticos y sencillos para todos aquellos principiantes, y no tan principiantes que están en el maravilloso mundo del diseño web, pues aprenderemos a maquetar aspectos muy interesantes dentro de HTML.

Aprendiendo Ejemplos de HTML con CSS

Ahora veremos algunos ejemplos de html con css para que vayas siguiendo el ritmo de nuestro pequeño tutorial para principiantes.

Como añadir CSS a un elemento H1

Supongamos que quieras añadir CSS a un elemento H1, dicho sea el caso la mayor parte de títulos principales en una web comienzan con esta etiqueta.

Primer caso : Insertar un estilo dentro de la etiqueta, muy pocos ya lo están utilizando pero en algunas circunstancias todavía es necesario poder hacerlo.

<h1 style="color: #f84912;">Pinta esta etiqueta de color naranja</h1>

Segundo caso : En esta oportunidad utilizaremos un identificador o una clase para saber que etiqueta vamos a poder controlar.

También puedes ver un ejemplo aquí : Cajas de colores con CSS

<h1 class="titulo-entrada">Pinta esta etiqueta de color naranja</h1>

Creamos un archivo CSS en nuestro proyecto como :

style.css

.titulo-entrada {
color: #f84912;
}

A todo esto puedes añadirle otros estilos diferentes como el tamaño del texto, tipo de texto, subrayar, etc.

Tipos de fuentes CSS - Tutorial para principiantes.

Como ya lo había mencionado anteriormente, es mejor crear identificadores y clases para poder controlar todo desde una sola hoja de estilos, y siguiendo el ejemplo anterior utilizaremos propiedades que definen tanto el color del texto, tipo de fuente y tamaño ... Entonces que esperamos vamos por ello.

La propiedad de color CSS define el color del texto que se va a utilizar.

La propiedad font-family CSS define la fuente que se va a utilizar.

La propiedad CSS font-size define el tamaño del texto a utilizar.

Bueno vayamos a un ejemplo un poco mas práctico y entendamos un poquito mas de que se trata todo esto.

h2 {

color: blue;

font-family: verdana;

font-size: 150%;

}

Esta etiqueta H2 es de color azul, tipo de fuente verdana y tamaño de fuente de 30%

p {

color: red;

font-family: courier;

font-size: 200%;

}

Este parrafo es de color rojo, tipo de texto courier y un tamaño de fuente de

Cajas de colores con Html usando CSS

2017-08-31T23:49:00.002-07:00

Hola que tal, hoy haremos cajas de colores con Html usando Css, una excelente forma de empezar muy bien el mes empezando a diseñar, y entrando al mundo de diseño web.

Como crear Cajas de colores con Html usando CSS

Realmente vamos a ver una parte tal y como lo hace un gran framewok conocido, Bootstrap utiliza mucho las clases en las etiquetas DIV, y vamos a imitar esto pero le meteremos colores muy bonitos que de seguro te encantarán.

Imitando diseños de Bootstrap.

Bueno veamos como lo hace Bootstrap, pues es un modelo el cual vamos a seguir pero obvio que nosotros empezaremos a utilizar mucho nuestros propios estilos.

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Como podemos observar Bootstrap utiliza la clase Alert-primary para identificar el color celeste, en realidad se pueden utilizar muchas clases como :

alert alert-success
alert alert-danger
alert alert-danger

Todas estas clases tienen un color que los distingue, así que lo único que tienes que hacer aquí es cambiar la clase.

En fin, vayamos entonces a lo que hemos venido, y es crear nuestras propias cajas html con CSS.

Creando cajas con HTML y CSS

Bueno vayamos a hacer como lo hace bootstrap, definiremos primeramente nuestro identificador DIV con una clase de esta manera.

<div class="caja-roja"> Esta es una caja roja </div>

Diseño CSS

Ahora que ya tenemos nuestro identificador procederemos a ponerle nuestros estilos css que le darán un aspecto fabuloso.

Esta es una caja roja

caja-roja {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
height: 100px;
margin: 0 auto 0 auto;
overflow: hidden;
padding: 40px;
width: 230px;

}

Como puedes observar tu puedes modificar a como en realidad te encante, pero bien este es un pequeño tutorial de CSS para principiantes, espero que en realidad te haya encantado, ya sabes que puedes pedirnos mas pequeños tutoriales de diseño web, muchas gracias.

descargar plantillas web gratis Html

2017-08-06T23:17:00.000-07:00

Aprenda a Descargar plantillas web gratis Html para tus proyectos web, para páginas dinámicas y estáticas, todas con una funcionalidad excelente y sobre todo 100% bien estructurado para temas de SEO.

Las mejores paginas para descargar plantillas web gratis Html

Para muchos desarrolladores web les es muy imposible hacer 2 cosas distintas, desarrollar y al mismo tiempo diseñar hermosas plantillas para sus proyectos web, pero en esta ocasión te voy a presentar los mejores sitios donde podrás descargar gratis plantillas web HTML, Html5, con funcionalidad como Jquery, Javascript, etc.

Descargar plantillas web Html gratis de TemplateMonster

TemplateMonster es sin lugar a dudas una excelente opción en cuanto a plantillas Html, Html5, pues como verán tiene una excelente variedad de plantillas muy bien diseñadas y estructuradas, por lo general a mi me ha gustado, pues no requiero poder hacer muchos cambios.

TemplateMonster Plantillas web gratis HTML

Tipos de Plantillas web gratis para descargar de TemplateMonster

Como ya he hablado templatemonster tiene una gran variedad de plantillas web, para ello voy a mencionar que tipos de plantillas encontrarás en su base de datos o colección como lo quieras llamar.

Plantillas para Wordpress
plantillas para drupal
plantillas para Joomla
Plantillas Moto CMS HTML
Plantillas Moto CMS3
Plantillas CMS Flash

Dentro de estas variedades también ha incluido muchas plantillas web que dicho sea el caso no todo es gratis, pues algunas son muy profesionales y tienen un costo.

También me ha encantado como ha podido desarrollar plantillas para E-Commerce, aunque los precios siempre varían, no esta nada mal en invertir en algo que realmente es profesional.

Códigos de colores HTML

2017-08-06T17:09:00.000-07:00

Conoce con nosotros los códigos de colores HTML, Tabla de Colores html, paleta de colores html o como tu lo quieras llamar. Con ello podrás darle vida a tus aplicaciones web, de esta forma ya no tendrás muchos problemas con tus diseños.

Conocer la paleta de combinación de colores en HTML es muy importante para un desarrollador web

Tabla, paleta ó Códigos de colores HTML

Una buena combinación de colores en una página web ayuda a que muchos lectores se sientan muy cómodos con lo que están percibiendo, para ello siempre es necesario recurrir a los códigos de colores HTML, estas son una gran ayuda para muchos desarrolladores web.

Como usar los colores en HTML

Seguro para muchos los que recién se inician programando es un poco complicado encontrar el color favorito para sus páginas web, para ello traigo un pequeño consejo tan importante para ti como para tus lectores.

Consejos cuando uses colores html en tu pagina web

Lo mas recomendable es usar colores con un tono de luminosidad no muy exagerado, como el negro, verde, naranja, azul, siempre y cuando no te excedas en muchas cosas, recuerda siempre que el exceso de colores harán que muchos de tus visitantes abandonen tu página web.

APRENDE : ¿Cómo usar los códigos de colores HTML?

Veamos unos claros ejemplos de como puedes usar la paleta de colores html, y en donde es posible que puedas ponerlas utilizando las etiquetas necesarias.

Podemos usar los códigos de colores HTML para el color de fondo del sitio web, o también conocido como el body, lo podemos hacer de esta manera :

Recuerda siempre utilizar la etiqueta STYLE, pero si utilizas un archivo diferente puedes poner un identificador o una clase, para ello podemos hacerlo de estas dos maneras :

<body style="background:#80BFFF">

Utilizando etiquetas o DIV.

<body div="fondo">

Archivo CSS en tu pagina web

#fondo {
background:#80BFFF
}

También podemos usar los códigos de colores HTML para configurar el color de la fuente/texto, o como tu quieras llamarlo, para ello podemos hacerlo tal y como lo hicimos para el body.

<span style="color:#80BFFF">

Otra parte donde podemos utilizar códigos de colores HTML es para el color de fondo de las tablas, aunque ya no se utilicen mucho, pero para los que les encanta lo pueden hacer de esta manera.

<table style="background:#80BFFF">

Así puedes ir definiendo muchos colores en las zonas donde mas te pueda interesar poner la tabla o paleta de colores en HTML.

Como puedo saber los colores en una web que me gusta.

En realidad los navegadores tienen una parte muy importante al que llaman inspeccionador de elementos HTML

Para saber esto tan solo hacemos click derecho, y nos situamos en la parte final donde dice Inspeccionador.

Una vez que hayamos hecho la parte anterior, tendremos algo como esto, que no es mas que el código fuente de tu pagina web con todos los datos estructurados CSS que conforman una web.

Situémonos en la parte izquierda donde se encuentra un pequeño icono de puntero, con el podrás ir situando o escogiendo los colores que te gusten, una vez ubicado el color tan solo dale CLICK, y elegirás el color.

Supongamos que hayas elegido la etiqueta li de la Home , tan solo es necesario darle click en el color que te guste, al hacer esto y al salir con el puntero sobre la web, vas a ver que podrás seleccionar los colores que creas necesario, podrás hacer combinaciones, y otras cosas muy interesantes, e inclusive puedes editar los estilos CSS de la web.

Espero que este pequeño tutorial te haya sido de mucha ayuda, por favor comenta y/o pregunta si tienes alguna duda. Gracias.

Como crear una pagina web con bloc de notas en HTML

2017-08-06T16:21:00.002-07:00

Aprendamos Como crear una pagina web con bloc de notas en HTML, espero que este pequeño videotutorial sea de gran ayuda para todos ustedes que recién están empezando a programar.

Como crear paginas web html con el bloc de notas

Aprendiendo como crear una pagina web con bloc de notas en HTML.

Muy bien con ello aprenderemos a utilizar comandos muy importantes en el desarrollo de páginas web en html, y que mejor que empezar con el bloc de notas.

Reglas muy claras para aprender HTML BASICO

Para todos los principiantes siempre tienen que saber que todos los documentos HTML deben comenzar con una declaración de tipo de documento: <! DOCTYPE html> .

También es muy indispensable de que sepan que todo documento HTML comienza con <html> y termina con </ html> , como regla fundamental.

Seguidamente, es necesario que lleven presente que la parte visible del documento HTML está entre <body> y </ body>, esto se conoce como el cuerpo de la web.

Como definir los encabezados HTML

Por regla general, siempre debemos saber que los encabezados HTML se definen con las etiquetas <h1> a <h6> , esto ya depende de como quieras programar tus aplicaciones web, pero es siempre recomendable seguir estos factores muy importantes por un tema de SEO (Optimizacion en los motores de búsqueda.)

Como regla fundamental para el seo como hábiamos mencionado es necesario que sepas que los <H1> define el encabezado más importante. <H6> define el encabezado menos importante.

Como definir Párrafos en HTML

Para conocimiento quiero que recuerdes que los párrafos HTML se definen con la etiqueta <p>, en ellas puedes definir otras cosas como Estilos CSS, identificadores, clases, etc.

Como se definen los Enlaces en HTML

Por lo general siempre tienes que saber que los enlaces en HTML se definen con la etiqueta <a> , seguido de un HREF donde será la parte que insertes la ruta de paginas web externas o tus urls internas, seguidamente tendrás que cerrar con un </a>

Como se definen Imágenes en HTML

Parte fundamental de toda página web son las imágenes HTML, para ello tienes que saber que estas van dentro la etiqueta <img> .

Esta a su vez consta de muchas partes como el archivo fuente (src) donde va la ruta de la imagen, el texto alternativo (alt), donde puedes poner la palabra clave de la imagen, que por recursos muy importantes de SEO también es muy importante, del mismo modo es necesario que definas el ancho y la altura.

<img src="Aquí ruta de tu imagen" alt="palabra clave" width="104" height="142">

Espero que esta pequeña guía y el pequeño videotutorial sean de mucha ayuda para que puedas aprender html básico en bloc de notas utilizando comandos necesarios que te ayudarán a desarrollar páginas web básicas.

Video-Tutorial 1 del curso de HTML basico

2017-08-06T05:30:00.000-07:00

En este primer Vídeo Tutorial del curso de HTML básico, aprenderemos la estructura general y principal de un documento HTML, teniendo en cuenta las principales etiquetas de este lenguaje; ademas estructuraremos nuestra primera pagina de manera sencilla, utilizando las etiquetas de párrafos y las etiquetas de encabezados.

Conociendo un poco de los fundamentos en este curso de HTML basico para principiantes

Tutorial básico de HTML desde cero - Video 1: Introducción.

Que aprenderás con este pequeño video tutorial básico de HTML.

Bueno con este curso vamos a aprender fundamentos importantes, desde como usar el hyper text markup language o como común mente lo conocemos HTML.

También aprenderemos detalles técnicos en el uso de HTML, y construiremos algunas páginas básicas con el que irás aprendiendo muchas cosas interesantes.

Finalizando el pequeño curso de HTML serás capaz de hacer muchas cosas :

Una vez que hayas visto el pequeño videotutorial, serás capaz de afrontar nuevas tecnologías como CSS, javascript, y muchas otras con el que podrás darle vida a tus aplicaciones web.

¿Pero en realidad que necesitamos para aprender HTML?

Tan fácil y sencillo ... Tan solo necesitamos un editor de texto y un navegador, pero para ello primero vamos a iniciar con el editor de texto ya sea cualquiera como por ejemplo.

O cualquier otro editor de código que a ti te parezca mucho mas familiar y que tengas la habilidad suficiente para poder manejarla.

Para entrar en procedimientos muy avanzados, puedes crear un servidor local, para ello necesitarás el uso de XAMPP ó WAMPP.

Esperemos que puedas disfrutar de este pequeño video tutorial de Html Básico con fundamentos muy importantes que te van a ser de mucha utilidad para convertirte en un excelente desarrollador web.

Tutorial Cloudflare para Wordpress: optimización, aceleración y uso de reglas gratis

2017-07-02T19:36:00.001-07:00

No hace mucho tiempo pude ver un tutorial sobre Cloudflare que ademas de ser un buen producto, puedo decir que es un buen servicio gratuito (tiene opción de pago con más ventajas) que ayuda a proteger nuestros sitios webs, y además, actúa como un CDN que optimiza procesos y reduce la carga del servidor.

Cloudflare para Wordpress: optimización, aceleración y uso de reglas gratis

Se ha hablado mucho de este producto a punto que se establecen muchas ventajas :

CDN: Distribuye el contenido web por diferentes nodos, haciendo que los tiempos de respuestas desciendan desde el país que te visitan. Además, reduce el consumo de ancho de banda.

FIREWALL: Es capaz de bloquear intentos de ataques, bots, spam y otras formas de perjudicar tu servidor o web. Muy útil para ataques DDoS.

GRATIS: Permite el uso del CDN y reglas básicas de la aplicación sin coste alguno. La versión de pago tiene opciones más avanzadas y más ventajas, pero algo es algo.

INSTALACIÓN: Solamente necesitas cambiar las DNS de tu dominio y activar el plugin desde Wordpress. Si no te convence, cambias las DNS y se acabó Cloudflare.

Como recomendación, mucha gente usa solamente sus DNS y lo emplea como CDN ya que, a veces, al configurar la seguridad puede dar falsos positivos o detectar a users normales como bots o ataques.

Una buena forma de aprovecharlo con wordpress es haciendo uso de las 3 reglas gratis que permite la opción free. Por ello, vamos a trabajar:

PREVIO

0) Asumo que tienes una cuenta en Cloudflare y ya has cambiado las DNS para que trabajen con la aplicación. Si esto no es así, busca en el foro algunos de los tutoriales que más betas han escrito y que te resultarán de utilidad. En este caso en particular, no voy a emplear las reglas de seguridad.

CONFIGURACIÓN GENERAL

1) En el panel principal, repasamos la configuración de Cloudflare. En Settings overview, mantendremos la seguridad desactivada. Always Online y IP Geolocation déjalos en ON.Lo demás, por defecto.

2) Hacemos click en la pestaña de Performance settings. Estos valores son orientativos pero los explico: minifico el CSS y el HTML, dejando el JS porque a veces me ha dado problemas con determinados scripts. En cuanto, a la expiración TTL de la caché puedes reducir el tiempo si estás actualizando a menudo. Si lo haces cada 3 o 4 días, aumenta los valores. Como detalle, el Rocket Loader lo dejo por defecto en ON, pero suelo hacer pruebas con pagespeed insights ya que en ocasiones resulta más lento.

3) Volvemos haciendo click en "Websites"en el menú de arriba, y ahora volvemos a desplegar la pestaña, pero haciendo click en "Page Rules".

CREANDO REGLAS EN CLOUDFLARE PARA WORDPRESS

4) Para aumentar la velocidad del sitio web, vamos a crear 1 regla que permita cachear absolutamente todo, y esto incluye una gran lista de archivos: páginas, imágenes, css, js, swf,... Enlace a la lista de extensiones: https://support.cloudflare.com/entri...tatic-content-

5) En URL pattern, escribimos nuestra URL: *misitioweb.com/* (Los asteriscos incluyen subdominios como el www, y el resto de permalinks que tenga la web. Si pones blog.misitioweb.com/* no funcionará).

6) Parámetros Regla 1: el más importante es el "Custom Caching", en el que seleccionaremos "Cache Everything". Todo lo demás, puedes ir probando. He marcado con flechas azules lo que puedes ir variando hasta encontrar tu configuración más idónea ya que no todos los sitios son iguales (theme usado, versión wp, hosting, plugins,...). Por ejemplo, si no quieres NADA de seguridad, déjalo el apartado correspondiente en OFF.

7) Configurado lo que nos interesa, ahora vamos a realizar un ajuste básico y es que si cacheamos todo, el principal inconveniente que podemos encontrar es que no podamos acceder al dashboard, o lo que es peor, que nuestros usuarios no puedan registrarse o hacer login. Para ello, creamos una segunda regla que afecte a la carpeta wp-admin. En URL pattern escribiremos: *misitioweb.com/wp-admin*

8) El objetivo es que no se le aplique la primera regla para que pueda pasar el filtro. En la imagen, queda expuesto lo importante en amarillo, lo que debes dejar off en rojo y lo que puedes variar con una flecha. Por último, la tercera regla y última que permite Cloudflare free será la misma que la segunda pero con wp-login, quedando así: *misitioweb.com/wp-login*

9) Ahora que ya está todo, vuelve a Cloudflare Settings ---> Settings overview ---> Y click en "Purgue Cache". Limpiaremos la caché actual y se aplicarán los nuevos cambios.

NOTAS IMPORTANTES QUE DEBES SABER

Esto es compatible con cualquier sistema de caché que ya tenga wordpress (WP Super Cache, Quick Cache, W3TC,...).Si estás utilizando W3TC, prueba a instalar el plugin de Cloudflare y desactivar el que viene en el menú interno.

Si trabajas con tu servidor dedicado, no olvides de darle acceso desde iptables o el CSF a las IP's de Cloudflare: https://es.cloudflare.com/ips.

Por último, recuerda que el uso de Cloudflare no te asegura una buena puntuación en el pagespeed o el Yslow. La prioridad siempre está en lo ligero que tengas wordpress (cuida al máximo tu .htaccess), el diseño y el código de tu theme y el servidor dónde se aloje (hardware del server, software del server,ubicación y red, entre otros).

Bueno este artículo esta también en forobeta, es muy interesante para los webmaster que desean agilizar en cuanto a velocidad de sus sitios web, así como también para la optimización web, espero que les sea de mucha utilidad.

Crear un contador de visitas por entrada en blogger con php y MySql

2017-06-11T20:33:00.001-07:00

Hola amigos hoy voy a enseñar como crear un contador de visitas por entrada en blogger con php y MySql, ya que si queremos mantener nuestras estadísticas podremos ver que Urls han sido las mas visitadas dentro de nuestra base de datos.

Aprenda como crear un contador de visitas por entrada en blogger con php y MySql

Vamos a hacer todo esto muy rápido ya que explicaré paso por paso lo que tienes que hacer, pues creo que no es muy difícil ya que tan solo sustituirás los valores de tu base de datos, tales como usuario, password y nombre de tu BD, así como el servidor donde tienes alojado tu BD, en este caso para los que utilizamos hostinger nuestro host es mysql.hostinger.es.

Puedes crear tu propio Hosting desde aquí : Hosting gratis en Hostinger

"Esto es para que ya no estés buscando otras opciones de alojamiento web, pues Hostinger para mi siempre ha sido una excelente opción."

Archivos necesarios para el contador de visitas.

Contador de visitas para blogger hecho en PHP

Cambia los datos de tu conexión por el de tu BD

$con = @mysqli_connect('localhost', 'USER_BD', 'PASS_BD', 'NAME_BD') or die("document.write('Error');");

Una vez que hayas hecho los cambios, y hayas subido el archivo a tu servidor, puedes ir a tu blog de blogger y hacer los siguientes pasos.

Ve a tema > Edición de tu plantillla

Buscamos el siguiente código :

<div class='post-footer-line post-footer-line-1'>

Por lo general es el segundo resultado el que esta debajo de cada entrada, si no sabes buscar entonces click dentro del código y presiona CTRL + F

Después de haber hecho todo esto, lo único que tendremos que hacer es pegar el siguiente código.


<b:if cond='data:blog.pageType == "item"'>
<span id='hit-counter'>
<font color='#000'>Visto <script src='http://aqui-tu-dominio/contador.php' type='text/javascript'/> veces</font>
</span></b:if>


Bueno como ya podrás observar lo que hago es traer el código PHP, y luego con esto ya lo ejecuto como Javascript.

Convertir Archivos PHP en JS con htaccess

Otro paso opcional, es usar htaccess, para cambiar la extensión, de php a .js, yo lo hago porque me gusta, si lo quieren hacer, crean el archivo .htaccess y en el pegan:
RewriteEngine on
RewriteRule ^visitas.js visitas.php

Bueno todo tiene solución y tu solo sabrás que método puedes utilizar.

Tabla para subir a una base de datos que ya existe o te puedes crear una Base de datos e insertar esta tabla.

Tabla para tu base de datos

Bueno eso sería parte del tutorial, si quieren que quedé mas hermoso ya podemos utilizar Css, y en fín todo ya depende del gusto de cada persona.

Muchas gracias nos vemos en un próximo tutorial.

plantillas para blogger gratis en español responsive

2017-04-04T23:34:00.000-07:00

Hola queridos amigos hoy mencionaré las mejores plantillas para blogger gratis en español totalmente responsive, algo muchos usuarios están buscando en la red, pero lo mas importante quiero mencionarte que todas estas plantillas para blogger están completamente optimizadas para seo, algo que te toma mucho tiempo buscar en páginas web muy conocidas donde hay muchos desarrolladores que ofrecen sus productos, espero que les encante esta pequeña lista ya que no hace mucho hicimos un artículo de las mejores plantillas para blogger. Entonces que estamos esperando manos a la obra.

Top mejores plantillas para blogger gratis en español responsive.

En realidad me ha costado mucho buscar muy buenas plantillas optimizadas para blogger, pues se que ustedes dirán cual es la diferencia entre una normal responsive, y otras optimizadas responsive seo, pues hay mucha diferencia ya que muchos desarrolladores no consideran las etiquetas H1, H2 en muchas templates.

Presione el cuadro para leer la segunda parte del Tutorial ... Mientras tanto sírvase una tazita con café..........

Como Hacer un Menú desplegable para blogger

2017-01-19T23:33:00.000-08:00

Hola mi querida gente bloggera, hoy empezaremos con un tutorial sobre como hacer un menú desplegable para blogger, de una manera muy fácil y de tal forma que no necesites de la ayuda de un diseñador o desarrollador web, pues es algo práctico y sencillo porque tu mismo podrás manipular el código, en fin que esperamos manos a la obra.

Aprenda como hacer un menú desplegable para blogger .

Hacer un menú desplegable para blogger siempre ha sido para muchos algo muy importante, y porque no decir tan interesante, pues cabe recalcar que muchas plantillas de blogger no tienen esta parte muy importante incorporada. Pero no te preocupes que estás aquí y podremos crearnos una tal y como te lo imaginaste.

Imagen N° 01 : Menú desplegable en blogger
Fuente : http://www.neytortutoriales.com/

No quiero entrar en mas detalles, así que ya podemos comenzar con este pequeño tutorial de blogger.

Tutorial para hacer un menú desplegable en blogger.

Un menú desplegable siempre será una magnífica opción para el diseño de nuestro blog, es algo que también pone en orden las etiquetas, en el caso de que en ellas separemos lo que tengamos dentro de nuestros contenidos. (Ver imagen N° 01)