En esta entrada voy a presentar una solución para conocer cada una de las partes que compone una plantilla.
Header, sidebar, footer son partes que se repiten en casi todas las plantillas, pero muchas veces hay partes que no son tan fáciles de identificar. Lo que propongo hacer es lo siguiente:
Tomar una hoja y anotar 30 o 40 colores en código hexadecimal ayudandose con un programa como Photoshop o Dreamweaver y darle un nombre a cada color. Asi por ejemplo: #AE3DD2 Verde Oscuro. Un consejo que se tomen colores diversos y bien diferenciables uno de otro ya que esto nos será de provecho en el siguiente paso.
Luego de preparada la lista vamos a la plantilla de nuestro blog y primero que nada la descargamos (esto es obligatorio) porque le haremos algunas modificaciones.
Cuando ya este la plantilla descargada lo que hay que hacer es: cada vez que encontremos un color en formato hexadecimal cambiarlo por uno de los de nuestra lista y anotar en ella junto al nombre del color a que se le puso el mismo
Así por ejemplo si en la plantilla aparece esto
cuerpo{ background:#AAAAAA}
yo cambio el color por verde oscuro quedando asi
cuerpo{ background:#AE3DD2}
y luego en mi lista de colores escribo verde oscuro=cuerpo
Una vez terminado el cambio de todo los colores hay que guardar los cambios de la plantilla y visualizarla. Nuestra plantilla tendrá mútliples colores que nos permitirán conocer todas las partes que conforman la plantilla asi como el nombre de cada una de ellas.
Después de tener una idea clara de la misma (sería bueno hacer un boceto) cargamos la plantilla descargada para que todo vuelva a como estaba antes
Si te gustó también te invito a leer:
¿Cómo colocar una imagen de cabecera en un blog?
¿Cómo cambiar la plantilla del blog?
jueves, 26 de noviembre de 2009
miércoles, 25 de noviembre de 2009
Redimensionar de forma manual los videos de youtube
Es un recurso muy común publicar videos de youtube sin embargo muchas veces las dimensiones que tiene el objeto video no son las que sirven cuando lo publicamos en un blog o una página
Puede ocurrir que el video se escape de la zona de publicación por ejemplo.
Para solucionarlo alcanza con editar el código del objeto, reudiciendo o aumentando los pixeles.
Aquí les dejo una demostración
Tomaré un video cualquiera de youtube en este caso elegí el títulado "La historia de Internet en 8 minutos (subtítulos en Español)
Su código para visualizarlos en otra web es:
y el video se ve así
Pero como yo deseo que se vea más pequeño tendré que cambiar el width(ancho) y el height(alto)
Para eso busco los valores width="425" y heigh="344" y los remplazo por el número de pixeles que quiero que tengan. Para mantener la proporción se recomienod que restemos o sumemos el mismo número de pixeles al widh y al height. Para este ejemplo restaré 200 a cada uno.
Asi que el codigo se verá así:
y el video queda de este tamaño
Puede ocurrir que el video se escape de la zona de publicación por ejemplo.
Para solucionarlo alcanza con editar el código del objeto, reudiciendo o aumentando los pixeles.
Aquí les dejo una demostración
Tomaré un video cualquiera de youtube en este caso elegí el títulado "La historia de Internet en 8 minutos (subtítulos en Español)
Su código para visualizarlos en otra web es:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
y el video se ve así
Pero como yo deseo que se vea más pequeño tendré que cambiar el width(ancho) y el height(alto)
Para eso busco los valores width="425" y heigh="344" y los remplazo por el número de pixeles que quiero que tengan. Para mantener la proporción se recomienod que restemos o sumemos el mismo número de pixeles al widh y al height. Para este ejemplo restaré 200 a cada uno.
Asi que el codigo se verá así:
<object width="225" height="144"><param name="movie" value="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YPc3ghd8Kas&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="225" height="144"></embed></object>
y el video queda de este tamaño
Etiquetas:
diseño blogger,
diseño web,
Tutoriales,
videos
Publica cualquier tipo de contenido en tu blog con embedit.in
Entre los archivos se encuentran:
documentos de: word, excel, powerPoint
archivos de texto: txt, rtf, csv
vectores gráficos: api, eps, ps
códigos: html, sql, js
imágenes: gif, jpeg, png, tiff, bmp, psd
también páginas web y url's
Publicar es muy fácil, sigue estos pasos:
1. Ve a la página
2. Da clic en "select Files..."
3. Elige el archivo
4. Copia el código que aparece en el recuadro y pégalo en una entrado en tu blog
También te puede interesar
Agregar Música al blog o página con eSnipsAgregar código javascript o HTML en Blogger
Subir archivos doc o pdf al blog con Scribd
Crear contador de visitas con Histats.com
Etiquetas:
diseño blogger,
Empezar con tu blogger,
servicios online,
Tutoriales
viernes, 20 de noviembre de 2009
¿ Qué es Google Chrome OS?
Aquí dejo un video que encontre en youtube que explica en que consiste Google Chrome OS. Es bueno ir conociendo las novedades que tendrá este sistema operativo que se propone destronar a Windows. Creo que este sistema operativo ya se puede descargar en su versión Beta pero no estoy muy seguro.
A modo de Adelanto.
Nota: El video esta en inglés, es que no lo puede conseguir en Español
A modo de Adelanto.
Nota: El video esta en inglés, es que no lo puede conseguir en Español
jueves, 19 de noviembre de 2009
Las 25 mejores Tutoriales de Photoshop del año 2009
En el blog webdesignledger publicaron un excelente artículo en el cual recopilaron según su criterio las 25 mejore tutoriales del año. Todas estan muy recomendables, tienen la contra que son en inglés, pero son muy intuitivas y con ilustraciones que permiten entenderlas a cualquiera que tenga conocimiento de photoshop
Si querés más
Tutoriales Photoshop
Agrega efectos a tu foto
Adobe Photoshop 8 versión completa
Si querés más
Tutoriales Photoshop
Agrega efectos a tu foto
Adobe Photoshop 8 versión completa
martes, 17 de noviembre de 2009
Diccionarios Informáticos
Si eres nuevo en el mundo de la informática o no dominas todos los términos de dicho mundo y se te hace díficil entenderlo . Te recomiendo el diccionario informático en el cual podrás encontrar el significado de todas las palabras que son moneda corriente en dicha materia.
Otra opción es el diccionario que ofrece la web del programador que cuenta con 2.217 definiciones hasta el momento
Capaz te interese leer también
Manual para crear tu blog desde cero
Otra opción es el diccionario que ofrece la web del programador que cuenta con 2.217 definiciones hasta el momento
Capaz te interese leer también
Manual para crear tu blog desde cero
Conocer la calidad y la velocidad de nuestra conexión a Internet
Hay muchísimas páginas que ofrecen de forma gratuita testear la velocidad de una conexión a internet. Pero una conexión rápida no significa que la conexión sea buena. Para calificarla hay que tomar en cuenta otros factores. Por ejemplo podemos tener un buena velocidad de descargar pero que sea muy inestable, es decir que la velocidad por momentos sea rápida y por momentos baje a una muy lenta.
Páginas que nos permitan conocer estos datos hay menos. Pero navegando por la dichosa red encontre una que permite obtener numerosos datos de la conexión. Así también se encarga de calificar la conexión en una escala que va desde una A (excelente) hasta una F(muy pobre)
Dentro de los datos que nos permite comprobar son el ping :que es el tiempo que demora en conectarse un servidor con un cliente.
También permite saber el jitter :que son esos cambios o saltos de velocidad de un momento a otro
El sitio web es www.pingtest.net . La forma en que presenta los datos es muy recomendable, la página esta en inglés pero todo se puede entender por medio de las ilustraciones
Para conocer la velocidad de subida y bajada www.speedtest.net
Páginas que nos permitan conocer estos datos hay menos. Pero navegando por la dichosa red encontre una que permite obtener numerosos datos de la conexión. Así también se encarga de calificar la conexión en una escala que va desde una A (excelente) hasta una F(muy pobre)
Dentro de los datos que nos permite comprobar son el ping :que es el tiempo que demora en conectarse un servidor con un cliente.
También permite saber el jitter :que son esos cambios o saltos de velocidad de un momento a otro
El sitio web es www.pingtest.net . La forma en que presenta los datos es muy recomendable, la página esta en inglés pero todo se puede entender por medio de las ilustraciones
Para conocer la velocidad de subida y bajada www.speedtest.net
Etiquetas:
diseño web,
internet,
servicios online
Suscribirse a:
Entradas (Atom)










