Servidor Web Apache/php/MySql Portable

Para todo webmaster es indispensable contar con un servidor web para pruebas. Mas alla de que contemos con un hosting ilimitado, el solo hecho de no tener que cargar archivos a la web y/o actualizar base de datos, nos ahorra un monton de tiempo. Sin contar los dolores de cabeza que nos ahorramos al programar en un servidor de pruebas en lugar del que tengamos online.

Pero a veces sucede, que no podemos dedicar el tiempo necesario a nuestros proyectos, ya sea por estudio trabajo, etc. Y al no tener una NetBook para transportar nuestros archivos, se hace cada vez mas dificil esta ardua tarea.

Es por esto que me decidi a escribir este tutorial, a continuacion explicare como instalar un servidor web en un pendrive, el cual podran transportar y usar en cualquier PC con acceso a puertos USB.

Nota: Si no estas usando ninguna tecnologia de servidor este tutorial te sera inutil.

Archivos a Descargar Antes de iniciar el tutorial:

 

Solo es necesario descargar la Plataforma de todos modos  pueden descargarse la suite completa si asi lo desean. (Click en la imagen para descargar)

Vamos a necesitar 2 archivos de XAMPP: 

XAMPP Lite: sera nuestro servidor,  que es una version mas reducida de XAMPP, aunque si lo desean pueden descargar la version completa. Descargar la version comprimida en Zip, el ejecutable no nos servira para este caso.

XAMPP Launcher: Es el programa necesario para comunicar el servidor con Portable Apps.

No pongo enlaces directos ya que estos programas se actualizan seguido, al dia de hoy no existe una version Lite del ultimo XAMPP. Para hacer este tutorial yo use  XAMPP Lite 1.7.3 y XAMPP Launcher 1.4

Manos a la obra

En primer lugar vamos a instalar la plataforma de Portable Apps en nuestro pendrive. Para evitar futuros inconvenientes la instalacion debe realizarse en la raiz y no en una carpeta.

Luego descomprimimos el zip de XAMPP Lite (o completo segun sea el caso) tambien en la raiz del pendrive (quedandonos todo dentro de una carpeta llamada XAMPP o XAMPP Lite)

Por ultimo vamos a instalar el launcher dentro de la carpeta Portable Apps.

Con esto ya deberiamos tener nuestro servidor portable listo para usar. Vamos a probarlo:

Ejecutamos StartPortableApps.exe (esta en la raiz del pendrive) se nos abrira un menu encima de la barra de tareas (donde esta el reloj) en dicho menu deberia aparecer el icono de xampp, si no fuera asi vamos a: Opciones>>>>Actualizar Iconos  y ya deberia aparecer.

Si el menu estuviera en ingles podemos cambiarlo a español llendo a Options>>>Language>>>>Spanish.

Clickeamos en el icono de Xampp Control Panel y se nos abrira una ventana como esta:

 

Donde se describen los modulos vamos a clickear en el Start de Apache y Mysql.  Luego abrimos nuestro explorador preferido (que por tu bien espero no sea internet explorer XD ) y en la barra de navegacion ponemos "localhost" sin comillas tal como lo escribi sin .com ni www  ni nada por el estilo, (si ya instalaste algun servidor no portable saltea este paso XD)   Si todo salio bien nos deberia aparecer la pagina principal de XAMPP la cual nos va a solicitar el idioma por primera vez.

Para crear una base de datos nueva en el servidor o importar una que ya tengamos volvemos  al panel de control de XAMPP (ahora veremos el icono en la barra de tareas ya no es necesario volver a abrir el menu de portable apps) y clickeamos en Admin (al lado del boton Start de MySql que pulsamos anteriormente.


Notas:

* No voy a explicar como crear una base de datos ni como administrarlas ya que no es un tema que tenga que ver con este tutorial de "crear servidor portable" de todos modos seguramente pronto haga uno especifico en este tema.

* Lo mismo de la nota anterior pero sobre manejar archivos en el servidor, solamente decir que guarden los archivos de su web en la carpeta "htdocs" que esta dentro de la carpeta de XAMPP

*Sugiero, ya que instalaron su servidor portable que le agreguen algunas aplicaciones utiles a su pendrive estas las encuentran en http://portableapps.com/ . Pueden agregar exploradores web para las pruebas como  Google Chrome , Mozilla Firefox  y Opera.  Un editor de codigo como Notepad ++. Un administrador de FTP como FileZilla, etc  De este modo no necesitariamos una pc con programas para trabajar en nuestro proyecto ya que tendriamos todo lo que necesitamos. Tambien en la web de portable Apps encontraran una aplicacion para portabilizar sus programas (por si tienen alguno de pago que necesiten)

Por dudas sobre este tutorial comentar en el mismo, el proximo tutorial sera sobre como instalar un foro phpBB manualmente, sin foroactivo, fantastico ni ninguna porqueria de esas XD. Salu2 espero que les sirva y recuerden que Compartir No Tiene Limites

[Daz 3D] Manual Completo

Nombre del Tutorial: Presentaciones con Animacion 3D
Autor: Oscar Chacón ( http://renderonesia.com )
Descripcion: Manual completo con todos los conceptos y descripcion d ecasi todas las herramientas de Daz 3D.
Formato: PDF
Tamaño del Zip: 3.51 Mb

Indice

• Daz 3D
• ¿Como se comienza una escena 3D?
• La interfaz
• La pestaña Load
• La pestaña content
• Parametros
• Timeline
• Pose / Animate
• Power Pose
• Puppeteer
• Render
• Opciones de la pestaña render
• Pestaña scene
• ¿Como cambiar la interfaz de Daz?
• ¿Como activar el personaje?
• Añadirle ropa al personaje
• Ajustar la ropa
• Ajustar el cabello al personaje
• ¿Como cambiar las texturas?
• ¿Como modificar las texturas?
• ¿Como añadir poses al personaje?
• Animacion utilizando Puppeteer
• Añadirle voz al personaje con sincronizacion de voz
• Pasos para hacer la sincronizacion de voz utilizando el programa de edicion de audio
• Pasos en Daz para la sincronizacion de voz
• Renderizado
• Secciones del "rendering settings"
• Añadir la textura al plano como si fuera el "Slide" de Powerpoint
• Animate
• Botones para trabajar con el timeline
• Hacer una animacion con animate
• ¿que son los aniblocks?
• ¿Como se editan los aniblocks?
• Creando aniblocks desde Daz Studio KeyFrame
• Aniblocks Library
• ¿Como uso esto?
• ¿Donde estan realmente mis aniblocks?
• Anatomia del aniTimeline
• Menu de opciones
• Anipad
• Exportando animaciones
• Exportar animacion para otros programas
• Otras cosas importantes a tener en cuenta
• D-Form
• Referencias

DESCARGAR

[BLENDER] Objetos Multi-Materiales

A veces sucede que tenemos un objeto (un cubo por ejemplo) al que queremos aplicarle diferentes texturas / colores  a sus caras. Para ello debemos asignar al objeto varios materiales. En este tutorial se explica como.

Nota: si no podes visualizar bien una imagen clickealas para agrandar

•  Selecciona el objeto, en este caso usaremos el cubo por defecto. 

Por costumbre o desconocimiento de muchos piensan que un objeto solo puede tener un solo material. Pero no es así, si observas lo que esta encerrado en amarillo es el índice de materiales, ahí nos dice que material es el que estamos editando, a continuación menciono como podremos aplicar varios materiales.

• Selecciona el Cubo
• Agrega un Material si no tiene uno, yo usare el que viene por defecto (en este tutorial me referire a el como Gris)
• Ve al panel de edicion (F9)

Lo que aparece encerrado en amarillo, es la sección para editar el material. Ahí podemos agregar otros (New), eliminar (Delete), mostrar las caras que usan ese material (Select), ocultar dichas caras (Deselect), asignar las caras seleccionadas al material actual (Assign).
Hacer que el objeto se vea suave (Set Smooth) o sin suavizado (Set solid).

• Haz clic en New. 

 Veras como cambia la parte encerrada de 1 Mat 1 a 2 Mat 2, lo que quiere decir en pocas palabras, total de materiales = 2 y el actual que se esta editando (en este caso el 2).
Por defecto te pondrá el mismo material Gris.
Con los puntitos que están en los extremos (o flechas) podrás navegar a través de los materiales.

• Ahora vamos a las opciones de Materiales (F5), ya podremos observar como cambio el índice de materiales y estamos ahora editando el segundo, como nos puso el mismo Gris (Material 1)… y no queremos ese agregaremos otro material de color rojo. El Gris sigue existiendo, para editarlo solo desplázate por los materiales con las flechitas (ver rectángulo amarillo) 

Wow… todo cambio a rojo… parece que hicimos algo mal pero no. Lo que nos hace falta es asignarle a las caras los distintos materiales.

• Entra al modo edición (Tabulador)
• Ahora puedes seleccionar las caras que tú quieras. 

 En mi caso seleccione las 4 caras en el sentido de la flecha.

• Necesitas ir al panel de edición (F9) sin salir del modo edición.
• Muevete por los materiales (usando las flechitas) hasta que te posiciones en el material Gris (el 1)

• Con las caras seleccionadas presiona el botón ASSIGN (abajo del rectángulo amarillo).

Ahora ves como ciertas caras tienen el material Gris y otras el material Rojo.

Fuente:  www.niel3d.com

[BLENDER] Conceptos Basicos + Practicas Modelado Simple

Nombre del Tutorial: Tutorial Blender
Autor: Carlos Linillos Guijarro
Descripcion: Este es otro de los tantos tutoriales de conceptos basicos de blender, a diferencia de la mayoria trae varias practicas de modelado simple por lo cual me parece muy util para los que recien empiezan en el fantastico mundo de blender.
Formato del archivo: PDF
Tamaño del Zip: 5.3 Mb

Indice:

Primera Parte

• Seleccion de Idioma
• Guardar Preferencias
• Ventanas y Vistas

Segunda Parte

• Mover, rotar y escalar
• Deshacer los Cambios

Tercera Parte

• Modelar un Cd Rom

Cuarta Parte

• Modelar una pelota

Quinta Parte

• Modelar un tablero de ajedrez
• Renderizado Basico

Imagenes de las Practicas

 

 

DESCARGAR TUTORIAL

Cambiar el Favicon de blogger

Hoy traigo un nuevo "truco" si se le puede llamar truco. Como es sabido, blogger al darnos su servicio de blog nos agrega un favicon por defecto. Para quienes no sepan que es un favicon, simplemente es el icono que aparece en la barra de direcciones del navegador, en el titulo de la pestaña y que tambien aparecera en los blogrolls de los blogs que nos enlacen. Por defecto tendremos la B de blogger. Pero esto podemos cambiarlo de la siguiente manera:

Primero tendremos que diseñar nuestro favicon.ico en nuestra pc y subirlo a algun servidor de imagenes que permita la extension .ico

Luego en el HTML de nuestra plantilla (me rehuso a seguir diciendo como se edita la plantilla, cualquier cosa miren tutoriales anteriores)

Buscamos:

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

Si lo tuvieramos distinto basta con buscar la etiqueta <title>< ya que aparecera una sola vez en toda la plantilla

Y justo antes de esa linea pegamos:

<link href="http://sitio.com/favicon.ico" rel="shortcut icon" type="image/x-icon"/>

<link href="http://sitio.com/favicon.ico" rel="icon" type="image/x-icon"/>

Editamos http://sitio.com/favicon.ico por la url de nuestro icono. Yo recomiendo que creen su icono en gif o png y utilizen esta web:

http://www.html-kit.com/favicon

en esta web no solo podran generar el .ico a partir de una imagen sino tambien alojarlo.

Hasta la proxima

Formateando texto

Continuando con el curso HTML, hoy voy a hablar sobre las etiquetas relacionadas al texto. Este es un tema un poquito mas extenso como para un post solo asi que seguramente lo divida en 2 o 3 posts ya que no quiero dejr  nada por el camino. No voy a explicar muy detalladamente cada etiqueta por que creo que no es necesario, creo que bastaria con ejemplos para apreciar la funcion de cada etiqueta.

En tutoriales anteriores ya estuvimos hablando algo sobre el formato de texto. Aprendimos a usar las Negritas Cursiva y subrayado  sin embargo voy a repetir estas cosas para que quede un poco mas ordenado el curso.

Texto en Negrita

Para poner texto en negrita tenemos dos opciones: la etiqueta <b></b>  o  <strong></strong> ambas daran el mismo resultado, por lo que es recomendable usar  B  ya que es menos para escribir XD.

Ejemplos:

<b>Texto en negrita usando B</b>
<strong>Texto en negrita usan STRONG</strong>

Resultado:


Texto en negrita usando B
Texto en negrita usan STRONG

Cabe destacar una cosa sobre las diferencias entre B y STRONG. B quiere decir texto en negrita minetras que STRONG es un texto resaltado. Si hacemos pruebas obtendremos los mismo resultados pero no siempre. Cada navegador interpretara estas etiquetas de una manera distinta. La etiqueta B sera reconocida como negrita en cualquier navegador, en cambio STRONG puede aparecer como ngrita en un navegador o con un subrayado o color rojo en otros navegadores. Por experiencia propia en los navegadores mas usados como IE y Mozilla firefox no he encontrado diferencia entre estas etiqueta pero vale la pena destacar este punto.

Texto en Cursiva

La cursiva tambien conocida como italica la aplicaremos usando la etiqueta <i></i>  Tenemos otra opcion para aplicar una cursiva que es usando la etiqueta <em></em> la cual nos dara una cursiva con una inclinacion un poco mas larga. Lo mas normal en la mayoria de webs es usar la etiqueta <i></i>  ya que es mas facil de recordar (i  de italica)


Ejemplo:

<i>Texto en Cursiva</i>

 Resultado:

Texto en Cursiva


Texto Subrayado 

Para aplicar un texto subrayado vamos a utilizar la etiqueta  <u></u> (underlined)

Ejemplo:

<u>Texto subrayado</u>

 Resultado:

Texto subrayado


Subindices y Supraindices

Personal mente yo no soy de usar estos formatos, mas bien nunca he tenido porque hacerlo, pero son muy utiles para expresar formulas matematicas o quimicas (por ej). Para los subindices usaremos la etiqueta   y para los supraindices 

Ejemplos:

Sub indice: H<sub>2</sub>O es la formula del agua
SupraIndice:  x<sup>2</sup> + 2y = -2y <sup>3</sup>

Resultado:

Sub indice: H₂O es la formula del agua
SupraIndice: x² + 2y = -2y ³

Combinar etiquetas

Esto es algo de lo que ya se hablo pero vamos a profundizar un poco por si quedo algo en el camino.

Es muy posible que necesitemos combinar varias de estas etiquetas para formatear nuestro texto. En estos casos tenemos que ser lo mas ordenados posible. Por varios motivos, para que al momento de editar nuesto codigo sea mas comprensible leerlo y buscar las partes que qeuramos editar, y por supuesto para evitar los errores.

Al escribir nuestro codigo tenemos que analizar la prioridad de nuestra etiquetas. Por ej. Si estamos usando B como etiqueta principal del parrafo esta debe ser cerrada al final, y antes de ella todas las secundarias, voy con unos ejemplos mas practicos:

Este texto esta en negrita y este en negrita y cursiva

la manera correcta de escribir esto es asi:

<b>Este texto esta en negrita <i>y este en negrita y cursiva</i></b>

Vemos que Abro en primer lugar la etiqueta B  en segundo lugar la etiqueta I y al momento de cerrarlas cerre B al final. Como decia en oto tutorial la manera mas facil de comprender esto es "lo que mas a la izquierda esta al incio mas a la derecha en el cierre"

De esta manera esta MAL escrito:

<b>Este texto esta en negrita <i>y este en negrita y cursiva</b></i>

Si hacemos la prueba veran que va a funcionar del mismo modo, la diferencia es que el navegador tendra que "pensar" mas para resolver estos errores provocando un tiempo de carga mayor (lo cual no es la idea) y segun a que valla destinado nuestra pagina es posible que no funcione (por ej si usamos XHTML)


Eso es todo amigos diria el viejo Bunny para el proximo post continuare con el formato de texto: Colores, tipos de letra y anda a saber que mas

Imagen de fondo en las entradas

Este es un pequeño truco HTML para agregar una imagen de fondo a tus entradas.

Crea una entrada nueva y antes de publicarla ve a la edicion HTMl y pega este codigo donde quieras que inicie la imagen:

<div style="background-image: url(URL de tu imagen); padding: 5px;">

y este donde quieres que finalize:

</div>

Nota: padding: 5px;  no es necesario, esto agregara un relleno de 5 pixels a tu imagen, usando este ejemplo puedes usar mas posibilidades como border, por mas estilos remitirse a un manual de CSS

Formateando parrafos

Como ya se hablo en la segunda parte de este curso. La estructura del html se basa en etiquetas. Por lo tanto para poder  crear una pagina decente necesitamos conocer de que elementos o etiquetas disponemos a la hora de escribir el codigo de nuestra pagina. Es por esto que en este capitulo me voy a centrar en describir las etiquetas que tienen que ver con el formato de  parrafos, voy a ahorrar palabras sobre el tema de la estructura que ya se hablo y asi evitar aburrilos.

PARRAFOS Y SALTOS DE LINEA

En cuanto a los parrafos hasta el momento solo hemos hablado de como crearlos, usando la etiqueta P:   <p></p>  Si analizamos el uso de esta etiqueta podemos llegar a encontrar una complicacion en esto en algunos casos. Vamos con un ejemplo:

<p>parrafo 1</p>
<p>parrafo 2</p>
<p>parrafo 3</p>

Se veria asi:

parrafo 1

parrafo 2

parrafo 3

La etiqueta parrafo lo que hace es separar el texto por medio de una linea en blanco (parrafo 1 , linea en blanco, parrafo 2 , linea en blanco......) ¿pero que hay si yo quisiera eliminar esa linea? osea que se vea asi:

Parrafo1
Parrafo 2
Parrafo 3

Para ello vamos a prescindir de la etiqueta P y a utilizar BR . Hay una gran diferencia entre ellas. BR solo dara un salto de linea. Y adiferencia de todo el resto de etiquetas del HTML BR no necesita un cierre. Ose con un ejemplo, en el proximo bloque de codigo voy a poner 2 maneras de lograr el mismo resultado pero utilizando diferentes etiquetas:

<p>parrafo 1</p>
<p>parrafo 2</p>
parrafo 1<br><br>
parrafo 2<br><br>

Y el resultado sera el mismo:

Parrafo 1

Parrafo 2

Parrafo 1

Parrafo 2

Como se puede apreciar en el codigo utilize 2 veces seguidas la etiqueta BR, esto es para crear 2 saltos de linea (y dejar una en blanco) Si hubiera hecho esto:

parrafo 1<br>
parrafo 2<br>

El resultado hubiera sido este:

Parrafo 1
Parrafo 2

Espero que con esto se halla entendido la diferencia entre <p>  y  <br>  . Una nota mas sobre BR, hay dos maneras de utilizarse y dara el mismo resultado. se puede escribir asi: <br>  O asi:  </ br>   pero recuerden que esta etiqueta no lleva cierre, pueden usar cualquiera de las dos formas pero es innecesario usar como apertura y cierre. Para asegurarse mejor de esto pueden probarlo creando una pagina y jugando con estas etiquetas y el texto.


ALINEACION DE TEXTO

Existen algunos atributos para incluir en las etiquetas, como por ejemplo el atributo "align". Si uilizamos estes atrubto junto a la etiqueta <p>  podremos alinear o justificar parrafos de la manera que queramos.

Un ejemplo claro:



Parrafo 1

Parrafo 2

Parrafo 3

Tenemos 3 parrafos alineados, uno a la izquierda, el segundo al centro y el tercero a la derecha. Para conseguir esto utilize el atributo "align" el cual se usa de la siguiente manera, por ej para una alineacion al centro:

<p align="center">parrafo</p>

Para usar este atributo o cualquier otro se hara de la siguiente manera: abrimos la etiqueta de inicio(<p) . espacio, nombre del atributo (align por ej.) , signo de igual (=), valor del atributo entre comillas ("center por ej), cierre de la etiqueta de inicio.( >) Luego ira el texto al que modificaremos con la etiqueta y para finalizar el cierre de la etiqueta (</p>)

Los valores posibles para align son: center (centro) left (izquierda) right (derecha) justify (justificar)

Basandome en el ejemplo anterior aca les pego el codigo usado para que se entienda mejor:

<p align="left">parrafo</p> 
<p align="center">parrafo</p>
<p align="right">parrafo</p>

Una nota sobre alinear a la izquierda, la mayoria de las veces no es necesario, ya que por defecto todos los elementos en html apareceran a la izquierda, sin embargo mas adelante este atributo nos sera de mucha utilidad.

Ahora que pasa si queremos alinear tres parrafos de la misma manera, por ej al centro? lo mas logico segun lo que hemos visto seria escribirlo de este modo:

<p align="center">parrafo</p> 
<p align="center">parrafo</p>
<p align="center">parrafo</p>

Este codigo no esta mal, sin embargo se puede simplificar con el uso de la etiqueta  <div> la cual mas adelante desarrolaremos mejor ya que es demasiado lo que hay que hablar de ella.  Entonces podriamos escribirlo asi:

<div align="center">
<p>parrafo</p> 
<p>parrafo</p>
<p>parrafo</p>
</div>

Y el resultado seria el mismo. Los atributos como align pueden ser usados en la mayoria de etiquetas de html, en este caso preferi usar div, por el hecho que el div hablando en criollo funcionaria como una capa invisible, pero muy util para alinear varios parrafos sin escribir tanto codigo repetido.



Pueden practicar lo explicado en este tutorial haciendo una pagina que contenga:


2 parrafos alineados al centro
3 saltos de linea
2 parrafos alineados a la izquierda
1 parrafo alineado a la derecha

ENCABEZADOS


Solo me queda hablar sobre los encabezados, en cuanto a parrafos se refiere. Un encabezado es un parrafo formateado a un tamaño mayor o menor y en negrita, generalmente es usado para los titulos. La etiqueta usada es H1  para un encabezado mayor y H6 para el encabezado mas pequeño.


Por lo tanto estas son todas las posibilidades de encabezados que tenemos:

<h1>encabezado mayor</h1>
<h2> otro encabezado </h2>
<h3> otro encabezado</h3>
<h4>otro encabezado</h4>
<h5>otro encabezado</h5>
<h6>encabezado menor</h6>

No pongo ejemplos ya que tengo los encabezados formateados con CSS en esta plantilla y no podrian apreciarlos, pueden verlos haciendo una pagina de prueba con todas las posibilidades.

En el proximo tutorial estare hablando sobre Formatear Texto

Curso HTML: 1º y 2º Practica

Vamos con las 2 primeras practicas de este curso, que por ser las primeras van a ser lo mas chotas posibles.

Nota: de aqui en mas las practicas seran de esta forma, se indicara los elemntos de la pagina a los que se desea llegar y al final del post dejare el codigo de la practica como solucion, por si fuera necesario.

Primer Practica: Hola Mundo

Como en todos los lenguajes de programacion, la primera practica sera imprimir un "Hola Mundo", me parece una reverenda boludes, pero si todos lo hicimos alguna vez Vos tambien XD.

Objetivo: Crear un archivo .html guiandote en los tutoriales anteriores, cuyo unico contyenido sera el texto Hola Mundo , puedes darle formato al texto o lo que tu quieras.


Segunda Practica: Formateando Texto


Objetivo: Imprimir en una pagina el siguiente texto con el formato tal cual lo ves en este post:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo ut velit rhoncus molestie eu eu metus. Pellentesque bibendum, orci non commodo dignissim, purus nisi porta elit, sit amet vestibulum ante neque non massa. Aliquam erat volutpat. In vitae metus suscipit sem egestas consequat. Nunc ut lorem at justo aliquam sagittis. Maecenas condimentum molestie ullamcorper. Nulla interdum, dui sit amet facilisis bibendum, tellus ipsum ultricies ipsum, vitae dapibus lectus diam aliquet velit. In non tempor lacus. Proin rhoncus dictum sodales. Integer et quam nec mauris sollicitudin blandit. Fusce vestibulum, turpis non fringilla sagittis, purus massa porttitor ipsum, non dignissim est turpis at est. Ut eros urna, iaculis a tincidunt in, interdum in diam. Donec pharetra luctus sagittis.

Aenean a massa dui, a egestas magna. Etiam sit amet neque non eros eleifend viverra. Nam ut orci lectus, in rutrum justo. Curabitur vestibulum sagittis metus, non luctus lorem malesuada sit amet. Suspendisse enim leo, feugiat eget feugiat vitae, pulvinar eu neque. Duis id ante in lorem ultrices bibendum. Morbi dignissim, neque quis eleifend hendrerit, mi urna faucibus eros, in tempor purus enim quis odio. Integer nisl diam, varius sed bibendum non, lobortis et enim. Aenean condimentum, purus sed rutrum facilisis, neque tellus laoreet tellus, sed eleifend libero felis sed odio. Donec eget vestibulum velit.

Phasellus ut mi tellus, ut tempus est. Maecenas vel sem ut urna ornare varius. Cras malesuada nunc id tellus tempor non pharetra felis condimentum. Vestibulum pharetra pellentesque scelerisque. Suspendisse ut justo non libero tincidunt egestas non at augue. Aliquam massa sapien, dictum et condimentum vel, pretium in velit. Quisque nec erat ante. Morbi pellentesque ipsum ac enim pellentesque non adipiscing augue interdum. Sed nec eros urna. Curabitur pharetra feugiat varius. Nunc dapibus eros commodo libero pharetra sodales. Duis a rutrum dolor. Nulla leo ligula, mollis vitae placerat quis, bibendum sed nulla. Sed adipiscing aliquam libero, ac molestie mauris vulputate et. Sed egestas aliquet nibh vel semper. 

 
Nota: Para lograr el texto subrayado se debera usar la etiqueta  <u></u>  lo aclaro por que esta etiqueta no se habia dado antes.




SOLUCIONES

Dudo que sean necesarias las soluciones para este caso, ya que estas practicas son muy faciles, el hecho es que mucho mas no se puede hacer por es poco de lo que se ha hablado, de todos modos creo que vale la pena perder el tiempo con lo mas simple para ir enganchando los fundamentos.

Practica 1:

<html>
<head>
</head>
<body>
Hola Mundo
</body>
</html>

Practica 2:

<html>
<head>
</head>
<body>
<p><u><i>Lorem ipsum dolor sit amet</i></u>, consectetur adipiscing elit. In quis leo ut velit rhoncus molestie eu eu metus. Pellentesque bibendum, orci non commodo dignissim, purus nisi porta elit, sit amet vestibulum ante neque non massa. Aliquam erat volutpat. In vitae metus suscipit sem egestas consequat. Nunc ut lorem at justo aliquam sagittis. Maecenas condimentum molestie ullamcorper. Nulla interdum, dui sit amet facilisis bibendum, tellus ipsum ultricies ipsum, vitae dapibus lectus diam aliquet velit. In non tempor lacus. Proin rhoncus dictum sodales. Integer et quam nec mauris sollicitudin blandit. <b>Fusce vestibulum, turpis non fringilla sagittis, purus massa porttitor ipsum, non dignissim est turpis at est. Ut eros urna, iaculis a tincidunt in, interdum in diam. Donec pharetra luctus sagittis</b>.</p>
<p>Aenean a massa dui, a egestas magna. Etiam sit amet neque non eros eleifend viverra. Nam ut orci lectus, in rutrum justo. Curabitur vestibulum sagittis metus, non luctus lorem malesuada sit amet. Suspendisse enim leo, <b><i>feugiat eget feugiat vitae</i></b>, pulvinar eu neque. Duis id ante in lorem ultrices bibendum. Morbi dignissim, neque quis eleifend hendrerit, mi urna faucibus eros, in tempor purus enim quis odio. Integer nisl diam, varius sed bibendum non, lobortis et enim. Aenean condimentum, purus sed rutrum facilisis, neque tellus laoreet tellus, sed eleifend libero felis sed odio. Donec eget vestibulum velit.</p>
<p><i>Phasellus ut mi tellus, ut tempus est. Maecenas vel sem ut urna ornare varius. Cras malesuada nunc id tellus tempor non pharetra felis condimentum. Vestibulum pharetra pellentesque scelerisque. Suspendisse ut justo non libero tincidunt egestas non at augue. Aliquam massa sapien, dictum et condimentum vel, pretium in velit. Quisque nec erat ante. Morbi pellentesque ipsum ac enim pellentesque non adipiscing augue interdum. Sed nec eros urna. Curabitur pharetra <u><b>feugiat varius</b></u>. Nunc dapibus eros commodo libero pharetra sodales. Duis a rutrum dolor. Nulla leo ligula, mollis vitae placerat quis, bibendum sed nulla. Sed adipiscing aliquam libero, ac molestie mauris vulputate et. Sed egestas aliquet nibh vel semper. </i></p>
</body>
</html>

Creo que entendido esto ya estamos en condiciones de profundizar un poco mas en el HTML. El proximo tutorial sera: Formateando  Parrafos

Permitir Descargar posts en PDF

Hoy les traigo una herramienta muy util para sus blogs, sobre todo para aquellos blogs de Soporte como "Hazlo tu Mismo". Es posible que algunas veces los usuarios les quede un poco molesto estar entrando al blog para buscar cierto tutorial para hacer tal cosa, y hasta a veces se vuelve medio engorroso estar buscando algun post especifico. Con esta herramienta vamos a permitir a los usuarios descargarse cualquier post a formato PDF, para luego lo puedan leer en sus PC y sin conexion a internet.

Para ello vamos a registrarnos en la siguiente pagina:

http://web2.pdfonline.com/index.asp

Rellenamos el formulario, iniciamos sesion y pulsamos en el boton para generar el codigo javascript necesario para aplicar a nuestro blog.

Luego vamos a editar la plantilla:

Diseño>>> editar HTML  (no olvidar expandir plantilla de artilugios)

Tambien puedes descargar la plantilla y editarla localmente.

Buscamos el siguiente codigo:

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

Si no lo encontras proba con una busqueda parcial (ya que todas las plantillas estan diseñadas distintas es posible que lo encuentres con otra etiqueta como P)

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

La busqueda parcial podria ser esta:

'post-footer-line post-footer-line-1'

La idea es pegarlo en el footer de las entradas asi que si no encuentras ninguno de estos codigos o simplemente quieres pegarlo en otro lado, puedes revisar la plantilla o comentar en este post indicandome que plantilla usas (en lo posible si haz hecho modificaciones a la misma indicar cuales) para que te ayude en el tema.

Pegamos el codigo javascript generado anteriormente justo debajo de la linea que acabamos de buscar.

Guardamos las ediciones, y listo, nustros usuarios ya podran descargar lños posts en PDF.

Para ver como funciona el script presiona el boton "save page as PDF" en cualquier entrada de este blog.


Hasta la proxima

Eliminar barra de Navegacion de Blogger

Hoy les traigo un viejo truco que ahora pienso porque no lo publique antes.

Como veran todos los blogs alojados en blogspot (blogger) tendran por defecto una barra de navegacion en la parte superior de la ventana. Lo cual para muchos parecera muy molesto.

Entre los enlaces de esta barra encontramos uno en especial que para muchos otros sera mas molesto que la barra en si "informar sobre mal uso" al clickear este enlace es posible denunciar un blog, y por lo tanto hasta es posible que blogger elimine los blogs denunciados.

¿como se acaba el problema? Bueno, obvio, eliminando la barra.

Para ello vamos a hacer uso de un codigo CSS muy sencillo el cual podremos colocar de 2 formas diferentes:

1- Editando la Plantilla

Vamos a Diseño>>>> Edicion de HTML  y buscamos la etiqueta 

<head>

justo debajo de ella pegamos:

 <style type='text/css'>
#navbar-iframe{
height: 0px;
visibility: hidden;
display: none;
}
</style>

2- Agregando el codigo a un widget

La otra forma de hacer esto es pegar el codigo que deje arriba en un widget que podemos agregarlo en cualquier sector del blog ya que este no se mostrara .


Listo chau barra de navegacion, chau denuncias. Be Happy

Avatar por defecto para Usuarios Anonimos

Cuando un usuario anonimo publica un comentario en nuestros blogs, o por medio de las opciones nombre/url veremos que el comentario aparecera sin avatar. Sin embargo podemos configurar un avatar generico para estos usuarios, y darle un poco de color a los comentarios.

Para ello vamos a editar nuestra plantilla:

Diseño>>>>>>>Editar HTML

Buscamos: 

]]></b:skin>

Y antes de esa linea pegamos el siguente codigo:

#comments-block .avatar-image-container.avatar-stock img {

display:none;

}

#comments-block .avatar-image-container.avatar-stock {

background:transparent url(http://i46.tinypic.com/s1kwle.gif) no-repeat scroll 50% 50%;

}

lo que esta marcado en rojo es la URL de la imagen que sera nuestro avatar por defecto, pueden cambiarla porla que deseen.

Dudas? consultas? comentenlas....

Kompartir No Tiene Limites!!!!

Curso de HTML - Sintaxis y Cuerpo del documento HTML

Segunda parte del curso de HTML, en este post se va a hablar de la sintaxis y el cuerpo de un documento.

SINTAXIS HTML

Para aquellos que usen foros a menudo, esto va a ser relativamente facil, para los que no tambien XD.

 La sintaxis del HTML se basa en elementos a los que llamaremos etiquetas. Cada etiqueta esta formada por dos partes:

Inicio de la etiqueta <etiqueta> 

Cierre de la etiqueta </etiqueta> 

Todo lo que este dentro del inicio y cierre de la etiqueta sera afectado por las modificaciones de la etiqueta.  Para ser mas claros vamos con unos ejemplos practicos.



La etiqueta <b></b>  define un texto en negrita por lo tanto si escribimos:

<b>Este texto esta en negrita</b>

El resultado sera:

Este texto esta en negrita

La etiqueta <i></i>  define un texto en cursiva por lo tanto si escribimos:


<i>Este texto esta en cursiva</i>


El resultado sera:


Este texto esta en cursiva

Uno mas:


La etiqueta <p></p>  define un parrafo por lo tanto si escribimos:


<p>Esto es un parrafo</p>
<p>Esto es otro parrafo</p>



El resultado sera:


Esto es un parrafo
Esto es otro parrafo

Puntos a tener en cuenta sobre las etiquetas:

1. HTML no reconoce entre mayusculas y minusculas es lo mismo escribir <p></p>  que  <P></P>  lo mismo si mezclamos mayusculas con minusculas
2. Mantener el orden de las etiquetas: si queremos un texto en negrita y cursiva la manera correcta de escribirlo es asi:  <b><i>Este texto esta en negrita y cursiva</i></b>   o asi <i><b>Este texto esta en negrita y cursiva</b></i>  pero nunca asi <b><i>Este texto esta en negrita y cursiva</b></i>  . la etiqueta mas cercana del lado derecho del texto sera la mas cercana del lado izquierdo y asi sucesivament

CUERPO DE UN DOCUMENTO HTML

Ademas de las etiquetas con la que dimos algo de formato a nuestro texto, existen algunas etiquetas indispensables, necesarias o como les quieran llamar. Las etiquetas de las que voy a hablar en este punto si o si deben formar parte de todo documento HTML.

Un documento HTML Siempre comienza con la etiqueta  <html>   esta etiqueta es la que le dira a nuestro navegador que lo proximo que leera sera codigo html, cuando el navegador lea la etiqueta de cierre  </html> entendera que finalizo el codigo html.

Seguido de la etiqueta <html>  vendra la etiqueta <head> que marca el inicio de la cabecera de nuestra pagina y su respectivo final en </head> En la cabecera colocaremos informacion de la pagina como metadatos, codigo javascript necesario para ejecutar ciertos comandos, el titulo de la pagina, etc.

Luego vendra el cuerpo de la pagina con la etiqueta <body>  que sera donde centremos nuestro trabajo, todo el contenido, imagenes texto o lo que sea ira en el cuerpo.

Resumiendo:

<html>  Limita el inicio y fin de la pagina

<head>  Cabecera de la pagina (con informacion necesaria que no se mostrara en la pagina)

<body>  Cuerpo y contenido de la pagina.

Siguiendo estas instrucciones entendemos que TODO documento html se estructurara siempre de esta manera:

<html>
<head>
codigo para la cabecera de la pagina
</head>
<body>
Cuerpo o contenido de la pagina
</body>
</html> 

En el proximo capitulo de este curso: Practica 1 y 2

Curso HTML

Segundo curso de "Hazlo Tu Mismo" (hasta me copo el nuevo nombre XD) aunque deberia ser el primero ya que para entrar al mundo de a programacion web al menos para mi HTML deberia ser el primer paso. Incluso cuando avancemos en la programacion y empecemos a hacer nuestros propios scripts en php veran que siempre mal o bien vamos a volver a nuestro viejo y querido HTML.
Una anecdota, si se le puede decir asi, que tuve con este lenguaje: Cuando empeze a diseñar mis webs con editores del tipo "haz click aqui y yo te programo todo" como dreamweaver o frontpage (si el viejo frontpage imposible no nombrarlo), en un momento se me dio la locura de aprender HTML, locura que en poco tiempo perdi porque literalmente me parecio un huevo. Y segui con los programitas, al tiempo me fui dando cuenta que HTML es el lenguaje mas pelotudo que existe (pero no por eso inservible) en muy poco tiempo estaba escribiendo yo mismo el codigo dentro de un programa sin siquiera haber leido un manual, digamos que frontpage me enseño inconscientemente lo que yo no queria estudiar.  Por eso aunque mi consejo es que no se usen programas de este tipo (frontpage - dreamweaver) que programan todo automatico, cuando las cosas se complican, aunque sea por hobbie de tener nuestra web ya publicada, no esta mal usarlos. Siempre y cuando tengamos en cuenta 2 cosas muy importantes: La primera es que tarde o temprano vamos adejar de usar esos programas (si es que queremos programar a un nivel profesional), la segunda es que estos programas añaden mucho codigo "basura" a nuestras paginas, lineas innecesarias que provocan que nuestros archivos sean mas pesados, y por lo tanto las paginas demoren mas en cargar (entre otras trabas).
Los que se animen a empezar de 0 escribiendo codigo a mano, bienvenidos sean, estoy seguro que pronto vere sus paginas colgadas por doquier. Los que no tambien, bienvenidos sean.


Dejando la charla de lado, este curso a diferencia del trillon que encontraran en la red voy a tratar de dictarlo de una manera no tan profesional, sin tanto tecnicismo que creo solo sirve para marear a los novatos, no obstante muchas veces el tecnicismo es necesario. Sin mas que decir empecemos.........

Requerimientos para seguir el curso:

1. Saber usar el teclado
2. Saber usar un mouse
3. Ganas de aprender
4. Un editor de texto plano.

Sobre el editor de texto:  Hay varias cosas que recalcar en este punto.

1. El editor no puede ser ninguno de texto enriquecido (por eso digo plano) osea nada de word, ni nada por el estilo, ya que estos editores no soportan del todo el lenguaje html.
2. El editor mas comun para hacer nuestras webs es el block de notas que viene con windows (aunque usted no lo crea) Sin embargo YO NO LO RECOMIENDO. No se que dificultades pueda traer con html porque pocas veces lo he usado, pero si se de los dolores de cabeza que me ha dado programando en php, este block de notas te inserta espacios donde se le antoja y me ha hecho pasar horas buscando un error que te dan ganas de andar el scrip a la RPMQLP.
3. Yo recomiendo usar Notepad ++ que ademas nos servira para en un futuro programar en otros lenguajes, ya que soporta una infinidad de ellos.

INDICE DEL CURSO

Aqui tendras la lista de temas con enlaces a los mismos a medida que se vallan publicando, voy a tratar de un publicar un punto nuevo por dia siempre y cuando tenga tiempo para ello.

1. Introduccion a HTML (en este mismo post)
2. Sintaxis y Cuerpo del HTML (proximo post)
3. Practica 1 y 2 
4. Formateando Parrafos
5. Formateando Textos (Parte 1)

INTRODUCCION AL HTML

HTML es el lenguaje en el que se escriben las paginas web, estas paginas se pueden ver desde un navegador (firefox, internet explorer, opera, etc) por lo tanto se puede decir que el trabajo del navegador sera leer el codigo HTML para luego traducirlo en imagenes, texto o lo que sea que le diga el codigo. El navegador no funciona por si solo al igual que las paginas no se hacen por si solas (anda?). Con HTML podemos combinar imagenes, textos, sonidos, flash y otros medios de la manera que queramos. Tambien vincular por medio de enlaces (esa cosa que le pasas el mouse y cambia de color y si le haces click te manda anda a saber donde) a otras paginas webs. Y atentos a los enlaces ya que es una de las bases fundamentales del HTML practicamente el 70% del codigo se basa en ellos, ya sea para vincular una imagen, ducumento HTML, clases, etc.

No puede faltar la historia en un curso de HTML pero voy a intentar hacerla corta ya que no es indispensable a mi entender.

HTML (Hyper Text Markup Language) se creo en un principio con un objetivo divulgativo, no se penso en su momento que la web se fuera usar netamente con contenidos multimedia como al dia de hoy. Aunque no parezca HTML nacio sin poder cubrir todos los usos que se le iban a dar. Sin embargo con el tiempo fueron cambiando los estandares del HTML al dia de hoy el ultimo estandar de HTML es el 4.01 . Segun creo HTML ya no cambia, para evolucionar en nuestras webs vamos a necesitar usar otros lenguajes. Luego de HTML vendria CSS (no estoy hablando cronologicamente) para dar una mejor forma a HTML, mediante las hojas de estilos, y el HTML puro terminaria evolucionando en lo que hoy conocemos como XHTML. Pero no voy a detallar estos ultimos 2 lenguajes ya que no es motivo del curso, y sinceramente no tengo ganas XD.

Redondeando un poco la idea, y hablando mas en criollo para los que no entiendan, basicamente HTML es un archivo de texto con extension .html  o .htm que le dira a nuestro navegador hace esto o hace lo otro. Para ello tendremos que usar un estandar que conozca nuestro navegador tenesmos que hablar en su propio lenguaje. y este lenguaje no es otro que HTML (si hay otros pero no va al caso)

Bueno  me aburri de hablar de esto, sigo con el proximo capitulo, si llegaste hasta aca te felicito estas dentro del 2% de la gente que lee las introducciones de los manuales.

Curso: Crear Plantillas para Blogger

Bueno, esta es una idea que tuve hace mucho tiempo, cuando recien inicie este blog, aunque nunca la lleve acabo por el hecho que no crei que entre los pocos visitantes de este blog a alguno le sirviera el curso. Aunque viendo las analytics de Hacke Mate, (al rededor de las 7500 visitas desde la creacion del blog) aunque no sean muchas las visitas para un blog que hace 2 años que esta online, supongo que a mas de un visitante anonimo le han servido los escasos tutoriales. Asi que me decidi a hacerlo, sobre todo porque hay muy poca info en internet sobre esto.

CURSO:  CREA TU PROPIA PLANTILLA PARA BLOGGER DESDE 0

Descripcion del Curso:  Aunque es posible crear una plantilla desde 0 usando algunos programas especificos en los que se incluye una API de google destinada a esto, el objetivo del curso sera crear nuestra propia plantilla desde 0 con un block de notas como unica herramienta. Se va a explicar todo paso a paso para quienes no tengan nocion de programacion puedan crear sus propias plantillas con un tan solo "copiar y pegar".

A tener en cuenta: Si tines una idea en mente y tu objetivo no es aprender a crear una plantilla desde 0, te recomiendo que busques la que este mas acorde a tus necesidades, este curso ademas de enseñarte a crear tu propia plantilla, tambien te servira como manual de referencia para poder editar cialquier plantilla, ya sea descargada o las propias de google. Tal vez te sea mas facil editar que empezar con este tedioso laburo. Si aun insistes... empecemos:

Requerimientos:

1. Un editor de texto plano - Atencion: cuando digo plano me refiero a un block de notas, programas como word nos llenaran el archivo de codigo basura, tampoco recomiendo usar el block de notas de windows ya que este inserta espacios en los principios y finales de la plantilla, ademas de que no podras apreciar el codigo tal como se guarda. Si tienes un editor web como Dreamweaver puedes usarlo siempre y cuando escribas el codigo tu mismo y no lo autogeneres por la aplicacion (tambien inserta codigo innecesario) Mi recomendacion mas sencilla es Notepad ++ (libre) la mas avanzada por si ya estas acostumbrado a programar es Zend Studio (de pago). Cualquiera de los dos servira para seguir el curso.
2. Un blog De Pruebas - Aqui realizaremos nuestras pruebas , no es recomendable hacerlo con un blog activo
3. Paciencia, paciencia y mucha mas paciencia

Nota:  Al mismo tiempo que escribo este curso ire publicando 2 cursos alternos, uno de HTML y otro de CSS, siendo estos dos los lenguajes que mas usaremos en blogger, seria interesante que los revisaras de vez en cuando ya que encontraras algunos "trucos" que no se detallaran en este curso. No obstante, ten cuidado,  porque no todo el lenguaje HTML y CSS funciona con blogger.

INDICE

1. Estructura de la Plantilla de Blogger  (se publicara mañana)

Migrar posts de blogger a Wordpress Parte 1

En primer lugar pido disculpas a los escasos usuarios que visitan este blog por la ausencia, pase algun tiempo sumergido en "otros mundos" de la programacion muy ajenos a blogger, pero en fin aqui estoy de vuelta para seguir compartiendo conocimientos con uds.

Este post es el primero de unos 5 en los que voy a hablar sobre como migrar tu blog (blogger) a uno wordpress donde podras tener un control absoluto sobre todos los aspectos. De todos modos no voy a hablar mucho de los beneficios de wordpress en este caso si no lo necesario para la migracion, tal vez en futuros posts se hable del tema.


Nota:  Estos pasos los realize hace mucho tiempo, en un blogger mas antiguo, deberia seguir funcionando talcual, si no fuera asi comentenlo y actualizo el tema cuanto antes. empecemos....

INTRODUCCION

La primera cuestión que hay que tener en cuenta para efectuar la migración de Blogger a WordPress es intentar, en la medida de lo posible, mantener las visitas y los lectores. Ahora debemos tener en cuenta que para ellos hay varios puntos que vienen al caso:

Los posts: Es evidentemente lo principal que uno debe procurar salvar cuando se desea que un blog mantenga el contenido en el cual se ha trabajado durante meses (o años). Para un blog que recién comienza y tiene días puede esto no resultar tan interesante o complejo ya que (si se tienen pocos posts) este proceso puede realizarse a mano, pasando los posts uno por uno.

Los permalinks: Son los enlaces que ya han sido indexados por Google (u otro buscador) o linkeados por alguna otra web (o blog) y que hacen referencia a alguno de nuestros artículos, por lo cual no conviene perderlos ya que aportan una cantidad significativa de visitantes.

El dominio: Si es que tenemos un dominio .com correspondiente a nuestro blog de Blogger solo necesitamos configurar las DNS de nuestro servicio de dominios y luego hacer lo propio para la consola WordPress.

Los feeds: Mantener los lectores y suscritos de un feed se vuelve un problema si es que no se está usando un servicio fuera del sistema, tal como Feedburner. En mi caso este punto fue un error (lo cual me ha llevado a bajar mi índice de suscritos de 280 a 57) que cometí y ya estoy solucionando gracias a una redirección 301 de la cual hablaré más adelante.
Ahora que ya hemos dado una idea de cuáles serán nuestros pasos a seguir se intentará resumir de algún modo cuáles fueron los problemas y las soluciones que se le dieron a cada uno de éstos.

En el proximo post se hablara  de como migrar los posts.

Fuente: Este tutorial no es de mi autoria, es el mismo que yo segui para la migracion de un blog propio, le he hecho algunas modificaciones debido a algunos inconvenientes que tuve en mi experiencia personal. Los creditos del tutorial son para  Tecnologia Diaria donde podran encontrar el tutorial original.

PD: En estos dias este blog sufrira algunos cambios en el diseño para implementar las nuevas herramientas de blogger y conocimientos propios, puede que este inaccesible de a ratos, desde ya disculpen las molestias.

KOMPARTIR NO TIENE LIMITES!!!

Recuperar Correos Eliminados

En vista de la multitud de mensajes y mails que he recibido pidiendo ayuda para recuperar los mails eliminados de la papelera del correo electronico desde que inicie este blog me decidi a postear la explicacion al tema.

en pocas palabras:

ES IMPOSIBLE RECUPERAR DATOS ELIMINADOS DEL CORREO

La razon es simple todos los mails que recibes estan alojados en un servidor remoto (hotmail, yahoo, gmail,etc) y al elimnarlos es imposile recuperarlos.

Si el mail eliminado aun esta en la papelera puedes recuperarlo y si usas outlook tambien para recuperarlos del outlook hay programas como para recuperar cualkier dato que hallas eliminado de tu pc.

Si quieren probar este software dirijanse a la siguient web tutorial:

http://www.ayudadigital.com/Manuales_informatica/recuperar_archivos_borrados.htm

En cuanto a los pedidos de recuperar contraseñas de correo robados o saber las contraseñas de sus novi@s les pido que en el mail adjunten los siguientes datos:

Direccion de correo electronico

¿cuando y como perdiste tu contraseña?

¿por que deseas recuperarla?

Hacke mate no averiguara la contraseña de tu novi@ si la kieres preguntasela a el/ella. No somos detectives privados ni crackers.

CAMBIA EL FONDO DE TU BLOGGER

Como ya explike en posts anteriores blogger, aparte de ofrecernos una muy limitada cantidad de plantillas (templates) y colores para nuestro blog (todas ella muy pateticas haciendo k todos terminemos con la clasica minima black) tambien nos da la posibilidad de modificarlas haciendo uso del codigo HTML.
Dichas modificaciones pueden darse utilizando una plantilla predeterminada como base, o bien partiendo desde cero. Yo optaria por la primer opcion a menos k ya estes avanzado en lo k codigo html para blogger se refiere (recordemos que el html que usamos en blogspot tiene muchas diferencias con el de una pagina web u otros blogs como wordpress, esto es porque cada servicio nos limita en cuanto a codigo se refiere)

Por lo tanto este post esta dirigido exclusivamente a "blogspot" o "blogger" (no lo intenten con otros servicios)

BACKGROUND BLOG

si tuvieramos algo de nocion de ingles o programacion con solo leer el codigo de nuestra plantilla podriamos deducir de que manera cambiar nuestro fondo, tambien veriamos que nuestra plantilla (en caso de que uses alguna bajada y no de blogspot) posee multiples imagenes de fondo: fondo de cabecera, de los widgets (modulos), el pie de pagina, el fondo de los posts , comentarios, etc....

En este tuto les voy a explikar como cambiar el fondo principal unikamente. El resto de backgrounds pueden hacerlo por intuicion leyendo el codigo, y si se les complika me lo piden y se los expliko en otro post.

ELEGIR LA IMAGEN APROPIADA

Vamos a partir de una imagen con un tamaño de 1024x768 pixeles, actualmente es la resolución de pantalla más utilizada. La imagen que hayan elegido para fondo de su blog tendran que alojarla en algun hosting gratuito como imageshack o photobucket. por informacion acerca de hosting de imagenes lee este post

una vez alojada en el hosting k hayas elegido copia el LINK DIRECTO a dicha imagen. recuerden k en el viejo post acerca de hosting de imagenes (el link aki) hablabamos de 4 links o codigos a nuestra imagen, el k vamos a utilizar para el codigo de nuestro fondo y de casi cualkier programacion k hagamos es el DIREKTO osea debe tener este formato:

http://i338.photobucket.com/albums/n413/nombre de tu cuenta en photobucket/nombre de tu archivo.jpg

INSERTANDO EL FONDO

Vamos a nuestro panel de control (http://blogger.com/home)y seleccionamos la pestaña diseño:



Nos encontraremos con la siguiente pantalla:



En esta seccion vamos a seleccionar la pestaña "seleccionar plantilla nueva" en caso de kerer cambiarla, o "edicion html" para conservar la nuestra (recuerden k kuando trabajamos con plantillas es ideal guardar el codigo antes en un block de notas, por si las dudas)




si solo keremos editar la k ya tenemos vamos direkto a esta imagen (clickeala para ver el codigo):



Ya en el kodigo nos situaremos en el "body" de nuestro codigo:




Dentro de las llaves insertaremos el siguiente código:

background: url( "aqui la url de la imagen que hemos guardado anteriormente" ) no-repeat;

aka tienen unas variaciones en cuanto a la propiedad del fondo:

vamos a cambiar el "no-repeat" por la k keramos:

no tengo ni idea para ke s: inherit
no repetir. no-repeat
repetir (mosaico): repeat
repetir a lo ancho: repeat-x
repetir a lo largo: repeat-y

estas no las probe funcionan con todas las webs no se si con blogger tambien las dejo pro las dudas:

para k el fondo kede fijo y al hacer scroll solo se desplaze el texto: fixed
lo contrario a la anterior: scroll
posiciones del fondo :

abajo: bottom
arriba: top
derecha: right
izkierda: left
centrado: center


si alguna de las variaciones no funka prueben cambiar el "no-repeat" del codigo k les deje por:

para repetir ponen esto: background-repeat: no-repeat (o la k desees)
para la posicion ponen esto: background-position: center (o la k desees)
para dar scorlling o no al fondo: background-attachment: fixed (o la k desees)

con un poko de suerte podemos conseguir estos resultados:




Eso es todo en kuanto a background blog creo si falta alguna info avisen.

"KOMPARTIR NO TIENE LIMITES"

Hosting, Dominios Y Subdominios

¿que es el hosting?


Hosting es una palabra del Ingles que quiere decir dar hospedaje o alojar.

(Alojamiento web, webhosting, alojamiento de una página web). Servicio que ofrecen algunas compañías (los webhost) en Internet que consiste en ceder un espacio en sus servidores para subir (alojar, hostear) un sitio web para que pueda ser accedido en todo momento de forma online.

Suelen contar con diversos planes con distintos precios para distintas necesidades. Para armar los distintos planes suelen limitan el espacio en disco, el bandwith, las plataformas y las herramientas y recursos que ofrecen.

¿que es un dominio?


Un dominio o nombre de dominio es el nombre que identifica un sitio web. Cada dominio tiene que ser único en Internet. Por ejemplo, "www.masadelante.com" es el nombre de dominio de la página web de Masadelante. Un solo servidor web puede servir múltiples páginas web de múltiples dominios, pero un dominio sólo puede apuntar a un servidor.

Un dominio se compone normalmente de tres partes: en www.masadelante.com, las tres uves dobles (www), el nombre de la organización (masadelante) y el tipo de organización (com).

Los tipos de organización más comunes son .COM, .NET, .MIL, y .ORG, que se refieren a comercial, network, militar, y organización (originalmente sin ánimo de lucro, aunque ahora cualquier persona puede registrar un dominio .org).

Puesto que Internet se basa en direcciones IP, y no en nombres de dominio, cada servidor web requiere de un servidor de nombres de dominio (DNS) para traducir los nombres de los dominios a direcciones IP. Cada dominio tiene un servidor de nombre de dominio primario y otro secundario.


¿que es un subdominio?

un subdominio es un dominio dentro de otro Ej: Mi Cuenta de iespana (donde alojo los archivos de descargas) es "engendrodemaldad"
por lo tanto mi dominio es:

http://iespana.es

y mi subdominio es:

http://engendrodemaldad.iespana.es


¿que es redireccionar?


En el Plan Redirect, el servidor Web no almacena páginas, sino que devuelve una dirección destino a la que el navegador debe dirigirse. En ese momento el navegador cambia la dirección web que muestra en la barra de direcciones, deja de aparecer su nombre de dominio y aparece la dirección destino. Esto puede evitarse mediante una página de frames que hará que la barra de direcciones quede estática mostrando siempre su nombre de dominio.


EJEMPLOS Y LINKS UTILES

Podria poner una extensa lista de planes de hosting free o pay pero en vista de k este blog esta pensado para Dummies se las voy a hacer facil y les dejo un par de los mejores y ya probados por mi. En caso de buskar alternativa pueden consultar o buskar en "santa google"

PLANES DE HOSTING

IESPANA

Espacio: 100 Mb (tengo una kuenta hace 6 años en este host la kual ya tiene 150 Mb y me sigue marcando 0% de espacio utilizado, creo que es por la antiguedad)
FTP propio: NO
Publicidad: Un banner gigantezco en la parte superior de la pagina.
Precio: Free
URL: http://web.iespana.es/

WEBHOST

Este es el k uso ahora (exelente!)

Espacio: 250 Mb
FTP propio: SI
Publicidad: No
Precio: Free
URL: www.000webhost.com

EJEMPLOS DE DOMINIOS

No existen los dominios .com/.org,etc gratuitos. Por lo k no voy a dar ejemplos. Si vivis en uruguay y queres contratar un dominio dirigite a estas webs:

www.anteldata.com.uy
www.montevideo.com.uy

EJEMPLOS DE SUBDOMINIOS

Esto de los subdominios es una trampa a veces ya k la mayoria te agregan un subdominio ajeno (los free) por ejemplo Mi pagina oficial en su viejo hosting tenia esta url:

www.engendrodemaldad.iespana.es/index.html

Y estos son los subdominios k probe:

WWW.geocities.darkend.es
www.darkend.2a3.net

y hay millones ams de este tipo por lo tanto no voyt a dejar links el k los kiera buske ya sabe donde.
Pero para los k viven en argentina (o exterior pero posean domicilio legal en argentina) les tengo un buen link.
¡Argentina pais generoso! LOS DOMINIOS .COM.AR SON GRATIS!!!!!!!


eNTREN A ESTA URL: WWW.NIC.COM.AR el regiustro es complikado para los Dummies asi k si se trankan con los DNS pidan ayuda y les hago un tuo de komo registrar los DNS.

EJEMPLOS DE REDIRECCIONAMIENTO

creo que esta es la mejor opcion para los k viven en uruguay es la k uso yo desde k empeze a diseñar webs y hoy en dia tengo ,mas de 40 vuentas registardas en etsa web

TOKELAU RENOMBRANDO LA INTERNET!!!!


Dot TK es una empresa conjunta del Gobierno de Tokelau, un país en el Pacífico Sur, la compañía de comunicación del país Teletok y BV Dot TK, una compañía privada. El Gobierno de Tokelau ha designado BV Dot TK como la entidad exclusiva de inscripción. BV Dot TK desarrolla sus negocios a través de Dot TK Registry.

BENEFICIOS: Si tenes tu web en un host k aporta publicidad tu subdominio .tk la eliminara, (ya no kemarse buskando hosting sin publicidad) derecho a ilimitados subdomios dentro d euna misma cuenta, y lo mejor de todo: ES GRATIS

URL: www.dot.tk

La vieja pagina k les decia de iespana la tienen aka : www.darkend.tk (para k vean el resultado)

¿para k karajo me sirve esto en blogger?

como k para k.... veanlo con sus propios ojos:


http://darkend-blog.blogspot.com/

el mismo blog en .tk:

www.4thepeople.tk

ESPERO LES SIRVA DE ALGO REKUERDEN K PUEDEN KONSULTAR ONLINE CON EL PIRVATE MSN DE PLUGOO. KOMENTEN!!!!!

Insertar Multimedia En Blogger

Respondiendo a la pregunta de como insertar .exe en blogger:

Nunca habia usado un ejecutable(.exe) en una web por lo k no tenia ni idea, pero si no me ekivoko NO se puede.
La unika manera es transformandolo a pelicula flash(.swf)
al final del post dejo el programa para convertir los archivos.



INSERTAR CONTENIDO MULTIMEDIA


Para insertar cualkier contenido multimedia (imagenes, flash, video, etc) lo primero k debemos hacer es subir nuestros archivos a un hosting.
En blogger se peuden subir imagenes directamente de neustra pc y estos kedan archivados en el hosting de blogger pero...¿porque no usar este entonces?
POR COMODIDAD el editor de diseño k nos ofrece es una BASURA! no nos keda otra k utilizar el codigo html para k las kosas keden komo keramos.

HOSTING

Lo primero es crearse una cuenta en el hosting k keramos (photobucket, ImagesHack..)
yo re comiendo el primero




Link: www.photobucket.com

nos creamos la cuenta , damos nombre al album y lo editamos haciendo click en el boton azul "CHOOSE FILES"
Luego de subir nuestras imagenes (.bmp,.jpg,.gif,.png), videos (.3gp,.mov,.mpeg)o peliculas flash (.swf) Automaticamente photobucket nos crea el codigo para lo k keramos hacer (ESTO ES PARA LAS IMAGENES SOLAMENTE):

Ajuntar a correo electronico y obtener link

Copia el codigo de las casillas "E-mail & IM" o "Direct Link" (son iguales)

Insertar en Blogger u otros Blogs

Copia el codigo de la casilla "HTML Code" (atenti, en algunos blogs(no-blogger) funka distinto si no inserta la imagen asi proba los demas codigos)

Insertar En Foros Y Webs (no-blogger)

Copia el codigo de la casilla "IMG Code" funciona en la mayuoria de los foros, blogs y webs, exeptuando blogger.

INSERTAR EN BLOGGER

Con un click en la casilla copia automaticamente el codigo
¿Y donde lo pego?
Donde se te kante!!! en el lugar k pongas el codigo va a aparecer la imagen o flash o lo k sea si ademas keres centrarla agregale el codigo k di en el post "codigos utiles" Ahi tenes todos los kodigos basicos sabiendo usarlos vas a poder dejar tus entradas como si estuvieras usando un editor web profesional (el codigo hmtl es profesional)

Advertencia de Archivos!!!!!!

al poner un codigo co un link a la imagen esta va a aparecer intacta (sin escalar) osea ojo kon las grandes!!! modifiken las dimensiones (ancho y alto) antes de insertar. Advertencia .swf: phtobucket te admite hasta 3 Mb de archivos flash sin pagar. trata de k pesen menos k eso, de lo contrario buska otro servidor de hosting. (PROXIMO POST: Servidores de Hosting gratuitos)

OTROS METODOS


Ahora el tema es simplifikar el trabajo para no etener k estar abriendo el puto photobucket cada vez k keramos insertar una imagen.

METODO 1: "Robar hosting" :
Estas navengando en la red, viste una imagen y te gusto listos!! es mia! En MOZILLA FIREFOX: Click derecho en la imagen seleccionas "copiar ruta del enlace" luego ponemos insertar imagen en la entrada de blogger y pegamos el link en la casilla "url" .

METODO 2: "COPIAR PEGAR":

Si no keremos usar photobucket Usamos el editor del orto de blogger(solo sirve con las imagenes) percatandonos de esto: cuando insertamos una imagen esta siempre aparece arriba. damos un par de enters al principio de la entrada, insertamos la imagen, hacemos tres clicks en el kodigo arriba de todo (el k kreo blogger kuando insertamos la imagen) lo cortamos y lo pegamos donde keremos k aparezca la imagen.

PARA K APAREZCA EN LA CABECERA

editamos la cabecera y en lugar de examinar la imagen ponemos el link directo de la k subimos al hosting.


INSERTAR FLASH

copiate este codigo:

<object height="AltoSWF" width="AnchoSWF"><param name="movie" value="Enlace que copiamos de photobucket"><param name="wmode" value="transparent"><embed src="Enlace que copiamos de photobucket" type="application/x-shockwave-flash" wmode="transparent" height="AltoSWF" width="AnchoSWF"></embed></object>

suplanta todo lo k esta en negrita por los datos de tu swf y pegalo donde keres k aparezca.

INSERTAR VIDEO YOU TUBE

buska el video k kieras mostrar a la derecha en los datos del video copia el codigo del campo "embed" (insertar) y pegalo donde kieras

INSERTAR VIDEO PROPIO

me kanse mañana lo re edito....

CODIGOS PARA LAS PLANTILLAS

para crear tus propias plantillas, insertando imagen de fondo y poor donde kieras, o poner un swf en la kabecera deberias leer el post "codigos utiles" si no esta muy claro o falta algo y a alguien le interesa dedico otro post a esta parte.


TRANSFORMAR ARCHIVOS .EXE A .SWF

DESCARGATE ESTE PROGRAMA:

DREAM FLASHEE 1.3

pesa menos de dos megas y no kome ningun recurso aparte de sencillo de usar.

tiene un keygen dentro del rar saken la klave para dejarlo full.

SUERTE!!