DERNIÈRES NOUVELLES

Nos réflexions sur la conception et le développement de logiciels

9 erreurs que vous ne pouvez pas effectuer pendant le processus de développement d’applications Web

Des erreurs? Tout le monde se trompe. C’est une chose humaine. Si vous ne faites pas de fautes, cela signifie que vous ne faites rien. Le véritable défi pour vous, en tant que développeur web, est de les éviter chaque fois que vous le pouvez.

La source: www.softwarehut.com

Disons que vous devez développer une application. Votre tâche principale est de fournir un support pour tous les systèmes d’exploitation (Android, iOS et Windows Phone). Quelles erreurs vous devez éviter? Quels défis vous attendent? Comment faire face à eux? Tu as de la chance. Vous êtes vraiment. Je vous montrerai les neuf erreurs les plus courantes et leurs solutions. Certains d’entre eux seront basiques et un autre plus avancé. Es-tu prêt? Commençons.

1. Développer sans recherche

Erreur:

You don’t know. whether it’s possible to include some particular feature in web app or not.

Résultat:

De nombreuses heures perdues, des tonnes de frustration, un client malheureux (ou patron …).

Exemple:

  • La fonction de copie ne fonctionne pasSafari (iOS) et l’utilisateur n’a pas eu la possibilité de copier du contenu dans le presse-papier. Nous devons lui dire comment le faire.
  • Flash ne fonctionne pas sur mobile.

Solution:

Identifiez vos besoins (ou de votre client) et vérifiez si les capacités ciblées sont réalisables dans une application Web. Planifier à l’avance. Et réussissez.

2. En utilisant un peu de HTML5 / CSS3, qui ne fonctionne pas bien sur un appareil mobile ou sur certains périphériques

Erreur:

En supposant que ce qui fonctionne sur le navigateur de bureau, fonctionnera également sur le mobile, et en utilisant le code, cela ne fonctionne pas sur des périphériques spécifiques.

Exemple:

L’exemple ne fonctionne pas:

.menuLink {
Couleur: blanc;
décoration de texte: aucun;
marge: -10em;
rembourrage: 10em;
}
.disabledMenuItem {
opacité: 0.1;
le curseur: défaut;
}

Exemple de travail:

.menuLink {
Couleur: blanc;
décoration de texte: aucun;
marge: -10em;
rembourrage: 10em;
afficher: bloc en ligne;
}
.disabledMenuItem {
opacité: 0.1;
le curseur: défaut;
}

Solution:

  • Vérifiez toujours, si vous pouvez utiliser une partie spécifique du code ou non.
  • Rappelez-vous les préfixes lors de l’utilisation de CSS (c’est-à-dire l’animation sans -webkit ne fonctionnera pas).
  • Changer la afficher état de affichage: en ligne à bloc de visualisation ou affichage: bloc en ligne.
  • Utilisez de bonnes ressources, commecaniuse.com ou html5test.com, pour vérifier ce qui est pris en charge sur des périphériques spécifiques.
Vous pouvez également utiliser des requêtes multimédias, par exemple:
$queryMaxNotEnough: ‘seul écran et (largeur maximale: 1140px) and (min-largeur: 1024px)’;
$queryMaxMobile: ‘seul écran et (largeur maximale: 1023px)’;
@mixin queryMaxMobile {
@médias #{$queryMaxMobile}
{
@contenu;
}
}
@mixin queryMaxNotEnough {
@media #{$queryMaxNotEnough}
{
@contenu;
}
}
@mixin queryRetina {
@media (-webkit-min-device-pixel-ratio: 2), (résolution min.: 192dpi) {
@contenu;
}
}
voir raw Solutions.css hébergé avec ❤ par GitHub

3. Images à basse résolution sur l’affichage Retina d’Apple

Erreur:

Utiliser uniquement une faible résolution d’images.

Résultat:

Les images semblent floues sur Retina et la pixelation peut se produire.

Exemple:

Solution:

  • Le serveur doit reconnaître, si la demande provient d’un périphérique Retina et, dans l’affirmative, fournir des images à résolution plus élevée.
  • Vous pouvez également utiliser SVG comme format d’image et polices Web.

4. Charges du site sur mobile en plus de 3 secondes

Erreur:

Expecting, that everyone always uses WiFi connection, which has enough speed (high speed).

Résultat:

La perte de trafic, la baisse de conversion, les utilisateurs se plaignant (et ils ont raison).

Solution:

  • Optimisation d’image, compression de code, requêtes de base de données, CDN (Réseaux de livraison de contenu).
  • Vous pouvez également utiliser AJAX pour charger une partie du site en premier ou vous pouvez également mettre les scripts au bas avant </body> html tag.

5. Le navigateur mobile se concentre sur le premier champ de saisie sur le site, même si nous ne voulons pas cela

Exemple:

Le clavier apparaît automatiquement s’il existe un champ de saisie sur l’écran.

Solution:

Placer une entrée cachée au-dessus de notre contribution. Nous pouvons utiliser cette partie du code html:
<input type=« text«  style=« position: fixed; bottom: -100000px;«  disabled readonly/>

6. Oubliez les préfixes

Par exemple, si vous souhaitez utiliser transition propriété, vous devez vous souvenir d’utiliser le préfixe -webkit- avant la propriété ordinaire.

Example working:

-webkit-transition: la facilité de tous .5s;
transition: all .5s facilité;

7. Réglage la taille à 100vh

Mobile Safari interprète la longueur du document différemment, que les autres navigateurs, et il ajoute des barres indésirables, ce qui est difficile à réparer.

Exemple:

ios-safari-portrait-before-scroll

Solution:

position: absolue;
Haut: 0;
bas: 0;
voir raw Solution.html hébergé avec ❤ par GitHub

8. Utilisation incorrecte de lecture seulement attribut

Disons que vous avez utilisé type d'entrée = "texte" en lecture seule et après avoir cliqué dessus, la barre de navigation apparaît. Si nous ne voulons pas entrer de texte dans cette entrée, nous devrions ajouter à cette étiquette onfocus="blur()".

9. Création d’une application Web uniquement avec le seul système (c’est-à-dire iOS) à l’esprit

Et maintenant, last but not least, quelque chose que vous devriez faire au tout début. Les utilisateurs futurs de votre application Web utilisent différents systèmes. Certains ont iPhone’s, certains d’entre eux Android’s et certains d’entre eux Téléphones Windows. Vous devriez planifier votre application Web avec eux à l’esprit. Sinon, la modification de l’application Web, pour fonctionner correctement sur tous les systèmes, peut prendre beaucoup de temps et très, très coûteuse.

Helpful links:

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

Nous sommes là et heureux de vous aider!

Email

Nous vous répondrons dans les plus brefs délais.

ENVOYER UN EMAIL

Discussion en temps réel

Parlez en ligne avec notre support client incroyable.

DISCUTER MAINTENANT

Appel

Du lundi au vendredi de 8h à 20h IST.

+91 9555960648

Vidéos de soutien

Regardez notre vidéo en ligne et commencez rapidement.

REGARDE MAINTENANT

Avoir une question? Notre équipe est là pour vous aider