Como lograr un sitio web que sea responsive

Habrás escuchado la palabra responsive muchas veces. Es pocas palabras te lo explico, es la habilidad de tu sitio web se adapte a cualquier tamaño de pantalla sin romperse (tanto visual como funcionalmente).

¿No te ha pasado que entras a un sitio web desde el celular y parece que rompiste algo en el sitio web, o algo no funciona, o algún botón o element se sobre pone? Ese sitio la falla algo a su responsiveness.

¿Porque es algo deseado? Cubres dos necesidades de un solo producto. Desarrollas un sitio para computadores, laptops o pantallas grandes en general y un sitio que se adapte a pantallas pequeñas, celulares, ipads, kioskos, etc. Esto es algo necesario hoy en día, tomando en cuenta que el mayor trafico de tus clientes potenciales viene de un móvil.

Entonces te preguntaras, ¿Cómo hago el mío responsive? Manera fácil: contrata a un experto como yo 🙂

Manera difícil: aprende css, diseño, ux ,etc. Si ya sabes todo eso, se te hará mas fácil, tu fiel amigo sera un componente del lenguaje css llamada **media querys**. Esto te permite delimitar o especificar un tamaño de pantalla especifico y aplicar reglas de diseño (Css) especificas para ese tamaño de pantalla. Claro los medias querys te pueden servir para muchas cosas más complejas.

Así que ya lo sabes, cuando te pregunten que es responsive, ahora ya lo sabes.

Próximamente hare un tutorial mas técnico con ejemplos de cómo se puede llevar a cabo esto. Suscribete al news letter

¿Cómo montar mi sitio web? Descripción general

https://colorlib.com/wp/how-to-make-a-website/

Has querido iniciar esa idea de tener un blog, o quieres probar una idea de negocio inicial o solo quiere conocer el proceso, aquí te lo explico.

Todo sitio web tiene al menos 3 partes principales:

Nombre de dominio

Necesitamos una dirección fácil de recordar que describa bien nuestro concepto. Estos nombres de dominios son las direcciones web que conocemos, por ejemplo Mark Zuckerberg o alguien en facebook, en algún momento de su negocio compro facebook.com, en algún momento Steve Jobs o alguien en Apple compro el dominio apple.com.

Como funciona

Los nombres de dominio son la manera fácil de encontrar una página web. ¿Te has preguntado alguna vez como es que el navegador siempre encuentra la dirección correcta? Porque recuerda, las computadoras son identificadas por una dirección, pero no es una dirección con letras, es una colección de números y es conocida como dirección IP. La intención de este post no explicar todo con detalles demasiados técnicos.

Entonces el nombre de dominio lo relacionamos a una dirección IP, en donde estará nuestro servidor, y asi poder mostrar al mundo nuestra idea del billon de dólares.

Estos nombres de dominio lo compras de sitios como godaddy, namecheap, entre otros. Los precios varian desde $1 hasta miles o cientos de dólares. Todo dependen del nombre que busques y si alguien ya lo adquirió y te lo quieren revender.

Servidor

Antes de era «cloud» o de la «nube» si alguien quería una pagina o aplicación web tenía que montar su propio servidor, esto implicaba comprar una computadora bastante poderosa en cuanto a sus especificaciones técnicas, pero no era solo eso, cuando tienen mucho poder, eso significa mucho calor, necesitabas un cuarto especial para el servidor con su propio aire acondicionado, y no basta ahi, esto necesita mantenimiento, necesita rutinas de seguridad y redundancia de datos, y con esto ya suena bastan complicado no?

Por fortuna ya no estamos en esos tiempos. Ahora hay varios servicios «cloud» o en «la nube» donde nosotros alquilamos un espacio es un servidor por una cuota mensual (si, así como netflix) y ellos nos dan una dirección IP donde estarán nuestras cosas. Usando estos servicios no necesitamos preocuparnos de nada técnico, solo pagamos y tenemos acceso. Si te preocupan aspectos mas específicos como seguridad de datos o redundancia de datos ya puedes comprar que ofrecen los diferentes distribuidores de estos servicios. Por mencionar algunos tenemos:

  • AWS
  • Digital Ocean
  • Vultr
  • Linode

Como en cualquier otro mercado o servicio, cada uno tiene sus ventajas y desventajas, sus precios y sus features. El mas barato es vultr con un servicio de $2.5 al mes, que para una fase inicial o pruebas esta bastante bien, no recomendado para uso oficial o en producción.

 

En este punto ya tendríamos un nombre de dominio y una dirección ip (servidor en la nube), pero se necesitan conectar, para esto vamos a la pagina del distribuidor del nombre de dominio y buscamos alguna opción que diga dns manager, o simplemente dns, agregaremos una nueva entrada en los tipos AAA, donde nos pedirá el nombre de dominio a asignar y una dirección IP a asociar. Guardamos los cambios y esperamos. Estos cambios tardan en propagarse, puede ser entre 1 hora a 24 horas.

Ya tendríamos nuestra dirección web funcionando, pero y el contenido?

Pagina web

Dentro de nuestro servidor en la nube, tendremos que instalar nuestro servidor web preferido. Esto es un programa que se encarga de traducir dirección en contenido HTML que tu navegador ya puede presentar con estilo y funciones especificas. Entre estos los mas conocidos y usados son:

  • Nginx
  • Apache

Al combinar estas tres cosas ya tendrás una pagina web funcional. Claro hay muchas mas cosas por ver. Si es una aplicación web, se necesita una base de datos a usar. Si se espera mucho trafico se podría implementar un balanceador de carga. Si se quiere utilizar alguna función en tiempo real se puede implementar una base de datos no relacional como redis. Debería implentarse algun certificado SSL para responder al protocolo HTTPS por seguridad de los datos, hay opciones gratis como lets encrypt. También tomar alguna opción para redundancia y backups de datos. Y muchas cosas más.

Cada caso es único y tiene sus propias particularidades. Si tienes experiencia en estos temas lo recomendado es haz tus pruebas, solo así aprenderás.

Si no tiene experiencia técnica o el tiempo para hacer todo esto te recomiendo buscar asesoría o un experto en el tema, como yo :), puedes revisar mis proyectos en mi cuenta de github o linkedin.

 

Si llegaste hasta aquí gracias por tomarte el tiempo de leer, y déjame tu opinión al respecto, que otro aspecto importante debería tomarse en cuenta.

Hasta la próxima.

LinkedIn
Share
Instagram
WhatsApp