Cajas para texto y codigos

Hay algunas ocaciones que necesitas publicar algún código en una entrada y resulta que no se muestra en ella por que el navegador lo manipula.
Cajas para texto y codigos
La etiqueta <textarea> te puede ser útil de verdad, ya que evita que los navegadores manipulen o modifiquen un código.

También te ayudara a controlar un texto largo, claro si quieres que no abarque gran parte de la entrada.
A continuación te presento los ejemplos de cajas:
Esta es una caja simple:

<textarea>
Texto o código 
</textarea>



Ahora a esta se le añaden las propiedades "rows"(alto) y "cols"(ancho), sólo tendrás que variar las cifras de ambos parámetros.


<textarea rows="5" cols="18">
Texto o código a mostrar dentro de la caja
</textarea>

Como checaste en el ejemplo anterior, las propiedades "rows"(alto) y "cols"(ancho) generan barras de desplazamiento, si embargo, si te decidieras por quitárselas, lo puedes hacer con la propiedad overflow(sin barras):


<textarea cols='68' rows='4' style='overflow: auto;'>
Caja para código sin barras
</textarea>



También si quieres que se seleccione el texto al colocar el puntero encima de la caja, se puede hacer con la propiedad onMouseOver:


<textarea rows="2" cols="5" onMouseOver="this.focus()" onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()">
Si colocas el puntero encima del recuadro, se seleccionara el contenido ya sea código o texto.
</textarea>

Sin embargo, hay otra forma diferente de seleccionar el contenido, y es por medio de un botón hecho con Java script como se muestra en el ejemplo:


<form name="select_all">
<textarea rows="5" cols="18" name="text_area">
Texto o código a seleccionar
</textarea>
<input value="Seleccionar texto" onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button"/></form>



Ahora si quisieras cambiarle el color blanco(por defecto) por otro color de fondo o por una imagen, también lo podrás hacer:
Esta caja, es con color de fondo:

Código:
<textarea rows="5" cols="18" style="background: #009000; color: #000000; font-weight: bold; font-family: Castellar; font-size: 10pt;">
Texto o código con color de fondo
</textarea>

Y esta, con una imagen:

Pero si observas el ejemplo de la imagen, aparte de la imagen también se le podrá cambiar el color del código, así como el tipo de letra y el tamaño.
Código:
<textarea rows="5" cols="18" style="background-image: url(Url-de-tu-imagen); color: #FFAA00; font-family: Stencil; font-size: 10pt;">
Texto o código con imagen de fondo
</textarea>



Por ultimo, otra caja útil que quise incluir en esta entrada, es una con menús pero hecha con la etiqueta <select>:

Así como en los ejemplos anteriores, lo puedes personalizar al gusto que desees.
<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" style="background-color: #FFFFFF; font-family: stencil; color: #000000; font-size: 15pt; width: 150px;" name="SiteMap" size="4">
<option selected />Titulo
<option value="Url-de-tu-blog"/>Link 1
<option value="Url-de-tu-blog"/>Link 2
<option value="Url-de-tu-blog"/>Link 3
<option value="Url-de-tu-blog"/>Link 4
<option value="Url-de-tu-blog"/>Link 5
<option value="Url-de-tu-blog"/>Link 6
</select>

Ha por cierto, size="4" es la altura de la caja del menú.
Espero y te sean de gran utilidad.

p1

Cuadros de busqueda de google personalizados

De vez en cuando no conformes con el buscador de google que nos ofrece blogger, preferimos colocar un buscador de google personalizado como los ejemplos siguientes:

Este primer buscador es sencillamente básico:


<form method="get" action="http://blogsearch.google.com/blogsearch">
<input type="text" name="as_q" size="26" style="background-color: #F0F0F0; color: #000000; border:2px solid #CFCFCF; font-family:Arial;"/>
<input type="hidden" name="bl_url" value="http://blog2000.blogspot.com/" />
<input type="submit" value="Buscar" style="background-color: #F0F0F0; color: #000000; border:2px solid #CFCFCF; font-family:Arial;"/>
</form>

Si deseas le puedes colocar dentro del botón un icono de fondo, solo reemplaza lo que esta en rojo por esto:
background-image: url(Url-de-tu-icono);
Así quedaría:

Recuerda cambiarle la dirección de mi blog por el tuyo.



Este es igual que el anterior, la diferencia es el texto en el recuadro:


<form method="get" action="http://blogsearch.google.com/blogsearch">
<input type="text" name="as_q" value="Escribe tu consulta..." onfocus="if(this.value=='Escribe tu consulta...')this.value=''" size="26" style="background-color: #F0F0F0; color: #000000; border:2px solid #CFCFCF; font-family:Arial;"/>
<input type="hidden" name="bl_url" value="http://blog2000.blogspot.com/" />
<input type="submit" value="Buscar" style="background-color: #F0F0F0; color: #000000; border:2px solid #CFCFCF; font-family:Arial;"/>
</form>



Ahora este buscador cuenta con color de fondo y bordes alrededor:


Blog 2000





<table bordercolordark="#CFCFCF" bordercolorlight="#CFCFCF" border="1"><th bgcolor="#FFFFFF">
<font face="Arial" size="3" color="#000000">Blog 2000</font>
<hr>
<form method="get" action="http://blogsearch.google.com/blogsearch">
<input type="text" name="as_q" value="Escribe tu consulta..." onfocus="if(this.value=='Escribe tu consulta...')this.value=''" size="26" style="background-color: #F0F0F0; color: #000000; border:2px solid #CFCFCF; font-family:Arial;"/><input type="hidden" name="bl_url" value="http://blog2000.blogspot.com/" /><input type="submit" value="Buscar" style="background-color: #F0F0F0; color: #000000; border:2px solid #CFCFCF;font-family:Arial;"/>
</form>
</th></table>

Los anteriores buscadores de ejemplo, solo buscan las entradas de tu blog, pero tambien puedes buscar en:
Google:
http://www.google.com/custom
o
http://www.google.com/search

Solo cambia: http://blogsearch.google.com/blogsearch por una de las dos opciones anteriores.



Y por ultimo te dejo este buscador que tiene todo incluido solo que ahora cuenta con dos opciones para buscar en google o en tu blog:










En googleEn el blog


<table bordercolordark="#CFCFCF" bordercolorlight="#CFCFCF" border="1"><th bgcolor="#FFFFFF">
<form method=get action="http://www.google.com/search">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYSvkIanCNxnHtDz27o1B5nHE9S5YC9bR5MSzDyMhUKpVg1Xc-H8GWdV6H3oL2O5RRW2RvUZol4sDg1FlvYZgo5NWjPLjaF2WpWkkgRbQMkOCxpJnYWYqphKsGnf7h8pMHQGLqxGo_A/s400/Google+logo.gif" align="absmiddle"/>
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<input type=text name=q value="Escribe tu consulta..." onfocus="if(this.value=='Escribe tu consulta...')this.value=''" size=26 maxlength=255 value="" style="background-color: #F0F0F0; color: #000000; border:2px solid #CFCFCF; font-family:Arial;"><input type=submit name=btnG value="Buscar" style="background-color: #F0F0F0; color: #000000; border:2px solid #CFCFCF; font-family:Arial;">
<font face="Arial" size="2" color="#000000">
<input type=hidden name=domains value="http://blog2000.blogspot.com/"><br><input type=radio name=sitesearch value="">En google<input type=radio name=sitesearch value="http://blog2000.blogspot.com/" checked>En el blog<br></form>
</font>
</th></table>

p1

Menus elegantes con jQuery

Apycon, es un sitio que te ofrece una galería fantástica de 84 menús de diferentes estilos hechos con jQuery.

Para descargar, solo selecciona alguno de ellos:
Menus elegantes con jQuery

Eliges el tipo del color del menú, lo descargas y listo:


Una vez descargado, extrae el contenido del zip claro! si deseas instalarlo, y aloja las partes de las imágenes que conforman al menú y las colocas(url) en sus respectivos lugares del archivo CSS:
menú.css

Ya que tienes listo el archivo, junto con los otros dos vas al video tutorial de Ciudad blogger para que te explique como alojarlos en Dropbox:
menú.jsjquery.js

Una vez alojados, coloca las direcciones(url) en sus respectivos lugares del siguiente código:
<link type="text/css" href="menu.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>

Ahora vas a tu plantilla e insertas el código anterior antes de la etiqueta </head>.

Y por ultimo, solo incluye el siguiente código como elemento HTML/Javascript o si deseas, lo puedes colocar dentro de la misma plantilla:
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.1.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
<li><a href="#"><span>Sub Item 1.3</span></a></li>
<li><a href="#"><span>Sub Item 1.4</span></a></li>
<li><a href="#"><span>Sub Item 1.5</span></a></li>
<li><a href="#"><span>Sub Item 1.6</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.7.1</span></a></li>
<li><a href="#"><span>Sub Item 1.7.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 2</span></a></li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>ProductInfo</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 1</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1.1</span></a></li>
<li><a href="#"><span>Sub Item 1.2</span></a></li>
</ul></div>
</li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 2.1</span></a></li>
<li><a href="#"><span>Sub Item 2.2</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul></div>
</li>
<li><a href="#"><span>Help</span></a></li>
<li class="last"><a href="#"><span>Contacts</span></a></li>
</ul>
</div>

Le escribes tus propios títulos, subtítulos y direcciones. También le podrás agregar o quitar partes del menú, dependiendo de la estructura que tu elijas.
Recuerda que este es un ejemplo en general que conforman los menús de Apycon.

p1

Fotos del espacio exterior

El telescopio Hubble ha pasado toda su vida en el espacio tomando fotografías impresionantes de estrellas, planetas y cosmos que de seguro todavía no ha explorado el ser humano ya que hay tantas cosas enormes en el universo que te dejan sin palabras.

Son 16 fotografías para que las coloques como fondos de escritorio:

1280x960px
Fotos del espacio exterior


1280x960px



1280x1232px



1280x1280px



1280x1178px



1280x1280px



1280x1280px



1280x1258px



1280x1249px



1280x1057px



1280x981px



1280x821px



1280x1250px



1280x1000px



1280x1298px



1280x1492px



Visita el sitio Space telescope, donde encontraras muchas fotos mas.

p1

Convertir sitios web en PDF

Convertir sitios web en PDFLos documentos PDF son sin duda los documentos estándar para compartir presentaciones y que hacen posible la inserción de imágenes y todo tipo de gráficos de manera rápida y sencilla.
Por eso hoy te presento PDF my URL, una aplicación en línea con la cual podrás convertir cualquier sitio web/blog en un documento PDF de alta calidad.

Solo introduce la Url de tu blog:

Das clic en:
Y en pocos segundos obtendrás el archivo PDF con todo el contenido del blog.

Pero también te proporciona dos códigos para tu blog, uno para poder descargar nuestro blog en PDF y el otro para descargar nuestro blog en una imagen PNG:
Te dejo los dos ejemplos:
Descargar blog en PDF
<a href="http://pdfmyurl.com?url=Url-de-tu-blog">Descargar blog en PDF</a>

Descargar blog en imagen PNG
<a href="http://pdfmyurl.com?url=Url-de-tu-blog&--png">Descargar blog en imagen PNG</a>

Espero y te sea de utilidad.

p1

Trucos youtube

Youtube es conocido por todos nosotros y la mayoría sabemos buscar videos, verlos, copiar sus códigos y editarlos, pero lo que tal vez no sepan o tal vez si es que existen una serie de trucos que debemos conocer para usarlos en determinadas ocasiones.

Trucos youtube

Por ejemplo ver un video desde un tiempo determinado: En algunos videos la acción comienza en segundos o en minutos, para que el video se reproduzca desde un tiempo fijo o determinado debes colocar el parámetro #t=XXmYYs(donde XX son los minutos y YY los segundos).
Ejemplo:
http://www.youtube.com/watch?v=rIpD7hfffQo#t=1m30s


Ver un video insertado en el blog desde un punto fijo: Este truco funciona parecido al anterior, solo que es reproducido en un segundo determinado, simplemente debemos agregar al final de la Url el parámetro &start=XX donde XX es la cantidad de segundos desde el comienzo).

Ejemplo:
<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/rIpD7hfffQo?version=3&start=30"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/rIpD7hfffQo?version=3&start=30" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object>



Reproducir automáticamente un video insertado en el blog: Los videos insertados por lo general se encuentran en stop, esperando que le demos play para reproducirlo, sin embargo hay una forma de reproducirlos después de ser cargados y es colocando el parámetro &autoplay=1.

Ejemplo:
<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/rIpD7hfffQo?version=3&autoplay=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/rIpD7hfffQo?version=3&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object>



Ocultar el titulo de un video insertado: Por lo regular los videos youtube insertados muestran sus títulos, para quitárselos y darle una personalización mejor, hay que añadir el parámetro &showinfo=0.

Ejemplo:
<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/rIpD7hfffQo?version=3&showinfo=0"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/rIpD7hfffQo?version=3&showinfo=0" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></object>



Ver un video en pantalla completa: Ahora si desearas ver los videos en una pantalla completa lo puedes llevar a cabo colocando v/ en lugar de watch?v=

Ejemplo:
Esto: http://www.youtube.com/watch?v=rIpD7hfffQo

Por esto: http://www.youtube.com/v/rIpD7hfffQo

Bueno eso seria todo, espero y te sirvan estos trucos en alguna ocasión..Nos veremos en la próxima entrada.

p1

Veinte ejemplos de arte fractal animal

Las obras de arte fractal son imágenes espectaculares y alucinantes en todos los sentidos. Por eso me di a la tarea de recolectar una galería de estas imágenes, en este caso de animales.
Espero que las disfruten.

Por Ricdiggle
1095x957px
Veinte ejemplos de arte fractal animal


Por Vonshnaps
864x1024px



Por Sefora
768x1024px



Por Blaberize
650x406px


650x406px



Por Sareni
1024x769px


1014x1024px



Por Martinca
488x640px


553x640px


640x519px



Por Steve aka Crispin Swan
1024x991px


1024x930px


1024x960px


1024x941px



Por Beverly & Pack

1024x801px


766x1024px


1024x768px


1024x801px


1024x768px


822x1024px

p1

Descargar audio y videos de servicios distintos en formatos distintos

Descargar audio y videos de servicios distintos en formatos distintosClipconverter es una de las pocas aplicaciones gratis y en línea que te brindan la facilidad de descargar audio y videos de servicios como: YouTube HQ(Alta Calidad) y HD(Alta Definición), Google Video, Sevenload, MySpace, Dailymotion HQ(Alta Definición), Vimeo HQ(Alta Definición), Metacafe, MyVideo, YouPorn, Pornhub y Veoh.

Los formatos en que los puedes descargar son: MP3(audio), WMA(audio), M4A(audio), OGG(audio), MP4(para iTunez, iPhone, iPod), 3GP(para teléfono móvil), AVI(audio), MPG(video), WMV(video) y FLV(video). También te permite ver tus videos favoritos de YouTube en tu teléfono móvil, PSP, iPhone o casi cualquier otro dispositivo.

Para descargar audio o un video, solo introduce la Url de la dirección del video:

Ejemplo:
YouTube: http://www.youtube.com/watch?v=rIpD7hfffQo
Dailymotion: http://www.dailymotion.com/video/xetunr_twitter-discover-what-s-new-in-your_tech
Vimeo: http://vimeo.com/14973040
O cualquier dirección de video del servicio que desees.

Ahora haz clic en continuar y selecciona el formato al que quieras convertir:

Mp3(audio), 3GP(para teléfono móvil), MPG(video), FLV(video), etc.

Después elige alguna de las siguientes opciones ya sea la opción del volumen de audio(estéreo o mono), tasa de bits de audio, tasa de bits de video, se te hará fácil elegir la opción que quieras ya que esta todo en español:


Actualmente esta aplicación se encuentra disponible en 21 idiomas:

Ingles, Alemán, Francés, Español, Italiano, Holandés, Turco, Polaco, Griego, Portugués, Croata, Albanes, Serbio, Búlgaro, Rumano, Húngaro, Noruego, Pérsico, Japonés, Vietnamita y Checo.

Espero y te sea de gran utilidad.

Actualización

También en este mismo servicio te es permitido convertir y descargar los vídeos pero ahora con la opción de:

Instalar su complemento

Para que los puedas descargar directamente desde cada vídeo de youtube.


Como muestra la imagen el complemento solo lo podrás instalar en navegadores como Firefox, Chrome, Sarari y Opera...Saludos!

p1
                                                                                                                                                                                                                                                                                                                                                       
Ciudad Blogger

Hola, Bienvenido a Blog 2000!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Blog 2000 Blog 2000 Blog 2000 Blog 2000

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Blog 2000