SlideShare una empresa de Scribd logo
Antes de terminar un proyecto web sea para un emprendimiento propio o para un cliente debemos
asegurarnos que todo funcione perfectamente. Es por eso que te dejamos unos consejos para que
no tengas muchos problemas al implementar tu web.
1. Usa un Framework de gran demanda para el Front-end
2. Haz pruebas con un emulador de dispositivos móviles con distintas medidas
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. Algunos de gran demanda que
se puede usar serían: Bootstrap, Foundation, Materialize CSS y que ya que tienen muy
interesantes novedades que explico en este artículo
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.
En las imágenes podemos apreciar como simulamos ver la web en un dispositivo móvil
CONSEJOS PARA CREAR PROYECTOS WEB
3. Usa un Framework de gran demanda para el Back-end
4. Haz CrossBrowser Testing al máximo
5. Un CMS nos alivia muchos dolores de cabeza
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).
Los framework más populares son Django, Laravel, Rails .
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, Safari etc. No olvides sus versiones para
dispositivos móviles.
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.
Existen muchos proyectos que usan CMS como WordPress, Joomla, Drupal, Prestashop,
Magento, Shopify 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
7. Usa CDN para evitar la ralentización
8. Utiliza la ruta absoluta de cada archivo
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.
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.
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.
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.
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.
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 o ancho
de banda.
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.
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. Incluso pueden darte opiniones de tu aplicación web o móvil.
Por último, tienes que contemplar que tu web la va a
visitar muchísimas personas y no todas con las mismas
capacidades así que tienes que hacer tu web sea
navegable con cualquier
tipo de software ya sea para personas que no pueden
leer o necesitan algún dispositivo físico para poder
navegar por la web. Contemplando estos puntos Google
también te recompensará con un buen posicionamiento
de tu web.
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.
10. Agrega un formulario para que los usuarios reporten los errores
11. Tu web debe ser siempre accesible.
Consejos clave para_crear_proyectos_web

Más contenido relacionado

La actualidad más candente

Trabajo de informatik
Trabajo de informatikTrabajo de informatik
Trabajo de informatikRnDño Gil
 
Wpo mejora los tiempos de carga de tu web
Wpo mejora los tiempos de carga de tu web Wpo mejora los tiempos de carga de tu web
Wpo mejora los tiempos de carga de tu web
SEMrush_es
 
Wordpress
WordpressWordpress
Wordpress
ximena bonilla
 
Que es un blog
Que es un blogQue es un blog
Que es un blogpitufina02
 
Todo sobre dreamweaver
Todo sobre dreamweaverTodo sobre dreamweaver
Todo sobre dreamweaver
vidalitomasna
 
Presentación 3
Presentación 3Presentación 3
Presentación 3
betzabe55
 
Word pres
Word presWord pres
Word pres
cristhianrocker
 
Trabajo flash
Trabajo flashTrabajo flash
Trabajo flash
luzdaryperez
 
Qué es el diseño web responsivo
Qué es el diseño web responsivoQué es el diseño web responsivo
Qué es el diseño web responsivo
Zerozeroestudio
 
12 técnicas WPO para optimizar Wordpress
12 técnicas WPO para optimizar Wordpress12 técnicas WPO para optimizar Wordpress
12 técnicas WPO para optimizar Wordpress
Raiola Networks
 
Crear un-blog-en-blogger
Crear un-blog-en-bloggerCrear un-blog-en-blogger
Crear un-blog-en-blogger
laurititalopez
 
Adobe dreamweaver cs6
Adobe dreamweaver cs6Adobe dreamweaver cs6
Adobe dreamweaver cs6Daniel Mf
 
Whitepaper - Cómo crear un menú desplegable en WordPress
Whitepaper - Cómo crear un menú desplegable en WordPress Whitepaper - Cómo crear un menú desplegable en WordPress
Whitepaper - Cómo crear un menú desplegable en WordPress
Arsys
 
Webinar: Introducción a VUE.js
Webinar: Introducción a VUE.jsWebinar: Introducción a VUE.js
Webinar: Introducción a VUE.js
Arsys
 
Clase 1 aspnet-para-slide share
Clase 1 aspnet-para-slide shareClase 1 aspnet-para-slide share
Clase 1 aspnet-para-slide share
aguilahalcon2009
 
Manual de jquery en pdf desarrollowebcom
Manual de jquery en pdf desarrollowebcomManual de jquery en pdf desarrollowebcom
Manual de jquery en pdf desarrollowebcomjo_ram
 

La actualidad más candente (18)

Trabajo de informatik
Trabajo de informatikTrabajo de informatik
Trabajo de informatik
 
Wpo mejora los tiempos de carga de tu web
Wpo mejora los tiempos de carga de tu web Wpo mejora los tiempos de carga de tu web
Wpo mejora los tiempos de carga de tu web
 
Wordpress
WordpressWordpress
Wordpress
 
Que es un blog
Que es un blogQue es un blog
Que es un blog
 
Andrea Olivera
Andrea OliveraAndrea Olivera
Andrea Olivera
 
Todo sobre dreamweaver
Todo sobre dreamweaverTodo sobre dreamweaver
Todo sobre dreamweaver
 
Presentación 3
Presentación 3Presentación 3
Presentación 3
 
Word pres
Word presWord pres
Word pres
 
Trabajo flash
Trabajo flashTrabajo flash
Trabajo flash
 
Samanta2
Samanta2Samanta2
Samanta2
 
Qué es el diseño web responsivo
Qué es el diseño web responsivoQué es el diseño web responsivo
Qué es el diseño web responsivo
 
12 técnicas WPO para optimizar Wordpress
12 técnicas WPO para optimizar Wordpress12 técnicas WPO para optimizar Wordpress
12 técnicas WPO para optimizar Wordpress
 
Crear un-blog-en-blogger
Crear un-blog-en-bloggerCrear un-blog-en-blogger
Crear un-blog-en-blogger
 
Adobe dreamweaver cs6
Adobe dreamweaver cs6Adobe dreamweaver cs6
Adobe dreamweaver cs6
 
Whitepaper - Cómo crear un menú desplegable en WordPress
Whitepaper - Cómo crear un menú desplegable en WordPress Whitepaper - Cómo crear un menú desplegable en WordPress
Whitepaper - Cómo crear un menú desplegable en WordPress
 
Webinar: Introducción a VUE.js
Webinar: Introducción a VUE.jsWebinar: Introducción a VUE.js
Webinar: Introducción a VUE.js
 
Clase 1 aspnet-para-slide share
Clase 1 aspnet-para-slide shareClase 1 aspnet-para-slide share
Clase 1 aspnet-para-slide share
 
Manual de jquery en pdf desarrollowebcom
Manual de jquery en pdf desarrollowebcomManual de jquery en pdf desarrollowebcom
Manual de jquery en pdf desarrollowebcom
 

Similar a Consejos clave para_crear_proyectos_web

Cómo mejorar la velocidad de tu WordPress
Cómo mejorar la velocidad de tu WordPressCómo mejorar la velocidad de tu WordPress
Cómo mejorar la velocidad de tu WordPress
webempresa.com
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
ouuyeah
 
Como mejorar-la-velocidad-de-tu-wordpress
Como mejorar-la-velocidad-de-tu-wordpressComo mejorar-la-velocidad-de-tu-wordpress
Como mejorar-la-velocidad-de-tu-wordpress
Victor Manuel Arias Zayas
 
Construcción de un siti web
Construcción de un siti webConstrucción de un siti web
Construcción de un siti web
mascorroale
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyecto
Aptitud Emprendedora
 
Dreamwever
DreamweverDreamwever
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
monytabella
 
Manual de instalación
Manual de instalación Manual de instalación
Manual de instalación
Mafer Pinto
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
G2K Hosting
 
Plataformas del comercio electronico
Plataformas del comercio electronicoPlataformas del comercio electronico
Plataformas del comercio electronico
vickisitha
 
WordPress pilay.pdf
WordPress pilay.pdfWordPress pilay.pdf
WordPress pilay.pdf
RonaldSnchez21
 
Plataformas del comercio electrónico
Plataformas del comercio electrónicoPlataformas del comercio electrónico
Plataformas del comercio electrónico
Kevyn Pedro Choquehuanca Catari
 
Semana 4 SPA vs MPA
Semana 4  SPA vs MPASemana 4  SPA vs MPA
Semana 4 SPA vs MPA
Richard Eliseo Mendoza Gafaro
 
Prestashop v1.6.1.4
Prestashop v1.6.1.4Prestashop v1.6.1.4
Prestashop v1.6.1.4
rafa ruiz
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
AntonRoMX
 
Instalación y Datos Básicos Sobre Dreamweaver
Instalación y Datos Básicos Sobre DreamweaverInstalación y Datos Básicos Sobre Dreamweaver
Instalación y Datos Básicos Sobre Dreamweaver
Guiru Xd
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
Mario Martinez
 

Similar a Consejos clave para_crear_proyectos_web (20)

Cómo mejorar la velocidad de tu WordPress
Cómo mejorar la velocidad de tu WordPressCómo mejorar la velocidad de tu WordPress
Cómo mejorar la velocidad de tu WordPress
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
 
Como mejorar-la-velocidad-de-tu-wordpress
Como mejorar-la-velocidad-de-tu-wordpressComo mejorar-la-velocidad-de-tu-wordpress
Como mejorar-la-velocidad-de-tu-wordpress
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
Construcción de un siti web
Construcción de un siti webConstrucción de un siti web
Construcción de un siti web
 
La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyecto
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Manual de instalación
Manual de instalación Manual de instalación
Manual de instalación
 
Tema 6
Tema 6Tema 6
Tema 6
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Plataformas del comercio electronico
Plataformas del comercio electronicoPlataformas del comercio electronico
Plataformas del comercio electronico
 
WordPress pilay.pdf
WordPress pilay.pdfWordPress pilay.pdf
WordPress pilay.pdf
 
Plataformas del comercio electrónico
Plataformas del comercio electrónicoPlataformas del comercio electrónico
Plataformas del comercio electrónico
 
Semana 4 SPA vs MPA
Semana 4  SPA vs MPASemana 4  SPA vs MPA
Semana 4 SPA vs MPA
 
Prestashop v1.6.1.4
Prestashop v1.6.1.4Prestashop v1.6.1.4
Prestashop v1.6.1.4
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
 
Instalación y Datos Básicos Sobre Dreamweaver
Instalación y Datos Básicos Sobre DreamweaverInstalación y Datos Básicos Sobre Dreamweaver
Instalación y Datos Básicos Sobre Dreamweaver
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 

Último

Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
marianamadronero578
 
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptxVERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
ingridavila20
 
Figuras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptxFiguras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptx
LuisFernandoOcampoGa
 
capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
ProfesorCiencias2
 
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfInfografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
salazar1611ale
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
Vhope6
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
Mariano Salgado
 
Arquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en LatinoaméricaArquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en Latinoamérica
imariagsg
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
JosueJuanez1
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
EduardoGM8
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
DianaArtemizaCP
 
Movimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela ArquitecturaMovimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela Arquitectura
LeonardoDantasRivas
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
EduarRamos7
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
IsabellaCortes7
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
KarinaRodriguezG2
 

Último (15)

Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
 
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptxVERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
 
Figuras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptxFiguras bidimensionales en el diseño.pptx
Figuras bidimensionales en el diseño.pptx
 
capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
 
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdfInfografía profesional cronología horizontal bloques de colores fondo negro.pdf
Infografía profesional cronología horizontal bloques de colores fondo negro.pdf
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
 
Arquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en LatinoaméricaArquitectura Ecléctica e Historicista en Latinoamérica
Arquitectura Ecléctica e Historicista en Latinoamérica
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
 
Movimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela ArquitecturaMovimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela Arquitectura
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
 

Consejos clave para_crear_proyectos_web

  • 1. Antes de terminar un proyecto web sea para un emprendimiento propio o para un cliente debemos asegurarnos que todo funcione perfectamente. Es por eso que te dejamos unos consejos para que no tengas muchos problemas al implementar tu web. 1. Usa un Framework de gran demanda para el Front-end 2. Haz pruebas con un emulador de dispositivos móviles con distintas medidas 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. Algunos de gran demanda que se puede usar serían: Bootstrap, Foundation, Materialize CSS y que ya que tienen muy interesantes novedades que explico en este artículo 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. En las imágenes podemos apreciar como simulamos ver la web en un dispositivo móvil CONSEJOS PARA CREAR PROYECTOS WEB
  • 2. 3. Usa un Framework de gran demanda para el Back-end 4. Haz CrossBrowser Testing al máximo 5. Un CMS nos alivia muchos dolores de cabeza 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). Los framework más populares son Django, Laravel, Rails . 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, Safari etc. No olvides sus versiones para dispositivos móviles. 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. Existen muchos proyectos que usan CMS como WordPress, Joomla, Drupal, Prestashop, Magento, Shopify 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.
  • 3. 6. Usa servicios de almacenamiento de imágenes en la Nube 7. Usa CDN para evitar la ralentización 8. Utiliza la ruta absoluta de cada archivo 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. 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. 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. 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. 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. 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.
  • 4. 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 o ancho de banda. 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. 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. Incluso pueden darte opiniones de tu aplicación web o móvil. Por último, tienes que contemplar que tu web la va a visitar muchísimas personas y no todas con las mismas capacidades así que tienes que hacer tu web sea navegable con cualquier tipo de software ya sea para personas que no pueden leer o necesitan algún dispositivo físico para poder navegar por la web. Contemplando estos puntos Google también te recompensará con un buen posicionamiento de tu web. 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. 10. Agrega un formulario para que los usuarios reporten los errores 11. Tu web debe ser siempre accesible.