Mostrando entradas con la etiqueta css. Mostrar todas las entradas

Home css

02 enero 2017

Incluir contenido de un archivo JSON con Ajax de JQuery

  Author : Anthony Medina     7 comentarios
19:18


Ahora que esta de moda las API Rest en todo el medio de la Internet, es necesario innovar, y es que en eso pasamos nuestra vida los programadores, innovando e innovando, y como no ser así, si nuestra carrera en eso consiste. Las API Rest si no han escuchado antes el termino son un método de programacion que despeja por completo la relacion que hay entre un servidor y el cliente, llamese navegador.

Aunque este es un tema mas profundo y del cual hablare mas completo en una entrada futura, hoy solo quiero mencionar y enseñarles como mostrar datos de un Archivo JSON en una pagina común, mediante el uso de Ajax de jQuery para la funcionalidad asincrona que requiere este estilo de programacion.

A continuación, vamos a crear esta simple estructura para empezar nuestro proyecto. 

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Post</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
 <div class="row">
  <div class="row col s12">
   <div id="post">
   
   </div>
  </div>
 </div>
 <!-- Agregamos la libreria de jQuery -->
 <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
</body>
</html>

Este es el código básico que necesitamos para empezar, pero aun no tenemos nada, antes que nada debemos añadir la función que cargara las entradas, pero de donde?
Crearemos un archivo JSON, yo lo voy a llamar file.json y tendrá la siguiente estructura 

[
 {
  "Titulo" : "Conociendo sobre los efectos de transiciones CSS3",
  "Categoria" : "CSS",
  "Fecha" : "03-01-2017",
  "Hora" : "14:55",
  "Permalink" : "https://frikibloggeo.blogspot.com/2017/01/conociendo-sobre-los-efectos-de.html",
  "Autor" : "Anthony Medina",
  "Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est ipsam nesciunt? Inventore distinctio hic iusto totam officia sed, veniam eum corporis, repellendus repudiandae, debitis voluptas quos, alias neque porro?"
 },
 {
  "Titulo" : "Menu contextual sencillo con HTML5, CSS3 y JavaScript (jQuery)",
  "Categoria" : "JavaScript",
  "Fecha" : "25-12-2015",
  "Hora" : "17:06",
  "Permalink" : "https://frikibloggeo.blogspot.com/2015/12/menu-contextual-sencillo-con-html5-css3.html",
  "Autor" : "Anthony Medina",
  "Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas illo esse animi adipisci quia non tempore vero. Voluptatibus modi nesciunt ducimus quibusdam rerum, fugiat quo mollitia facilis, qui quidem veritatis."
 },
 {
  "Titulo" : "Crear tu propio sistema de comentarios con MySQL y PHP",
  "Categoria" : "PHP",
  "Fecha" : "09-06-2016",
  "Hora" : "14:14",
  "Permalink" : "https://frikibloggeo.blogspot.com/2014/06/crear-tu-propio-sistema-de-comentarios.html",
  "Autor" : "Anthony Medina",
  "Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quas, ea, recusandae laudantium non dolor ad repellat commodi sint? Fugit, voluptas minus aspernatur iste eius atque aliquid recusandae magnam, sunt."
 }
]

Como ya habrás podido notar, un JSON no es mas que un array estructurado mediante un estandar establecido que se puede leer de una manera mas sencilla que cualquier array convencional en cualquier lenguaje, particularmente, en el ejemplo, tenemos un array de JSON cuya longitud presenta 3 objetos, los cuales contienen cierta información sobre entradas de un blog cualquiera como son el titulo, fecha, hora, etc.

Si bien, mirar y leer datos de un archivo JSON ya es humanamente legible por decirlo de alguna manera, no es todavía suficientemente humanamente legible, por el uso de corchetes, comas, llaves, puntos, comillas, etc. Y es que JSON no ha sido creado para ser leído por humanos, ha sido creado para ser consumido por humanos mediante el uso de herramientas con jQuery, AngularJS, PHP, entre muchos otros frameworks y lenguajes.

Ahora, que hacemos con este pedazo de JSON?

Bien, a la estructura HTML anteriormente creada, justo debajo de la CDN de jQuery, pegamos el siguiente codigo 

<script type="text/javascript">
            $(document).ready(function() {
                $.ajax({
                    url: "file.json",
                    type: "GET",
                    async: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    beforeSend: function() {
                        $('#post').html("Cargando post, por favor, espere");
                    },
                    success: function(response) {
                        $('#post').html("");
                        $.each(response, function(i, post) {
                            $('#post').append(
                                  "<h5 class='row col s12'><a href='"+post.Permalink+"'>"+post.Titulo+"</a></h5>"
                                + "<div class='meta row col s6'>"
                                +      "<span class='chip'>Autor: <b>"+post.Autor+"</b></span>"
                                +      "<span class='chip'>Fecha: <b>"+post.Fecha+"</b></span>"
                                +      "<span class='chip'>Hora: <b>"+post.Hora+"</b></span>"
                                +      "<span class='chip'>Categoria: <b>"+post.Categoria+"</b></span>"
                                + "</div>"
                                + "<p class='row col s12'>"+post.Contenido+"</p>"
                            );
                        });
                    }
                });
            });
    </script>

Donde podemos observar, tenemos un script cuyo ejecución es realizada al iniciar la pagina mediante el uso de la función $('document').ready(); de jQuery, dentro de ella llamamos a la función $.ajax();, la cual nos hace un llamado a nuestro archivo JSON que anteriormente creamos, enviando una serie de parámetros necesarios para la lectura del mismo, una vez hecho el llamado, la función success de jQuery imprime el callback de la manera mas humanamente legible dentro de nuestro documento HTML.

Que tenemos hasta ahora?


Bien, pasamos de tener un documento en blanco a tener un pagina cargada con post, pero un poco aburrido esos estilos predeterminados?

Que tal si añadimos un poco de magia con materialize? Simplemente, agrega este código de la CDN justo antes de cerrar la etiqueta </head> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

Eso es todo, mira que bonito se ve ahora, aqui te dejo el codigo completo y una demo del mismo en Plunkr

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Post</title>
    <!-- Agregamos la hoja de Estilos de Materialize (Opcional) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="row">
        <div class="row col s12">
            <div id="post">
            
            </div>
        </div>
    </div>
    <!-- Agregamos la libreria de jQuery -->
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
    <!-- Agregamos la libreria de Materialize (Opcional) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <!-- Script que se ejecuta al iniciar la pagina y carga los posts a la misma -->
    <script type="text/javascript">
            $(document).ready(function() {
                $.ajax({
                    url: "file.json",
                    type: "GET",
                    async: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    beforeSend: function() {
                        $('#post').html("Cargando post, por favor, espere");
                    },
                    success: function(response) {
                        $('#post').html("");
                        $.each(response, function(i, post) {
                            $('#post').append(
                                  "<h5 class='row col s12'><a href='"+post.Permalink+"'>"+post.Titulo+"</a></h5>"
                                + "<div class='meta row col s6'>"
                                +      "<span class='chip waves-effect'>Autor: <b>"+post.Autor+"</b></span>"
                                +      "<span class='chip waves-effect'>Fecha: <b>"+post.Fecha+"</b></span>"
                                +      "<span class='chip waves-effect'>Hora: <b>"+post.Hora+"</b></span>"
                                +      "<span class='chip waves-effect'>Categoria: <b>"+post.Categoria+"</b></span>"
                                + "</div>"
                                + "<p class='row col s12'>"+post.Contenido+"</p>"
                            );
                        });
                    }
                });
            });
    </script>
</body>
</html>

DEMO

Publicado por
Leer completo

Conociendo sobre los efectos de transiciones CSS3

  Author : Anthony Medina     4 comentarios
13:57


Las transiciones CSS proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

Para aplicar una transición a un elemento tenemos que utilizar la propiedad transition. Aunque está propiedad ya la podemos considerar un estándar, es recomendable el uso de prefijos para que funcione en versiones antiguas de los navegadores. Antes de comenzar, explicaremos brevemenete los navegadores que sorportan este efecto actualmente


Propiedad
transition
 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-delay
 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-duration
 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-property
 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-timing-function
 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-


Como usar las transiciones de CSS3

Para crear un efecto de transición de CSS3 debes especificar dos cosas
  • La propiedad CSS
  • La duración de efecto
Nota: Si no agregas la duración, el efecto no tendrá lugar ya que el valor por defecto es 0

Ejemplo:

Tenemos un pequeño div color rojo cuyo tamaño original es 100px y al poner el mouse sobre el, el evento hover amplia su propiedad width a 300px



#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
   -o-transition: width 2s; /* Opera */
   -moz-transition: width 2s; /* Mozilla */
   -webkit-transition: width 2s; /* Safari y Chrome */
}
#box:hover {
    width: 300px;
}


Usar una sola propiedad no es limitante, por lo que en el siguiente ejemplo, se puede observar como se aplica dos efectos por separado a un mismo div. 



#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
   -o-transition: width 2s, height 4s; /* Opera */
   -moz-transition: width 2s, height 4s; /* Mozilla */
   -webkit-transition: width 2s, height 4s; /* Safari y Chrome */
}
#box:hover {
    width: 300px;
    height:300px;
}


Curva de Transición


Además de la propiedad y la duración, podemos añadir la curva que tendrá la transición al momento de hacer el efecto, para esto contamos con la propiedad transition-timing-function

Dicha propiedad cuenta con los siguientes valores:
  • ease - Transición lenta al inicio, un poco mas rápido a mediados de la misma, y finaliza con lentitud
    • #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width ease 2s;
   -o-transition: width ease 2s; /* Opera */
   -moz-transition: width ease 2s; /* Mozilla */
   -webkit-transition: width ease 2s;
    
}
#box:hover {
    width: 300px;
}
  • linear - Transición con efecto unifome
    • #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width linear 2s;
   -o-transition: width linear 2s; /* Opera */
   -moz-transition: width linear 2s; /* Mozilla */
   -webkit-transition: width linear 2s;
    
}
#box:hover {
    width: 300px;
}
  • ease-in - Transición lenta solo al inicio 
    • #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width ease-in 2s;
   -o-transition: width ease-in 2s; /* Opera */
   -moz-transition: width ease-in 2s; /* Mozilla */
   -webkit-transition: width ease-in 2s;
    
}
#box:hover {
    width: 300px;
}
  • ease-out - Transición lenta solo al final 
    • #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width ease-out 2s;
   -o-transition: width ease-out 2s; /* Opera */
   -moz-transition: width ease-out 2s; /* Mozilla */
   -webkit-transition: width ease-out 2s;
    
}
#box:hover {
    width: 300px;
}
  • ease-in-out - Transición con inicio y final lento 
    • #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width ease-in-out 2s;
   -o-transition: width ease-in-out 2s; /* Opera */
   -moz-transition: width ease-in-out 2s; /* Mozilla */
   -webkit-transition: width ease-in-out 2s;
    
}
#box:hover {
    width: 300px;
}
  • cubic-bezier(n,n,n,n) - El usuario define los valores de la curva


Transición + Transformación (transition + tranform)


#box {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, transform 2s;
   -o-transition: width 2s, height 2s, -o-transform 2s; /* Opera */
   -moz-transition: width 2s, height 2s, -moz-transform 2s; /* Mozilla */
   -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari y Chorme */
    
}
#box:hover {
    width: 300px;
    height: 300px;
    -o-transform: rotate(180deg); /* Opera */
    -moz-transform: rotate(180deg); /* Safari y Chrome */
    -webkit-transform: rotate(180deg); /* Safari y Chrome */
    transform: rotate(180deg);
}

Dar un útil uso de estas transiciones que nos otorga CSS3 depende de ti, esto es tan solo un preámbulo para obtener conocimientos de como usar la misma, pero tu creatividad te puede llevar al limite de lo imposible.

Ref: w3School.com

Publicado por
Leer completo

25 diciembre 2015

Menú contextual sencillo con HTML5, CSS3 y JavaScript (jQuery)

  Author : Anthony Medina     4 comentarios
18:36



Un menú contextual es una lista de comando alternativos que aparece al hacer clic sobre el botón secundario del mouse sobre un elemento especifico. Esta mostrará ciertas funciones que se pueden hacer con dicho elemento, es de suma importancia en los sistemas operativos pues mejorar la navegabilidad del usuario en el mismo, no es posible mencionar algún sistema operativo que no cuente con ellos.

Así como existen menúes contextuales para los sistemas operativos, es posible también que existan en la web, por supuesto, lleva cierto trabajo, a diferencia de lo que implicaría programar estos en IDE's como Visual Studio para .NET o C# o incluso NetBeans para Java, que son trabajados de forma mas visual. Programarlos requiere del uso de 3 lenguajes sumamente sencillos, y que todo programador web debe conocer, HTML, CSS y JavaScript, específicamente hablando, del framework jQuery que tanta gracia ha proporcionado a la internet.

Antes de comenzar, te dejo una demo por acá


Codigo HTML

 Este código debe ser introducido entre las etiquetas <body> ... </body> de la pagina.


<div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">

 </div>
 <ul id="menu-contextual" oncontextmenu="return false;">
  <li>Paginas de Busqueda<span></span>
   <ul>
    <li onclick="location.href='http://google.com'">Google</li>
    <li onclick="location.href='http://yahoo.com'">Yahoo!</li>
    <li onclick="location.href='http://bing.com'">Bing</li>
   </ul>
  </li>
  <li class="separador">Redes Sociales<span></span>
   <ul>
    <li onclick="location.href='http://facebook.com'">Facebook</li>
    <li onclick="location.href='http://twitter.com'">Twitter</li>
    <li onclick="location.href='http://googleplus.com'">Google Plus</li>
   </ul>
  </li>
  <li onclick="window.history.forward()">Adelante</li>
  <li onclick="window.history.back()">Atras</li>
  <li>Favoritos<span></span>
   <ul>
    <li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
    <li onclick="location.href='http://blogger.com'">Blogger</li>
    <li onclick="location.href='http://gmail.com'">Gmail</li>
   </ul>
  </li>
  
 </ul>

Si pueden observar, la sección del menú contextual tiene la misma estructura que tiene un menú desplegable, en este caso vertical, la única diferencia seria en este caso aplicarle correctamente los estilos CSS para que este se ajuste al diseño de los menúes contextuales que vemos en los sistemas operativos como Windows o cualquier otro

Codigo CSS

 

* {
   margin:0 auto;
   padding:0 auto;
  }

  #outer-wrapper {
   background:transparent;
   position:absolute;
   width:100%;
   height:100%;
  }

  ul#menu-contextual {
   display:none;
   background:white;
   font-family:Verdana, Arial, "Times New Roman", sans-serif;
   font-size:12px;
   color:black;
   border:1px solid #CCC;
   box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
  }

  ul#menu-contextual ul {
   display:none;
   background:white;
   font-family:Verdana, Arial, "Times New Roman", sans-serif;
   font-size:12px;
   color:black;
   border:1px solid #CCC;
   padding:2px 9px 2px 2px;
   box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
  }

  ul#menu-contextual li:hover {
   background:#CCC;
   word-wrap:break-word;
  }

  ul#menu-contextual li:hover > ul {
   display:block;
  }

  .separador {
   border-bottom:1px solid #ccc;
  }

Hasta ahora no tenemos mas que un menú desplegable oculto dentro de nuestra pagina, que es necesario ser mostrado al oprimir el clic secundario de nuestro mouse, y que aparezca justamente en sitio de la pantalla donde hemos hecho el clic, esta magia la hacemos con lo siguiente

Codigo JS

 

/*
     * Autor: Anthony Medina
     * Email: anthonyjmedinaf@gmail.com
     * Blog: http://frikibloggeo.blogspot.com
  */

  function mostrarMenu(event, id, menu_id) {
   var posX, posY, span; // Declaracion de variables

   posX = event.pageX; // Obtenemos pocision X del cursor
   posY = event.pageY; // Obtenemos pocision Y del cursor

   // Hacemos aparecer el menu contextual
   $('#' + menu_id).fadeIn('fast');

   // Flecha que indica submenues
   span = $('#' + menu_id + " span");
   span.html("»");

   // Editando el codigo CSS para ciertos elementos
   span.css({float: 'right',marginRight: '12px'});
   $('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
   $('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
   $('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
  }

  function ocultarMenu(menu_id) {
   $('#' + menu_id).fadeOut('fast');
  }

Y no olviden, lo mas importante, colocar esta pequeña linea justo debajo del <head> de la página web.


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Por último, les dejo el código completo para mayor facilidad



<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Menu Contextual</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script>
    /*
     * Autor: Anthony Medina
     * Email: anthonyjmedinaf@gmail.com
     * Blog: http://frikibloggeo.blogspot.com
  */

  function mostrarMenu(event, id, menu_id) {
   var posX, posY, span; // Declaracion de variables

   posX = event.pageX; // Obtenemos pocision X del cursor
   posY = event.pageY; // Obtenemos pocision Y del cursor

   // Hacemos aparecer el menu contextual
   $('#' + menu_id).fadeIn('fast');

   // Flecha que indica submenues
   span = $('#' + menu_id + " span");
   span.html("»");

   // Editando el codigo CSS para ciertos elementos
   span.css({float: 'right',marginRight: '12px'});
   $('#' + menu_id).css({position: 'absolute',display: 'block',top: posY,left: posX,cursor: 'default',width: '200px',height: 'auto',padding: '2px 9px 2px 2px',listStyle: 'none',listStyleType: 'none'});
   $('#' + menu_id + " li").css({width:'100%',height:'auto',margin:'0 auto',padding:'3px 0px 3px 7px',wordWrap:'break-word'});
   $('#' + menu_id + " li ul").css({listStyle:'none',listStyleType:'none',cursor:'default',position:'absolute',left:'212px',marginTop:'-20px',width:'200px',height:'auto',padding:'2px 9px 2px 2px'});
  }

  function ocultarMenu(menu_id) {
   $('#' + menu_id).fadeOut('fast');
  }

 </script>
 
 <style type="text/css">
  * {
   margin:0 auto;
   padding:0 auto;
  }
  #outer-wrapper {
   background:transparent;
   position:absolute;
   width:100%;
   height:100%;
  }

  ul#menu-contextual {
   display:none;
   background:white;
   font-family:Verdana, Arial, "Times New Roman", sans-serif;
   font-size:12px;
   color:black;
   border:1px solid #CCC;
   box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
  }

  ul#menu-contextual ul {
   display:none;
   background:white;
   font-family:Verdana, Arial, "Times New Roman", sans-serif;
   font-size:12px;
   color:black;
   border:1px solid #CCC;
   padding:2px 9px 2px 2px;
   box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -ms-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -webkit-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -o-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -moz-box-shadow:5px 5px 0px rgba(0,0,0,.1);
   -khtml-box-shadow:5px 5px 0px rgba(0,0,0,.1);
  }

  ul#menu-contextual li:hover {
   background:#CCC;
   word-wrap:break-word;

  }

  ul#menu-contextual li:hover > ul {
   display:block;

  }
  .separador {
   border-bottom:1px solid #ccc;
  }


 </style>
</head>
<body>

 <div id="outer-wrapper" onclick="ocultarMenu('menu-contextual');" oncontextmenu="mostrarMenu(event, this.id, 'menu-contextual');return false;">
 </div>

 <ul id="menu-contextual" oncontextmenu="return false;">
  <li>Paginas de Busqueda<span></span>
   <ul>
    <li onclick="location.href='http://google.com'">Google</li>
    <li onclick="location.href='http://yahoo.com'">Yahoo!</li>
    <li onclick="location.href='http://bing.com'">Bing</li>
   </ul>
  </li>
  <li class="separador">Redes Sociales<span></span>
   <ul>
    <li onclick="location.href='http://facebook.com'">Facebook</li>
    <li onclick="location.href='http://twitter.com'">Twitter</li>
    <li onclick="location.href='http://googleplus.com'">Google Plus</li>
   </ul>
  </li>
  <li onclick="window.history.forward()">Adelante</li>
  <li onclick="window.history.back()">Atras</li>
  <li>Favoritos<span></span>
   <ul>
    <li onclick="location.href='http://frikiblogeeo.blogspot.com'">Friki Bloggeo</li>
    <li onclick="location.href='http://blogger.com'">Blogger</li>
    <li onclick="location.href='http://gmail.com'">Gmail</li>
   </ul>
  </li>
  

 </ul>

 
</body>
</html>

Eso es todo.

Publicado por
Leer completo

03 junio 2015

Bootstrap 3, el manual oficial

  Author : Anthony Medina     1 comentario
13:36

Seamos honestos, la mayoría de los programadores no saben diseñar. En Itechnode hemos tratado el tema del diseño responsivo, pasando de ser una tendencia a ya ser obligatorio en todo sitio web que pretenda perdurar en el tiempo y ya que un programador por el hecho de trabajar con un ordenador no lo puede saber todo, les hemos facilitado unas excelentes plantillas realizadas con bootstrap pero lo ideal es que lo aprendamos, he aquí un excelente libro web.

El Diseño Web

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y video.

¿Que es Bootstrap?

En la actualidad muchos sitios web están elaborando su diseño en Bootstrap, ¿Qué es Bootstrap? Pues en pocas palabras es el framework de Twitter que permite crear interfaces web con CSS y Javascript que adaptan la interfaz dependiendo del tamaño del dispositivo en el que se visualice de forma nativa, es decir, automáticamente se adapta al tamaño de un ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se denomina diseño adaptativo o Responsive Design y está muy de moda.

Publicado por
Leer completo

09 junio 2014

Crear tu propio sistema de comentarios con MySQL y PHP

  Author : Anthony Medina     50 comentarios
2:44



Son las 1:47 de la madrugada y y desvelado trabajando en esta publicación que he querido traerles y que se que les sera muy útil pues, poco a poco te ayudará a independizarte un poco o de despertar en ti esos deseos de saber mas sobre como trabajar con bases de datos, las cuales si no existieran, el mundo de la Internet fuera nulo, aburrido y sin nada nuevo que ver. Para esta ocasión, he realizado un pequeño formulario, trabajado con HTML y CSS para darle tan llamativo aspecto, con PHP y MySQL para conexión y consultas a bases de datos y PHPMyAdmin para gestión de las mismas, de manera que antes de comenzar a realizar este tutorial recomiendo instalar un localhost en tu computador, o bien, si tienes un servidor externo también funciona, sin embargo; trabajar con un servidor local seria lo preferible.



Ingresa a PHPMyAdmin en tu computador, luego ve a Importar > pestaña SQL y pega el siguiente código

Archivo SQL

-- phpMyAdmin SQL Dump
-- version 2.10.3
-- http://www.phpmyadmin.net
-- 
-- Servidor: localhost
-- Tiempo de generación: 09-06-2014 a las 05:52:30
-- Versión del servidor: 5.0.51
-- Versión de PHP: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

-- 
-- Base de datos: `comentarios`
-- 

-- --------------------------------------------------------

-- 
-- Estructura de tabla para la tabla `comentarios`
-- 

CREATE TABLE `comentarios` (
  `ip` int(11) NOT NULL auto_increment,
  `usuario` varchar(20) NOT NULL,
  `email` varchar(50) NOT NULL,
  `website` varchar(1000) NOT NULL,
  `comentario` varchar(3000) NOT NULL,
  `fecha` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`ip`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1305 ;

-- 
-- Volcar la base de datos para la tabla `comentarios`
-- 

INSERT INTO `comentarios` VALUES (1303, 'Formatos', 'formatos@formatos.com', '', '<b>Texto en negrita</b><br />\r\n<i>Texto en cursiva</i><br />\r\n<u>Texto subrayado</u><br />\r\n<strike>Texto Tachado</strike><br />\r\n<span style="color: #3d85c6;">Texto en color</span><br />\r\n<span style="background-color: yellow;">Texto con color de fondo</span><br />\r\n<a href="http:/#">Link</a><br />\r\n<blockquote class="tr_bq">\r\nCita</blockquote>\r\n<div class="separator" style="clear: both; text-align: center;">\r\n<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBaT5C7n4tz4LflY6vUj1du-cbLX8uwl1wVbpEPfSPk09UoTnKR8zP-zdw2yHstkVYdVlKIonndNLgjtxip2QMnvnLf2fAqCt2pR63uCppbDb00jNSayT7npKpjlviBdSS02BOJ8bF0c/s1600/flores_rojas_08.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBaT5C7n4tz4LflY6vUj1du-cbLX8uwl1wVbpEPfSPk09UoTnKR8zP-zdw2yHstkVYdVlKIonndNLgjtxip2QMnvnLf2fAqCt2pR63uCppbDb00jNSayT7npKpjlviBdSS02BOJ8bF0c/s320/flores_rojas_08.jpeg" /></a></div>\r\n<h1>\r\nEncabezado 1</h1>\r\n<h1>\r\n</h1>\r\n<h2>\r\nEncabezado 2</h2>\r\n<h2>\r\n</h2>\r\n<h3>\r\nEncabezado 3</h3>\r\n<h3>\r\n</h3>\r\n<h4>\r\nEncabezado 4</h4>\r\n<h4>\r\n<marquee>Texto desplazable</marquee>\r\n</h4>\r\n<audio controls="" src="https://sites.google.com/site/anthonyjmedinaf/archivos/Eagles%20-%20Hotel%20California.mp3">Hotel California - Eagles</audio><br />\r\n<br />\r\n<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/_V5o392WOzw" width="100%"></iframe>', '2014-06-09 01:08:20');
INSERT INTO `comentarios` VALUES (1304, 'Anthony', 'nthny21@hotmail.com', '', 'Este es un <b>comentario</b>, almacenado en una base de datos MySQL y mostrado en esta página a través de una consulta ', '2014-06-09 01:19:38');

El código presenta dos ejemplos de comentarios el cual podras visualizar con mejoras mas adelante, crea el siguiente archivo de formato .php, donde localhost sera la direccion del servidor, si trabajas con servidor local, lo mas probable es que tengas que dejarla igual, usuario es tu nombre de usuario, password tu contraseña, y el nombre de la base de datos donde deseamos guardar los comentarios, en nuestro caso, "comentarios".

Publicado por
Leer completo

07 junio 2014

[7] Como crear tu pagina web HTML5/CSS3 desde cero - Extras y mejoras

  Author : Anthony Medina     6 comentarios
14:26


Publicaciones relacionadas: 

Hasta que por fin llegó el día del último tutorial, los abandoné estos 2 últimos días puesto que estaba trabajando en algunas mejoras que le hice a la pagina web con la que estamos trabajando. Podría decirse que me esmeré lo suficiente para traerles en este tutorial un contenido de calidad, y comentarles ademas, que mejoras se les pueden hacer muchas, infinidades, así que no te quedes con solo lo que hoy te daré, también, estaré dejando los archivos y recursos de la página listos para que los descarguen, y así trabajen de manera directa sobre el archivo que llevo yo en mi computador.

Antes de empezar a mostrar codigos, solo quiero comentar que este tutorial no se trata mas que de dar estilos extras a lo que ya llevamos de manera que luzca mucho mejor, eso es lo que queremos, ademas, tambien hablarles un poco sobre ciertas y nuevas etiquetas que trajo consigo el HTML5 y que serán aplicables en tu blog. Comenzamos

Elemento Dialog

La etiqueta <dialog> no es mas que un elemento que te permite mostrar una conversación entre dos individuos, en esta era de las redes sociales, como facebook, twitter, whatsapp o BBM puede llegar a ser muy útil y mucho mas divertido para los usuarios.

Codigo HTML (Ejemplo)

Publicado por
Leer completo

05 junio 2014

[6] Como crear tu pagina web HTML5/CSS3 desde cero - El pie de página

  Author : Anthony Medina     1 comentario
14:51


Publicaciones relacionadas: 
Ya estamos casi finalizando la serie de tutoriales sobre como crear tu propia pagina web HTML5 y CSS3 de una manera muy sencilla, y llegamos al sexto y penúltimo tutorial; el pie de pagina, ultimo pero elemento no menos importante, pues puede ser muy útil si usas tu creatividad, el pie de pagina de una sitio web no debe ir muy recargado, solo debe contener información complementaria de dicho sitio, el usuario que visita un portal sabe que para obtener información sobre tu sitio como derechos de autor, incluso redes sociales o quien administra la pagina, se dirige hasta el pie de pagina sin rodeos, es por esto; que debemos mantener el estándar y no salirnos de los parámetros pues puede ser bastante incomodo para quien visualiza.

Añade el siguiente código entre las etiquetas <footer>...</footer> de tu pagina web 


            <a href="#">Friki Bloggeo</a> &copy; Copyright 2014. Diseño y edición por <a href="#">Anthony Medina</a>

Y se debe visualizar de este modo

Publicado por
Leer completo

[5] Como crear tu pagina web HTML5/CSS3 desde cero - La barra lateral

  Author : Anthony Medina     No hay comentarios
13:59


Publicaciones relacionadas: 
Continuamos con la serie de tutoriales y ya casi estamos en la recta final, este tutorial será bastante corto puesto a que ya hemos pasado la mayor parte, sin desacreditar a la barra lateral, también fundamental pues allí estarán ciertos elementos que son necesarios y que destacan en tu blog o pagina web.

Copia y pega el siguiente código entre las etiquetas <aside>...</aside> de tu pagina 

             <div id="widget">
                 <h2>Iniciar sesión</h2>
                    <div class="wcontenido">
                     <form name="login" id="login">
                         <input type="text" name="user" value="Usuario" size="21"><br>
                         <input type="password" name="pass" value="Contraseña" size="21"><br>
                         <input type="button" name="button" value="Login">
                        </form>
                    </div> 

                 <h2>Disclaimer</h2>
                    <div class="wcontenido">
                     El contenido presente en este portal está protegido por una licencia de Creative Commons, el cual aprueba su uso, modificación y distribución avisando previamente al dueño del mismo y acreditando al final de la publicación.<a href="#">link</a> <span>hola</span>
                    </div> 
                    
                </div>
Hasta ahora se verá algo así

Publicado por
Leer completo

04 junio 2014

[4] Como crear tu pagina web HTML5/CSS3 desde cero - El contenido

  Author : Anthony Medina     1 comentario
13:02


Publicaciones relacionadas: 
¡Enhorabuena! Hasta donde hemos llegado, es tiempo de una de las partes mas importantes dentro de un blog o pagina web, el contenido, la razón y el por que de que todos los usuarios visiten tu portal, es por esto que en esta parte tenemos que ser creativos, llamar la atención, jugar con colores, mostrar al usuario lo que quiere ver sin recargas ni rodeos. Para empezar, copia y pega el siguiente trozo de código dentro de las etiquetas 



              <div id="atitulo"><a href="#">Aqui debe ir el titulo de contenido a mostrar</a></div>
                    <div id="ainfo">Publicado el dia <div class="fecha"><a href="#">20/10/2011</a></div> por <div class="autor"><a href="#">Anthony Medina</a></div> en <div class="ubicacion"><a href="#">San Felipe, Venezuela</a></div>
                    </div>
                    <img src="imagenes/Moviles_Doolphy_6151.png"/>
          <div id="acontenido">
                    <!-- Empieza publicacion -->
                    Aqui ira el contenido el cual contendrá sus estilos propios, esto es un ejemplo de como se verá el <span>texto resaltado</span> y este es el ejemplo de como se verá un <a href="#">link</a>.
                    <h1>Header 1</h1>
                    <h2>Header 2</h2>
                    <h3>Header 3</h3>
                    <h4>Header 4</h4>
                    <h5>Header 5</h5>
                    <h6>Header 6</h6>
                    <pre>Esto es un mensaje con pre</pre>
                    <code>Esto es un mensaje con code</code>
                    <pre contenteditable="true"><code>esto es un mensaje pre-code, mientras mas largo se hace menos cabe en la seccion por lo tanto debo darle estilos, ademas, esta caja contiene un atributo el cual permite editar su contenido a tu gusto</code></pre>
                    <blockquote>Esta en una cita</blockquote>
                    
                    <table>
                     <th>Titulo 1</th>
                       <th>Titulo 2</th>
                     <tr>
                      <td>Dato 1</td>
                            <td>Dato 2</td>
                     </tr>
                     <tr>
                      <td>Dato 3</td>
                            <td>Dato 4</td>
                     </tr>
                    </table>
                    <!-- Termina Publicación -->
                    </div>

Hasta ahora, que llevamos

Publicado por
Leer completo

03 junio 2014

[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú

  Author : Anthony Medina     No hay comentarios
15:07


Publicaciones relacionadas: 

Continuando con la serie de tutoriales sobre como realizar una pagina web en lenguaje HTML5/CSS3, y una vez terminada la cabecera, continuamos con la segunda sección, una de las mas importantes pues será el que llevara a los usuarios a cada pagina dentro de tu blog o pagina web, un sitio web sin menú es como comerse un huevo cocido sin sal, es una expresión muy popular acá en mi país, hermanos. Pero en fin, les muestro la estructura del menú, el cual debe incluirse entre la etiqueta <nav>...</nav> del sitio 




      <ul id="menu">
          <li><a href="#">Home</a></li>
             <li><a href="#">Blogs</a>
              <ul>
                  <li><a href="#">Wordpress</a></li>
                     <li><a href="#">Blogger</a></li>
                     <li><a href="#">Joomla!</a></li>
                     <li><a href="#">Blogia</a></li>
                 </ul>
    </li>
               <li><a href="#">Programación</a>
              <ul>
                  <li><a href="#">PHP</a></li>
                     <li><a href="#">Javascript</a></li>
                     <li><a href="#">JAVA</a></li>
                     <li><a href="#">C++</a></li>
                     <li><a href="#">Python</a></li>
                     <li><a href="#">VB.NET</a></li>
                 </ul>
              </li>
               <li><a href="#">HTML/CSS</a></li>
               <li><a href="#">Generadores</a></li>
               <li><a href="#">Contacto</a></li>
   </ul>

Por los momentos se vería algo así

Publicado por
Leer completo

02 junio 2014

[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera

  Author : Anthony Medina     5 comentarios
15:27


Publicación relacionada: [1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración

Continuando con la serie de tutoriales sobre como crear tu propia pagina HTML5/CSS3, hoy traigo el siguiente, la segunda parte en el que estaremos hablando de la cabecera de la pagina, después de ver el tutorial sobre la estructuración del sitio. Antes de comenzar, quiero mostrar quiero mostrar el código HTML y CSS de la sección de la pagina que nos compete en este tutorial, en este caso; la cabecera 

/* Código CSS para la cabecera */

body header {
    display:block;
    background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
    width:88%;
    height:auto;
    margin:0 auto;
    padding-top:29px;
    padding-bottom:29px;
    font-size:48px;
    color:#FFF;
    text-align:center;
    border-radius:10px 10px 10px 10px;
    -webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
    -moz-border-radius:10px 10px 10px 10px; /* Firefox */
    -o-border-radius:10px 10px 10px 10px; /* Opera */
    -ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
 
<!-- Código HTML -->  }

...
        <header>
         Yo soy la cabecera
        </header>
...

Si te cuesta entender el código anterior, quizás; es necesario que le eches un vistazo al tutorial anterior. Pero, en fin, continuando con lo que deseamos hacer, indaguemos e imaginemos un poco ¿Que lleva la cabecera de una pagina web o un blog? No existen reglas que nos establezcan que poner o que no poner en una cabecera, sin embargo, siempre es recomendable no recargarla demasiado, en mi caso, yo no le pondría mas que el titulo, la descripción, un cuadro de búsqueda, y quizás, unos cuantos botones de suscripción a redes como facebook, twitter y las fuentes RSS. Agregamos los elementos antes mencionados con el siguiente código.

Publicado por
Leer completo

01 junio 2014

[1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración

  Author : Anthony Medina     No hay comentarios
19:28


HTML5 ha dado mucho de que hablar desde la fecha de su lanzamiento por las inmensas mejoras y novedades que este trajo consigo, tanto así, que ahora es mucho mas fácil para un nuevo "programador" aprender la codificación mas rápida, aunque los navegadores aceptan el uso de HTML5 hay algunas personas que prefieren usar el HTML antiguo para programar quizás por miedo a que algo salga mal por incompatibilidad, quizás si, quizás no, pero nunca esta de mas actualizarse. Cabe destacar que este tutorial lo  dividiré 7 en partes, La estructuración, la cabecera, el menú, el contenido, la barra lateral, el pie de pagina y extras. La verdad, no me quiero extender mucho en la introducción a este tutorial pues, ya en sí, es bastante largo. Solo me queda decirle que indica.

Estructuración inicial de la página

Antes de iniciar, me gustaría comentarle que este punto es un muy importante, pues significo la mas grande mejora que nos trajo la nueva versión de HTML pues nos hace mas fácil la vida otorgándoles nombres propios a las regiones que usamos usualmente en paginas web o blogs. El siguiente código es un pequeño ejemplo de como se estructuraba una pagina web en HTML versión antigua usando DIV con identificadores
<!DOCTYPE html>
<html lang="es">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Título de la página</title>
 </head>

 <body>

        <div id="header">
        </div>

        <div id="menu">
        </div>

        <div id="contenedor">

         <div id="contenido">
         </div>

         <div id="barralateral">
         </div>

         </div>

        <div id="piedepagina">
        </div> 

 </body>

</html>

Publicado por
Leer completo

29 mayo 2014

Crear tu propia versión móvil de tu página web o blog

  Author : Anthony Medina     No hay comentarios
15:00


Los smartphones y tablets han venido ganando terreno alrededor de los últimos años en cuanto al uso de Internet móvil, para muchas personas es indispensable, y como no serlo, si existen millones de aplicaciones que te hacen la vida mucho mas fácil, desde conectarte a internet hasta realizar transacciones bancarias sin tener que ir al banco, por ejemplo. Por esta razón, muchas personas han optado por adquirir un dispositivo móvil que puedan llevar a cualquier lugar, valga la redundancia.

Anteriormente, realice una publicación sobre como ajustar tu blog o pagina web a la resolucion del dispositivo en el que se visualiza, muy útil herramienta que les ayudará a que los usuarios obtengan una mejor impresión de tu sitio o blog, no obstante; está publicación es muy parecida aunque con una pequeña o gran diferencia, depende de como lo quieras ver. La anterior publicación simplemente consiste en adaptar los estilos CSS al tamaño de la pantalla del dispositivo, esta se trata de crear dos hojas de estilos, y que el navegador aplique cada una de estas dependiendo de la resolución, reconociendo si la pagina se esta visualizando de un computador o de un movil. Ejemplo sencillo:

Así es como se vería este blog en computadores



Así es como se vería este blog en móviles

Publicado por
Leer completo

27 mayo 2014

Ajustar tu blog o pagina para que se adapte a la resolución del dispositivo en el que se visualiza

  Author : Unknown     No hay comentarios
20:41



Publicación relacionada: Crear tu propia versión móvil de tu página web o blog

Para un blogger o una persona que desea hacer un sitio web este tuto será fundamental, puesto a que; en plena era tecnológica, donde los llamados Smartphones, en primera instancia; han ganado un terreno enorme en cuanto a su porcentaje de adquisición, haciendo esto que mas personas opten por acceder a la web desde ellos, y este no es mas que un ejemplo entre tantos dispositivos y resoluciones que pueden existir, por ejemplo; tablets, iPods, TV's con acceso a internet, entre muchos.

Un webmaster no se puede dar el lujo de que su pagina web quizás se pueda distorsionar, particularmente a mi, la primera vez que me ocurrió, me sentí realmente incomodo, en vista de que no podía hacer nada, pasaba horas y horas preguntándome que hacer. Estaba en la universidad, pensaba en aquello, hacía deportes, pensaba en aquello, comiendo, pensaba en aquello y cuando se me mete algo en la cabeza, hasta no resolverlo, la mente no me deja de dar vueltas, espero que a ustedes les pase lo mismo, pues es el camino al éxito. Al momento en el que los usuarios ingresen a tu portal, notaran el cambio al comparar con otros portales que quizás no se adapten a las resoluciones, se sentirán satisfechos se saber que los tomas en cuenta, ademas; de que tengas conocimientos de que existe un mundo "multigadget" fuera de tu computador.

Publicado por
Leer completo

02 junio 2010

Mostrar un pequeño anuncio desplazable en el blog

  Author : Unknown     No hay comentarios
8:40

El truco tiene como función colocar cualquier mensaje que quieras dejar a los usuarios de tu blog, es muy útil, ya que es inevitable que lo vea, ya que al mover la barra de scroll del navegador, este seguirá en el top del blog, con efecto desplazamiento de arriba a abajo. Ademas, si el usuario desea puede cerrar el mensaje, haciendo clic en el botón rojo.


Les cuento, este truco ya lo había visto muchísimo tiempo en algunas paginas y blog, pero pues, nunca me interese en saber como lo hacían, hasta el día de hoy, que me pareció una información útil para los usuarios bloggeros, ya que le agregas un poco de interacción al blog y muchas mas vistosidad. Si no me equivoco, aquí mismo, en esta pagina (La pagina individual de la entrada) puedes ver una demostración de lo que es el truco, pero de todas maneras, si no la ves, puedes ver una demostracion en este blog de pruebas.

Pasos


[1] Estilos CSS

Agrega el siguiente codigo CSS justo encima del ]]></b:skin>

#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
[2] Los codigos JavaScript (.js)

Publicado por
Leer completo

19 abril 2010

Añadir un recuadro de suscripcion al final de cada entrada

  Author : Unknown     6 comentarios
3:01

Un enlace de suscripcion en un blog, nunca esta demas, como lo dije ya antes en una anterior entrada, hoy te lo vuelvo a decir aqui. Hace mucho, observe en los grandes blogs, que casi todos tienen un enlace de suscripcion encerrado en un recuadro al final de cada entrada.

Jamas me pregunte como lo hicieron, me puse a trabajar en ellos hasta que logre hacer uno, que me quedo muy bonito, diria que mucho mejor a los que pude observar. Te mostrare como personalizar el codigo para que combine con los estilo de tu blog, este artilugio ira añadido al final de cada entrada es la pagina indivudual de cada una de ellas, si quieren ver una demostracion, pues ve a la pagina individual de esta entrada, y mirala.

[1] Los estilos CSS

#notas{
border: 1px dashed #33CC33;
padding: 15px;
text-align:center;
font-size:12px;
font-family: Comic Sans MS, Verdana;
}

.suscripcion {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimfQmgHJ-UUKKyTN5irTUyY1JNVMWdHZ-IBrtpdc2-DkGAQxs8gr1sMEnFtFmcc_eTsRiZ6VeXdQsNsu25kbusTCCEmCQ_pH3lf7cPQ87yCcODfQ4YwWLGajO_Luvs2cBhAZRduvtoTzQ/s1600/1271301025_rss.png) no-repeat center left;height:30px;
padding-left: 32px;
font-size:16px;
text-align:left;
}

Para entender el codigo


En Rojo: Es el grosor del borde.
En violeta: Es el color del borde.
En verde: Son las alineaciones de los textos (Center [Centrado], left [a la izquierda], right [a la derecha])
En Naranja: Es la fuente de la letra. Asegurate que si la cambiaras por una letra no determinada por Blogger, que el usuario posea esa letra en la memoria de su computador, de otra manera, no la reconocerá.
En Aquamarine: Es la imagen. Puedes sustituirla por la que tu quieras, como medida 32 x 32.

[2] El codigo HTML.

Publicado por
Leer completo

18 marzo 2010

Colocar opacidad a tus imágenes con CSS

  Author : Unknown     No hay comentarios
11:56

El efecto opacidad es uno de los efectos mas importante y populares que se pueden usar en los blog, por que es mucho mejor usar una imagen con link que al pasar el puntero sobre ella de un poco de luz que tener una simple imagen que no atrae a nada con ningun efecto en tu blog. Aqui te dejo estas muestras para que sepas de que te hablo.



Lo mejor de todo, es que no utilizaras ningún Script para realizar este efecto, solo basta con agregar algún estilo CSS en tu blog, y un pequeño fragmento de código que deberás colocar al empezar a realizar los enlaces con las imágenes. Te muestro que hacer.


[1] En el código HTML de tu blog, busca la etiqueta </head> y pega el siguiente código justo antes de lo que acabas de buscar.

Publicado por
Leer completo

11 marzo 2010

Diseñador de plantillas en Blogger in Draft

  Author : Unknown     1 comentario
19:36

Hoy visitando Blogger in Draft, me tope con una herramienta muy preciada para nosotros los webmasters, por que nos gusta que nuestra plantilla luzca bien a la vista de nuestros lectores, yo se que a ti como a mi te gustara, y es el que quiero presentarte el diseñador de plantillas propios de Blogger in Draft, no se cuanto tiempo ya tendrá funcionando en la pagina en borrador de esta plataforma, tal vez algún día la incluyan al blogger.com... Lo cierto es que, Blogger ha venido dando mejoras muy elegantes y buenas que si atienden a la necesidad y al gusto de los que usan esta plataforma para darle vida a sus weblogs.

Ojalá sigan así, llenándose de puras herramientas necesarias, y que algún dia por aquellos habrías pensado en eso, y de seguro que fue así, ya que yo también lo pensé alguna vez, y hoy lo veo hecho una realidad. Es hora de comenzar a explicar el tutorial.

[1] Entra en Blogger in Draft, haz clic en la pestaña Diseño y veras una imagen como la de al lado, harás clic en la parte onde dice diseñador de plantillas, tal y como lo muestra el recuadro rojo que encierra el link en la imagen.

[2] Lo primero que te mostrara al abrir el link, será la sección de plantillas, en la cual deberás elegir la plantillas que desearas modificar, te ofrece cuatro modelos principales, dividas a su vez en modelos secundarios para cada una de las cuatros plantillas, ya sea cambiando su color, textura, fondo, fuente, entre otras.

Publicado por
Leer completo
Suscribirse a: Entradas ( Atom )