Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Programar una Página Web – Parte 5

Hasta este punto ya tenemos nuestra página web creada con las tecnologías HTML, CSS y JavaScript. Recuerda repasar y prácticar una y otra vez todo lo que te he enseñado, asimismo dedicale tiempo a los cursos de HTML, CSS y JavaScript que te he compartido en cada parte de este tutorial. Recuerda que la dedicación, disciplina y constancia te va a llevar a tu objetivo de ser un desarrollador web. En esta parte cinco continuamos con el tutorial Como Programar una Página Web, vamos con ello.

Partes

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Como Mantenerte Motivado Para Seguir Programando” y “¿ Se Debe Escuchar Música Mientras Se Programa ?” (Anchor Podcast):

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Programar una Página Web – Parte 5. 

En años anteriores una página web solo estaba pensada para verse en las computadoras o pc, las páginas web no eran muy vistosas y solo cumplian su función, la de mostrar información determinada, acompañada con algunas imágenes y quizás algunos videos.

Con el paso del tiempo, de acuerdo a las necesidades del mercado y la aparición de los teléfonos inteligentes (Smartphone, iPhone, etc.), se planteo que para mejorar la experiencia de los usuarios al visitar una página web desde un celular o móvil, una página web deberia adaptarse al tamaño de pantalla de este.

En esta parte del tutorial te daré las nociones básicas para hacer una página web adaptable, recuerda que podemos hacer cosas más avanzadas, pero estas comenzando y debes ir de a pocos.

Como Hacer Que Una Página Web se Adapte a los Celulares o Móviles

Vamos a usar algunas partes del código de los archivos que hemos creado a lo largo de este tutorial. Hasta este punto tenemos creados los archivos index.html, estilos.css y app.js

Ya que al final del tutorial te compartiré el código fuente de todo el proyecto. Entonces no cambiare el código de los archivos creados anteriormente: index.html, estilos.css y app.js, sino creare 2 nuevos archivos llamados index2.html y estilos2.css para nuestra página adaptable a los dispositivos móviles. El archivo app.js de JavaScript si lo seguiré usando.

Archivo index2.html

Entonces con nuestro editor de código creamos un archivo con el nombres index2.html y agregamos el siguiente código:


En el editor de código se veria de la siguiente manera, Fijate que he agregado la etiqueta <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> antes de <title>Mi Proyecto – Home</title>, la he seleccionado para que la veas en la siguiente imagen, esta etiqueta permite que el usuario pueda ver la página web en una computadora o en un dispositivo móvil o celular.

Asimismo estoy llamando a un archivo llamado estilos2.css el cualquier crearemos más adelante, ya que como mencione anteriormente, terminado este tutorial compartiré el archivo anterior estilos.css y los demás tal como estaban y crear nuevos archivos para la página web adaptable a los dispositivos móviles o celulares:

Si abro el archivo index2.html en el navegador se debería ver sin estilos y con un aspecto poco agradable, esto es porque quite el anterior archivo llamado estilos.css y configure el archivo estilos2.css el cual aun no lo hemos creado:

Ahora pasemos a crear el archivo estilos2.css

Archivo estilos2.css

Con el editor de código creamos un archivo con el nombre estilos2.css y le agregamos el siguiente código CSS:


En el código anterior he agregado ciertas reglas y propiedades que hacen que nuestra página web se aprecie bien en dispositivos móviles, no quiero ahondar mucho en el código, ya que todo esto lo aprenderás de manera Gratis en el curso de CSS desde 0 que te compartí en la Parte 3 de este tutorial.

Ahora entonces abrimos nuevamente el archivo index2.html en el navegador y podemos ver que nuestra página recupero su aspecto visual y agradable:

Por último abrimos nuestro archivo JavaScript llamado app.js en cual creamos en la Parte 4 de este tutorial y debajo el código que creamos anteriormente, agregamos una nueva función llamada miMenu():


Lo que hace el código anterior es mostrar un icono con 3 rayitas como si fuera una hamburguesa, en si se le conoce como menu hamburguesa, para que cuando el usuario lo presione le aparescan los botones del menu, cuando el usuario se encuentre mirando la página web en un celular o dispositivo móvil.

Bien eso seria todo, en el siguiente video puedes ver el resultado final, en donde puedes el diseño de la página web cambia según el tamaño de la pantalla del dispositivo (por ejemplo de PC a celular o vicecersa):

Como Puedes ver hemos hecho uso de la tecnologías HTML, CSS y JavaScript para hacer nuestra página web adaptable y responsive a los dispositivos móviles o celulares.

Podemos crear diseños responsives más espectaculares, solo hemos hecho un ejemplo básico para que puedas aprender como se hace, recuerda que estas comenzando y debes ir de menos a más.

Bien hasta aqui hemos hecho que nuestra página web se pueda ver bien en los celulares y móviles.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil