63

10 consejos para crear un sitio web

1285Puntos

hace 3 años

Es común que al presentar un trabajo final a un cliente haya problemas de funcionamiento, pues muchas veces olvidamos ciertos detalles. Es por eso que quiero compartir 10 tips que se deben realizar antes de presentar un trabajo para que no tengas que hacer muchos cambios al final.

1. Usa un Framework de gran demanda para el Front-end

Al usar un Framework para el Fron-tend nos liberamos un poco de pensar en los detalles de adaptabilidad a dispositivos móviles, desde las fuentes, botones, párrafos, menús; hasta imágenes, videos y varios elementos que le vas a incluir al proyecto. Uno de gran demanda que puedes usar es Bootstrap que ya se encuentra en su versión 4 y tiene muy interesantes novedades que explico en este artículo .
Captura de pantalla 2017-10-06 a la(s) 5.32.37 p. m..png

Al tener gran demanda y ser muy usado por la comunidad de desarrolladores Front-end, encontrarás mucha ayuda e información cuando tengas un problema con el uso de este genial Framework Front-end.

2. Haz pruebas con un emulador de dispositivos móviles con distintas medidas

Puedes usar el emulador que trae Google Chrome, ir al menú de opciones y seleccionar Herramientas > Herramientas para desarrolladores, y así tendrás el entorno de emulación en dispositivos móviles.
Captura de pantalla 2017-10-06 a la(s) 5.34.44 p. m..png

En la imagen anterior podemos ver al lado derecho la flecha que apunta al icono que debemos darle clic para cargar el emulador de dispositivos móviles, y a la izquierda otra flecha en donde debemos hacer clic para elegir o personalizar las diferentes medidas del dispositivo.

3. Usa un Framework de gran demanda para el Back-end

Los grandes proyectos suelen tener un área administrativa para gestionar los contenidos de multimedia como videos, imágenes, etc. Muchas veces cometes el error de hacer todo desde cero olvidando factores como la seguridad y estabilidad del administrador, y te enfocas solo en hacer que el administrador realice las tareas CRUD (Create, Read, Update y Delete).
Captura de pantalla 2017-10-06 a la(s) 5.37.24 p. m..png

En Platzi hay cursos en lo que puedes aprender Django, Laravel o Ruby on Rails. Se profesional y usa lo correcto.

4. Haz CrossBrowser Testing al máximo

No todos los usuario que verán tu proyecto van a usar el mismo navegador, por eso debes visualizarlo en diferentes versiones de navegadores de internet. No te enfoques en uno solo, debes valorar también navegadores como Internet Explorer pues aún hay usuarios potenciales que usan las versiones 7 a la 11, Mozilla Firefox, Microsoft Edge, Google Chrome, Opera, etc. No olvides sus versiones para dispositivos móviles.

Captura de pantalla 2017-10-06 a la(s) 5.39.13 p. m..png

No sabemos desde qué navegador puede ingresar un usuario y detectar un error, es mejor ser precavidos.

5. Un CMS nos alivia muchos dolores de cabeza

Los Administradores de Contenido son geniales, nos ayudan a solo enfocarnos en los requerimientos más importantes del cliente, como el diseño y la usabilidad de este, además brindan una interfaz profesional para administrar los contenidos del proyecto.
Captura de pantalla 2017-10-06 a la(s) 5.40.57 p. m..png

Existen muchos proyectos que usan CMS como WordPress, Joomla, Drupal, etc. Es una manera ágil de hacer un proyecto, nos hace más productivos. Los CMS son escalables y suelen usar plugins, estos hacen que su escalabilidad sea muy grande.

6. Usa servicios de almacenamiento de imágenes en la Nube

Muchos de los proyectos suelen escalar y crecer en contenidos, un ejemplo de ello son los blogs que cuando tienen muchos contenidos acumulados, con el paso de los años es más delicado manejar la data. Si decides migrar a otro servidor esto te puede dar problemas con las imágenes que no se migran correctamente, pero si están en un servicio en la nube puedes evitarte estos dolores de cabeza ya que siempre que migres o realices alguna modificación en donde las imágenes de tu proyecto se vean comprometidas, estarán siendo instanciadas desde el repositorio en la nube.

Captura de pantalla 2017-10-06 a la(s) 5.45.12 p. m..png

El caso no necesariamente tiene que ser un blog, puede ser un proyecto pequeño con una galería de imágenes en donde eliminaste una y nunca más la pudiste recuperar, pero si solo colocas la URL de la imagen en el proyecto ya la tienes al instante evitando así una mala experiencia del usuario con tu proyecto, un buen gestor de imágenes en la nube es Cloudinary.

7. Usa CDN para evitar la ralentización

Hay veces en las que conforme vas agregando más contenidos al proyecto este suele sobrecargarse y empieza a tener una carga cada vez más lenta, entonces con un sistema de Distribución de Contenido (CDN) lograrás evitarlo.

Captura de pantalla 2017-10-06 a la(s) 5.46.39 p. m..png

Lo que un CDN hace es distribuir partes del contenido de tu proyecto en diferentes servidores evitando así usar un solo servidor para cargar el contenido de tu proyecto y dándole más velocidad al mismo. Si tus tiempos de carga son largos los usuarios se irán a la competencia y tal vez su proyecto carga más rápido.

8. Utiliza la ruta absoluta de cada archivo

A veces puede pasar que un usuario ingresa a cierta parte del proyecto y no cargan bien los estilos CSS, los archivos JS, PHP entre otros, lo cual hace que generes una mala experiencia de usuario.

Captura de pantalla 2017-10-06 a la(s) 5.48.11 p. m..png

Al colocar la URL completa nunca tendrás problemas de carga del archivo, eso sí asegúrate de que esté bien escrito el nombre del archivo.

9. Usa un servidor de buenas características

Suele pasar que el espacio del servidor se llena tanto por agregar contenidos al proyecto o se llenan las bandejas de correos sin haber eliminado los correos antiguos previamente descargados al ordenador con algún cliente de Correo como Outlook. Cuando descuidas estos detalles llega un momento en que el proyecto se cae y tienes que llamar al proveedor de Hosting para comprarle más espacio.

Captura de pantalla 2017-10-06 a la(s) 5.49.53 p. m..png

En lo posible es mejor hacer una inversión mínima y luego ir escalando, pero hay proyectos en los que desde el inicio tienen un gran flujo de datos, gran uso de ancho de banda, muchas bases de datos y por ende necesitas tener un Hosting con las características ideales para evitar la caída del proyecto cuando este se encuentre en línea.

10. Agrega un formulario para que los usuarios reporten los errores

Por último, si crees que tu proyecto está bien y no presenta problemas, nunca está de más darle un correcto mantenimiento, teniendo conocimiento de qué errores se pueden estar presentando. Son los usuarios los que te pueden ayudar reportando el error que han encontrado por medio de un formulario.

Captura de pantalla 2017-10-06 a la(s) 5.51.09 p. m..png

Con esto solucionarás problemas en el proyecto, generas una buena experiencia en el usuario, verán los errores corregidos y que los tienes en cuenta cada vez que avisen sobre un error.

No olvides seguir estos consejos que te salvarán la vida en cada proyecto que hagas. Es cuestión que los pongas en uso y te irá mejor.

Gracias por leer este artículo, nos vemos en una próxima publicación.

Juan Ricardo
Juan Ricardo
@pepoflex

1285Puntos

hace 3 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
8
6137Puntos

Yo aconsejo usar librerias javascript para la logica del lado del cliente para no recergar el servidor. como lo son react, angular o vue, y platzi ya tiene cursos para ello.

0
1285Puntos
3 años

Que bueno, gracias por visitar mi articulo 😃

0
1285Puntos
3 años

Gracias a ti por visitar mi articulo 😃

2
24981Puntos

Valioso aporte Juan, sin duda no puede faltar todo lo que recomiendas en un website

0
1285Puntos
3 años

Gracias Leonidas, espero que les ayude a muchos diseñadores web.

1
6981Puntos

Buenos consejos para desempeñarse como desarrollador web 😃

0
1285Puntos
3 años

En hora buena espero que te sirvan de mucho y gracias por visitar mi post.

1
6265Puntos

Si creo una maqueta en bootstrap, la puedo subir en un CMS como Wordpress para que mi cliente pueda administrar el contenido? Necesita algun requerimiento en especial?

0
1285Puntos
3 años

Si lo puedes hacer, solo necesitas conocer la estructura de una plantilla de Wordpress, gracias por visitar mi Post.

1
28597Puntos

Excelentes consejos! muchas gracias =)!

sería genial que siguiendo esta línea te animes a crear uno “entry level”

0
1285Puntos
3 años

A que te refieres con entry level ?
Gracias por visitar mi Post.

1
5886Puntos

Muy buen articulo, muchas gracias.

0
1285Puntos
3 años

Gracias a ti por visitar mi articulo 😃

1
11802Puntos

Excelente articulo!! Buenisimos consejos.

0
1285Puntos
3 años

De nada, espero te ayude de mucho.

1
1436Puntos

muchas gracias

0
1285Puntos
3 años

Gracias a ti por visitar mi articulo 😃

1

Me gustó el:
7. Usa CDN para evitar la ralentización
Debería ser una práctica más frecuente.

Y esto mmm…
9. Usa un servidor de buenas características
En serio? Según veo los demás consejos este no está a la altura.

Me gustó mucho.

0
1285Puntos
3 años

Entiendo, pero para los que no conocen o aun inician en el tema, creo les puede servir, te agradezco por visitar mi articulo.

1
24235Puntos

Hola, gracias por el muy buen aporte.
Me ayudarías con una consulta, cómo se hace un mantenimiento del sitio web, en qué consiste extactamente?., ya lo googlé pero la verdad la información no es tan digerible.

0
1285Puntos
3 años

Básicamente es hacer constantemente cambios y mejoras en el proyecto ya publicado, espero poder haberte ayudado, gracias por visitar mi articulo.

1
15795Puntos

En este caso, cuál es la mejor práctica para combinar un framework backend y un cms distintos en el mismo sitio, evitando conflictos funcionales y de rutas?

0
1285Puntos
3 años

Para que necesitas hacer ello, lo recomendable es usar las propias funciones del cms.

1
55Puntos

Excelentes consejos, gracias por la información!

0
1285Puntos
3 años

Gracias a ti por ver mi Post.

1

Excelente articulo. Gracias !

0
1285Puntos
3 años

Gracias espero que te ayude de mucho.

1
3802Puntos

muy buenos consejos para tomar en cuenta cuando uno esta iniciando como es mi caso muchas gracias 😄

0
1285Puntos
3 años

Gracias, espero que te ayuden mucho en tu aprendizaje.

1
8352Puntos

Muy buen artículo.
Hoy en día las opciones para tener un sitio en poco tiempo son muchísimas.

0
1285Puntos
3 años

Gracias, es cierto lo que mencionas 😃

1
8524Puntos

Hola gracias por el aporte.

Estoy de acuerdo en la mayoría de puntos pero hay dos que no comparto. El primero es el uso de CMS, si el cliente no me lo pide haría el codigo desde 0 ya que le da un enfoque mas personalizado y pasa lo mismo con el uso de bootstrap, ¿que me hace diferente de la competencia de sitios web relacionados si casi todos usan bootsrap?.

En mi opinión evitaria usarlos.

Un saludo

0
1285Puntos
3 años

Gracias por visitar mi articulo, entiendo tu punto de vista y lo aprecio.

0
15307Puntos
3 años

En el caso de bootstrap puedes utilizar sólo lo que te convenga para que el diseño no se vea afectado, por ejemplo, su grilla.

1
9261Puntos

Otro punto importante para tener buenos resultados en un proyecto web, es haber realizado una buena captura de los requisitos del cliente y haber determinado desde un principio su alcance. De este modo ahorramos que nos pidan cambios o cosas adicionales a última hora. (aunque esto último siempre es negociable)

0
1285Puntos
3 años

Muy bueno tu consejo, es parte de proceso de recopilación de datos. Gracias por visitar mi Post.

1
34Puntos

Muy buen articulo.

0
1285Puntos
3 años

Gracias espero te haya ayudado mucho.

1
2929Puntos

Muy bueno pepoflex, Gracias!

0
1285Puntos
3 años

Gracias, aprecio tu comentario.

1
7011Puntos

Muchas gracias por la información la tengo muy en cuenta para dar los primeros pasos.

1
3413Puntos

Muchas Gracias por tu aporte!!