Creando nuestra primera aplicacion al instante en Django

Con Django puedes montar de manera rápida tu primera aplicación. Primer creamos nuestra base de datos, yo la llamaré ‘djangodb’. La base de datos que voy a usar es MySQL.

Nota: La versión de Django que estoy usando es la 1.11.4

Creando un nuevo proyecto

Primero voy a crear un proyecto nuevo, voy a mi consola de comandos y ejecuto la siguiente instrucción:

django-admin startproject admin_django

El sistema crea la estructura de archivos de nuestro proyecto:

admin_django/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        wsgi.py

Ahora verificamos si el proyecto ha sido creado correctamente, para ello iniciamos el servidor ejecutando:

python manage.py runserver

Vamos a nuestro navegador y escribimos http://localhost:8000/  y nos cargara nuestro proyecto creado correctamente.

Configurando la Base de datos

Primero instalo la librería para darle soporte MySQL dentro de Django, ejecuto:

pip install MySQL-python
Collecting MySQL-python
  Downloading MySQL-python-1.2.5.zip (108kB)
Installing collected packages: MySQL-python
  Running setup.py install for MySQL-python: started 
...

Luego ingresamos a la carpeta de nuestro proyecto y abrimos el archivo settings.py , vamos a la linea DATABASES y conectamos nuestra base de datos MySQL:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'django',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306',
        'OPTIONS': {
            'sql_mode': 'traditional',
        }
    }
}

Creando nuestra aplicación

Ahora sencillamente ejecutamos:

python manage.py migrate

Con este comando Django crea las tablas en la base de datos y monta un paquete completo con login, usuario, etc.

Si corremos el servidor:

python manage.py runserver

Vamos a nuestro navegador y escribimos http://localhost:8000/admin/admin  y nos cargara nuestra primera aplicacion que nos pide que iniciemos sesión :

Coloco mi usuario y contraseña e ingreso a la aplicación:

 

Pueden ver en la imagen anterior que puedo agregar, editar, eliminar usuario y grupos.

Creando mi Usuario de acceso a la aplicación

Acá muy atento, recuerda que debes de usar la consola de comandos de Windows CMD la abres y ejecutas el siguiente comando:

python manage.py createsuperuser
Username (leave blank to use 'frontend'): miusuario
....

Al ejecutar colocamos nuestro usuario y luego el pass para nuestra cuenta, luego regresamos a la pantalla de login e iniciamos sesión con nuestro usuario y password que hemos creado.

Espero que les sirva de mucho este tutorial.

Nos vemos hasta un próximo tutorial.

Listar todas nuestras rutas de Laravel 5.1 con Git Bash

En ocasiones tenemos la necesidad de revisar nuestra rutas o URL amigables de nuestro proyecto mientras estamos trabajando.
Por suerte existe una manera de verlas, solo abrimos Git Bash y Ejecutamos el siguiente comando siempre y cuando nuestro Laravel este confgurado correctamente y no presente errores:

php artisan route:list

Ampliamos nuestra ventana de Git para ver la tabla en donde nos muestra la los métodos, la URI de nuestras rutas:
dsa

 

No olvidar que el listado de rutas que se nos muestra en pantalla varia según tu proyecto, no va a ser similar.

Espero les sirva de mucho para poder visualizar mejor sus rutas.

Gracias por su atención.

Usar la consola Git Bash en vez de la consola de Digital Ocean

En este tutorial les quiero mostrar una manera de como conectar la Consola Git Bash  a nuestro Servidor VPS, VPN, etc. para gestionar los paquetes y hacer nuestras propias configuraciones, es decir que usaremos la consola mas famosa del mundo que viene con GIT, en ves de la consola que tiene nuestro Droplet en Digital Ocean.

c d

Pero pocos encuentra información rápida al respecto, por eso decidí hacer este tutorial para ayudarlos, es uno de los motivos por lo cual me gusta escribir tutoriales, y es para ayudar y compartir conocimiento con los mas jóvenes que se inician en el mundo del desarrollo de software en general.

Les voy a mostrar una manera rápida y sencilla sin hacerle bolas, de hacer esto.

Acotar que use la versión 1.9.4 de Git para este tutorial. Vamos con ello:

Paso 1

Abrimos el Git Bash, Hacemos doble click  para ello.

Para los que requieren permisos, no olviden botón derecho del mouse y ejecutar como administrador.

a

Cargamos y Dejamos abierto nuestro Git Bash:

c

Paso 2

Iniciamos Sesión con Nuestra Cuenta de Digital Ocean, Nos Dirigimos al contenedor de Droplets, para esto hacemos click en el botón Droplets que esta en el menú de navegación del lado izquierdo.

Anotamos la IP Address de nuestro Droplet que esta al costado del nombre de nuestro Droplet:

2

 

Paso 3

Escribimos el siguiente comando en nuestro consola Git Bash:

ssh -l root XXX.XXX.XXX.XXX (IP Address)

En ves de root ponemos nuestro nombre de usuario, pero por defecto el nombre de usuario es root. Presionamos ENTER y nos pedira el password:

4

Ingresamos nuestro password y listo !

Ya deberíamos estar conectados y podemos configurar e instalar paquetes a nuestro servidor con el Droplet determinado.

NOTA: No olvidar que es mejor y se recomienda usar SSH Keys, pero solo para salir del paso podemos usar el comando que les mostre.

 

Espero les haya servidor de mucho.

Muchas Gracias

 

 

Editar archivos directamente en el servidor con Sublime Text

Cuando trabajamos con Sublime Text como IDE para desarrollar nuestras aplicaciones Digitales, podemos editar los archivos directamente en el servidor.

Bueno ahora vamos con los pasos para Editar archivos directemente en el servidor con Sublime Text:

 

Paso 1

Primero instalamos Sublime Tex, para ello nos dirigimos a su pagina web y nos descargamos el programa:

Página Web: http://www.sublimetext.com/

Pagina Web de Sublime Text, para descargar.
Pagina Web de Sublime Text, para descargar.

Una ves descargado el instalador de Sublime Text (ST), instalamos el programa como cualquier otro programa.

 

Paso 2

Ahora tenemos que instalar el Package Control(Administrador de Paquetes), en nuestro Sublime Text instalado.

Para esto nos dirigimos  a la pagina Web del Package Control:

Página Web del Package Control: https://sublime.wbond.net/installation

Luego seguimos las instrucciones del Manual de instalación que existe en su Web.Web del Package Control

Como en esta oportunidad hablaremos sobre editar archivos directamente desde el servidor, no expandiremos mucho sobre el tema del Package Control, la instalación es sencilla, las instrucciones de el manual es simple y muy fácil de seguir.

 

 Paso 3

Ahora tenemos que instalar un FTP persistente para editar nuestros archivos directamente en el servidor.

Para ellos usaremos el plugin SFTP, este plugin nos da la versión gratis solo para 1 usuario, si queremos instalarla para mas usuarios hay un pago que tenemos que hacer, el precio lo podemos ver en la web del plugin.

Página Web del Plugin SFTP: http://wbond.net/sublime_packages/sftp

Web del Plugin
Web del Plugin

 

Bueno entonces ahora nos dirigimos al menú Preferencias > Package Control.  dentro de nuestro IDE Sublime Text:

Menu Preferencias > Package Control

Ahora nos aparecerá el menú de opciones del Package Control y seleccionamos la opcion: Install Package:

 

Seleccionamos Install Package
Seleccionamos Install Package

Ahora escribimos en el cuadro de texto el nombre del plugin SFTP:

Escribimos SFTP

Dejamos que se instale, y cuando termine de instalar el SFTP, dentro de nuestro Sublime Text nos aparecerá un texto que indica que se ha instalado correctamente el plugin SFTP.

Texto que indica que se ha instalado correctamente el plugin SFTP.
Texto que indica que se ha instalado correctamente el plugin SFTP.

Nos pide que reiniciemos Sublime Text, para ello cerramos el programa y lo volvemos a abrir.

 

Paso 4

Ahora editamos el archivo de configuración para conectarnos a nuestro servidor, para ello nos vamos al menú de opciones del SFTP.

Nos dirigimos al menu File > SFTP/FTP> Browser Server.

Menú del Plugin SFTP
Menú del Plugin SFTP

Agregamos un nuevo servidor para conectarnos a el y editar directamente los archivos del proyecto:

Agregamos un nuevo servidor
Agregamos un nuevo servidor

Configuramos el servidor al cual nos queremos conectar:

NOTAS:

– Cambiar sfpt x ftp es decir Escribir ftp en donde nos pide el tipo:  “type”: “sftp”.

Configuración del Servidor al que deseamos conectarnos
Configuración del Servidor al que deseamos conectarnos

– No escribir el password por seguridad, este nos lo pedirá en la parte de abajo cuando la conexión se realizó con éxito (Una ves que termines de configurar tu conexión, debes guardar en archivo de configuración en formato JSON. Ejemplo: miconfig.json):

Abajo nos pide la contraseña del servidor
Abajo nos pide la contraseña del servidor

Una ves conectado al servidor, podemos ver nuestras carpetas y los archivos que queremos editar, Seleccionamos el archivo que queremos editar y se nos abrirá en nuestro Sublime Text, ya estamos editando directamente en nuestro servidor:

Conectado al servidor, navegamos por las carpetas y los archivos que queremos editar.
Conectado al servidor, navegamos por las carpetas y los archivos que queremos editar.

Cuando seleccionamos un archivo de nuestro servidor para editarlo, nos muestra un menu de opciones para decidir que queremos hacer con el archivo, si editar, renombrar, etc.:

Menu de opciones para el archivo seleccionado del servidor.
Menu de opciones para el archivo seleccionado del servidor.

El archivo que editemos de nuestro servidor lo guardamos como siempre lo hacemos, menú Archivo>Guardar o CTRL + S.

Entonces si vamos y revisamos el archivo en nuestro navegador podemos ver que el archivo a sido editado directamente en el servidor sin haber sido descargado a nuestra PC.

Creo que esta manera de trabajar agiliza el proceso de producción de nuestro proyecto, quizás es un poco riesgoso por ello aconsejo primero hacer un backup de tus archivos a tu disco duro local.

Espero que les sea de mucha ayuda.

Gracias por su atención

Evento Scroll con jQuery

A veces necesitamos realizar un determinado evento cada ves que movemos el scrollbar o las barras de navegación de nuestros Navegador.

Por ejemplo si necesitamos mostrar una alerta, una novedad o un formulario de suscripción, en toda la pantalla para hacérselo saber a un visitante de nuestra Página Web y que luego al bajar con el scrollbar, que esta alerta desaparesca.

escjq

En este tutorial voy a mostrarles una forma de hacer uso de este evento, que de hecho lo deben haber visto en muchas Paginas Webs.

Primero, Hacemos referencia a nuestro archivo jQuery:

src="http://code.jquery.com/jquery-1.9.1.js"

Creamos los estilos para nuestros items:

body{font-family:Arial,Georgia,Serif;}
   body a:link{text-decoration: none;}
   body a:hover{text-decoration: underline;}
	
  .parrafos{float: left; margin-right: 30px; text-align: justify;}
  
  .boletin{
   position: fixed; background-color: #000; padding: 20px; float:right; opacity: 0.9; border; 3px solid #fff; color: #fff; font-family:Arial,Georgia,Serif; 
   top: 40%; left: 50%; margin-top: -100px; margin-left: -100px; border: 5px solid #fff;
   }
   
   .bgbody{background-color: #666; opacity: 0.9;}

Creamos nuestro script jQuery:

$(document).on('ready', function(){

	var posicionActual, posicionNueva = 0;

	$(window).scroll(function(){
	posicionNueva = $(this).scrollTop();

	if(posicionNueva>posicionActual){
	$('.boletin').hide('slow');
	$('body').removeClass('bgbody');
	} 
	posicionActual=posicionNueva;
	});

	})

Finalmente creamos nuestro HTML:


 

Actualiza tu Navegador ( o presiona F5 ) para volver a ver el ejemplo !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Baja hacia abajo
y esta ventana
se ocultará !



Suscribete a Nuestro Boletin:





Bueno les dejo una DEMO
Pueden ver el codigo, solo le dan click boton derecho del mouse y luego ver codigo Fuente.

Espero les sirva mucho !

Saludos

Obtener el Alto y el Ancho del Navegador con jQuery

obtayacjq
A veces cuando estamos muy metidos desarrollando un proyecto web, necesitamos obtener las medidas de la ventana del Navegador por algun motivo.
En este Tutorial les voy a mostrar como podemos obtener el Ancho y el Alto de la ventana de nuestro navegador con el framework jQuery.

Utilizaremos las funciones .width() y .height().

Comencemos:

Paso 1:

Primero hacemos referencia a nuestro archivo del framework jQuery, colocamos antes de la etiqueta < / head >, lo siguiente:

src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"

Paso 2:

Ahora le damos un poco estilos CSS:

body{padding:20px;}
.btncls{padding: 10px; background-color:#000; color:#fff; border:none; cursor:pointer; margin:10px;}
.txtcls{color:#44f; font-size:20px;}

Paso 3:

Ahora creamos nuestros 2 botones uno para obtener el ancho y otro para obtener el alto de nuestra ventana. Asi mismo crearemos 2 capas, uno para mostrar el ancho y otro para mostrar el alto.



 
 

Paso 4:

Ahora creamos nuestras funciones, una para obtener el ancho y otra para obtener el alto:

 
function obtenerAncho( obj, ancho ) {
  $( "#anvent" ).text( "El ancho de la " + obj + " es " + ancho + "px. (Width)" );
}
$("#obtan").click(function() {
  obtenerAncho( "ventana", $( window ).width() );
});

 
function obtenerAlto( obj, alto ) {
  $( "#alvent" ).text( "El alto de la " + obj + " es " + alto + "px. (Height)" );
}
$( "#obtal" ).click(function() {
  obtenerAlto( "ventana", $( window ).height() );
});

Listo !

Eso es todo, les dejo una demo:
DEMO

En la Demo Puedes jugar con la ventana del navegador, estíralo y dale mas alto o mas ancho, para ver sus medidas, tanto el ancho como el alto, como gustes.
Ademas en la Demo pueden ver el código fuente de este tutorial solo le dan botón derecho del mouse y luego en la opción de ver código fuente.

Que tengas un buen día !

Crear una Pagina Web con PHP – POO

webphp_progoo
En este tutorial les voy a mostrar una manera de las muchas que puedan haber para crear una Pagina web con PHP Orientado a Objetos.

Hay muchos que tiene esa duda, espero poder resolver esa duda, existen CMS como wordpress, joomla, etc. Que hace uso bastante del paradigma de la POO(Programacion Orientada a Objetos).

Bueno esta es una pagina básica la cual contiene:

– Cabecera
– Menú
– Contenido
– Pie de pagina.

Entonces manos a la obra.

Primero voy a crear mi Hoja de Estilos CSS. Lo guardare con el nombre oop-estilos.css y estara en mi carpeta css/

Creamos las propiedades CSS

body{
font-family: 'Text Me One', sans-serif;
color: #000;
}

#cabecera{
width: 100%;
height: 50px;
}

#menu{
width: 100%;
height: 50px;	
background-color:#036;
text-align: center;
}

#menu a:link{
color:#fff;
text-decoration: none;
}	

#menu a:active{
color:#ff;
text-decoration: none;
}	

#menu a:visited{
color:#fff;
text-decoration: none;
}	

#menu a:hover{
color:#fff;
text-decoration: none;
}	

#contenido{padding: 10px;}

#img_php{
float: left;
margin-top:5px;
margin-right: 10px;
}

#text_der_img_php{
margin-top:5px;
}

ul.menu_nav ,
ul.menu_nav  li,
ul.menu_nav  ul {
 list-style: none;
 text-align: center;
 margin-right: 30px;
}

ul.menu_nav  {
 position: relative;
 z-index: 597;
 float: left; 
}

ul.menu_nav  li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 text-align: center;
 zoom: 1;
 width: 180px;
}

ul.menu_nav  li.hover,
ul.menu_nav  li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
 background-color:#F90;
 float: left;
 width: 180px;
}

ul.menu_nav  ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.menu_nav  ul li {
 float: left;
 background-color: #000;
 margin-left: -40px;
}

ul.menu_nav  ul ul {
 top: 1px;
}

ul.menu_nav  li:hover > ul {
 visibility: visible;
}

ul.menu_nav  li.rtl ul {
 top: 100%;
 right: 0;
 left: auto;
}

ul.menu_nav  li.rtl ul ul {
 top: 1px;
 right: 99%;
 left: auto;
}

ul.desplegable {
 font-weight: bold;
}

ul.desplegable li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}

#footer{
float: left;
width: 100%;
text-align: center;
font-weight: bold;
}

Ahora voy a crear un archivo llamado index.php, este archivo sera la pagina principal en donde graficare mi web a traves de metodos, objetos, clases, etc. de PHP.

Haciendo Referencia.

Hacemos Referencia o llamamos a nuestros archivos externos.



NOTA: Dentro de las etiquetas body vamos a ir colocando todos nuestros métodos, objetos, clases, etc. de PHP.

Creamos la estructura de nuestra web:

//Cabecera
texto = $titulo;
	}
	
	public function graficar() //Metodo
	{
		//echo"

".$this->texto."

"; ?>

texto;?>

lineas[] = $li; } public function graficar() { for ($i=0;$ilineas);$i++) { ?>

lineas[$i];?>

texto = $cadena; } public function graficar() { ?>
texto;?> cabecera = new Cabecera($texto_cabecera); $this->menu = new Menu(); $this->body = new contenido(); $this->pie = new Footer($texto_pie); } public function iniciar_contenido($texto) { $this->body->iniciar_linea($texto); } public function vista() { echo "
"; echo "
"; $this->cabecera->graficar(); echo "
"; echo ""; echo "
"; $this->body->graficar(); echo "
"; echo ""; echo "
"; } } //************************************************************************* //Ahora creamos la vista de nuestra web $pag = new Pagina("Bienvenido a mi Web","Desarrollado por Juan Castro Lurita - 2013"); $pag->iniciar_contenido( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet lectus sit amet tortor imperdiet iaculis. Cras ornare scelerisque libero et pellentesque. Mauris malesuada interdum sapien a porta. Curabitur cursus odio et nibh pretium, quis ornare purus aliquet. Aliquam gravida sodales convallis. Fusce nec viverra quam. Proin ultrices augue massa, in accumsan dui volutpat a. Quisque fringilla augue at nisl sagittis vestibulum. Duis venenatis, mauris in pharetra aliquet, ipsum massa aliquam lectus, ut volutpat nisl arcu iaculis turpis. Ut vehicula sollicitudin diam, ut pulvinar justo ornare vitae. Sed gravida auctor faucibus. Sed vel risus ac lorem commodo tincidunt a in dui. Fusce tellus magna, adipiscing et suscipit eget, malesuada at orci. Aenean vitae dignissim velit. Sed facilisis tempor lacus ac bibendum.

Nullam et lacus lobortis, congue erat at, lacinia eros. Ut dictum sodales nisi id convallis. Fusce posuere quam eget orci interdum sagittis. Maecenas vitae elementum sem. Sed et massa sem. Phasellus ac lobortis est. Praesent sit amet euismod leo. Maecenas sagittis vel ligula vitae imperdiet. Etiam condimentum elit nibh. Aliquam urna purus, sollicitudin quis est nec, convallis aliquet leo. Cras elementum, est sed feugiat sollicitudin, lorem ante venenatis urna, quis consectetur libero odio sed libero. Mauris nisi arcu, molestie ac enim nec, sagittis scelerisque turpis. Fusce sodales, nulla a venenatis eleifend, quam velit venenatis dui, vel aliquam lorem odio a lacus. Morbi vehicula felis lectus. Mauris faucibus, ante sed cursus imperdiet, est urna suscipit libero, vitae. " ); $pag->vista(); ?>

Esos es todo.

Por si tienen algun problema aca les dejo los archivos para descargarlos:

LINK

Tambien les dejo una DEMO

Espero les sirva mucho.

Gracias.

Sonido de Notificación tipo Facebook con jQuery

Sonido de Notificacion tipo Facebook

Cuando recibimos una respuesta en el chat de Facebook, el sistema reproduce un sonido particular que nos alerta que tenemos un nuevo mensaje.

En este tutorial les voy a explicar como pueden reproducir un sonido con jQuery cuando pulsamos enter o presionamos el botón enviar luego de escribir un mensaje en nuestro chat.

Paso 1.- Haciendo referencia a nuestros archivos

Creamos un archivo llamado index.php , , en donde colocaremos el chat.

Antes de finalizar la etiqueta head de nuestro html, hacemos referencia y llamamos a nuestra hoja de estilos CSS:

A su vez también hacemos referencia y llamamos a nuestro framework jQuery:

No olviden que llamamos a nuestros archivos antes de finalizar la etiqueta head, de nuestro html.

Paso 2.- Creación de las funciones en jQuery

Ahora crearemos 2 funciones con sus eventos.

La primera función que vamos a crear nos detecta cuando estamos pulsando la tecla ENTER para enviar nuestro mensaje, porsupuesto luego de haber escrito nuestro mensaje en el chat.

$(document).keypress(function(enter) {
    if(enter.which == 13) {
    var snd = $("#txt_chat_fb").val().trim();
    if(snd.length > 0){
	$("#txt_chat_fb").val('');   
	$("#txt_chat_fb").focus(); 
    $("
  • ").html(''+snd+'').appendTo("#msg_fb_chat"); $("#chat").animate({"scrollTop": $("#chat")[0].scrollHeight}, "slow"); $('#audio_fb')[0].play(); } } });

    Ahora creamos nuestra segunda función la cual nos detecta cuando estamos pulsando el botón para ENVIAR nuestro mensaje, luego de haber escrito nuestro mensaje en el chat.

    $(document).ready(function(){  
    	$("#txt_chat_fb").focus(); 	
        $('').appendTo("body");	   
        $("#btn_enviar").on("click",function(){
        var snd = $("#txt_chat_fb").val().trim();
        if(snd.length > 0){
    	$("#txt_chat_fb").val('');   
    	$("#txt_chat_fb").focus(); 
        $("
  • ").html(''+snd+'').appendTo("#msg_fb_chat"); $("#chat").animate({"scrollTop": $("#chat")[0].scrollHeight}, "slow"); $('#audio_fb')[0].play(); } } ) });

    Paso 3.- Estructura del contenido en el body

    Ahora creamos la estructura dentro de la etiqueta body de nuestro html, con las capas o divs(divisiones), formulario, botón, etc. para nuestro chat.

    
    

    Chat

      • Hola Amigo
     
    • Como estás ?
    " Activa el Sonido"

    Listo !

    Eso es todo, espero les sirva de mucho.
    Les dejo una demo para que vean como funciona y si desean pueden copiar el codigo fuente, solo le dan click con el boton derecho del mouse y luego ver codigo fuente a la pagina demo.

    DEMO

    Muchas Gracias amigos !

    Enviar URL con PHP a traves de un formulario.

    En esta oportunidad les voy a enseñar una manera de recoger y enviar la URL a través de un formulario.

    euadufcp-post

    Voy a utilizar el array $_SERVER y dentro colocare el HTTP_REFERER que emplea el agente de usuario para la pagina actual.

    en mi PHP que recibe y envia el formulario quedaria asi:

    Código PHP :

    $sUrl= $_POST['url'] = $_SERVER['HTTP_REFERER'];

    Quizás pueda servir para encontrar rápidamente la pagina desde donde se envió el formulario.
    A mi me ayudo cuando manejaba una tienda en linea la cual tenia mas de 400 productos en linea y por este método, los ubicaba al instante, bueno ustedes le pueden dar el uso que deseen.

    NOTA: Utilice la versión de Google Crohme 18, el cual soporta la validación nativa de HTML5 , que es con la cual valida el formulario.

    Bueno vamos al tutorial.

    Primero creo la pagina para mi formulario de contacto, la cual llamo index.php :

    Código HTML :

    @

    Luego creo mi archivo PHP que procesa y envía la información, lo voy a llamar enviar.php :

    Código PHP :

      
    // En esta sección se declaran las variables
    
       $sPlace = $_POST['place'];
       $sEmail = $_POST['email'];
       $sClientemail = $_POST['clientemail'];
       $sAsunto = $_POST['asunto'];
       $sMensaje = $_POST['mensaje'];
       $sNombre = $_POST['nombre'];   
       $sUrl= $_POST['url'] = $_SERVER['HTTP_REFERER'];
    
    //Aca se ponen los datos del remitente
    $myname = $sNombre; 
    $myemail = $sEmail;
    
    //Aca se cambia la dirección de correo del destinatario
    $contactemail1 = $sEmail.'@'.$sClientemail;
    
    $sTitulo = "Datos recibidos de ".$myname."
    "; $sDetalles = "Asunto : ".$sAsunto."
    "."E-mail : ".$sEmail."@".$sClientemail."
    "."URL: ".$sUrl."
    "; $message = $sTitulo.$sDetalles; $subject = $sAsunto; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=iso-8859-1\r\n"; $headers .= "From: ".$myname." <".$myemail.">\r\n"; $headers .= "To: ".$contactname1." <".$contactemail1.">\r\n"; mail($contactname1, $subject, $message, $headers);

    Al final del mismo archivo enviar.php que procesa el envio, coloco un javascript para redireccionar a la pagina ok.php que confirma que ha sido enviado:

    location.href = "ok.php";

    Puede ver en el código PHP que estoy recogiendo la URL y la meto en la variable $sUrl, para luego enviarla y mostrarla en el correo:

    $sTitulo = "Datos recibidos de ".$myname."";
    $sDetalles = "Asunto : ".$sAsunto."
    "."E-mail : ".$sEmail."@".$sClientemail."
    "."URL: ".$sUrl."";

    Ahora creo unas pocas lineas de código CSS para mi estilizar mi formulario, creo un archivo llamado estilos.css :

    input:invalid {
        border: 1px solid red;
      }
    
       /* Estilo por defecto */
      input:required:invalid {
        border: 1px solid red;
      }
    
      input:required:valid {
        border: 1px solid green;
      }
    
    .botonform {
       font-family: Arial, Helvetica, sans-serif;
       color: #FFF;
       background-color: #333;
       border-top-style: none;
       border-right-style: none;
       border-bottom-style: none;
       border-left-style: none;
       padding-top: 5px;
       padding-right: 10px;
       padding-bottom: 5px;
       padding-left: 10px;
       cursor: pointer;
    }
    .rojita {
       color: #F00;
    }

    Por ultimo creo una pagina que muestra el mensaje de “Enviado ! ” , que se va mostrar una ves que mi formulario haya sido enviado sin problemas, lo guardo con el nombre: ok.php :

    Enviado !

    Listo eso es todo !

    Ustedes me dirán porque, puse los inputs de el correo en dos partes, lo que paso es que mi jefe lo quería así, según el obligaba a que el usuario escriba su correo, trate de convencerlo pero era bien terco, bueno lo deje así y nunca decidí cambiarlo, pero ustedes lo pueden hacer, les dejo a su criterio, al menos ya esta la idea.

    Les dejo una DEMO para que puedan ver un ejemplo en funcionamiento (Ingresa tu correo para que te llegue la URL y puedas ver el ejemplo adecuadamente):

    http://jrcl.net76.net/dm/recoger_url_con_php/

    Espero les haya gustado !

    Calcular la Distancia que hay de un punto a otro punto con jQuery.

    En este tutorial les voy a mostrar cómo utilizar jQuery para obtener la distancia con el mouse de un determinado elemento en la página. Este trozo de código puede ser útil en una aplicación web pequeña o para otras aplicaciones que deseamos y que tiene un montón de interacción con el usuario y desea ejecutar un evento cuando el ratón del usuario se encuentra en una distancia determinada de un elemento.

    Solo creamos las variables globales, el evento y la función para el documento.

    Código Javascript :

    <script type="text/javascript">
    $(document).ready(function(){
       var mX, mY, distance,
        $distance = $('#distancia span'),
        $element  = $('#elemento');
    
        function calculateDistance(elem, mouseX, mouseY) {
            return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
        }
    
        $(document).mousemove(function(e) {
            mX = e.pageX;
            mY = e.pageY;
            distance = calculateDistance($element, mX, mY);
            $distance.text(distance);
        });
    });
    </script>

    Como se puede ver en el código hemos establecido una función en el evento .mousemovede manera cada vez que la persona mueve el ratón se procedera con lo siguiente.

    Luego se utiliza la variable e para obtener la posición X e Y del mouse y envía esto a la función calculateDistance con un parámetro de elemento.

    Ahora creamos nuestros contenedores divs para recibir los datos:

    <div id=”distancia”>La distancia hasta el punto es: <span> </span> pixeles.</div>
    <br />
    <div id=”texto”>
    <h4>Partiendo del punto de partida que es el 0 de color naranja</h4>
    <p>Un ejemplo seria calcular la distancia desde el punto que es el 0 de color naranja hasta una caja azul con circulo blanco: </p>
    </div>
    <div id=”elemento”>0</div>

    Eso es casi todo, aca dejo una demo en donde estan todo el codigo completo (le das botón derecho del mouse en la pagina de la demo y luego le das ver codigo fuente) :

    DEMO

    Eso es todo, espero te haya gustado y que te sea muy útil.