Phonegap pour faciliter le develloppement des applications mobiles

Depuis l'arrivée des smartphones sur le marché, le développement des applications dédiées aux smartphones a toujours exigé la connaissance des langages de programmation souvent imposé par le fabriquant des téléphones.

On se rappellera que le premier smartphone ayant connu le plus grand succès fut celui de « Apple ». Toute application devant y être installée nécessitait la connaissance de Cocoa, langage de programmation pour le système d'exploitation mac OS X.

Avec l'évolution, Nokia, Samsung Google, Microsoft, Hp se sont lancés dans la « bataille des smartphones ». Nous avons alors constaté une diversité des langages de programmation pour la production des applications mobiles. Plusieurs systèmes d’exploitation existent aujourd’hui sur le marché à savoir: Android, Mac OS, Nokia OS, Windows OS mobile, et dépendent tous du fabriquant.

Qu'en est-il du jeune développeur ayant le souci de se lancer dans les applications mobiles ? Et le développeur Senior voulant se lancer dans le développement d’une application mobile mais, pour toutes les marques de téléphones ? 

Il s’avère que le temps minimum d'apprentissage et pratique pourrait être de 6 mois pour le jeune développeur afin de produire une application mobile semi-professionnelle dédiée à une seule plate-forme (soit  Android, soit Mac Os, soit Nokia Os, soit Windows Os mobile)

Le développeur expérimenté, pour son cas, sera obligé de travailler sur différentes versions de son application mobile (3 ou 4 tout compte fait).

Enfin est arrivé « Phonegap ». Il s’agit d’un framework (modèle) open-source développé par Adobe Systems qui permet de créer des applications mobiles pour différentes plateformes (Android, iOS, Windows Phone...) en utilisant les langages les plus simples pour les débutant comme pour les professionnels :  HTML, CSS et JavaScript.
Les applications qui en résultent sont hybrides, ce qui signifie qu'elles ne sont ni vraiment natives, ni purement basées sur les langages HTML, CSS et JavaScript.

L'avantage de tout cela : une seule version développée permet la production des applications pour différentes plates-formes : android, iphone, wondows , ...

Le principe : avoir des connaissances en HTML5, CSS3, Javascript et produire un site web basé sur HTML5-CSS3-Javascript.

Le site web aura la tendance mobile afin que l'ergonomie soit meilleure.

Le site web sera placé dans un dossier qui sera ensuite compressé : au format zip par exemple.

Le zip sera uploadé dans la plate-forme de compilation de Adobe :

https://build.phonegap.com/apps

Mais il faut avoir un compte sur Phonegap. Le compte se limite à une application gratuite à compiler et à la longue un payement sera nécessaire :

http://phonegap.com/

PhoneGap possède des API à intégrer dans son application afin de faciliter la vie du développeur; les api permettent :

- Capture de photo

- Enregistrements des vidéos

- Enregistrements sonores

- Capture de la position géographique avec le GPS

- Appeler un numéro

Les possibilités sont très larges, vous pouvez jeter un coup d'œil sur :

http://app.phonegap.com/
https://github.com/phonegap/phonegap/wiki
http://phonegap.com/tool/

Mais notez que PhoneGap n'est pas le seul dans les plateformes de le construction des applications mobiles on line en utilisant le trio HTML5-CSS3-Javascript.

En voici une liste :

Appcelerator Titanium  --> http://www.appcelerator.com/platform/titanium-platform/
Xamarin Studio  --> http://xamarin.com/studio
Mobile Web America --> http://mobilewebamerica.com/#diy
RhoMobile --> http://rhomobile.com/
MoSync --> http://www.mosync.com/
Infinite Monkeys --> http://www.monk.ee/
Intel XDK --> https://software.intel.com/en-us/html5/tools
eMobc --> http://www.emobc.com/
convertigo --> http://www.convertigo.com/
appMobi --> http://www.appmobi.com/
MobileSmith --> http://www.mobilesmith.com/
Mooestro Mobile Education Platform --> http://mooestro.com/
Trigger.IO -->  https://trigger.io/
appdeck -->  http://www.appdeck.mobi/
Corona SDK -->  http://www.anscamobile.com/corona/
IBM Worklight -->  http://www.ibm.com/software/products/us/en/worklight/?
Calatrava -->  http://calatrava.github.com/
Qt Creator --> http://www.qt.io/

La liste n’est pas exhaustive, vous pouvez trouver d’autres sources sur :
http://alternativeto.net/software/phonegap/

Un atelier sur PhoneGap ainsi que le développement des applications mobiles est en cours de préparation. L'idée est de permettre à un débutant de développer une application mobile en moins de 10 jours et de la rendre rentable.

Si vous êtes intéressée par l'atelier , vous pouvez nous contacter : monsar04 [at] gmail.com ou germain.ruvunangiza [at] gmail.com ou répondre juste à ce article. 
 

My first smart phone is Huawei Ascend Y300

My First phone is huawei Ascend Y300 :)

--------------------------

Entrons dans la bataille des smart phone. Genial non !!

Caractéristiques techniques

	Système	Android 4.1.1
	Interface utilisateur	Huawei Emotion UI
	Processeur	Qualcomm MSM8225
	Fréquence processeur	1 GHz
	Nombre de coeurs	2
	Puce graphique	Qualcomm Adreno 203
	Support cartes mémoire	MicroSD et MicroSDHC
Info	Mémoire vive (RAM)	512 Mo
	Mémoire flash Libre (Mo)	2300
	Carte mémoire incluse	Non
	Clavier	Pas de clavier physique
Info	Indice DAS (W/kg)	0.71
	Double SIM	Non
	Magasin d'applications	Play Store

Affichage

	Taille (diagonale) (pouces)	4
	Taille (diagonale) (cm)	10.16
	Technologie de l'écran	TFT
Info	Définition de l'écran	480 X 800
	Résolution de l'écran (ppp)	233
	Technologie tactile	Capacitif
Info	Multipoints	Oui
	Détail du Multipoint	2 points
	Couleur	Oui
	Tactile	Oui

Entrées sorties

	Sortie casque	Oui
	Format prise casque	Jack 3.5 mm
	Support du Wi-Fi	802.11b/g/n
	Support de l'infra-rouge (IrDA)	Non
	Support du Bluetooth	Oui
	Version Bluetooth	2.1
	Interface PC	USB 2.0
	Support du NFC	Non
	Type de connecteur USB	Micro USB
Info	Compatibilité USB Host	Non
	Sortie TV (numérique)	Non

GPS

Info	GPS intégré	Oui
	Logiciel GPS	Google Maps Navigation
	Guidage vocal	Oui
	A-GPS	Oui

Multimédia

	Appareil photo intégré	Oui
	Résolution photo	5 Mpixels
	Autofocus	Oui
	Flash	Oui
	Enregistrement vidéo	Oui
	Définition enregistrement vidéo (en pixels)	640 x 480
	Webcam	Oui
	Définition vidéo de la webcam	0,3 Mpixels
	Radio FM	Oui
	Type de kit mains-libres	Oreillettes standard

Communication

	GSM	Oui
	Bandes GSM	850/900/1800/1900 MHz
	Compatible réseau EDGE	Oui
	Compatible réseau GPRS	Oui
	Compatible réseau 3G (UMTS)	Oui
	Débit max en réception (HSDPA)	7,2 Mbit/s
	Débit max en émission (HSUPA)	5.76 Mbit/s
	Compatible réseau 4G (LTE)	Non
	Stockage en ligne	Oui
	Taille de l'espace de stockage mis à dispo (Go)	15
	Client e-mail pop/imap	Oui
	Client e-mail Exchange	Oui
	Sauvegarde en ligne	Oui

Accessoires

Dock-Clavier

Non

Alimentation

	Batterie amovible	Oui
	Capacité de la batterie (mAh)	1730
	Tension de la batterie (Volts)	3.70

Dimensions

Poids (g) 134 Largeur (cm) 6.38 Hauteur (cm) 12.45 Epaisseur (cm) 1.12 Volume (cm3) 88.963 

Cube CSS3/HTML5

Il est possible de réaliser un cube à 3 faces avec du HTML5/CSS3 grace aux propriétés de rotation qu'apportent CSS3. 
Un exemple vaux mieux que mille exemple.

Le code est le suivant:

1. Partie CSS



body{
font-family:Helvetica;
    }

.cube       {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: -200px;
          }

.cube p   {
            line-height: 14px;
            font-size: 12px;
          }

.cube h2 {
            font-weight: bold;
         }

.rightFace,
.leftFace,
.topFace div {
            padding: 10px;
            width: 180px;
            height: 180px;
            }

.rightFace,
.leftFace,
.topFace {
position: absolute;
            }

.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
background-color: #ccc;
}

.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
background-color: #ddd;
left: 200px;
}

.topFace div {
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: #eee;
font-size: 0.862em;
}

.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
top: -158px;
left: 100px;  
}

/* Optional WebKit Animations */
/*

.rightFace {
-webkit-transition: -webkit-transform 1s linear;
}

.leftFace {
-webkit-transition: -webkit-transform 1s linear;  
}

.topFace {
-webkit-transition: -webkit-transform 1s linear;
}

.cube:hover .rightFace {
-webkit-transform: skew(0deg, -30deg) translate(100px, 100px);
}

.cube:hover .leftFace {
-webkit-transform: skew(0deg, 30deg) translate(-100px, 100px);
}

.cube:hover .topFace {
-webkit-transform: rotate(60deg) translate(-50px, -50px);
}

/* Video */
.cube video {
left: -20px;
top: -20px;
position: relative;
}

.cube div.rightFace video {
left: -301px;
top: -35px;
opacity: 0.9;
}

.cube div.leftFace video {
opacity: 0.7;
top: -35px;
left: -100px;
}

.cube div.rightFace,
.cube div.leftFace {
overflow: hidden;
}

.cube div.topFace.video div {
background-color: #000;
color: #fff;
}

.textboxface
{
    width:100px;
    height:18px;
    padding:1px;
}

.buttonboxface
{
    width:65px;
    height:25px;
    padding:1px;
    font-size:11px;
}

.framebox2
{
    width:170px; height:100px; border:1px solid #000000
}

2. Partie HTML

<div id="experiment">
        <div class="cube">
            <div class="topFace"><div>
                <h2>Vue faciale</h2>
                <p>Le css3/HTML5 a telement évolué qu'on se permet de plusieurs expériences impossibles il y a 4 ans
                <img src='small_03.png' width='60' height='60'></p>
            </div>
            </div>
            <div class="leftFace">
                <h2>Face gauche </h2>
                <p> <div class='framebox2'> </div> </p>
            </div>
            <div class="rightFace">
                <h2>Face droite </h2>
                <p>Même un moteur de recherche. <input class='textboxface' type='text'> <input class='buttonboxface' type='button' value='Chercher'>
                <br><img src='small_01.jpg' width='80' height='70'></p>
                </p>
            </div>          
        </div>  
    </div>

Telecharger le code complet ici :

Tag cloud HTML5 / CSS3

Tag cloud HTML5 / CSS3

Sauvegarde de la base des données en utilisant transact Sql

Je me suis buté à un probleme tel que je en savais pas sauvegarder ma base des données en utilisant les outils de MS Sql Server management studio. Ca plantait à tout moment. Une autre solution a sauvé mon travail. j'ai utilisé des astuces de transact sql server. 

 --1 Declaration des variables 

DECLARE @name VARCHAR(50) -- nom de la base des donnees
DECLARE @path VARCHAR(256) -- le chemin de destination
DECLARE @fileName VARCHAR(256) -- le nom de fichier de sauvegarde
DECLARE @fileDate VARCHAR(20) -- used le ficher avec date



--2. Attribution des valeurs aux variables

-- specifier le repertoire de destination pour lequel sql server a le droit de lecture et d ecriture
SET @path = 'E:\MonsarWorkingSpace\Dossier\Destionation\'

-- specifier le format de date : exemple : 2013_11_20_19_54_12
SELECT @fileDate = REPLACE( REPLACE ((SELECT REPLACE(CONVERT(VARCHAR(19), GETDATE(), 120), '-', '_')), ':', '_'), ' ', '_')


--3. Place au curseur
 
DECLARE db_cursor CURSOR FOR 
SELECT name
FROM master.dbo.sysdatabases
WHERE name ='Nom de la base de donnéees' --Ici je sauve seulement une seule base des donnees
-- WHERE name NOT IN ('master','model','msdb','tempdb') -- Pour exclure les base des donnees dont on a pas besoi

OPEN db_cursor  
FETCH NEXT FROM db_cursor INTO @name  


WHILE @@FETCH_STATUS = 0  
BEGIN  
       SET @fileName = @path + @name + '_' + @fileDate + '.bak' 
       BACKUP DATABASE @name TO DISK = @fileName 

       FETCH NEXT FROM db_cursor INTO @name  
END  

CLOSE db_cursor  
DEALLOCATE db_cursor

-- For any question please contact me : monsar04[at]gmail.com

Installation de Shinken sous Debian Wheezy en quelques minutes

Shinken est une application permettant la surveillance système et réseau. Elle surveille les hôtes et services spécifiés, alertant lorsque les systèmes vont mal et quand ils vont mieux. C’est un logiciel libre sous licence GNU . Elle est complètement compatible avec le logiciel Nagios et elle a pour but d’apporter une supervision distribuée et hautement disponible facile à mettre en place. 

Cet article est apparu dans le blog de Patrick Lufundisu c'est don clui qui s'éxprime dans les textes.

Suivez la suite de l'article ici 

Cryptage et décryptage des mots de passe avancé 1

Il n'existe pas de solution définitive et universelle, tout évolue. Avant qu'on océan remplisse des grandes surfaces de terre, la première goute d'eau est importante.

Dans le précédent billet, nous avons abordé la notion de cryptage d'une maniere trop simple. Ce cryptage consiste juste à convertir une chaine de caractère en Base64String ce qui constitue un danger pour un système, un hackeur bien éveillé s'il acceder àla base des données, il peux simplement convertir le Base64String en string et directement il a le mot de passe. Cette methode ne doit pas vraiment être appellé cryptage mais une solution rapide pour proteger le mot de passe. Le vrai crytage consiste à avoir un algorithme de crytage qui vas servir pour cryter et décrypter le mot de passe. Il est difficile à un hacker de savoir l'algorythme de crypage car il ne l'a pas, bien sur ca peu lui prendre énormement du temps  ( meme 6 mois) pour etre en mesure de décrypter : rien n'est impossible en informatique c'est le temps qui crée les limites.





Dans cette demarche nous allons créer une classe qui contiendra l'algorithme de cryptage , ensuite nous allons appeller la classe dans la page souhaitée afin de crypter ou décrypter le mot de passe.


1. Classe  EncryptionPasswd



 public class EncryptionPasswd
    {
        public static byte[] Key = { 69, 75, 101, 56, 255, 46, 182, 135, 193, 155, 221, 154, 53, 178, 68, 56, 42, 11, 135, 145, 185, 28, 78, 49, 97, 168, 84, 117, 225, 130, 145, 65 };
        public static byte[] IV = { 54, 36, 255, 23, 165, 153, 88, 248, 175, 184, 198, 241, 175, 67, 69, 65 };

        //Cryptage
        public static string DecryptString(string src)
        {
            string strReturn = "";
            MemoryStream ms = null;
            CryptoStream cs = null;
            byte[] p = Convert.FromBase64String(src);
            byte[] initialText = new Byte[p.Length];
            int intIndex = 0;
            bool IsEndOfString = false;
            RijndaelManaged rv = new RijndaelManaged();
            ms = new MemoryStream(p);
            cs = new CryptoStream(ms, rv.CreateDecryptor(EncryptionPasswd.Key, EncryptionPasswd.IV), CryptoStreamMode.Read);
            cs.Read(initialText, 0, initialText.Length);
            while ((intIndex < initialText.Length) && !IsEndOfString)
            {
                if (initialText[intIndex] != 0)
                    strReturn += ((char)initialText[intIndex]);
                else
                    IsEndOfString = true;
                intIndex++;
            }

            return Convert.ToString(strReturn);

        }

        //Decryptage
        public static string EncryptString(string src)
        {
            byte[] p = Encoding.ASCII.GetBytes(src.ToCharArray());
            byte[] encodedBytes = { };

            MemoryStream ms = new MemoryStream();
            RijndaelManaged rv = new RijndaelManaged();
            CryptoStream cs = new CryptoStream(ms, rv.CreateEncryptor(EncryptionPasswd.Key, EncryptionPasswd.IV), CryptoStreamMode.Write);
            cs.Write(p, 0, p.Length);
            cs.FlushFinalBlock();
            encodedBytes = ms.ToArray();
            return Convert.ToBase64String(encodedBytes);
        }

    }


Vraiment, il faut beaucoup de temps, d’ingéniosité, un mental de résistant pour décrypter cet algorithme, il n'est pas si extra mais un peu costaud.


2. Pour crypter ou décrypter, il suffit d’appeler la classe  et le tour est joué, dans mon cas j'ai utilisé:
 




 protected void DisplayEncrypt(object sender, EventArgs e)
        {
            EncryptData.Text = EncryptionPasswd.EncryptString(Password.Text);
        }

        protected void DisplayDecrypt(object sender, EventArgs e)
        {
            EncryptData.Text = EncryptionPasswd.DecryptString(Password.Text);
        }


If any comment, please contact me at : monsar04[at]gmail.com

Merci :)

Simplement comment crypter et decrypter un mot de passe sous asp.net/C#

Crypter et décrypter un mot de passe sous asp.net/C#

Cryptographie, du mot latin crypto ( caché) et graphein ( caractère) est une technique qui consiste à cacher un message dans une serie des caractères. Il faut avouer que  la cryptographie ne date pas de nos jours, elle a commencé depuis des millenaires : les pigeons étaient utilisés pour envoyer les messages crypté dans les champs de batail...
En informatique :

- le cryptage ou chiffrement est l'activité de conversion de données ou d'informations en code ou une clé secrète.
- le décryptage ou déchiffrement est l'activité de faire comprendre ou conversion de code dans du texte brut.

Nous allons créer deux méthodes qui vont crypter et décrypter le mot de passe. Pour mon cas,
je crypte le mot de passe et je l'insere dans ma base des données, lorsque l'utilisateur veux
se connecter à mon system, je décrypte le mot de passe préalablement enregistré dans la base des données.



public string EncryptPassword(string textPassword)
        {
            //Crypter le mot de passe         
            byte[] passBytes = System.Text.Encoding.Unicode.GetBytes(textPassword);
            string encryptPass = Convert.ToBase64String(passBytes);
            return encryptPass;
        }

public string DecryptPassword(string encryptedPassword)
        {
            //Decrypter le mot de passe   
            byte[] passByteData = Convert.FromBase64String(encryptedPassword);
            string originalPassword = System.Text.Encoding.Unicode.GetString(passByteData);
            return originalPassword;
        }





 
Dans la base des données, j'aurai un mot de passe comme :TQBvAGIAYQBsAGkAMwAyAEAAMgAwADEAMwA= mais lorsque l'utilisateur vas se connecter le decryptage vas changer le mot de passe en Mobali32@2013 

Ce billet vous a t il aidé ? For any comment, please contact me at monsar04[at]gmail.com

Ombrage HTML5 / CSS3

Un exemple vaux mieux que mille discours :)

<div style="
     box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);
    color: #0080ff;
    font-size: 20px;
    -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    width:300px; height:150px;
    padding:10px; margin:20px;">
        Bloc avec ombrage
    </div>

Adding Row Number to SQL SELECT result

Cet article explique dans la simplicité comment récupérer les numéros des enregistrements lors d'un select avec sqlserver. Cette opération se réalise avec l'instruction ROW_NUMBER() : simple à utiliser. Voici un petit exemple :

SELECT ROW_NUMBER() OVER (ORDER BY EmployeeName) AS Row, EmployeeId, EmployeeName, Salaire 
FROM Employees :

Simple non :) . Si cet article vous a aidé , faites un signe : monsar04[at]gmail.com

Rafraîchir automatiquement un bloc d'une page en utilisant Ajax; C#, ASP.NET / Auto refresh a page using Ajax

A la manière de Facebook, il est simple de rafraîchir le contenu d'un d'un bloc d'une page sur un intervalle de temps déterminé sans pour autant rafraîchir la page entièrement. Cela permet de gagner le temps de chargement surtout quand on a des faibles débits comme en Afrique. Assez d'explications, un exemple vaux mieux que mille discours. Le projet complet est téléchargeable en cliquant juste ici. Que Dieu bénisse l'internet.

Géolocalisation web

Google géolocalisation 

La géolocalisation ou géoréférencement est un procédé permettant de positionner un objet sur un plan ou une carte à l'aide de ses coordonnées géographiques. Avec l'arrivé de google map, free map, ... Des besoins sont nés dans la géolocalisation web. Voici quelques références qui m'ont aidé à comprendre comment ça marche.

http://fr.wikipedia.org/wiki/G%C3%A9olocalisation

http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html

http://www.codeproject.com/Articles/24468/Google-Maps-Control-for-ASP-NET-Part-1

http://www.codeproject.com/Articles/291499/Google-Maps-API-V3-for-ASP-NET

http://weblogs.asp.net/scottgu/archive/2006/01/22/436166.aspx

http://dotnet.sys-con.com/node/171162

http://www.dotnetcode.in/2011/12/how-to-integrate-google-map-in-aspnet.html

http://www.mikeborozdin.com/post/Working-with-Google-Maps-API-in-ASPNET.aspx

http://www.codeproject.com/Articles/20590/Google-Maps-in-HTML-ASP-NET-PHP-JSP-etc-with-ease

http://www.mikeborozdin.com/post/Working-with-Google-Maps-API-in-ASPNET.aspx

http://stefanzvonar.com/2012/06/30/setting-up-google-maps-for-asp-net-and-sql-server-with-google-maps-api-v3/

http://www.codeproject.com/Articles/291499/Google-Maps-API-V3-for-ASP-NET

Ces solutions sont basées sur asp.net/C#/sqlserver/ajax. Très pratique et facile à réaliser. Que Dieu benisse l'internet !

Contrôler les zones de texte vides en C#

Souvent , lors du remplissage d'un formulaire web,  certaines zones de texte sont obligatoires au remplissage. Nous essayons ici de montrer comment nous avons procédé pour souligner en rouge les zones de text qui ne que l'utilisateur du formulaire a oublié de remplir.

1. Partie asp


        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </div>

        <div>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </div>

        <div>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        </div>


        <div>
         
            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

        </div>



2. Partie C#


 protected void Button1_Click(object sender, EventArgs e)
        {
          //Créons la liste des text box



          List<TextBox> listTextbox = new List<TextBox>();

            listTextbox.Add(TextBox1);
            listTextbox.Add(TextBox2);
            listTextbox.Add(TextBox3);


        //Balayons la liste avec foreach


foreach (System.Web.UI.WebControls.TextBox textbox in listTextbox)
            {
                if (String.IsNullOrEmpty(textbox.Text))
                {
                    textbox.Attributes.CssStyle.Value = "border:1px solid #FF0000";
                    Msg_Form.Attributes.CssStyle.Value = "color:#FF0000";
                    Msg_Form.Text = string.Format("Tous les champs suivis d'un signe * sont obligatoires");
                }

                else
                {
                    Msg_Form.Text = "";
                    textbox.Attributes.CssStyle.Value = "border:1px solid #C1C1C1";
                }
}




Thanks to Gauthier K.

Hauteur dynamique d'un bloc sans javascript

Souvent le contenu déborde du cadre dans lequel il est placé, ce qui ne donne pas une bonne image à l'internaute.

Sans utiliser du javascript, il est possible de rendre la hauteur d'un bloc (div) automatique; c'est-à-
dire qui change en fonction de son contenu. Dans l'exemple suivant nous avons un conteneur parent et un conteneur fils. La hauteur du conteneur parent vas changer de valeur en fonction du conteneur fils. On parle d'un conteneur à hauteur variable ou un div dynamic. Rien qu'avec du css.



Partie CSS

.div_parent
{
min-height:20px;
height:auto !important;
height:20px;
}

.div_enfant
{
height:100%;
}

Partie HTML

<div class="div_parent">

     <div class="div_enfant">
     Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
    </div>


</div>

Installation et déploiement d'IIS 7 sous windows 7

IIS ou Internet Information Services, communément appelé IIS, est le logiciel de serveur services Web (ou FTP, SMTP, HTTP etc.) de la plateforme Windows NT.

Solution 1.

Pour installer IIS 7.5 sur Windows 7Vous pouvez effectuer cette procédure à l'aide de l'interface utilisateur ou d'un script. Utilisation de l'interface utilisateur

• Cliquez sur Démarrer, puis sur Panneau de configuration.
• Dans le Panneau de configuration, cliquez sur Programmes, puis sur Activer ou désactiver des fonctionnalités de Windows.
• Dans la boîte de dialogue Fonctionnalités de Windows, cliquez sur Services Internet (IIS), puis sur OK.

Solution 2.

Un simple script peux suffir pour installer IIS ainsi ques ses dépendances :

start /w pkgmgr /l:log.etw /iu:IIS-WebServerRole;IIS-WebServer;IIS-CommonHttpFeatures;IIS-StaticContent;IIS-DefaultDocument;IIS-DirectoryBrowsing;IIS-HttpErrors;IIS-HttpRedirect;IIS-ApplicationDevelopment;IIS-ASPNET;IIS-NetFxExtensibility;IIS-ASP;IIS-CGI;IIS-ISAPIExtensions;IIS-ISAPIFilter;IIS-ServerSideIncludes;IIS-HealthAndDiagnostics;IIS-HttpLogging;IIS-LoggingLibraries;IIS-RequestMonitor;IIS-HttpTracing;IIS-CustomLogging;IIS-Security;IIS-BasicAuthentication;IIS-URLAuthorization;IIS-RequestFiltering;IIS-IPSecurity;IIS-Performance;IIS-HttpCompressionStatic;IIS-HttpCompressionDynamic;IIS-WebServerManagementTools;IIS-ManagementConsole;IIS-ManagementScriptingTools;IIS-ManagementService;IIS-IIS6ManagementCompatibility;IIS-Metabase;IIS-WMICompatibility;IIS-LegacyScripts;IIS-LegacySnapIn;WAS-WindowsActivationService;WAS-ProcessModel;WAS-NetFxEnvironment;WAS-ConfigurationAPI


Bonne année 2013

Récuperer l'url de la page courante ASP.NET/C#

Plus simple qu'on ne peux l'imagine : 

Chemin complet de la page web 

string url = HttpContext.Current.Request.Url.AbsoluteUri;
Ce ci vas donner dans mon cas  

http://siteweb.com/repertoire/page_test.aspx

Chemin relatif de la page web  

string path = HttpContext.Current.Request.Url.AbsolutePath;
repertoire/page_test.aspx

string host = HttpContext.Current.Request.Url.Host;
http://siteweb.com

Rafraishir une page après x sécondes en asp.net

Chronométrer l’exécution d'un page m'a semblé difficile quand j'y ai pensé pour la première fois. J'ai pensé à des scripts plus compliqué alors que la solution était dans mes mains depuis longtemps sans que je le sache.

En effet, l'idée maitresse reviens à demander à la page de se relancer elle même après x secondes et de se  rediriger vers elle même. Dans le code behind, je me suis proposé décrire les lignes qui suivent:

Code Behind  :

 protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                Auto_Refresh_Page();
            }

        }

        void Auto_Refresh_Page()
        {
            string Page_Url = HttpContext.Current.Request.Url.AbsoluteUri;
            Response.AddHeader("REFRESH", string.Format("3; URL = {0}", Page_Url));
        }

Si l'article vous a intéressé , comme d'habitude , n'hésitez pas à nous contacter :

Phone : 00243 997647154
Mail : monsar04[at]gmail.com

Menu deroulant horizontal css/html/javascript

Menu horizontal css

 

La partie html


<html><head><title>menu déroulant en css</title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">

<link type="text/css" rel="stylesheet" href="style_menu_deroulant_horizontal.css" />

</head>
<body>

<div id="monmenu">
<h2>menu à déploiement horizontal</h2>

<ul class=niveau1>
  <li>Menu 1
    <ul class=niveau2>
        <li class=plus>
        <a href="#">
            Titre du menu 1
        </a>
            <ul class=niveau3>
      <li><a href="#">  Sous titre 1 du menu 1 </a> </li>
      <li><a href="#">  Sous titre 2 du menu 1 </a> </li>
      <li><a href="#">  Sous titre 3 du menu 1 </a> </li>
      <li><a href="#">  Sous titre 4 du menu 1 </a> </li>
     
      </ul>
     
      </li>
    <li>
    <a href="#">
    Titre du menu 2
    </a>
   
    <ul class=niveau3>
   
      <li><a href="#">  Sous titre 1 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 2 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 3 du menu 3 </a> </li>
      <li><a href="#">  Sous titre 4 du menu 4 </a> </li>   
     
    </ul>
   
    </li>
    <li>
   
    <a href="#">
   
Titre du menu 3   
    </a>
   
    <ul class=niveau3>
   
      <li><a href="#">  Sous titre 1 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 2 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 3 du menu 3 </a> </li>
      <li><a href="#">  Sous titre 4 du menu 4 </a> </li>   
     
    </ul>
     
    </li>
   
   
   
    </ul></li></ul>
   


<ul class=niveau1>
  <li>Menu 2
    <ul class=niveau2>
        <li class=plus>
        <a href="#">
            Titre du menu 2
        </a>
            <ul class=niveau3>
      <li><a href="#">  Sous titre 1 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 2 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 3 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 4 du menu 2 </a> </li>
     
      </ul>
     
      </li>
    <li>
    <a href="#">
    Titre du menu 2
    </a>
   
    <ul class=niveau3>
   
      <li><a href="#">  Sous titre 1 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 2 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 3 du menu 3 </a> </li>
      <li><a href="#">  Sous titre 4 du menu 4 </a> </li>   
     
    </ul>
   
    </li>
    <li>
   
    <a href="#">
   
Titre du menu 3   
    </a>
   
    <ul class=niveau3>
   
      <li><a href="#">  Sous titre 1 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 2 du menu 2 </a> </li>
      <li><a href="#">  Sous titre 3 du menu 3 </a> </li>
      <li><a href="#">  Sous titre 4 du menu 4 </a> </li>   
     
    </ul>
     
    </li>
   
   
   
    </ul></li></ul>

   
   
    </div>   


La partie css

#monmenu {
    font-weight: bold; font-size: 12px; font-family: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu ul ul {
    border-right: #b0b0b0 1px solid; padding-right: 0px; border-top: #b0b0b0 1px solid; display: none; padding-left: 0px; left: 164px; padding-bottom: 0px; margin: 0px; border-left: #b0b0b0 1px solid; padding-top: 0px; border-bottom: #b0b0b0 1px solid; position: absolute; top: -1px
}
#monmenu li {
    padding-right: 2px; padding-left: 2px; padding-bottom: 2px; margin: 0px; width: 160px; padding-top: 2px; list-style-type: none; position: relative; background-color: #e0e0e0
}
#monmenu li:hover {
    background-color: #ffff70
}
#monmenu li.sfhover {
    background-color: #ffff70
}
#monmenu li a {
    text-decoration: none
}
#monmenu li:hover ul.niveau2 {
    display: block
}
#monmenu li li:hover ul.niveau3 {
    display: block
}
#monmenu li.sfhover ul.niveau2 {
    display: block
}
#monmenu li li.sfhover ul.niveau3 {
    display: block
}
#monmenu li.plus {
    background-position: right 50%; border-bottom: #b0b0b0 1px solid; background-repeat: no-repeat
}