¿Alguna vez has pensado en crear tu propio navegador de Internet? Con la cantidad de mala prensa que se están ganando muchos de los navegadores web más populares de hoy en día, especialmente debido a la falta de privacidad, puede que se te haya pasado la idea por la cabeza en algún momento.
En el post de hoy vamos a ver cómo crear un navegador web sencillo desde cero con la ayuda de Visual Studio. Se trata de un entorno de desarrollo que nos ayudará a dar forma a nuestra “aplicación casera” sin demasiadas complicaciones, y aunque hay que escribir algo de código, lo cierto es que apenas necesitamos saber programar. Basta con que sigamos al detalle los pasos que explicaremos a continuación. ¡No perdáis el hilo!
Cómo crear un navegador web sencillo para PC con Visual Studio
Para empezar, lo primero que tenemos que hacer es descargar la aplicación de Visual Studio Community 2022. Es gratuita y se puede descargar directamente desde la página oficial de Microsoft (disponible para Windows y Mac).
1- Instala Visual Studio en tu equipo
Una vez hemos descargado e iniciado el instalador, tendremos que seleccionar las cargas de trabajo que queremos instalar. Marcamos las pestañas de “Desarrollo de escritorio .NET” y “Desarrollo de aplicaciones de Windows” y pulsamos sobre “Instalar”.
Se trata de una instalación bastante pesada (unos 17GB), por lo que el proceso puede durar unos cuantos minutos.
2- Crea un nuevo proyecto
Una vez instalada, abrimos la aplicación de Visual Studio. Si es la primera vez que accedemos nos pedirá un usuario y contraseña, aunque podemos saltarnos este paso pulsando en «Omitir esto por el momento».
Una vez dentro de la pantalla de inicio de Visual Studio, elegimos “Crear un proyecto”.
Aquí encontraremos varias plantillas de proyecto predefinidas: buscamos la opción “Aplicación de Windows Forms (.NET Framework)” y hacemos clic en “Siguiente”.
A continuación daremos un nombre a nuestro navegador web. Para el caso de este ejemplo, llamaremos a nuestro navegador “Androide Feliz Navigator”.
3- Inserta un cuadro de navegación de tipo “WebBrowser”
Esto hará que entremos en el entorno de desarrollo del editor, donde pulsaremos sobre el menú “Cuadro de herramientas” ubicado en el lateral izquierdo de la interfaz. Si no ves el cuadro de herramientas, pulsa en «Ver» en la barra superior de Visual Basic y pulsa en «Cuadro de herramientas». Nota: también puedes abrir el cuadro de herramientas con la combinación de teclas CONTROL+ALT+X.
Una vez tengamos el cuadro desplegado, vamos a “Controles comunes”, seleccionamos la opción “WebBrowser” y la arrastramos hasta el formulario “Form1”.
Automáticamente, veremos cómo se carga una ventana de “Propiedades” en el lateral derecho. Desde aquí podremos ajustar algunos valores del navegador, como la altura y anchura de la ventana, la fuente, el color o si queremos que tenga barra de scroll, así como otras variables. Nota: Si no ves el cuadro de propiedades, haz clic derecho sobre la ventana Form1 y pulsa en «Propiedades».
Ahora volveremos a la ventana del formulario y pulsaremos sobre el pequeño botón desplegable que aparece en la parte superior derecha de la ventana. Seleccionamos “Desacoplar en contenedor primario”.
A continuación reajustaremos los márgenes del navegador para dejar algo de espacio para los botones que vamos crear en la parte superior de la ventana dentro de unos segundos.
4- Crea 5 botones para navegar y cargar las páginas web
Ahora que ya tenemos creada la ventana donde se mostrarán las páginas que vayamos cargando, daremos de alta 5 botones para controlar la navegación. Los botones cumplirán las funciones de ir a la página anterior, ir a la siguiente página, refrescar, cargar una página e ir a la página de inicio. Lo básico para navegar por internet.
Para ello, volveremos al menú del cuadro de herramientas y en “Controles comunes” arrastraremos el componente “Button” hasta el formulario. Lo colocaremos en una esquina y desde la caja de “Propiedades” le cambiaremos el nombre a “Atrás” (campo “text”).
Repetiremos este mismo proceso y crearemos también los botones “Adelante”, “Inicio”, “Actualizar” y “Cargar”.
Después de esto, también crearemos un nuevo componente desde “Controles comunes -> Text Box”. Esta será la caja de texto donde introduciremos las direcciones URL.
Al final tendremos una ventana más o menos como esta:
5- Programa las funciones de los botones
Esta es la parte más interesante. Lo que tenemos que hacer ahora es hacer un doble clic sobre el botón de “Atrás” para que podamos asignarle una función. Esto abrirá una ventana de código, situando el cursor en una línea en blanco. Sin mover el cursor del lugar en el que se encuentra, escribiremos lo siguiente:
webBrowser1.GoBack();
A continuación, volveremos al formulario y haremos doble clic sobre el botón “Adelante”, insertando la siguiente linea de código:
webBrowser1.GoForward();
Al botón de “Inicio” le asignaremos la siguiente función:
webBrowser1.Navigate(«https://www.google.com»);
En este ejemplo hemos puesto la URL de Google, pero por supuesto puedes sustituirla por tu página de inicio favorita.
En lo que respecta al botón de “Actualizar”, le aplicaremos la siguiente función:
webBrowser1.Refresh();
Por último, en el botón de “Cargar” insertaremos este otro código:
webBrowser1.Navigate(textBox1.Text);
6- Guarda, compila y ejecuta la aplicación
Ahora que ya tenemos cada pieza en su sitio, solo tenemos que guardar nuestro proyecto, ir al menú de “Compilar” y pulsar sobre el botón de «Generar (nombre de nuestra aplicación)«. También podemos pulsar el atajo de teclado CONTROL+B para iniciar la compilación.
Para ver el funcionamiento de nuestro navegador casero ya solo nos queda pulsar sobre el botón verde que indica “Iniciar”.
Como veis nos queda un navegador de lo más resultón. No deja de ser bastante rústico, pero como iniciación al mundo de Visual Studio es un comienzo de lo más sencillo a la par que interesante. Sin duda podemos mejorarlo realizando más ajustes y depuraciones, aunque eso ya depende de lo lejos que queramos llegar con el desarrollo de nuestra aplicación y del tiempo libre que queramos dedicarle al proyecto.
Quizá también te interese:
- 5 exploradores de archivos alternativos para Windows
- Cómo reducir el excesivo consumo de RAM y CPU en Firefox
- 15 programas gratis para PC que todo el mundo debería probar
¿Tienes Telegram instalado? Recibe el mejor post de cada día en nuestro canal. O si lo prefieres, echa un vistazo a nuestro nuevo canal de WhatsApp.
no se dieron cuenta que en la linea de «Inicio» hay un error en ves de lo que esta van las «»
Muy bonito y todo, pero el programa del propio navegador no es el culpable de que sepan nuestras actividades en la red, sino los propios buscadores como google, así que cualquier esfuerzo por crear un nuevo navegador para tener una supuesta privacidad está de más. Pero si es para tener un navegador hecho a nuestras necesidades esa es otra cosa.
A mi me interesaría saber si hay alguna manera de ejecutar un JS de una web mediante código y luego obtener su resultado, por ejemplo una pagina de MEGA donde el video ya no está, si no se carga el JavaScript no se puede saber si esta o no el video y así con más paginas…es un dilema y no se como afrontarlo…de momento claro 🙂
mira en js «JAVA SCRIP» al igual que en «JAVA» nos se puede hacer un navegador web si al caso solo un buscador interno en HTML CSS pero ya todos sabemos que eso es para las paginas WEB es como si tu intentares hacer una inteligencia artificial que solo opera con «PYTHON» lo quieres hacer con HTML osea no te saldría la inteligencia artificial
Cual es el codigo para las pestañas
Algo fundamental para los navegadores de hoy
emm me gusto tu explicacion peroooo tengo windos 7 ultimate y mi pc no soportara la descarga 🙁
Me gusta tu explicacion gracias
pero una pregunta
En el punto 3 tenemos que copiar todas las cordenadas incluyendo el `;´ ( Punto y Coma) ?
Esta bien
Nos hubiese ayudado mejor con un par de botones y configuraciones basicas
Esta cool
hola me parece genial esto me preguntaba como podria implementarle a ese rustico navegador web varios motores de busqueda que yo pueda seleccionar desde una pestaña y dejarle flash player showave flash y otros plugin y componenetes intalados y operativos popr defecto desde el inicio de uso de este navegador seria genial poder hacer uno funcional antes de fin de diciembre de 2020 gracias
mira para inplementarlo solo nesesitas saber python y tener windows 11 y no solo python tambien elixir java etc para darle las funsiones y ese toque minimalesta que quiereas ate.. Luis Alberto Alpuche («Programador & Desarrollador WEB Y De Videojuegos»)
Esta muiy cool , espero q me funsione tan bien como a los demas , cuando logre terminar la web les comento como me fue en realidad
2 años despues y aun no a llegado a probarlo xd