Labels

Labels

Mostrando entradas con la etiqueta Manuales y Tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Manuales y Tutoriales. Mostrar todas las entradas

jueves, 22 de marzo de 2012

COLOCAR UN VIDEO DE YOUTUBE COMO FONDO DE TU PAGINA WEB

Navegando por la web, encontré algo interesante que me gustaría compartir, era acerca de la forma de colocar videos de youtube como fondo de una pagina web, en el siguiente link pueden descargar la demo que code.google.com http://code.google.com/p/jquery-tubular/downloads/list, una vez descargado, si queremos utilizarlo en nuestro proyecto, debemos copiar dos archivos javascript que vienen en la carpeta js
jquery.tubular.js y mission-control.js, mas la carpeta del estilo css,el primero nos sirve para poder visualizar el video y el segundo para los controles del video (stop/pausa/silencio=) una vez hecho esto en el head de nuestra pagina debemos agregar la siguientes lineas de codigo


<link href="css/screen.css" rel="stylesheet" type="text/css" />




<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>
<script type="text/javascript" charset="utf-8" src="js/mission-control.js"></script>




y luego en el archivo mission-control.js borramos la siguiente linea  $('body').tubular('_VKW_M_uVjw','wrapper');
y en nuestra pagina agregamos antes de cerrar el head el siguiente codigo




<script type="text/javascript">
$(document).ready(function() {
                $('body').tubular('IDVIDEO','wrapper');
        });
</script>




aqui llamamos al archivo que nos permite ver el video, que recibe dos parametros el id del video de youtube , que esta formado por letras y numeros y aparece despues del primer = de la url


ejem: http://www.youtube.com/watch?v=zi1MYyMQWqU&feature=related
(lo resaltado con rojo es el id), y el siguiente parametro es el id del div contenedor
y listo ahora deberia visualizarnos el video, por defecto aparece en silencio, hacemos clic en el link mute
 el siguiente es el codigo de los controles


<div id="wrapper">
<div id="main">
<a href="http://www.seanmccambridge.com/tubular/"><img src="media/logo.png" alt="Tubular logo" id="logo" /></a>
<p id="video-controls">Controles:
<a class="videoPaused" href="" id="videoPause">Play/Pause</a> |
<a href="" id="videoMute">Mute</a> |
<a href="" id="videoStop">Stop Video</a></p>

</div>
<div style="margin-left:400px;;margin-top:20px;"class="black-50">
            <h3>Este es un ejemplo de insertar video como fondo de una pagina web</h3>


</div>
</div>







-Aqui dejo algunas imagenes de los videos que probe (bad romance de lady gaga y una linda música de nuestra selva peruana :D ) , como dije antes solo cambiamos donde dice IDVIDEO, por el id del video que queramos que se visualice al cargar nuestra pagina(probado en firefox 11, chrome y ie 9.0 )


             ver demo


  ver demo 

lunes, 12 de marzo de 2012

CONEXION A SQL SERVER 2008 CON PHP Y PROCEDIMIENTOS ALMACENADOS


Hola a todos aquí les dejo un tutorial sencillo de como conectarse a SQL SERVER 2008 desde php utilizando una clase de conexión y sus respectivos métodos para abrir y cerrar la conexión, quiero aclarar que este tutorrial no es para nivel avanzado sino mas bien para alguien que recien inicia en el mundo php con bases de datos, utilice el servidor web xampp 1.7.2 (recomiendo descargarla)ya que lo probé en versiones mas recientes y la conexion a sql  server no funcionaba ni siquiera descomentando en el archivo php.ini la linea de extension=php_mssql.dll, que es lo primero que hay que hacer para poder conectarnos a sql server ya que por defecto en dicho archivo viene deshabilitado esta opcion. una vez hecho hacemos lo siguiente.



1.- Crear la bd en sql server 2008 , creamos un bd sencilla llamada prueba de una sola tabla llamada productos, luego insertaremos unos registros de prueba para despuès crear el procedimiento almacenado que me liste estos registros


---creamos la base de datos Prueba
create database Prueba
go
USE Prueba
go
--creamos la tabla producto en la bd Prueba
create table Producto
(
CodigoProducto int identity(1,1) not null,
DescripcionProducto varchar(50) not null,
PrecioProducto decimal(9,2) not null,
LineaProducto varchar(50) not null,
EstadoProducto int

 CONSTRAINT [PK_PPRODUCTO] PRIMARY KEY CLUSTERED (CodigoProducto)

)


---insertamos algunos registros

insert into Producto values('Aceite FRIOL',3.5,'ABARROTES',1)
insert into Producto values('Arroz Costeño',3,'ABARROTES',1)
insert into Producto values('Gaseosa Inka Kola 2 lts',4,'BEBIDAS',1)
insert into Producto values('Leche Gloria deslactozada',2,'LÁCTEOS',1)

---creamos el proceimiento almacenado para listar Productos

create procedure sp_lista_productos
as
select CodigoProducto ,DescripcionProducto,PrecioProducto,LineaProducto FROM Producto
GO

---ejecutamos el procedimiento almacenado para ver el resultado

exec sp_lista_productos
go

..y el resultado es el siguiente

2.- Una vez creado la BD , la tabla y el procedimiento almacenado que nos muestra los registros ahora procedemos programar en php la conexion a mi bd :) creamos un archivo de clase php llamado conexion en cualquiera que sea la IDE que estemos utilizando ya sea Eclipse, Net Beans, Dreamweaver o cualquiera, esta clase tiene su metodo para abrir la conexion y para cerrarla. IMPORTANTE ..reemplazamos los parametros de conexion es decir nombre pc, usuario sql y clave)



class conexion
{
private static $instance = null;
        private $conn;


private function __construct() {}
        private function __clone(){ }
        public static function getInstance()
         {
            if (!isset(self::$instance)) {
                $c = __CLASS__;
                self::$instance = new $c;
            }
            return self::$instance;
        }
        public function AbrirConexion() {
            try{
                if(!isset($this->conn)){
                $this->conn=mssql_connect("NOMBREDESUPC","USUARIOSQLSERVER","CLAVEUSUARIOSQLSERVER") ;
                $res = mssql_select_db("Prueba",$this->conn);
                }
                return $this->conn;
             }
             catch(Exception $ex)    {
          //    throw new $ex->getMessage();
              throw new Exception ("La conexión al servidor a fallado..");
             }
}
   
        public function CerrarConexion(){
if( isset( $this->conn) ){
mssql_close( $this->conn);
unset( $this->conn );
}
}
}
?>


3.- Una vez que tenemos la clase que nos sirve para poder conectarnos a la BD, ahora procedemos a programar el archivo que me va a mostrar el listado de Productos de la tabla Productos en mi caso lo hice en mismo index.php(quise poner el codigo en texto, pero no mostraba lo que ponia dentro de los echo, mil disculpas solo me quedo capturar la imagen)


4.- Si hemos seguido los pasos correctamente el resultado debe ser el siguiente(claro con aplicacion de algun estilo css).. ya bueno aqui les dejo el codigo del estilo tb :)


.demoTable {
border-spacing:1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background-color:#E7E7E7;
color: #b7b7b7;
width:70%;
margin:auto;
}
.demoTable td, .demoTable tr, .demoTable th{
border-collapse: separate;
border-collapse: collapse;
border-spacing: 0;
}
.demoTable caption {
font-weight: bold;
background: #50ADEA url(corner.gif) no-repeat right top;
border-bottom:2px solid #1975d7;
color: #FFF;
text-transform:uppercase;
padding:10px;
margin:auto;
}

.demoTable td, .demoTable th {
padding: 4px;
}

.demoTable thead th {
text-align: center;
background: #fff;
color: #0B173B;
border: 1px solid #0B173B;
text-transform:uppercase;
}



.demoTable tbody tr {
background-color:#fff;
        color: #0B173B;
text-align:left;
}
.demoTable tbody tr th {
background-color:#50ADEA;
        color: #fff;
text-align:left;
}
.demoTable tbody tr.odd {
background: #f9f9f9;
border-top:1px solid #FFF;
}
/*.demoTable tbody tr:hover {
background: red;
border-top:1px solid #FFF;
}*/

.demoTable tbody tr td {
height:50px;
background: #FFF;
border: 1px solid #FFF;
}

.demoTable tbody tr.odd td{
background: #f9f9f9;
border-top:1px solid #FFF;
}

.demoTable td a:link, .demoTable td a:visited {
color: #0B3861;
text-decoration: none;
}

.demoTable td a:hover {
color: #0B3861;
border-bottom:2px solid #8FD5FF;
text-decoration: none ;
}

.demoTable tfoot th, .demoTable tfoot td {
background-color:#fff; padding:10px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:22px; font-weight:bold; font-style:italic;
border-bottom:3px solid #CCC;
border-top:1px solid #DFDFDF;
}





gracias de antemano, espero les haya sido de utilidad este breve tutorial
¡ GRACIAS!

jueves, 24 de marzo de 2011

HACER UNA PANTALLA DE USUARIO CON FORMA DE LAS IMAGENES Y LABELS TRANSPARENTES EN VB.NET


Uno de los problemas que se suele tener al realizar aplicaciones de escritorio, sobre todo en vb es el hecho que al trabajar con picture box y agregar etiquetas(labels) encima de estos pictures el fondo de los labels no es trasparente, aqui les dejo una solucion a este problema que quiero compartir, que lo encontre en la red y además una forma de lograr que mis formularios se adecuen a la forma de las imagenes o en otras palabras que el fondo sea trasparente , dando de esta manera una presentación mucho mas elegante y estetica a nuestra aplicacion, en esta ocasion diseñe una pantalla de acceso parecida a los sistemas web , pero en aplicacion de esritorio.


1. En primer lugar abrimos un nuevo proyecto VB

2. En la propiedad FormBorderStyle escogemos la opcion none


se debe ver el formulario de esta manera


3.- Si nosotros agregamos al formulario dos controles PictureBox; uno para la cabecera y el otro para el cuerpo del formulario


y si ajustamos al tamaño del formulario se veria de esta manera pero aun con el fondo del formulario


4.- Solucionamos este problema para que se vea como la imagel principio sin el fondo del formulario de la sgte manera:
En la propiedad BackColor y TransparencyKey del formulario elgimos el mismo color ..yo para este caso elegi en la paleta de colores en la ficha sistema MenuBar, luego ejecutamos(F5) y vemos que el fondo ha desaparecido

5.- Ahora le damos el diseño como la imagen del principio ..yo le puse para el encabezado que dice acceso al sistema la siguiente imagen, lo mismo que para los dos botones, y cambiando en la propiedad BackgroundImageLayout a Strech para que se ajuste la imagen al tamaño del boton

y la imagen del usuario es la siguiente


Por ultimo creo que ya esta demás indicar que en cada pictureBox que agregemos le damos la ruta de la imagen en la propiedad BackgroundImage y tambien modificamos la Propiedad BackgroundImageLayout a Strech y la ajustamos al tamaño que querramos para las cajas de texto en la propiedad backcolor en la ficha Sistema elegimos info y en la proiedad BorderStyle elegimos FixedSingle y listo!!


Ah me olvidaba para este caso como yo puse una imagen de fondo para el cuerpo de color blanco con bordes redondeados y sombreados no hay problema con los labels..pero si queremos tener un label trasparente que no se vea el fondo cuando la sobreponemos en un picture hacemos lo siguiente

a) clic derecho en el proyecto y elegimos agregar --> luego clase(la ultima opcion del menu contextual),le ponemos un nombre o lo djeamos por defecto con class1.vb
b) Luego borramos el codigo que alli aparece y copiamos el siguiente codigo








c) Luego clic derecho en el proyecto y elegimos generar
d) Ahora nos damos cuenta que en el cuadro de herramientas aparece una nueva herramienta llamada TransparentLabel

e) Por ultimo cuando la querramos utilizar solo tenemos que arrastrarla a cualquier parte del formulario y configurar las propiedades como querramos pero por defecto su fondo es transparente yo le coloque para poner en la cabecera version 1.0


Eso es todo , espero que les haya servido de algo
Gracias

viernes, 7 de enero de 2011

INSERTAR UNA IMAGEN EN BASES DE DATOS SQL SERVER 2008 CON VISUAL STUDIO 2008(C#)

Uno de los temas un poco mas complicados de mantenimiento de Registros en Bases de Datos es el de poder insertar Imágenes o fotografías cuando sea necesario para el cliente, navegando un poco por  la web encontré algunas soluciones, pero me quede con la más fácil, en el próximo tutorial a éste mostraré como hacer para mostrar los registros que guarden imagenes en REPORTING SERVICES y/o CRYSTAL REPORT, pero primero paso a paso como insertar un registro que contiene imagen en C#.

1. CREAR LA BASE DE DATOS Y LA TABLA EN SQL SERVER 2008
    - Clic en nueva consulta y escribir el siguiente código y luego ejecutar


2. CREAR EL PROYECTO EN VISUAL STUDIO 2008 Y DISEÑAR LA INTERFAZ
 - Proyecto de Aplicacion Windows c#
- Para mostrar la imagen elegir el control PictureBox



3. ESCRIBIR EL CÓDIGO DEL BOTÓN EXAMINAR PARA QUE SE ABRA EL CUADRO DE SELECCIÓN DE LA IMAGEN Y SELECCIONEMOS LA IMAGEN DESEADA Y SE MUESTRE EN EL PICTURE BOX
- cuando ejecutamos se muestra de la siguiente manera

4. ESCRIBIR EL CÓDIGO PARA EL BOTÓN GUARDAR


private void btnGuardar_Click(object sender, EventArgs e)
        {
            try
            {
                System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(@"Data Source=
(local);Initial Catalog=EJEMPLO;Integrated Security=SSPI");
                System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand();

                // Estableciento propiedades
                cmd.Connection = conn;
                cmd.CommandText = "INSERT INTO Productos VALUES (@Codigo, @Descripcion, @Cantidad, @precio, @foto)";

                // Creando los parámetros necesarios
                cmd.Parameters.Add("@Codigo", System.Data.SqlDbType.Int);
                cmd.Parameters.Add("@Descripcion", System.Data.SqlDbType.NVarChar);
                cmd.Parameters.Add("@Cantidad", System.Data.SqlDbType.Int);
                cmd.Parameters.Add("@precio", System.Data.SqlDbType.SmallMoney);
                cmd.Parameters.Add("@foto", System.Data.SqlDbType.Image);

                // Asignando los valores a los atributos
                cmd.Parameters["@Codigo"].Value = int.Parse(txtCodigo.Text);
                cmd.Parameters["@Descripcion"].Value = txtDescripcion.Text;
                cmd.Parameters["@Cantidad"].Value = int.Parse(txtCantidad.Text);
                cmd.Parameters["@precio"].Value = float.Parse(txtPrecio.Text);

                // Asignando el valor de la imagen

                // Stream usado como buffer
                System.IO.MemoryStream ms = new System.IO.MemoryStream();
                // Se guarda la imagen en el buffer
                picFoto.Image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
                // Se extraen los bytes del buffer para asignarlos como valor para el
                // parámetro.
                cmd.Parameters["@foto"].Value = ms.GetBuffer();

                conn.Open();
                cmd.ExecuteNonQuery();
                conn.Close();
            }
            catch (System.Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
            MessageBox.Show("Registro Guardado Correctamente");
        }
              
    }
}


5. EJECUTAMOS Y PROBAMOS


6. VERIFICAMOS EN LA BASE DE DATOS SI SE GUARDO EL REGISTRO

Como vemos el registro se guardo correctamente y en la columna Foto se guarda y valor de la ubicación en memoria de dicha imagen que se ha extraído sus bytes, para almacenarlos en un buffer que es finalmente en esta forma como se almacena en la BD.
Gracias

jueves, 2 de septiembre de 2010

Tutorial para hacer un reporte sencillo en visual studio 2010

Hola a todos, ya hace mucho tiempo que no hacia tutoriales por motivo de trabajo y falta de tiempo, en esta oportunidad me interese mucho sobre la nueva plataforma de VISUAL STUDIO 2010, no lo tenia instalado y me demore con mi conexión mas lenta que la disminución de la pobreza en mi país, me demore como 3 días en descargar todo x partes, pero aquí prepare un tutorial mostrando que realizar un reporte a diferencia de las otras versiones en VISUAL STUDIO 2010 es mas sencillo, el tutorial es básico para aquellos con pocos conocimientos de programación por eso la parte 1 es la creación del procedimiento almacenado que después lo utilizamos para mostrar el reporte a travez de un parámetro que se pasamos al reporte por una caja de texto.

Trate de hacerlo de manera mas practica y rápida posible , disculpen si mi voz por ratos no se escucha tal vez me falta mucho pero aun estoy haciendo mis pininos.
Atte. José García


PARTE 1





PARTE 2