ASP.NET

Voici une méthode écrite en c# permettant de calculer la distance entre 2 coordonnées (latitude / longitude). Résulat en kilometres.

Idéal pour la géolocalisation mobile.

(Pour les fans de maths : http://en.wikipedia.org/wiki/Haversine_formula)

///<summary>
/// Get distance between 2 points in kilometers
///</summary>
///<param name="latitudePointA">Latitute point A</param>
///<param name="longitudePointA">Longitute point A</param>
///<param name="latitudePointB">Latitude point B</param>
///<param name="longitudePointB">Longitude point B</param>
///<returns>The distance</returns>
public static double GetDistanceBetween(double latitudePointA, double longitudePointA, double latitudePointB, double longitudePointB)
{
    double dDistance = Double.MinValue;
  
    // Convert coordinates to radians
    double dLatAInRad = latitudePointA * (Math.PI / 180.0);
    double dLongAInRad = longitudePointA * (Math.PI / 180.0);
    double dLatBInRad = latitudePointB * (Math.PI / 180.0);
    double dLongBInRad = longitudePointB * (Math.PI / 180.0);
  
    double dLongitude = dLongBInRad - dLongAInRad;
    double dLatitude = dLatBInRad - dLatAInRad;
  
    // Intermediate result a.
    double a = Math.Pow(Math.Sin(dLatitude / 2.0), 2.0) +
               

Avoir rencontré plusieurs problemes de spam dans certaines de mes applications j'ai décidé de me pencher sur le sujet. Apres avoir étudié différentes solutions je décide d'utiliser l'API gratuite du site stopforumspam.

Elle est gratuite, simple d'utilisation et communautaire, c'est pourquoi il ne faut pas hésiter a envoyer la liste de ses potentiels spammeurs sur ce forum.

Il y a juste une limite de 20000 requets a ne pas dépasser par jour, ce qui est correcte.

Pour moi le nom d'utilisateur n'est pas assez fiable pour savoir si c'est un spam ou non. C'est pourquoi la détection va se faire premierement par l'adresse IP de l'utilisateur puis par l'email.

Cette API est tres fiable mais l'adresse IP peut etre lié a un autre utilisateur par exemple. Si vous voulez filtrer des commentaires je vous conseille donc de ne pas les supprimer mais de les marquer avec un tag IsSpam = 1

C'est cadeaux, voici la classe:

///<summary>
/// SpamChecker class
///</summary>
public class SpamChecker
{
    ///<summary>
    /// Check if the comment is inside the spam list
    ///</summary>
    ///<param name="ip">The ip to test</param>
    ///<param name="email">The email to test</param>
    ///<returns>True if it's a spam</returns>
    public static bool Check(string ip, string email)
 

Dans ce poste je vais expliquer comment insérer un logo et un texte dans une image. Ce principe est souvent utilisé a des fins de Copyright.

Résultat désiré:

Image de base :

Logo a insérer :

Texte a insérer :

Hello I am a text on this image

Code de la fonction :

///<summary>
/// Setup th copyright
///</summary>
///<param name="fileName">The file name</param>
public static void SetCopyright(string fileName)
{
// Dossier contenant les images
string workingFolder = HttpContext.Current.Server.MapPath("~/Images");
  
Image image = Image.FromFile(workingFolder + "/Content/" + fileName); // Image principal
Image logo = Image.FromFile(workingFolder + "/Copyright-Symbol.jpg"); // Logo a insérer
string text = "Hello I am a text on this image"; // Texte a insérer
  
Brush textColor = new SolidBrush(Color.FromArgb(255, 214, 65, 95)); // Couleur du texte (Peut-etre simplifié : Brushes.Orange;)
Font textFont = new Font("Impact", 12, FontStyle.Bold); // Font family du texte
  
Graphics gImage = Graphics.FromImage(image); // Création d'un objet de type graphic pour pouvoir insérer l'image et le texte
  
float textWidth = gImage.MeasureString(text, textFont).Width; // Obtenir la taille du futur texte pour les calculs de positionnement
  
Bitmap transparentLogo = new Bitmap(logo.Width, logo.Height); // Bitmap pour obtenir le logo transparent
Graphics gLogo = Graphics.FromImage(transparentLogo); // Objet graphic pour permettre de dessiner
  
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.Matrix33 = 0.25F; // Le 3eme élément de la 4eme ligne de la matrice d'une image correspond a la transparence
  
ImageAttributes imgAttributes = new ImageAttributes();
imgAttributes.SetColorMatrix(colorMatrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap); // Application de la matrice
  
// Insertion du logo dans l'image de base en haut a droite
gLogo.DrawImage(logo, new Rectangle(0, 0, transparentLogo.Width, transparentLogo.Height), 0, 0, transparentLogo.Width, transparentLogo.Height, GraphicsUnit.Pixel, imgAttributes);
gLogo.Dispose();
  
// Insertion du texte dans l'image de base en bas au centre
gImage.DrawString(text, textFont, textColor, new PointF((image.Width - textWidth) / 2, image.Height - 20));
gImage.DrawImage(transparentLogo, image.Width - logo.Width, 0);
  
// Sauvegarde (ici dans le dossier Content/Copyright)
image.Save(workingFolder+ "/Content/copyright/" + fileName), ImageFormat.Jpeg);
}

Copier le contenu d'un répertoire en utilisant la récursivité :

private static void CopyAll(DirectoryInfo source, DirectoryInfo target)
{
   // Check if the target directory exists, if not, create it.
   if (Directory.Exists(target.FullName) == false)
   {
       Directory.CreateDirectory(target.FullName);
   }
   // Copy each file into the new directory.
   foreach (FileInfo fi in source.GetFiles())
   {
fi.CopyTo(Path.Combine(target.ToString(), fi.Name), true);
   }
   // Copy each subdirectory using recursion.
   foreach (DirectoryInfo diSourceSubDir in source.GetDirectories())
   {
       DirectoryInfo nextTargetSubDir = target.CreateSubdirectory(diSourceSubDir.Name);
       CopyAll(diSourceSubDir, nextTargetSubDir);
   }
}

Dans ce post nous allons voir comment utiliser le lazy loading de façon simple.

1) Télécharger le scripts requis:

http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js

2) Dans le header de la page web: (Html, asp.Net, MVC,...)

Référencer les scripts :

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"type="text/javascript"></script>

<scriptsrc="Scripts/jquery.lazyload.js"type="text/javascript"></script>

<scripttype="text/javascript">
     $(document).ready(function () {
         $("img.lazy").lazyload({
             effect: "fadeIn"
         });
     });
</script>

3) Ajouter les images:

Liste des images :

   <ul>
            <li>
                <img class='lazy' data-original='images/img1.jpg' src='images/grey.png' width='640' height='480'>
            </li>
            <li>
                <img class='lazy' data-original='images/img2.jpg' src='images/grey.png' width='640' height='480'>
            </li>
            <li>
                <img class='lazy' data-original='images/img2.jpg' src='images/grey.png' width='640' height='480'>
            </li>
        </ul>

L'image avec la source grey.png correspond a une image grise de 1px/1px qui sera affichée avant l'appel de la fonction lazy load.

Le chargement des

Dans ce tutorial nous allons voir la facon la plus simple de développer une application web a la fois compatible 'desktop' et mobile. Avec l'apparence d'une apps.

Pour cela nous allons utiliser le plugin 51Degrees et Jquery Mobile.

Avec cette méthode, le contenu de l'application web et le contenu de l'application desktop seront les memes mais présentés de facon tres différentes. Dans une application professionnelle, souvent on souahite un site assez différent de l'application web. Nous verrons cela dans un autre tutorial mais le principe de base sera quasiment le meme.

Avec MVC4, tout sera déja intégré, mais en attendant l'arrivée de MVC4 c'est ici que ca se passe !

1) Créer une nouvelle application web de type MVC3:

2) Créer une nouvelle mise en page (layout) pour les mobiles

Copier coller le layout par defaut et le renommer _LayoutMobile.cshtml. Pour les futurs tests, vous pouvez rajouter un texte pour différencier les vues:

3) Modifier le "sélectionneur de mise en page" /Views/_ViewStart.cshtml

Remplacer:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Par:

@{
    Layout = Request.Browser.IsMobileDevice ? "~/Views/Shared/_LayoutMobile.cshtml" : "~/Views/Shared/_Layout.cshtml";
}

4) Tester notre application avec un navigateur de type Desktop et avec un émulateur mobile

Si vous ne voullez pas vous embeter avec un émulateur je vous conseil d'utiliser firefox avec l'extension User Agent Switcher

Sinon vous pouvez utiliser l'émulateur windows phone fournit par le windows phone sdk, ou l'émulateur iphone/ipad disponnible ici.

C'est partit pour les tests:

- Desktop (ici avec Firefox)

- Mobile (ici avec ibbdemo3)

Nous pouvons voir le texte "Hello I am a mobile"affiché

5) Probleme avec cette technique :

Tous les appareils et navigateur mobiles ne sont pas détecté par défaut avec le framework .Net

Example avec opera mobile :

C'est la version desktop qui est affiché

Pour remédier a ce problème, c'est ici que le plugin 51Degrees intervient

6) Installation du plugin 51Degrees

Pour cela, ouvrir la console NuGet package manager (Ou directement avec l'outil NuGet) et entrer la commande : Install-Package 51Degrees.mobi

Première chose a faire :

Plusieurs fichiers ont été créés, ouvrir le fichier de configuration 51Degrees.mobi.config et commenter ces lignes (Ces lignes servent uniquement pour une application ASP.NET):

<!--<redirect firstRequestOnly="false"
              mobileHomePageUrl="~/mobile/default.aspx"
              timeout="20"
              devicesFile="~/App_Data/Devices.dat"
              mobilePagesRegex="mobile">
</redirect>-->

Apres avoir compiler et rafraichi opera mobile, notre application est opérationelle pour la pluspart des mobiles du marché (De plus 51Degrees peut recevoir des mises a jour)

7) Maintenant a vous de personnaliser le design de votre application mobile

Courte introduction a jQueryMobile:

Retour a la console NuGet: Install-Package jquery.mobile

Que se passe t-il, il y a des fichiers partout ! Pas de panique... On va arranger ca.

Dans le dossier theme, creer un dossier 'mobile' et déposez y tous les fichiers liés a Jquery mobile. Deplacez le fichier Site.css dans le theme 'base'.

Ne pas oublier de mettre a jour _Layout.cshtml avec le theme par defaut et la nouvelle version de JQuery.

Voici a quoi ressemble le layout _LayoutMobile.cshtml pour utiliser jQueryMobile:

<link href="@Url.Content("~/Content/themes/mobile/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/mobile/jquery.mobile-1.1.1.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.mobile-1.1.1.min.js")" type="text/javascript"></script>

Nous pouvons maintenant commencer a faire joujou avec les éléments jQuery mobile :

<div data-role="page" class="page">
        <div data-role="header">
            <div id="title">
                <h1>My Mobile MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div data-role="navbar">
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <section id="main" style="min-height: 300px">
            @RenderBody()
        </section>
        <div data-role="footer" style="text-align: center">
            Copyright : @DateTime.Now.Year
        </div>
</div>

Pour plus d'exemples : go to http://jquerymobile.com/demos

8) Résultat final:

Voila c'est fini !