Final final...

Con dolor en el alma deseo anunciarles que debido a proyectos más importantes me veo obligado a finalizar el mantenimiento de este blog, pero lo he reemplazado por dos de mis más grandes aficiones: las películas y el SO android.
Estrenando nueva interfaz y esperando mis vacaciones, los dejo con el blog del Cinemaniaco Extremo

¿Como poner pestañas a tu blog?

Nuevamente, algo mas para personalizar tu blog (este acabo de probarlo) todos los derechos de este procedimiento no son de mi autoridad, solo estoy comunicándolo sin obtener beneficios, ya que eso quedo claro: procedamos

Primero que todo, necesitan tener todas sus publicaciones etiquetadas (categorías) o van a tener problemas; si no saben lo que es una categoría, es la misma Etiqueta que se le pone a las publicaciones abajo antes de enviarlas, ayuda mucho para mantener un orden y al momento de que nuestros visitantes deseen información en cierta categoría.

Como la mayoría de arreglos en el blog, debemos dirigirnos a la edición HTML de la plantilla en la sección "Personalizar" o "Diseño"

* Seleccionamos la opcion "Habilitar plantillas de Artilugios"
* Buscamos el codigo: -class='header'- (en algunos casos estará en comillas dobles, tengan cuidado de mantener eso)
* El contenido de esa seccion contiene las propiedades maxwidgets="1" y showaddelement="no", las modificamos para que sean "2" y "yes" respectivamente
* Ahora, buscamos el codigo ]]></b:skin> y justo antes de dicho codigo, agregamos TODO esto:

/*- Menu Tabs F */

#tabsF

{
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;
}
#tabsF ul

{
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li

{
display:inline;
margin:0;
padding:0;
}

#tabsF a

{
float:left;
background:url("http://3.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qIJ35QkI/AAAAAAAAGxQ/t48-cC0Ogkk/s400/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabsF a span

{
float:left;
display:block;
background:url("http://1.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qMJVnJmI/AAAAAAAAGxY/K6ntns2CUvI/s400/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}

#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

* Guardamos los cambios y nos dirigimos a la seccion de diseño, donde agregamos los gadgets: entonces seleccionamos la opción de agregar uno nuevo (recomiendo ubicarlo en la parte superior debajo del encabezado) y escogemos "Etiquetas". Guardamos y regresamos a edicion HTML
* Buscamos (con artilugios habilitados) el siguiente codigo:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y lo reemplazamos con:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Eso es todo! ahora al guardar y actualizar, veremos en la parte superior sobre las entradas, un menu de etiquetas con nuestors temas... cabe mencionar que si no somos muy ordenados y tenemos muchas, será grande y no se vera bien, si desean cambiar el estilo de las pestañas, pueden encontrar mas ayuda AQUI

Espero sus comentarios

XAMPP: Primeros pasos

Bueno, como les mencione hace poco, en esta ocasión vamos a aplicar los conocimientos que adquirieron en el anterior tutorial (HTML) para familiarizarnos con el entorno de un servidor Web Simulado; existen muchas herramientas separadas que cumplen con las funciones necesarias... pero como apenas algunos estamos aprendiendo, en Internet se encuentran algunos "Paquetes" para principiantes, los cuales contienen las aplicaciones mas utilizadas y se instalan-configuran de manera automática.  El dia de hoy vamos a trabajar con XAMPP y otra herramientas.

¿Que vamos a necesitar?

*  Un PC (¬.¬)U

*  Tener un sentido de organización racionalmente aceptable (es necesario o vamos a terminar con muchas copias de lo mismo)

*  Windows XP de Preferencia (Vista da algunos problemas y Win7 pues... lo dejo a su criterio, es solo para evitar posibles errores de los cuales yo no pueda darles soporte)

*  Tener conocimientos básicos de HTML (AQUI) y si desean algo de comodidad, conocer el entorno de Macromedia Dreamweaver (Version 8 o MX recomendado, las nuevas de Adobe, son muy cargadas para principiantes) y Photoshop
*  Aunque suene tonto, es necesario decirlo:  Deben estar familiarizados con el entorno Windows, saber en donde están ubicados los archivos que trabajaremos y aquellos que se instalaron; para asi llegar rápidamente a carpetas, descomprimir archivos en formato WinRAR y también un poco de conocimiento en ingles no hace daño.
* Jdownloader nos va a ayudar en las descargas

¿Que necesitamos descargar? (Nota: Las descargas opcionales no afectan el desempeño del aprendizaje, pero permiten un control mayor en nuestro trabajo; como son opcionales, no voy a profundizar en su manejo mas que lo necesario en Dreamweaver para enlazarlo con Apache)

* XAMPP 1.7.3 Español

* Bloc de notas o cualquier editor de texto, entre mas sencillo mejor
* OPCIONAL: Suite Macromedia 8 (Contiene Dreamweaver, Flash, Fireworks y su respectiva 'Licencia')
* OPCIONAL: Dreamweaver 8 Por si no tienen una conexión rápida y solo desean trabajar esta aplicación
* OPCIONAL: Adobe Photoshop CS2, Traduccion a Español y 'Licencia' Con este programa podrán divertirse editando sus imágenes al gusto

Antes de iniciar, un poco de referencia:

¿Que es xampp?  XAMPP es un servidor independiente de plataforma, software libre, que consiste principalmente en la base de datos MySQL, el servidor Web Apache y los intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del acrónimo de X (para cualquiera de los diferentes sistemas operativos), Apache, MySQL, PHP, Perl. El programa está liberado bajo la licencia GNU y actúa como un servidor Web libre, fácil de usar y capaz de interpretar páginas dinámicas. Actualmente XAMPP esta disponible para Microsoft Windows, GNU/Linux, Solaris, y MacOS X..

En pocas palabras:

* XAMPP: Contiene las tres aplicaciones que mas se usan en las practicas

* Apache: Emula un directorio de nuestro equipo como si fuera una dirección web, llamada 'localhost' (discutiremos eso mas adelante)

*  PhP:  Interprete de lenguaje para pagina web, de momento no es necesario ya que vamos a trabajar con HTML sencillo, pero mas adelante vamos a sacarle provecho

*  MySQL:  Sera el administrador de bases de datos (algunos en la universidad ya lo habrán conocido,  -Oracle- ó su hermano de microsoft -SQL Server-) De momento tampoco lo usaremos pero ya mejor dejarlo disponible para mas adelante

NOTA: Si alguno ya esta trabajando con Visual Studio, sea 6.0, 2005 o 2008-2010, no hay problemas de conflictos, a menos que tengan Vista o Win7, en cuyo caso de momento no conozco soluciones, algún inconveniente sírvanse de colocar aquí sus comentarios o de revisar ESTE enlace

Ahora a lo que venimos:

INSTALACION XAMPP:

*  Primero que todo, ya descargaron XAMPP? vale
*  Ejecutemos la aplicación.
*  Primera ventana: Clic en Install (Mas adelante se vera todo en español, tranquilos)
*  Tardara un poco... paciencia; mientras es un buen momento para ir preparándonos; abramos una ventana de navegador (IE, Firefox) y otra de explorador de archivos, veremos que se creo una carpeta en la ruta 'C:\xampp\'

*  Ya que termino de extraer, se abrira una ventana de comandos (D.O.S), responderemos las preguntas:
    1. Should I add shortcuts to the startmenu/desktop? (y/n): y
    2. Should i locate the patch correctly? (y/n): y
    3. Should i make a portable XAMPP? (y/n): n
    4. XAMPP Installed correctly, pres return (damos enter)
    5. I have set the timezone in 'php.ini' and 'my.ini' to "America/New_York" (Esta es automatica, reconoce la zona horaria del equipo, damos enter)
    6. Ahora saldrá una lista de opciones, en la cual escribiremos 'x' y luego enter

Felicidades!!! si todo marcho bien, tenemos instalado XAMPP, un acceso directo en escritorio y la carpeta en C.\xampp\

Ejecutemos el acceso directo, el del icono Naranja 'XAMPP Control panel' se debe ver asi:

A veces puede variar dependiendo del equipo... de ser así, lo primero que debemos hacer es detener los que estén activos (damos clic en todos los que digan 'Stop') y luego seleccionamos el Svc de los tres primeros, nos saldrá una confirmación, la cual aceptamos... entonces si procedemos a Iniciar ('Start') en orden: Apache, MySQL y Filezilla.

Bien, ahora tenemos instalados los tres servicios y están en ejecución, vamos a probar que apache este funcionando; en la ventana de explorador internet (IE, Firefox) escribimos simplemente 'localhost' (sin www, sin comillas), si todo marcha bien, saldrá una sencilla pagina con el logo de XAMPP y la selección de idioma; le ponemos español y luego saldra esto:

Apache funciona!!! entonces les voy a explicar la estructura que maneja:

La ruta 'c:\xampp\htdocs\' es la ruta que emula un servidor web, es la que llamamos en el navegador como 'localhost' y por defecto carga la pagina inicial del panel XAMPP.

Es en esta carpeta 'htdocs' donde vamos a colocar nuestros proyectos, de preferencia en una carpeta dentro de 'htdocs' para mantener el orden; en esta primera prueba, creamos una carpeta llamada 'hola', la cual quedara ubicada en 'c:\xampp\htdocs\hola'

Si ya tienen conocimientos en HTML, pueden colocar alguno de sus archivos en esta carpeta

Vamos a ejecutar el bloc de notas (o el editor de texto de su gusto, mas adelante colocare otro tutorial para dreamweaver) y dentro de el escribiremos este código:

<HTML>

  <HEAD>
    <TITLE>ejemplo hola mundo</TITLE>
  </HEAD>
  <BODY>
    <P>Hola Mundo</P>
  </BODY>
</HTML>

Ahora guardamos el documento como 'index.html' en la ruta 'c:\xampp\htdocs\hola'

Regresamos a nuestro navegador, en la barra de direcciones escribimos 'localhost/hola/index.html' O arrastramos el archivo al navegador, veremos el resultado de la prueba como una sencilla pagina web, con titulo y contenido.

Algunos dirán: 'Para que tanto enredo si antes de instalar XAMPP yo podia ver mis trabajos de la misma manera? pues haciendo esto, se conoce el funcionamiento de un servidor web, ya que cuando vayamos a subir paginas a un host real, se deben llevar a cabo ciertos procedimientos y dependiendo del servicio contratado, puede que incluso vuelvan a ver esta carpeta 'htdocs'

Bueno, con esto termino los pasos para instalar y probar XAMPP, espero les fuese de ayuda y recuerden que en proximas entregas dare informacion para conectar dreamweaver con apache y otras cosas mas

Alguna duda, pueden comentar

Lo que querias saber sobre HTML

Hola, esta vez quiero compartir con los usuarios un tutorial corto pero esencial para iniciar en ese mundo del HTML que es clave si queremos luego adentrarnos en aguas mas profundas, sea PhP o ASP

Manual Basico de HTML

Recuerden que para manejar HTML básico, no necesitan ninguna aplicación mas que el bloc de notas de Windows; Se puede usar Dreamweaver, Visual Studio y similares, pero la facilidad que estas herramientas le dan al diseño, evita que se aprenda en verdad los fundamentos, sugiero que luego de familiarizarse con el código HTML, entonces si se pasen a algun editor de codigo de su gusto

NOTA: Si siguen pendientes de mis publicaciones, iran conociendo Dreamweaver y les daré una introducción a PhP junto con un tutorial para montar nuestro propio servidor web de pruebas con XAMPP

Para los maniaticos del Orden

Si eres como yo, que le gusta saber que tiene en su memoria USB y desea tener una copia lo mas actualizada en otro lugar en caso de perdida de información (sea robo, un bajón de energía o un borrado por incompetencia de los colegas de estudio y trabajo) entonces Free FileSync es lo que esperabas...

Aunque Windows tiene su herramienta Maletín, la cual sirvió bien en su época; últimamente tiene muchos conflictos con los sistemas operativos nuevos (En Vista es casi restrictivo y en Win7 aveces ni aparece) asiq ue decidí optar por una aplicación fuera de microsoft, descargala qui:.

Free FileSync v3.3

El proceso es facil; solo debes tener tu memoria USB o dispositivo de almacenamiento con la carpeta que contenga tu información valiosa, le haces una copia completa en tu disco duro y comenzamos:

(En este punto debemos tener dos carpetas con el mismo contenido pero en diferente lugar (Disco y memoria USB)

Luego de instalado el programa (no hay complicaciones en ese paso así que lo voy a omitir) saldra una interfaz similar a la del explorador de archivos de windows, con dos columnas principales, la de la izquierda sera la que asignemos a los archivos en nuestra USB (principal) y la derecha a los del Disco Duro (respaldo)

Para asignar las carpetas, hacemos click en los botones navegar y seleccionamos la carpeta respectiva a cada lado...

Luego hacemos una prueba: clic en el botón grande que dice "Comparar"

ASI FUNCIONA:  En el lado izquierdo, se asigna la memoria USB porque es la que mantendremos en constante cambio (nuevos archivos, modiicar antiguos y asi) al comparar, se revisa los cambios recientes despues de la ultima comparación y luego nos presenta la lista de archivos, con los cambios que se van a realizar; por defecto, la acción es agregar o borrar archivos en el lado derecho para que concuerde con el lado izquierdo, asi que es recomendable solo trabajar con la memoria USB, pero si por algun descuido realizamos cambios en el contenido del lado derecho (respaldo en el disco duro),no hay problema, se pude seleccionar manualmente la accion a realizar, como esta en español, no sera problema

Cuando tengamos cambios en la USB, al comparar, saldra la lista con diferencias, a lo cual luego haremos clic al botón "Sincronizar" y el programa aplicara los cambios que hicimos en nuestra memoria USB al respaldo en el disco duro.

Eso es todo, alguna duda comenten XD

Ponle Nieve a tu Blog

En esta ocasión, voy a compartir un truco para ponerle efecto de nieve al blog (El que pueden ver en este momento) no he confirmado si funciona con otro tipo de paginas, pero con HTML parece salir bien.

NOTA: Se ve mejor en paginas de diseño oscuro, pues es nieve blanca (¬_¬ )U

PROCEDIMIENTO (Sencillo)

Necesitaras editar el código HTML de la plantilla de tu blog, en los blog de este tipo:

*  En la parte superior del blog (tienes que estar activo en log-in) selecciona "Personalizar"

*  Luego buscar la pestaña "Edicion de HTML"

Seria muy recomendado que tengan conocimientos de HTML pero aun si no los tienen es fácil:

*  Se ubican en el area de codigo (cualquier parte) y buscan (Ctr+F o Ctr+B segun el navegador) la siguiente entrada: sin comillas "</body>

*  Luego de localizado, colocan el siguiente código JUSTO ANTES de la etiqueta

(No es obligatorio ponerlo ahi, pero si no conoces de HTML así evitas dañar el código de la plantilla, para conocedores, usenlo a su criterio XD) Sin comillas:

"<script src='http://inacho07.googlepages.com/snow.js' type='text/javascript'> </script>"

Luego guardan la plantilla (si se sienten inseguros, hagan una copia de seguridad de la plantilla, arriba del menu esta la opción "Descargar Plantilla completa")

Y entren a su blog principal... si todo marcha bien (tienen Jcript activado y no hay restricciones de seguridad), verán una suave nieve cayendo a través de la pagina XD

No creo que sea necesario pero lo voy a decir; si tu pagina es de fondo blanco, no se va a notar mucho la nieve, pero si tienes un logo principal oscuro, el efecto se vera como si solo cayera nieve en el logo... es cuestión de creatividad y esa parte se las dejo a ustedes...

Alguna duda dejen sus comentarios, gracias y disfruten XD

La Herramienta que vamos a Necesitar

Se llama JDOWNLOADER y va a quitarle el dolor de cabeza a muchas de las personas que gustan de descargar archivos alojados en Megaupload, Rapidshare y similares

Es un gestor de descarga desarrollado en Java, que tiene la capacidad de reconocer los Captchas (aquellos que pedían introducir las letras en pantalla) y de crear una lista con descargas programadas, ahorrando tiempo que se puede usar para cosas mas útiles, aparte de que tiene opciones para descomprimir los archivos descargados (en caso de ser rar o zip) y de unir partes segmentadas (con hacha o jsplitter)

Una herramienta muy útil y con gran potencial de desarrollo, ademas de que facilitara descargar las cosas que voy a poner a partir de ahora en el blog

Descargalo Aqui

Instrucciones

El archivo descargado (RAR) contiene un instalador ejecutable muy fácil de seguir, escogemos la ruta de instalación (recomiendo si tienen una partición adicional, mejor ponerla ahi y no en C, por eso de que últimamente hay muchos virus y no queremos perder las cosas descargadas)

El entorno es muy intuitivo, aparte de que viene en español, se lleva de maravilla con Firefox (no se como sea con el Internet Destroyer), tiene un centinela que esta revisando constantemente si copiamos enlaces a la papelera (Ctr+C), revisa si el enlace esta activo (o fue borrado del servidor) y luego podemos agregarlo a la lista de descarga, ponerlo en el orden que queramos y el consumo de ancho de banda es muy permisivo, permitiendo navegar (algunos gestores sacaban la velocidad máxima de la conexión pero no permitían siquiera entrar a Google)

Y para aquellos que les gusta tener todo controlado, permite seleccionar cuantas descargas simultaneas por servidor (para cuentas premium) o cuantas descargas simultaneas en general pueden llevarse, al terminar todas las descargas incluso podemos dar la opcion de que se apague el equipo o ejecute otro programa... bueno esas cosas se las dejo a ustedes para que las descubran

Enjoy!