ÚLTIMAS NOTICIAS

Nuestros pensamientos sobre diseño y desarrollo de software

9 errores que no puede realizar durante el proceso de desarrollo de aplicaciones Web

¿Errores? Todos cometen errores. Es una cosa humana. Si no comete errores, significa que no está haciendo nada. El verdadero desafío para usted, como desarrollador web, es evitarlas cada vez que pueda.

Fuente: www.softwarehut.com

Digamos, que usted tiene que desarrollar la aplicación. Su tarea principal es proporcionar soporte para todos los sistemas operativos (Android, iOS y Windows Phone). ¿Qué errores tienes que evitar? ¿Qué desafíos te están esperando? ¿Cómo hacer frente a ellos? Tienes suerte. Tu realmente eres. Les mostraré nueve errores más comunes y sus soluciones. Algunos de ellos serán básicos y otros más avanzados. ¿Estás listo? Empecemos.

1. Desarrollo sin investigación

Error:

No lo sabes. si es posible incluir alguna característica en particular en la aplicación web o no.

Resultado:

Muchas horas desperdiciadas, toneladas de frustración, cliente infeliz (o jefe …).

Ejemplo:

  • La función de copia no funciona Safari (iOS) y el usuario no tiene posibilidad de copiar contenido al portapapeles. Tenemos que decirle cómo hacerlo.
  • Destello no funciona en dispositivos móviles.

Solución:

Identifique sus requisitos (o los de su cliente) y, a continuación, compruebe si las capacidades específicas pueden alcanzarse en una aplicación web. Planee con anticipación. Y tener éxito.

2. Uso de algunos HTML5 / CSS3, que no funciona bien en dispositivos móviles o algunos

Error:

Suponiendo, que lo que funciona en el navegador de escritorio, funcionará también en el móvil, y el uso de código, que no funciona en dispositivos específicos.

Ejemplo:

Ejemplo no funciona:

.menuLink {
color: blanco;
decoración de texto: ninguna;
margen: -10em;
v: 10em;
}
.disabledMenuItem {
opacidad: 0.1;
cursor: default;
}

Ejemplo de trabajo:

.menuLink {
color: blanco;
decoración de texto: ninguna;
margen: -10em;
relleno: 10em;
monitor: bloqueo en línea;
}
.disabledMenuItem {
opacidad: 0.1;
cursor: defecto;
}

Solución:

  • Siempre revise, si puede usar una parte específica del código o no.
  • Recuerde que los prefijos cuando se utiliza CSS (es decir, la animación sin -webkit no funcionará).
  • Cambiar el monitor estado de display: inline a bloqueo de pantalla o display: inline-block.
  • Utilice algunos recursos, como caniuse.com or html5test.com, para comprobar lo que se admite en dispositivos específicos.
También puede utilizar consultas de medios, por ejemplo:
$queryMaxNotEnough: ‘sólo pantalla y (anchura máxima: 1140px) and (ancho mínimo: 1024px)’;
$queryMaxMobile: ‘sólo pantalla y (anchura máxima: 1023px)’;
@mixin queryMaxMobile {
@medios de comunicación #{$queryMaxMobile}
{
@contenido;
}
}
@mixin queryMaxNotEnough {
@medios de comunicación #{$queryMaxNotEnough}
{
@contenido;
}
}
@mixin queryRetina {
@medios de comunicación (-webkit-min-device-pixel-ratio: 2), (min-resolución: 192dpi) {
@contenido;
}
}

3. Imágenes de baja resolución en la pantalla Retina de Apple

Error:

Uso de sólo baja resolución de imágenes.

Resultado:

Las imágenes parecen borrosas en Retina y la pixelación puede ocurrir.

Ejemplo:

Solución:

  • El servidor tiene que reconocer, si la solicitud proviene de un dispositivo Retina, y si es así, proporcione imágenes de mayor resolución.
  • También puede utilizar SVG como formato de imágenes y fuentes web.

4. Cargas del sitio en el móvil en más de 3 segundos

Error:

Esperando, que todo el mundo siempre utiliza la conexión WiFi, que tiene suficiente velocidad (alta velocidad).

Resultado:

Caída de tráfico, menor conversión, usuarios que se quejan (¡y tienen razón!).

Solución:

  • Optimización de imagen, compresión de código, consultas de base de datos, CDN (redes de distribución de contenido).
  • También puede utilizar AJAX para cargar parte del sitio web en primer lugar o también puede poner secuencias de comandos en la parte inferior antes </body>etiqueta html.

5. Navegador móvil enfoque en el primer campo de entrada en el sitio web, incluso no queremos que

Ejemplo:

El teclado aparece automáticamente, si hay un campo de entrada en la pantalla.

Solución:

Colocar la entrada oculta por encima de nuestra entrada.     Podemos utilizar esta parte del código html:
<entrada tipo=«texto« estilo=«posición: fijo; parte inferior: -100000px;« discapacitado solo lectura/>

6. Olvidar los prefijos

Por ejemplo, si desea utilizar transición propiedad, recuerde utilizar el prefijo -webkit- antes de la propiedad.

Ejemplo de trabajo:

-webkit-transition: all .5s ease;
transition: all .5s ease;

7. Ajuste altura a 100vh

Mobile Safari interpreta la longitud del documento de forma diferente, que otros navegadores y agrega barra no deseada, que es difícil de arreglar.

Ejemplo:

ios-safari-portrait-before-scroll

Solución:

posición: absoluta;
top: 0;
fondo: 0;

8. Uso incorrecto de solo lectura atributo

Digamos que usted ha utilizado input type="text" solo lectura y después de hacer clic en él, aparece la barra de navegación. Si no queremos introducir texto en esa entrada, debemos añadirla a esta etiqueta onfocus="blur()".

9. Creación de aplicaciones web sólo con el sistema (es decir, iOS) en mente

Y ahora, por último pero no menos importante, algo que debes hacer desde el principio. Los futuros usuarios de su aplicación web utilizan diferentes sistemas. Algunos de ellos iPhone’s, Algunos Androide’s y algunos de ellos Teléfonos Windows. Usted debe planear su aplicación web con ellos en mente. De lo contrario, modificar la aplicación web, para que funcione correctamente en todos los sistemas, puede llevar mucho tiempo y muy, muy caro.

Enlaces Útiles:

http://caniuse.com http://html5test.com http://github.com

Estamos aquí y feliz de ayudar!

Email

Nos pondremos en contacto con usted lo antes posible.

ENVIAR CORREO ELECTRÓNICO

Chat en vivo

Hable en línea con nuestro apoyo al cliente impresionante.

CHATEA AHORA

Llamada

De lunes a viernes de 8am a 8pm IST.

+91 9555960648

Videos de soporte

Vea nuestro video en línea y comience rápidamente.

VER AHORA

¿Tengo una pregunta? Nuestro equipo está aquí para ayudar