domingo, 14 de noviembre de 2010

Agregar campos en el formulario de registro joomla 1.5x

Hace poco tuve la necesidad de agregar más campos un formulario de registro para nuestro joomla 1.5x, entonces como buen investigador me di en la búsqueda de aquella valiosa información y lograr minimizar los costos de mi cliente.

Pues bien, lo que encontré es que se puede hacer mediante un componente que se llama Community Builder, pero a mi modo de ver es un componente muy extenso para solo añadir un par de campos nuevos en nuestro formulario de registro, sin embargo también es una salida.

La solución que vi más viable fue modificar nuestras tablas en la base de datos y en un par de archivos de nuestro gestor de contenidos gracias a un foro que encontré en internet ( http://www.joomlaspanish.org/foros/showthread.php?t=31225 ):


" Hola a todos:
hace unos días tuve que añadir unos cuantos campos al registro de usuarios en Joomla 1.5.7 y tras buscar en el foro vi que no estaba bien documentado para esta versión, pero si para Joomla 1.0.xx.

Despues de navegar un poco por la red encontré como hacerlo y de paso lo he traducido para ponerlo a disposición de quien lo necesite.

Saludos!

Advertencia: El siguiente ejemplo implica modificar el código del núcleo de Joomla. Esto conlleva una serie de riesgos si se realiza mal, como la posible perdida de funcionalidad del componente de registro y la necesaria reconfiguración del sistema para poder recuperarlo. Por eso es absolutamente necesario hacer copias de seguridad de todos los archivos que editemos para poder volver a la situación original en caso de desastre.


Por supuesto, no me hago responsable de posibles fiascos, yo he realizado estos pasos uno a uno y puedo confirmar que funciona en una instalación limpia de Joomla 1.5.7 en mi servidor de pruebas
# Apache 2.0.59
# MySQL 5.0.41
# PHP 5.2.6

Dicho esto, pasamos a la acción.

La página de registro Joomla normalmente contiene suficiente información para la mayoría de sitios web. Ciertos webmaster que desean mejorar la información del usuario, por lo general, usan el component Community Builder que ampliar los campos del registro. Sin embargo, es totalmente posible crear nuevos campos del registro sin necesidad de instalar otros componentes, mediante la modificación de algunas líneas en el código del core de Joomla. Aquí te indicamos cómo hacerlo.

En este ejemplo, vamos a añadir los campos Negocio y Teléfono al formulario de registro de usuarios, sin embargo esto solo es un ejemplo y puedes modificarlo para agregar el campo que quieras

El primer paso es agregar los campos campos a la tabla de usuarios en nuestra base de datos.
Nosotros usaremos el phpMyAdmin para realizarlo, pero puedes realizarlo de otra forma si conoces como. Las siguiente consultas en SQL añaden estos campos:



ALTER TABLE jos_users ADD business VARCHAR (100) NOT NULL AFTER name;


y despues


ALTER TABLE jos_users ADD phone VARCHAR (100) NOT NULL AFTER business;



Una vez que se hayan creado las columnas, verifica que se han creado correctamente y comenzaremos a modificar código de 4 archivos de joomla

Segundo paso, modificar el archivo libraries/joomla/database /table/user.php para insertar los nuevos campos. Un avez abierto buscamos estas lineas de código


var $name = null;

      /**

      * The login name

      *

      * @var string

      */

      var $username = null;



e inmediatamente después añadimos estas dos lineas (en este caso con las variables bussiness y phone, pero ya sabes que podrás usar otras siempre que el mantengas el nombre de las variables para todas las lineas de código que agregues)


var $business = null;

    var $phone = null;



Tercer paso, modificar el código que muestra la página de registro en el archivo components/com_user/views/register/tmpl/default.php Una vez abierto el archivo buscamos el siguiente código:


<tr>

<td width="30%" height="40">

<label id="namemsg" for="name"><?php echo JText::_( 'Name' ); ?>: </label> </td>

<td>

<input type="text" name="name" id="name" size="40" value="<?php echo $this->user->get( 'name' );?>" class="inputbox required" maxlength="50" /> * </td>

</tr>



he inmediatamente despues añadimos:


<tr>

    <td width="30%" height="40">

    <label id="businessmsg" for="business"><?php echo JText::_( 'Business' ); ?>: </label> </td>

    <td>

    <input type="text" name="business" id="business" size="40" value="<?php echo $this->user->get( 'business' );?>" class="inputbox required" maxlength="50" /> * </td>

    </tr>

    <tr>

    <td width="30%" height="40">

    <label id="phonemsg" for="phone"><?php echo JText::_( 'Phone' ); ?>: </label> </td>

    <td>

    <input type="text" name="phone" id="phone" size="40" value="<?php echo $this->user->get( 'phone' );?>" class="inputbox required" maxlength="50" /> * </td>

    </tr>




Cuarto paso, modificamos ahora el archivo components/com_user/views/user/tmpl/form.php, que es el que muestra los campos a rellenar por el usuario al registrarse, buscamos el siguiente código:



<tr>

      <td width="120">

      <label for="name">

      <?php echo JText::_( 'Your Name' ); ?>:

      </label>

      </td>

      <td>

      <input class="inputbox" type="text" id="name" name="name" value="<?php echo $this->user->get('name');?>" size="40" />

      </td>

      </tr>

      <tr>



e inmediatamente despues añadimos:


<td width="120">

    <label for="business">

    <?php echo JText::_( 'Business' ); ?>:

    </label>

    </td>

    <td>

    <input class="inputbox" type="text" id="business" name="business" value="<?php echo $this->user->get('business');?>" size="40" />

    </td>

    </tr>

    <tr>

    <td width="120">

    <label for="phone">

    <?php echo JText::_( 'Phone' ); ?>:

    </label>

    </td>

    <td>

    <input class="inputbox" type="text" id="phone" name="phone" value="<?php echo $this->user->get('phone');?>" size="40" />

    </td>

    </tr>



Quinto paso, ahora vamos a modificar la página que muestra los datos del usuario en el backend, editando el archivo: administrator\components\com_users\views\user\tmpl \form.php en el cual buscamos el siguiente código:


<tr>

                    <td class="key">

                        <label for="email">

                            <?php echo JText::_( 'Email' ); ?>

                        </label>

                    </td>

                    <td>

                        <input class="inputbox" type="text" name="email" id="email" size="40" value="<?php echo $this->user->get('email'); ?>" />

                    </td>

                </tr>



e inmediatamente despues añadimos este otro código:




<tr>

                    <td class="key">

                        <label for="business">

                            <?php echo JText::_( 'Business' ); ?>

                        </label>

                    </td>

                    <td>

                        <input class="inputbox" type="text" name="business" id="business" size="40" value="<?php echo $this->user->get('business'); ?>" />

                    </td>

                </tr>

                <tr>

                    <td class="key">

                        <label for="phone">

                            <?php echo JText::_( 'Tel' ); ?>

                        </label>

                    </td>

                    <td>

                        <input class="inputbox" type="text" name="phone" id="phone" size="40" value="<?php echo $this->user->get('phone'); ?>" />

                    </td>

                </tr>



Eso es todo, para que funcione correctamente, aunque nos falta un pequeño detalle, tanto en la administración como en la página de registro nos salen las etiquetas Business y Phone, por lo que tendremos que acudir a los archivos de idioma para ponerlo en el idioma de Cervantes, Rosalia de Castro, Ausiàs March o el que corresponda...
En mi caso y asta que saquemos la versión andaluza de Joomla, acudo al archivo languages/es-ES/es-ES.com_user.ini y añado estas dos lineas (aquí donde lo coloques es indistinto...)

PHONE=Teléfono
BUSINESS=Negocio

Con lo que en la parte pública ya estaría traducido, después accedemos a

administrator/languages/es-ES/es-ES.com_user.ini y repetimos la acción, así ya tendremos en nuestro idioma tanto la parte pública como la administración


Ahora tienes un par de campos adicionales en la tabla de usuarios, y más información disponible para su uso.

Asegrate de tener copias de seguridad antes de hacer este cambio!

Espero que te sea útil y solo me queda darle las gracias al usuario de joomla.org jtullous por ponerme en el camino para hacerlo y a usuarios de otros foros que me ayudaron a resolver un pequeño problema de sintaxis en la consultas a MySQL

Espero que os sea útil"


A mi me funcionó perfectamente, aunque no son campos requeridos, para esto hay que estudiar más o pagarle al ingeniero. Te recomiendo que hagas los pasos al pie de la letra porque hay cosas que parecen obvias pero al final la terminamos liando. Ahh y obviamente si tienes dudas o comentarios lo puedes hacer en el foro de donde saqué la info: http://www.joomlaspanish.org/foros/showthread.php?t=31225

Como siempre, si te sirvió o gustó no seas desagradecido enlaza el blog ;)

viernes, 12 de noviembre de 2010

Efecto para banners en flash y as2

Hoy vamos a aprender a hacer un interesante efecto que puede ser utilizado en banners o en lo que se les ocurra.

Sobra decir que toca abrir el flash, pero he encontrado gente que nada le parece obvio, así que “por favor ejecute su flash versión 8 en adelante”.
Ahora le decimos “archivo de flash (AS2)” .
Este tutorial lo voy a hacer con cs4, pero como vengo usando el flash en versiones anteriores la verdad no me acostumbro a tenerlo con la nueva interfaz, así que voy a ventana > espacio de trabajo> clásico.
Configuramos el tamaño que queremos, en este caso 230px X 173px:






Importamos una imagen de fondo ctrl+R, presionamos ctrl+k para que nos salga el panel de alineación y le decimos que nos alinee con respecto a la escena tanto vertical como horizontal.:



Creamos una nueva capa:

Ahora hacemos un cuadro del color que queramos y lo convertimos a clip de película con la tecla F8:


Ahora entramos en el clip dándole doble click al cuadro. Señalamos nuevamente el cuadro y lo convertimos nuevamente en clip de película (F8) para poder animar por movimiento.
Vamos al fotograma número 20 y presionamos F6 para poner un fotograma clave. Luego nos situamos entre los dos fotogramas (1 y 20) y presionamos el click derecho y le ponemos crear interpolación clásica. (Si no convertimos el objeto a click de película el programa nos crea automáticamente el clip, pero cuando tenemos un proyecto grande vamos a tener problemas por utilizar esos nombres genéricos que crea el programa, como animar1, animar2 etc.)


Nos paramos en el primer fotograma y le damos click al cuadro para que nos salgan las opciones de estilo, y le ponemos un alpha al 100%:


Luego vamos al último fotograma y hacemos lo mismo, opciones de estilo>alpha, pero esta vez le ponemos 0%.

Si publicamos (Ctrl+enter) vamos a ver un cuadro titilando, así que cerramos y continuamos con el código.
Vamos a pararnos en el primer fotograma y vamos a presionar F9, dejamos presionado la tecla “Esc” y presionamos seguidamente la letra “S” y luego la letra “T” esto con el objetivo de hacer un stop “stop();”, seguidamente vamos a escribir esto:

onRollOver = function(){
gotoAndPlay (2)
}



Bien ahora salimos del clip dándole click a escena 1:


Ya afuera vamos a mantener la tecla “alt” mientras arrastramos nuestro cuadro (para mantener una misma trayectoria en esta copia de instancia dejamos presionada la tecla “shift” luego de arrastar y no soltar). De esta forma vamos a arrastrar y soltar tantas veces sea necesario para cubrir de manera homogénea toda la imagen:
(para señalar varios clips de manera independiente deja presionado el botón “shift” mientras das click en los clips)


Cuando tengamos tapada toda nuestra imagen le damos publicar (ctrl+enter) y vemos k al pasar el mouse por las partes de nuestra película se nos va a descubrir la imagen y nos va a dar un efecto interesante.

Final:


Como siempre espero que te haya gustado y si puedes enlázame el blog ;)
Es importante que pruebes con distintos tamaños, colores y animaciones para que le saques provecho a este humilde tuto.

Hasta pronto.

sábado, 25 de septiembre de 2010

Como hacer contorno con fondo transparente en photoshop


Primero que todo pido disculpas a nuestros visitantes por no publicar seguido como lo hacia anteriormente, pero el trabajo me ha quitado mucho tiempo para compartir información.

En esta ocasión quiero colaborar con algo sencillo pero que para la persona que no lo sepa puede llegar a ser un dolor de cabeza. Pues bien, voy a mostrarles como hacer un simple contorno usando una figura vectorial.
Como siempre lo primero que vamos a hacer es abrir un documento nuevo: crl+n , ponemos un fondo ya sea arrastrando nuestro .jpg desde la carpeta en donde lo tenemos o simplemente lo jalamos desde internet hasta nuestro archivo nuevo.

Ahora creamos nuestra figura vectorial presionando la letra “u”.  y seleccionamos el color blanco (esta es la clave para que quede transparente) y hacemos nuestra figura:
TIP:  Es posible que nos salga el cuadro, pues para cambiar a circulo presionamos shift+ u tantas veces como lo necesitemos.

Vamos al botón Fx y seleccionamos trazo:


Escogemos nuestro color y el grosor de la línea. Luego presionamos ok


Para finalizar vamos a modos de fusión y le damos Multiplicar y listo:

Como vemos también funciona con las fuentes:

Si te gustó, enlazanos desde tu página.

lunes, 2 de agosto de 2010

Tutorial Virado en photoshop ( efecto envejecido)

Hoy me sacudo un poco la pereza para enseñarles como hacer un virado y/o efecto envejecido a una foto en photoshop.

Aunque este tutorial puede parecer un poco básico, la verdad es que usando un poco la imaginación podemos conseguir otro tipo de resultados.

Lo primero que vamos a hacer es conseguir una foto, en este caso:


Presionamos ctrl+J para sacar una copia de nuestra capa.

Presionamos ctrl+shift+u para desaturar (poner en blanco y negro nuestra foto):



Ahora le damos click a crear nueva capa de relleno o ajuste:

Ponemos color uniforme y seleccionamos un café como el que yo he escogido y le damos OK:

Finalmente ponemos esta capa como luz suave y ya está:



Esta última le he puesto dos texturas grunge que encontré por google, a una le he puesto luz suave y a la otra le he puesto multiplicar. Espero les haya gustado el efecto de envejecido / virado en photoshop.

Se te gustó enlaza este blog.

lunes, 12 de julio de 2010

Efecto sueño en photoshop

Hoy quiero enseñarles un efecto en photoshop que según mi criterio simula un sueño, muy visto en series o  en películas.

Lo primero que hacemos es sacar una copia de nuestra imagen: (ctrl+j o arrastramos nuestra imagen hasta el icono de duplicar capa)



Vamos a filtro >  desenfoque gaussiano>  y le damos este parámetro. Lo importante es no darle mucho ni poco:



Ahora vamos a nuestra paleta de capas y ponemos sobre poner:



Finalmente podemos dejarlo hasta ahí, o también podemos duplicar la capa a la que le hemos puesto el desenfoque para marcar mucho más el efecto.





Si te ha gustado enlázame.

martes, 29 de junio de 2010

PNG transparentes en IE6

No es nada raro que estemos creando una página con css y en el momento de probarla en el odioso Internet explorer 6 nos damos cuenta que no salen los png transparentes. Aquí es cuando empezamos a buscar como locos la solución a este problema.

Pues bien, existen varias posibilidades, entre ellas archivos javaScript; que para mí no fueron útiles, quizás porque no seguí correctamente las instrucciones; sin embargo encontré este código css el cual me funcionó perfectamente, por esto quiero compartirlo con ustedes:


#capaPng {
height:300px;
width:400px;
background-image:url(imagenes/img.png) !important;
background-image:none;
filter:none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dixso.net/wp-content/examples/css/png-ie/imagenes/img.png');
}

Es sumamente importante poner la ruta absuluta para la imagen PNG en la línea "filter", por otro lado y no menos importante, es colocar la altura (height) y anchura (width).

Con esto seguro ya podrá trabajar imágenes PNG. Sin embargo otro problema muy común con estas imágenes PNG es cuando las queremos como fondo en nuestros botones o incluso en un input, ya que los botones dejan de ser pulsables y el input parece ser una imágen más. La solución es la siguiente:

En el css para que los links con fondo PNG en IE6 funcionen se debe cumplir lo siguiente:

* La capa que tiene el filter no puede tener “position:absolute”. Por encima de ella sí se pueden poner divs con posicionamiento absoluto conteniéndola.
* A la capa filter debe aplicarsele estilo mediante identificador id=”", con class=”" no funcionaría.
* Los elementos activos contenidos en la capa filter deben tener definido explícitamente el atributo position a absolute o relative.



Gracias ha:
http://www.tripix.net
http://dixso.net

viernes, 18 de junio de 2010

Como cambiar de hosting nuestro joomla

Hola, en ocasiones tememos cambiar de hosting porque nuestra página está hecha en un gestor de contenidos como joomla. Así que nos entra el miedo de perder nuestro trabajo. Por esto hoy traigo la solución para cambiar de hosting nuestro joomla sin perder lo que ya hemos hecho (quiero aclarar que esto lo he encontrado en el caché de una página que ya no existe):

"Bueno, los pasos para la mudanza, son bien simples y los enumero a continuación:

1. Hacer un backup de la base de datos. Esto lo pueden hacer utilizando la opción “exportar” desde phpMyAdmin (herramienta con la que probablemente cuenten en su hosting).

2. Hacer un backup de TODOS los archios existentes en la instalación actual de tu sitio (vía ftp por ejemplo o bien utilizando algún sistema de backup ofrecido por tu hosting).

3. En el nuevo servidor, hacer una instalación limpia de Joomla! utilizando la misma versión que tenías instalada en el viejo hosting. Esto es para asegurarnos la compatibilidad de funciones, etc. Entonces si antes tenías una 1.5.14, para la nueva instalaciones tenés que descargarte una 1.5.14, subirla vía ftp al nuevo servidor e instalarla. Cabe recordar que previamente a la instalación tenés que crear la base de datos en el nuevo servidor (no es necesario que el nombre de la base y el usuario sean los mismos que los anteriores. Si estas cambiando de servidor es muy probable que no puedas asignarle el mismo nombre de base y nombre de usuario).

4. Acá viene lo bueno. Subir (y pisar o sobreescribir) todos los archivos de la vieja instalación al nuevo hosting. TODOS menos (y el más importante) configuration.php. Porque no hay que pisar este archivo y los demás si?. Este archivo contiene la configuración del nuevo entorno, por lo cuál si lo pisas con el de la vieja instalación se te va a armar un quilombo de la puta madre. Asi que NO SUBAS EL ARCHIVO CONFIGURATION.PHP TE DIJE!!!.

5. Solo nos falta restaurar el backup de la base, para ello utilizamos nuevamente phpMyAdmin e importamos el script del backup de la vieja base a la nueva. Acá previamente hay que ELIMINAR todas las tablas de la nueva instalación ya que elscript anterior viene con los CREATE TABLE necesarios para restaurar la base completa.

6. Navegar el sitio, probablemente todo ande de maravillas :P

Con respecto a EXPORTAR e IMPORTAR, vale aclarar que al hacerlo no deberían tocar ninguna opción. Así como las presenta de manera predeterminada, así deberían quedar. Con esto nos aseguramos que en ambos casos la operación se realizará correctamente. Una variante de esto es crear el script de exportación con la opción “Añada DROP TABLE”, si hacemos esto, no será necesario eliminar las tablas de la nueva instalación antes de importar ya que ésta sentencia eliminará y creará cualquier tabla que encuentre en su camino.

Para resumir:

1. Exportar la base de la vieja instalación.
2. Backup de archivos y carpetas vía ftp.
3. Instalar Joomla! en el nuevo servidor.
4. Subir y pisar todos los archivos del paso 2 menos configuration.php.
5. Importar la base del paso 1.
6. Voila!

Vale aclarar que estos pasos pueden probarlos en su pc para ver si todo anda bien y asegurarse que el paso a producción no traerá problema alguno.

Existen extensiones que hacen esto por nosotros pero para que complicarse tanto si los pasos son bien pedorros?."

Por mi parte me ha servido un montón, espero les sirva igual.

Sacado de: http://www.estoesproduccion.com.ar

---------------------------

Hace poco he tenido que cambiar varias páginas de hosting, y al ser tantas tuve que replantear la forma de hacer este cambio de hosting y encontré una solución más practica.

La idea es solo subir los antiguos archivos al hosting nuevo, subir la antigua base de datos  y modificar el configuration.php:

    var $host = 'localhost';
    var $user = 'Nuevo usuario';
    var $db = 'nueva base de datos;

Y listo.
Hasta pronto.

miércoles, 26 de mayo de 2010

Como crear y usar Favicon.



Un favicon en general es ese pequeño icono que tienen las páginas web en la parte superior; si quieres profundizar mira este enlace: http://es.wikipedia.org/wiki/Favicon.

Lo primero que vamos a hacer es crear nuestro icono, para posteriormente insertarlo en nuestra página.
Según mi experiencia, este icono se puede crear en photoshop:

Ahora ya tenemos nuestro .ico. Es un proceso, aunque no muy largo si se podría acortar:


Ahora vamos a usar nuestro Favicon:


Lo que vamos a hacer es colocar este código en nuestro html entre las etiquedas del head:

[head]
[link rel="shortcut icon" href="favicon.ico" /]
[/head]

*sustituir los [ ] por un menor que y un mayor que.

Como es obvio tienes que subir el favicon.ico y tu archivo .html en la misma ruta para que funcione.

Si te gustó enlázame.










Nuevos logos para la inspiración 170

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration,
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration
logo inspiration

Tomado de http://www.tripwiremagazine.com