Simple navegador web en C# Framework 2.0 Mayo 5, 2010
Publicado por Pablo Ruiz en : .Net , 2 comentariosLos pasos a seguir para crear un simple navegador web en C# y usando un framework 2.0 son los siguientes:
Lo que Primero hacemos es Crear un Proyecto Nuevo (Visual Studio 2005), lenguaje C#. y das un nombre a elección. Luego tenemos nuestro Form que se verá algo así:
Luego lo que hacemos es añadir un Control de ToolBox llamado WebBrowser, por defecto al arrastrar el WebBrowser ocupa el form completo pero como necesitamos solo mostrar la página web en éste desbloqueamos el control WebBrowser para poder eleguir la posición a gusto de donde se mostrará la web:
Después de eleguir la posición del Web Browser vamos a las propiedades de éste para configurar la acción de cuando se maximiza la ventana automáticamente se maximise el WebBrowser:
Ahora nos queda ingresar los botones comunes en un navegador como lo es el “Ir a” “Atrás” “Adelante” “Parar” “Actualizar” “Barra de Direcciones”. Para ésto poner los controles a gusto debería quedar algo así:
Ahora ya tenemos los controles ingresados sobre nuestro Form ahora lo que hacemos añadimos los Eventos a cada uno.
Empezaremos con Botón Atrás “btAtras”
private void btAtras_Click(object sender, EventArgs e){ webBrowser1.GoBack(); }
Ahora Botón Adelante “btAdelante”
private void btAdelante_Click(object sender, EventArgs e) { webBrowser1.GoForward(); }
Ahora Botón Parar “btParar”
private void btParar_Click(object sender, EventArgs e) { webBrowser1.Stop(); }
Ahora Botón Actualizar “btActualizar”
private void btActualizar_Click(object sender, EventArgs e) { webBrowser1.Update(); }
Ahora Botón Inicio “btInicio”
private void btInicio_Click(object sender, EventArgs e){ webBrowser1.GoHome(); }
Ahora Botón Ir A “btIrA”
private void btIrA_Click(object sender, EventArgs e){ webBrowser1.Navigate(tbDireccionWeb.Text); }
Ahora os dejo el código completo de deberían tener en Form1.Cs
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace SethBrowser{ public partial class Form1 : Form { public Form1(){ InitializeComponent(); } private void btAtras_Click(object sender, EventArgs e) { webBrowser1.GoBack(); } private void btAdelante_Click(object sender, EventArgs e){ webBrowser1.GoForward(); } private void btParar_Click(object sender, EventArgs e){ webBrowser1.Stop(); } private void btActualizar_Click(object sender, EventArgs e) { webBrowser1.Update(); } private void btInicio_Click(object sender, EventArgs e){ webBrowser1.GoHome(); } private void btIrA_Click(object sender, EventArgs e) { webBrowser1.Navigate(tbDireccionWeb.Text); } } }
Ya tenemos todos nuestros contoles con sus respectivas acciones.
Veamos como queda Linea de Código en nuestro navegador
Les dejo un proyecto Visual Studio 2005 con el navegador (tiene algunas funcionalidades mas, cómo capturar tecla enter, buscador para google, etc):
|- Descargar el código|- Foro sobre C#
Recuperar datos de un formulario con PHP Enero 3, 2010
Publicado por lineadecodigo en : PHP , 3 comentariosVamos a crear un código en PHP que nos permita recuperar los datos introducidos en un formulario y nos los muestre en pantalla.
El primer paso será el crear el formulario HTML que nos permita captar los datos del usuario. Este formulario tendrá dos campos de texto y un botón que nos permita enviarlo.
En este punto es muy importante el valor de los atributos name, ya que serán los valores que demos a estos atributos, los que nos sirvan para recuperar lo que el usuario introduzca. En nuestro caso hemos datos los valores de p1 y p2. Que serán los que recuperemos.
Un segundo punto en el que tenemos que prestar atención es en atributo action. En dicho atributo tenemos que indicar el nombre del fichero PHP que procesará y recuperará los datos del formulario. El fichero que codificaremos más adelante se llamará recibir-parametros.php
El último punto importante del formulario será el tipo de envío de los parámetros. El tipo de envío se especifica mediante el atributo method y sus valores pueden ser POST o GET. Con POST los parámetros se pasan de forma oculta, mientras que con GET podemos ver los valores en la URL de petición. Dependiendo del método de envío que utilicemos necesitaremos utilizar un método u otro en nuestro código PHP.
Pasemos ya a codificar el fichero PHP. Este será sencillo. El método para recuperar datos de un formulario, cuando estamos pasando los parámetros mediante el método GET, es $_GET[]. El nombre del dato a recuperar se pasará como parámetro.
Ahora solo nos quedará el mostrarlo por pantalla. Para ello utilizamos la sentencia echo de la siguiente forma:
|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre PHP
Deshabilitar un elemento del formulario con Prototype Septiembre 13, 2009
Publicado por lineadecodigo en : Prototype , Añadir un comenarioPrototype nos permite manejar elementos de la página web de una forma muy sencilla. Es por ello que nos es muy útil cuando interactuamos con formularios. En este ejemplo vamos a ver como podemos deshabilitar un elemento del formulario. Sin necesidad de deshabilitar todo el formulario, cosa que ya vimos en el pasado.
Lo primero que tenemos que hacer es cargar la librería de Prototype:
Ahora que tenemos cargada la librería de Prototype pasaremos a crear un formulario. Este será sencillo. Una de las cosas sobre las que tenemos que prestar atención es el dar ID a los elementos del formulario. Ya que el código de Prototype se apoyará en dichos ID.
Veamos como será nuestro formulario:
En concreto vamos a deshabilitar el campo 'apellido'. Así que será este el ID que manejemos.
El código de Prototype que nos permite deshabilitar un elemento del formulario utilizará el objeto Form.Element y en concreto el método .disable() (o .enable() si queremos volver a habilitar el elemento del formulario). Así que crearemos un botón que nos permita lanzar dicho código.
Como podéis comprobar es un código realmente sencillo.
|- Visualizar el ejemplo|- Descargar el código
|- Reportar error en el código
|- Foro sobre Prototype
Reloj en JavaScript Septiembre 6, 2009
Publicado por lineadecodigo en : JavaScript , Hasta ahora 1 comentarioY te preguntaras ¿y para que quiero saber la hora que es?, si quiero saberla, simplemente puedo mirar la barra de mi gestor de ventanas, o simplemente mirarme la muñeca o mirar el fabuloso, reloj de pared, el cual me marca hasta las horas en punto.
Pues nosotros te lo pondremos más fácil. Para que no tengas que perder esos fabulosos segundos en mirar hacia abajo o arriba, e incluso en girar tu muñeca para ver que hora es, te vamos a explicar como poner un reloj en una página web. Aunque, me pregunto yo, si mientras se prepara el ordenador para interpretar las rutinas JavaScript me puedo hacer hasta la cena ¿no?.
Bueno pasamos a lo practico, primeramente obtenemos la fecha y de la fecha mediante los métodos .getHours(), .getMinutes() y .getSeconds() obtenemos la hora, minutos y segundos. Estos métodos son del objeto Date. Recuerda que estos son los de tu maquina.
El codigo seria el siguiente:
Posteriormente realizaremos una comprobación de que si el valor que tiene en un momento dado cualquiera de las variables anteriores esta entre 0 y 9, añadiremos un cero delante. Simplemente para que nos quede más mona la hora.
Para visualizar la hora en el navegador crearemos un formulario con una entrada de texto.
El valor lo volcamos accediendo al ID del campo del formulario mediante .getElementById().
Y la forma de ejecución es el mostrar la hora cada segundo mediante la función setTimeout(cadena,milisegundos), la cual ejecuta la cadena indicada pasados los milisegundos indicados. (En nuestro caso cada segundo - 1000 msg). Esta función es del objeto Window.
También indicar que hay que empezar a ejecutarlo cuando se cargue la pagina, es por ello que utilizaremos el método onLoad(), para empezar a ejecutarlo, mediante setTimeout().
|- Visualizar el ejemplo|- Descargar el código
|- Reportar error en el código
|- Foro sobre JavaScript
Controlar el envío de un formulario con JavaScript Abril 24, 2009
Publicado por lineadecodigo en : JavaScript , 2 comentariosCuando creamos un formulario en HTML es posible que haya ciertas ocasiones en las cuales no nos interese que este no se envíe hasta que los datos cumplan unos requisitos o condiciones mínimas.
Para ello podemos controlar el envío de un formulario con JavaScript. Lo primero que haremos será crear el formulario.
Vemos que este formulario se enviará a "enviar.php" cuando pulsemos sobre el botón.
Para interceptar el envío del formulario tenemos que controlar el evento onsubmit del formulario. Al evento onsubmit le asignaremos una función JavaScript que será la encargada de controlar el envío.
En nuestro código estamos asignándole la función enviar(). Es muy importante poner el return delante del nombre de la función, ya que dependiendo del valor que retorne la función se enviará o no el formulario.
Si la función retorna true, se envía el formulario. En caso de que se retorne false, el formulario no será enviado. Lo que queramos controlar dentro del formulario queda a nuestra elección. En nuestro caso estamos controlando que el valor introducido en el campo comando sea igual a "enviar".
De esta forma la función "enviar()" quedará de la siguiente forma:
|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre JavaScript
Enviar emails desde una página web Febrero 27, 2009
Publicado por lineadecodigo en : HTML , 4 comentariosAunque al día de hoy casi todas las páginas están versadas en uno u otro lenguaje de servidor: ASP, PHP, JSP,... existe un amplio espectro de páginas desarrolladas en HTML. Casi siempre con la inestimable ayuda de un editor web. Y es que es mucha la gente, que con unos conocimientos mínimos de Internet, se lanza a este para contarle algo al ciber espacio. E incluso habrá sitios dónde podrámos insertar código HTML y que no permite utilizar otro lenguaje
Y ya puestos, y una vez que nos hemos currado una página web, nos apetece que la gente comparta con nosotros su opinión sobre la misma. O simplemente se ponga en contacto con nosotros.
Una vez en esta tesitura, lo más fácil sería poner un texto que sea un enlace (o no) con nuestra dirección de email. Aquí, le estamos dando al comunicante solo nuestra dirección y el, la utilizará para contarnos lo que quiera. Si quieres tomar esta opción léete el articulo "Propiedades de los enlaces de email" el cual te ayudará a darle más potencia a tus enlaces de email.
Pero claro, puede ser que queramos, que cuando nos escriba, rellene cierta información que con el email no sabremos nunca si nos la va a enviar o no. Para ello tenemos los formularios. Y será entonces cuando queramos que nos envíe lo relleno en el formulario.
En este punto tenemos dos opciones. O bien tiramos de algún lenguaje de servidor (para aludidos, no tiene desperdicio Mandar emails con JavaMail)
Para que el usuario nos envíe el formulario utilizando HTML solo tendremos que hacer una cosa. Poner "mailto:miusuario@miemail.com" en el campo action del formulario. Quedándonos un código HTML como este, mediante la etiqueta FORM:
<FORM action="mailto:miusuario@miemail.com">
Con esto conseguiremos que el usuario nos envíe un email con la estructura del formulario.
Una vez montando nuestro formulario veremos que si le damos a enviar el texto recibido puede ser algo como esto:
textfield=victor&textfield2=victor%40miemail.com&textarea=cojonuda
El problema es que para diferenciar las diferentes partes del mensaje, el navegador utiliza los identificadores de los campos. Es por ello que es bastante conveniente el modificarlos. Para tal fin hay que modificar el campo name de los campos del formulario. Podríamos ponerlos así:
Ahora, la cadena recibida, sería la siguiente:
nombre=victor&email=victor%40miemail.com&opinion=cojonuda
Aunque sigue siendo una cadena críptica, es algo más clara que la anterior.
Además tenemos que tener en mente un par de cosas. La primera es que esto solo funcionará si el usuario tiene un programa de correo electrónico en su ordenador (Outlook, Outlook Express, Eudora...). Hay que tener cuidado, ya que aunque es raro que el ordenador no tenga un programa de correo electrónico, puede darse el caso.
La segunda es que aunque nosotros le hayamos puesto los campos (incluso poniendolos cómo obligatorios -podríamos usar JavaScript-), el usuario tiene la capacidad de modificar el email antes de enviarlo.
Aún con todo, esto es una buena solución para que se pongan en contacto con nosotros de forma sencilla.
Al final nos quedará el siguiente formulario:
<form name="form1" method="post" action="mailto:contacto@lineadecodigo.com"> label"><label for="nombre">Nombre: </label> <input type="text" name="nombre" id="nombre"> label"><label for="email">Email: </label> <input type="text" name="nombre" id="email"> ¿Qué te pareció la página? <textarea id="opinion" name="opinion"></textarea> <input type="submit" name="Submit" value="Enviar"> </form>|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre HTML
¿Cuantos formularios hay en mi página? Febrero 27, 2008
Publicado por lineadecodigo en : JavaScript , Añadir un comenarioLos formularios son los elementos HTML que nos permiten recoger información del usuario y enviarla a un servidor. Los formularios pueden contener elementos gráficos o simplemente contener la información para en envío de datos y permanecer ocultos.
Los formularios forman parte de la estructura de la página y por lo tanto del DOM. Esto nos abre la posibilidad de acceder a ellos, modificar su información,... y como en este ejemplo, simplemente conocer cuantos formularios componen nuestra página.
Coordenadas del ratón con JavaScript Febrero 10, 2008
Publicado por lineadecodigo en : JavaScript , 3 comentariosEn este ejemplo vamos a ver como podemos conocer las coordenadas del ratón con JavaScript. Para ello, el ejemplo consistirá en volcar sobre dos campos de entrada de un formulario los valores de las coordenadas X,Y donde se encuentra posicionado el puntero del ratón.
Lo primero que hacemos es crear el formulario. Esto no debería de suponernos muchos problemas:
Buscar en la lista Febrero 4, 2008
Publicado por lineadecodigo en : JavaScript , 6 comentariosLa idea de este ejemplo es realizar una búsqueda sobre un listado de datos (presente en una lista de un formulario) partiendo de una entrada que va el usuario tecleando paulatinamente. Por ejemplo si partimos del siguiente listado de deportes
'Atletismo ', 'Aerobic', 'Balonmano', 'Beisbol', 'Badminton', 'Baloncesto', 'Footing', 'Fútbol', 'Gimnasia', 'Voleibol'
Si el usuario teclea una A o a debería de filtrar por todos aquellos deportes que empiecen por dicha letra, quedándonos...
'Atletismo ','Aerobic'
si posteriormente el usuario teclea una E o e, se filtraría por aquellos deportes que empezasen por AE, quedándonos...
'Aerobic'
Posicionar el lugar de error en wForms Diciembre 11, 2007
Publicado por lineadecodigo en : wForms , Añadir un comenarioSi utilizamos wForms veremos que los mensajes de error siempre se posicionan debajo del campo del formulario que ha generado el error. Si bien, de una forma muy sencilla podremos definir donde queremos que salga el error.
Lo más normal es que el error se muestre cerca del campo que ha generado el error para, de esta forma, ayudar al usuario a localizar el campo y corregir el error. Si bien, en ciertos casos, piden a los programadores que los errores se sitúen en sitios insospechados.
Por ejemplo, si tenemos un formulario que pida un nombre y una edad, podríamos querer mostrar el error, siempre, en la parte inferior, entre el último campo y el botón de envío.