Notis

Síguenos en Twitter: @teoria_blogger | Para tu blog, recomendamos: que el diseño no esté cargado, que las entradas no sean muy largas y que contengan imágenes. Para más consejos Click aquí | Pon un link de Teoría Blogger en tu blog!!! Click aquí. | Para cualquier duda o problema sobre tu blog, escríbenos en nuestro formulario de contacto.
Mostrando entradas con la etiqueta Webs útiles. Mostrar todas las entradas
Mostrando entradas con la etiqueta Webs útiles. Mostrar todas las entradas

domingo, 2 de junio de 2013

Crear degradados, pero... ¿sin imágenes?

Los degradados en internet, ya son invisibles. Pero no porque no estén, todo lo contrario. Son invisibles porque ya estamos demasiado acostumbrados a ellos y no podemos detenernos a pensar en que un fondo tiene un degradado, por ejemplo.
Pero nosotros somos parte de los que hacemos la web, por lo que este tema sí nos debe interesar y no nos tiene que parecer invisible.
Antes
Para crear un degradado, teníamos que abrir en nuestro ordenador un programa de creación de imágenes (como el Photoshop) y crear el degradado en formato de imagen (png, jpg, gif). Lo cual nos costaba, además de trabajo, un poco de tiempo.
Hoy
Existen muchas aplicaciones y páginas que nos ayudan a crear el degradado sólo copiando y pegando un código de CSS3 y son muy fáciles de usar!
Antes de empezar a explicar, quiero que vean el resultado de lo que les proponemos en este post haciendo click en el enlace que los lleva al final del post. Click aquí para ver los degradés.
Crear degradados con CSS3 ¿Qué es CSS3?
CSS3 es la última versión de CSS (Un lenguaje para establecer estilos a las páginas HTML).
¿Cúal es la diferencia entre la última y la anterior versión?
Es una pregunta amplia, es decir, se le puede dedicar todo un post acerca de esto. Pero en rasgos generales, CSS3 nos permite hacer muchos más cambios en cuanto al estilo propio de una web, como por ejemplo las fuentes, los colores transparentados, los bordes, entre otros. Pero lo que hay que remarcar es que CSS3 nos permite tener un gran resultado en cuanto a efectos visuales sin necesidad de crear imágenes. El ejemplo de esto es justamente, el degradado.

Crear degradados sin imágenes

Empezamos por decir que lo siguiente puede llegar a ser muy fácil o muy difícil, depende del conocimiento que tengan acerca de CSS (sin discriminar versión), de cualquier forma pueden ver este post que puede servirles de ayuda si ponen atención y se concentran.
Dicho esto:
  1. Vamos al siguiente link: Ultimate CSS Gradient Generator - ColorZilla.com
  2. En la pantalla vemos un cuadro con degradés defaults, estos son creados por los de ColorZilla, podemos elegir uno si queremos.
  3. Pero también puedes crear tus propios degradés para que se adapte a tu necesidad. Es muy fácil, basta con saber qué colores hay que usar en la barra de la siguiente imagen. También podés elegir la opacidad de los colores y hacer un degradé con eso:
  4. Bueno, una vez elegido el degradé, vamos a los códigos. A la derecha de la pantalla aparece un textarea en el que aparece el código CSS del degradé. Vamos a copiar y pegar este código y lo pones en un selector en código CSS. Por ejemplo:
    .EjemploDeSelector{
    background: #f6f8f9; /* Old browsers */
    background: -moz-linear-gradient(top,  #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
    }

Preguntas

¿Cuáles son las ventajas de no usar una imagen?
Las ventajas son que no tienes que crear una imagen por tu cueta, lo cual ahorra tiempo y además pesa mucho menos que poner una imagen.
¿Qué uso se le da a esto, es decir, para qué tipo de cosas serviría en una web?
La respuesta es: sólo se usa para fondos. Pueden ser para cualquier objeto en tu web que posea fondo (header, main, sidebar, footer, inclusive body).
¿Funciona para todos los navegadores?
Sí, para los más usados con sus últimas versiones sí (como por ejemplo: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, NetScape, Safari).
¿Se puede usar este degradé para letras y links?
No, es sólo para fondos.

Ejemplos 

Con esta aplicación se pueden crear "cajas" con fondos como estos:
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

sábado, 31 de diciembre de 2011

Las mejores plantillas de juegos

Concurrimos, una vez más, a Btemplates para buscar las mejores plantillas para blogs que se traten de juegos.
Plantillas de juegos para Bloggerhttp://btemplates.com/2011/blogger-template-blackgames/
http://btemplates.com/2011/blogger-template-gameszone/
http://btemplates.com/2011/blogger-template-playgames/
http://btemplates.com/2011/blogger-template-planetgames/
http://btemplates.com/2011/blogger-template-arcadegames/
http://btemplates.com/2011/blogger-template-racinggames/
http://btemplates.com/2011/blogger-template-actiongames/
http://btemplates.com/2011/blogger-template-mini-game/
http://btemplates.com/2011/blogger-template-game-strike/
http://btemplates.com/2011/blogger-template-super-mario/
http://btemplates.com/2011/blogger-template-suvgames/
http://btemplates.com/2011/blogger-template-gameworld/
http://btemplates.com/2011/blogger-template-gamehub/
http://btemplates.com/2011/blogger-template-ivideogames/
http://btemplates.com/2010/blogger-template-game-board/
http://btemplates.com/2010/blogger-template-new-games/
http://btemplates.com/2010/blogger-template-astronova/
http://btemplates.com/2010/blogger-template-gamester/
http://btemplates.com/2010/blogger-template-smart-game/
http://btemplates.com/2010/blogger-template-stargaze/
http://btemplates.com/2010/blogger-template-game-zone/
http://btemplates.com/2010/blogger-template-game-port/
http://btemplates.com/2010/blogger-template-provogue/
http://btemplates.com/2010/blogger-template-dangerous-games/
http://btemplates.com/2010/blogger-template-game-vision/
http://btemplates.com/2010/blogger-template-gamepro/
http://btemplates.com/2010/blogger-template-universe-wow/
http://btemplates.com/2010/blogger-template-guild-wars/
http://btemplates.com/2010/blogger-template-super-mario-land/
http://btemplates.com/2010/blogger-template-games-place/
http://btemplates.com/2010/blogger-template-marioland/
http://btemplates.com/2010/blogger-template-gamerpress/
http://btemplates.com/2009/blogger-template-gamezine/
http://btemplates.com/2009/blogger-template-mass-effect/
http://btemplates.com/2010/blogger-template-grunge-poker/

Para usar una plantilla en tu blog

Una vez que hayamos elegido la plantilla que nos gustó, vamos a descargarlo haciendo click en el botón "Download" y guardaremos un archivo que nos descargará como archivo .zip.Hacer click en Download para descargar el archivo .zipArchivo en formato Zip

Vamos a la carpeta Descargas (o carpeta que contiene el archivo .zip) y hacemos click derecho en ese archivo, y click en "Extraer aquí" (o "Extract Here")
Extraer archivos para el archivo XML
para descomprimir el archivo de formato XML, el archivo que subiremos a Blogger (esto es probable que aparezca dentro de una carpeta con el mismo nombre de la plantilla)

Vamos a Blogger → Plantilla → Botón, Edición de HTML [En la vieja interfaz, Diseño → Edición de HTML], hacemos click en y seleccionamos el archivo XML de la carpeta, que se puede ver en la imagen anterior. Hacemos click en http://www.blogger.com/img/blank.gif
Subir archivo XML a Blogger
Nota:
Para descomprimir el archivo .zip, es decir, hacer click derecho y "extraer aquí", debes tener instalado en tu ordenador un programa para descomprimir archivos o descomprensor. Puedes descargar Win rar o programas similares. No son muy pesados.
Para más info, click aquí: http://www.softonic.com/s/descompresor
Video explicativo
Ver video en Teoría Blogger videos | Ir a Teoría Blogger videos

domingo, 11 de septiembre de 2011

Encuestas muy interesantes para tu blog

Seguramente la mayoría de los blogueros de Blogger, han puesto una encuesta en su blog con el gadget que nos ofrece Blogger. Si bien es una opción, existe una página que no sólo crea las encuestas, sino que también nos da la oportunidad de modificarlas y personalizarlas.
Encuestas en Blogger
Esta es la opción que nos ofrece Blogger
para insertar una encuesta en el diseño del blog

99polls es una página que nos permite crear encuestas flash. Dichas encuestas de dicha página, son simples, ya que cuentan con lo escencial: La pregunta, las opciones, un botón para votar y un botón de resultado.
También nos permite modificar sus colores (ya sean los de las letras, de las preguntas, de los bordes).
Una de las características, respecto de su función, es que sólo nos permite votar una sola vez. De ninguna manera se puede votar dos veces (salvo que tengamos dos ordenadores).

Crear encuestas gratis y eficientes1- Vamos a 99polls.com
2- Damos clic a Registrarse
registrarse en 99polls.com
4- Llenamos el simple formulario y damos clic en donde dice "Para hacer su primera encuesta Hacer clic acá" (como se ve en la siguiente imagen).Crear nuestra primer encuesta
5- Ahora vamos a elegir las funciones de la encuesta:
a) Allí elegimos el diseño (Tema) de la encuesta, entre la gran variedad que se nos presenta.
b) El ancho de la encuesta (recuerda que los números son en píxeles).
c) El color del fondo con código hex. O también puedes cambiarlo con la paleta que nos ofrece.
d) La pregunta la cual vamos a interrogar a los lectores
f) Las respuestas que nos van a dar los lectores (hay un límite de hasta 9 respuestas). Además nos da la opción que asignarle una imagen para cada encuesta.
g) Luego nos da la opción de elegir si queremos que nuestra encuesta aparezca en el listado de encuesta de 99polls.com o no.
h) Aquí van una especie de etiquetas o tags que se ponen para que sea más facil la búsqueda de tu encuesta.
Personalizar tu encuesta
6- Una vez hecho todo, hacemos clic en el botón guardar y luego nos aparecerá la página en la que nos aparece el código para insertar lo en el sidebar o en un post.
Lo copiamos y lo pegamos en donde quieras (los sectores ya nombrados).
Copiar el código de la encuesta y pegarla en un post o el sidebar
7- Para insertarlo en tu blog debemos ir a Blogger y debemos elegir entre publicarlo en una entrada o en un gadget.
Si es en una entrada vamos a Creación de entradas → Nueva entrada → Y lo pegamos en el editor de entradas. Luego lo publicamos.
En cambio, si es en un gadget, vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget de tipo HTML/Javascript y lo pegamos allí. Luego lo guardamos.

Crear un diseño para tu encuesta

Cuando creamos la encuesta, en el paso 5- a, elegimos el tema para la encuesta. Las opciones son variadas, pero puede pasar que no estemos satisfechos con algún diseño y queremos que tenga los colores que nosotros queramos.
Para eso vamos a la solapa "Mis Temas" que aparece en la siguiente imagen:
Mis temas
Una vez que entramos en la solapa Mis Temas, hacemos clic en donde dice "Para hacer su primer tema Hacer clic acá".
Crear el primer tema
Allí tenemos todas las opciones para modificar o crear tu tema para tu encuesta.

Consejo
Puedes crear un tema que tenga los colores de tu blog para que tenga la misma temática de éste.

sábado, 5 de febrero de 2011

lunes, 4 de octubre de 2010

Incluir tu blog a Google y Yahoo

Si quieres que tu blog aparezca en los buscadores más visitados de la red, mira el siguiente recuadro que te indica cómo agregar tu blog a los buscadores como Google, Yahoo y Bing (de MSN).
URLs para añadir tu blog a los buscadoresAñade tu blog a Google: http://www.google.com.ar/addurl/?continue=/addurl
Añade tu blog a Yahoo (necesitas estar registrado): http://siteexplorer.search.yahoo.com/ar/free/request
Añadir tu blog a uno de estos buscadores es un proceso largo que puede durar semanas o incluso meses. Ni siquiera se garantiza si tu blog será añadido.

domingo, 5 de septiembre de 2010

Cómo bajar música mp3

Hemos conseguido la manera segura garantizada de bajar archivos mp3. Para bajar estos archivos, necesitamos dos páginas: Goear.com y downmusic.org. Estas dos páginas las vamos a tener abiertas, ya que nos sirve para llevar a cabo el tutorial.
Descargar música mp3
  1. En la página Goear, buscamos un tema que te guste y hacemos click en el título del tema para ingresar a la página del mismo:
    Elegimos un título
  2. Escuchamos el tema que nos ofrece el reproductor para ver si es el que queremos.
    Reproducimos el tema para comprobar que es el que queremos.
  3. Si lo es, copiamos la url de la página en la que estás.
    Copiamos la URL de la página del tema a bajar.
  4. Ahora nos dirigimos a la otra pestaña o ventana: a Downmusic.org. Y pegamos la URL en el campo de texto.
    Pegamos la URL en downmusic.org
  5. Presionas el botón Descargar canción y esperas a que se descargue la música.
  6. Cuando termine puedes disfrutar de escucharla con seguridad.
Aquí un video tutorial para tener imágenes detenidas:

viernes, 30 de julio de 2010

Las últimas 30 mejores plantillas de Btemplates.com (por T.B.)

Btemplates - Todas las plantillas Blogger en un solo sitio
En este post nos vamos a dedicar a mostrarles algo un poco personal de nosotros. Mostramos las últimas 30 mejores plantillas que publicó Btemplates.com (la mejor fuente de plantillas, para nosotros). Elegimos con un criterio en particular: elegir plantillas que no tengan imágenes llamativas como por ejemplo un auto una persona, etcétera.
La siguiente lista de enlaces (de las plantillas) destinan a btemplates, para que puedas descargar los que quieras.
  1. Dotted Blue
  2. Guerrilla
  3. Digital Playground
  4. Bubble Blue
  5. Revive Blue
  6. Voidy
  7. Wall Press
  8. Leviathan
  9. Gray Flannel
  10. Tut Theme
  11. WorldWide
  12. Webmaster Ease
  13. Mobile World
  14. Smash
  15. WP-Them.es
  16. Minimal 03
  17. Ikhsan Magazine II
  18. Blue Pearl
  19. Rockwell
  20. Mystique
  21. Rusty Nail
  22. Abelia
  23. Sonica
  24. iTech Blog v2
  25. Blue Station
  26. Brillyant
  27. Blue Simplicity
  28. Belinda
  29. Brandnew Folio
  30. Liliya

miércoles, 14 de julio de 2010

¿Cuánto crees que vale tu blog?

Si ya no quieres más tener tu blog y no quieres eliminarlo, ¡Véndelo! y averigua el precio que tiene para poder venderselo a un amigo o en internet. Pero si tu blog tiene muchas entradas, tiene unos años y varios comentarios, más vale que el interesado tenga dinero.
Promocionalo añadiendo el valor en un gadget de tu blog.
Averigua el precio de tu blogAhora escribiendo seriamente, el valor de tu blog se puede saber mediante una página que se especializa en eso y puedes insertarlo como un elemento en tu blog ya con el precio incorporado.
La página es http://directory.sootle.com/website-worth/ sólo debes insertar la URL del blog y hacer click en el botón .
Una vez que hayas chequeado el precio, copia el código que muestra y pégalo en un elemento de la página [Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript].
El Ejemplo:
Esta web vale: