Aventure avec Android Studio #3

Tutoriel Android Studio #3

Si vous  étés tombés sur cette page sur le coup , pourquoi ne pas faire un tour rapide sur les premières étapes : ici et ici.

On va Faire semblant de coder un tout petit peu ! Comme Android Studio a deviné que nous venions pour un Hello World on va changer le texte en : Salut les amis !

En mode Design.

Double clickez sur le text hello world et hop, on a une petite fenêtre qui s’ouvre (un petit genre de pop up ou un hint screen) ensuite pour l’attribut text , nous pouvons ouvrir la fenêtre de sélection (c’est la ou y’a le bouton des avec …). Là on decouvre une liste de variable qu’on peut choisir comme contenu de notre composant text. Juste en dessous on a New ressource (de traduit ça aussi !). Ok voila les capture d’écran down. Pour ceux qui on déjà programmer an-droid on comprend que @string/ nous donne accès au contenu du fichier string xml cense contenir toute les textes statique , cause on peut change le contenu de notre composant dans notre fichier .Java et utilisant la logique R. (je sais , je sait , je n'ai encore rien dit !)


>>>>> ici les images (clickez pour agrandir)

On peut aussi faire la même modification en allant a notre droite dans le panel des composants, choisir notre composant texte et aller dans les propriétés et hop

En Mode Code

Et dire que j'ai faillir reprendre tout le processus ci dessus en code , Why ? Pour ce qui veut y aller en code : nous avons que deux fichiers majeurs a modifier. Bien sur reprendre l’étape d'en haut et vérifir dans les répertoires /Res et /Java;  les fichiers modifié, puis le Manifest.Xml et c'est joué. Allons compilé tous ça !

Compilation et test

Dans la barre de menu, on peut cliquez sur Run et enfin choisir Run+nom du projet ou run (tout simplement). On peut aussi compilé en cliquant sur le petit triangle vert !

La compilation (Make) prend un peu de temps, ensuite nous avons droit a une fenêtre qui nous propose un test sur notre handset (androidmobile) ou sur une machine virtuel. Si c'est votre première fois vous aurait a créer un nouvel  'virtual machine';  le choisir puis voir ce que ça donne. Moi je testerai pas un hello word sur mon portable en tous cas, Mais pour ceux qui veulent y aller, c'est possible d'avoir votre Androidmobile connecté par cable usb ou bluetooth.

Comme les images disent plus que les mots voici comment procédé  Chosissez ensuite le virtual-device créé et c'est parti. On attend que tout se lance et s’exécute.

Notre appareil virtuel mettra du temps a se lancer , mais il se lancera ( vous vous souvenez surement , certain comme moi sont encore au One & half Core ).

Et après tadda :

P'ti Résumé

# Android Studio permet la création d'applications Android avec beaucoup plus d'aiseance que les autres approches disponibles.

# Une application a au moins une activité qui ce définit par un interface visuel et la logique programmable qui va avec.

L'interface visuel (Ecran) est contrôlé par un fichier XML, Main_Activity.xml se trouvant dans le répertoire res.

Android Studio fournit un GUI en mode drag-and-drop (glisser et deposer) qui vous permet de créer une interface sans avoir à travailler directement avec le XML.

La logique applicative est geré grace à un fichiers Java; MainActivity.java stockés dans le répertoire java. 

En plus lors de l'execution de l'application grace dans votre handset ou un virtual device, Vous pouvez modifier et ré-exécuter votre application sans avoir à redémarrer l'AVD ou tout matériel réel connecté à la machine.

A très bientôt pour la suite  >> 

---

PS : désolé pour les fautes d’orthographe mais n’hésitez pas à me les dire je les corrigerai…

+ Plus

Aventure avec Android Studio #2

Tutoriel Android Studio #2

Apres la période d’attente (Chez moi, sur mon 1 et Demi core , ça fait presqu'une éternité), l’eDi s’ouvre. Waou, c’est magnifique dirait un habitué et Haan, c’est full hein dirait un novice. Bon ben , nous on a crier tchia, c’est koi tous ça encore , lol Ni novice , Ni Expert !

La structure du Projet

S’en nous affolé, nous allons (pour nous tutoriel) travaillé qu’avec deux fichier,  celui de l’activité avec du code pour faire tourné la logique et  un autre fichier de code pour l’aspect visuel : (voir  l’image ci-dessous). Et pour les touche a tous , vous verrez comment c cool d’ouvrir même les fichier image dans l’editeur, pour les bricoleur , ça ne servira à rien de modifier du code généré … hum

Dossiers du Projet

L’aspect visuel (.xml)

Double click, pour ouvrir le fichier xml en mode codeur et mode designer. Les images dessous parlent plus. Et dire que Google avait prévu que nous viendront faire du Hello word !

Vous pourriez écrire toute autre chose dans le Textview,  Comme : Salut,  Je suis pas codeur !

Affichage en Mode Desin

L’aspect Logique (.Java)

Double click, pour ouvrir le fichier .Java , Vous savez celui a cette adresse   …/main/java/com.droidapp.helloword/MainActivity.java

L’image nous en dira plus, et surtout n’oubliez pas de cliquez sur les image pour les visionnez en grand et gros !

Affichage en mode Code

Petit Resumé :

Jusqu'à la , on a rien fait que visté un peu l’EDI. Mais je crois que c’est déjà bon . On passe a la compilation de notre projet dans quelque instant. Pour ce qui est de comprendre comment programmer pour android , les activité, le cycle de vie , etc .. J’ai pas encore pris le P’ti Dej donc pas trop inspiré. Essayez des tutos de concept de base gratutit partout sur internet et bien sur le site developer.android.com.
Des livres tres cool comme :

-        +   Android De la conception au déploiement  avec le SDK Google Android 2.  De Damien Guignard , Julien Chable Emmanuel Robles [ www.android-le-livre.fr  www.editions-eyrolles.com ]

-        + Le Programmeur : L’art du développement Android. Par Mark L. Murphy traduit par Éric Jacoboni, Avec la contribution d'Arnaud Farine. Publié par Pearson Education France

Et pour ceux qui veulent allé plus vite et bien, y’a des formations video. Sinon je vous conseillerai, les formations de training fourni gracieusement par itechgroup

A bientôt !

La suite ici  >> Tutoriel Android Studio #3

---

PS : désolé pour les fautes d’orthographe mais n’hésitez pas à me les dire je les corrigerai…

+ Plus

Aventure avec Android Studio #1

Tutorial  Android Studio

Android studio est téléchargeable en version ‘early preview’ sur le site officiel de android  (ici). Je lui trouve un air de WebMatrix de Microsoft (Bon may-be les news IDEs auront tous ce style, bref). 

Dans le monde de la conception des logiciels informatiques , je crois que certain comme vous et moi  appartiennent à l’intersection deux grands clivages (y’a en plusieurs, y’aura un articles dessus si vous êtes intéressés)  entre : 

- Style .Clavier : Et Oui , a style geeks  ses funs et mot d’ordre ! <codeurs, developeur, programeurs>, vous connaissez déjà le débats entre eux : Do It Yourself, Do not reveint the Wheel, Google it , Copy and Paste et encore

 - Style .Moine : Eux , je les aime bien , Il sont tous de l’école de Jang Chi ou de Yin Pô Li , ou de Bruce vet, que dis déjà ; Ici on trouve les consommateur quasi et unique de soit Linux, Microsoft, Open source … OU quelque chose comme ceci Php forever, Java the best  , etc. On ne jure que par ce qui vient du monastère  Un coucou a mon moine préféré ( c’est toi-même qui m’a dit ça hein)

Et l’intersection ça donne quoi ?

Selon moi, un truc du genre : 

Don’t care who make it , if it’s work and it good try to make something with it and process.

Pourquoi ai-je parle de tous ça, bof je m’en souvient plus mais je sais que j’aurais voulu bien dire : Android studio c’est cool , Once install you are ready , même si avec eclipse et netbeans avec des tools on y arrivait mais bon comme le disent les autres : simplest is best.

Bon trop de détour passons a notre tuto.

On installe , et hop on commence notre projet Hello word. (y’a koi, tu pensais que j’allai faire un tuto sur un app android d’acheminement de donnée satellitaire avec capacité d’interpretation grâce à la logique du data mining en intégrant les notion fortement typé du business intelligence … Non , Non Non)

Etape 1 : (Les screens sont down, Don't skip mes commantaires dhé, je te voit !)

Démarrer l’EDI, on choisi New projet, ensuite en renseigne les information de l’application a créer.

Pour le nom du package là!  Faudrait mettre autre chose hein, c koi tous ça, DroiDApp c’est réservé déjà hein , c pour moi gare a toi si tu a le nom de domaine avant que mes cotisations arrivent pour en avoir un ! bff

Ensuite nous pouvons ajouter une  icône pour notre application, si t’a rien prevu comme nous, choisir l’icone par défaut (Enfin pour un hello word tu va pas te mettre dans le design). Rien de spécial on continu …

Cliquons Next et on a à choisir une activité , si vous ne le saviez pas , une application android a au moins une activité qui peut être assimilée à un écran qu’une application propose à son utilisateur composée de deux volets : la logique et l’interface utilisateur (Hum, je dirait pas plus).

Pour l’instant on choisira une activité vide (neutre)  et le prchain ecran nous permettra de le nommé (surtout n’oublie pas d’autorisé les accès neccessaire à l’EDI , exemple :  JavaSDK).
Et hop let roll !

Petit résumé (version broken french) : Ce qui est bon dans Android sutdio là, dans le ken on peut decrou déjà des modeles. C'est un Redjô, bon bomby les chacun chacun a en Bri  respecter les recommandation de creation d’interface (J’en ai vu,ouff ! ) check this link to learning how to design exceptional Android apps. (here)

>>Quelques captures d’écran (Cliques sur  l'image pour l'agrandir)

Ecran 1	Ecran 2
Ecran 3	Ecran 4
Ecran 5	Ecran 6

La suite ici  >> Tutoriel Android Studio #2

---

PS : désolé pour les fautes d’orthographe mais n’hésitez pas à me les dire je les corrigerai…

+ Plus

[Que Passa] - Couches Ordinateur

---

Il y'a un genre de question auquel nous sommes confronté, soit du faites d'un petit-frère curieux et intelligent, ou le plus souvent par un panel lors d'un interview d'embauche, ou plus encore dans un micro-trottoir. 

Et là- un glou ! La gorge se resserre  c'est tous noir dans la tête. Bon diable pourquoi pas des questions plus difficile .... Dans [Que Passa] nous en parlons. aussi bien en informatique, que dans le domaine religieux et de vie en générale.

---

Architecture en couches d'un ordinateur

# Vous venez de finir la mise en forme de votre texte. Vous allez au menu et lancez l'impression du document.De l'instant ou vous avez cliqué sur imprimer jusqu’à la sorti des feuilles d'impressions; Dites nous ce qui c'est passé ?

Cette question invite tout simplement à parler des  différentes couches fonctionnelles, ou faisons pro avec : " Architecture en couches d'un ordinateur ". La mémoire vous est-elle revenue (informaticiens -Alors a fond dans les commentaires pour plus de détails).

Un tout petit peu de révision : 

L'ordinateur c'est un tout de composant electroniques (processeurs, mémoires et dispositifs d'entrée/sortie) bien connecté. la vie (ce qui fait fonctionner) -de- ces composant depend de programmes. Les premiers programmes neccessaires sont le BIOS (Basic Input/Output System) et L'OS (Operating System). Ensuite vient les programmes secondaires que sont tous nos logiciel installes comme Excel, Word.

En simplifiant l'architecture c'est a dire sa structure, nous avons un chemin de l'application au matérielle ; l'information traverse les couches décrites ci dessous (NB: ces couches peuvent elle aussi être décomposées en sous-couches):

[1]- Application [Logiciel Secondaire]
[2]- Système D’exploitation OS [Gros Logiciel primaire]
[3]- Pilote Matériel et BIOS [Petits logiciel primaire]
[4]- Matériels [Souris, Clavier, Imprimante]


[1] peut communiquer avec [2] grâce au DLL (Dynamic Link Library) que nous n'avons pas ajouté ici explicitement pour rendre le model simple.

Donc Notre réponse est tout a fait simple. 

Quand nous activons l'option d'impression de notre document, nous envoyons un message (une requête  au Système d'Exploitation qui lui ajoute cette tache, a la liste des taches a effectuer sur notre imprimante (évitant la pagaille koi!). Cependant le système d'exploitation ne communique pas directement avec l'imprimante. Il le fait plutot via a un petit programme ; le Gestionnaire de Périphérique.  Mais attention, le gestionnaire de périphérique ne contacte pas directement le matériel, il passe par le BIOS qui lui, charge le pilote de Matériel. Ce dernier est comme le traducteur de langage OS-Matériel. Alors la communication entre le BIOS et L'imprimante établie  on peut recevoir notre feuille toute imprimée.

---

PS : désolé pour les fautes d’orthographe mais n’hésitez pas à me les dire je les corrigerai…

+ Plus

PROGRAMMATION (PART 1)

Dit Grand! C'est quoi la Programmation même?

La programmation, tout le monde en a déjà entendu parler, et même aussi simple que cela puisse paraître il est bien difficile de dire avec aisance ce que nous entendons par programmation. Même un expert en informatique peut  balbutier concernant cette question.

Mon frangin m'a posé cette question simple, et si j'avais su lui répondre facilement may-be on aurait eu un peu plus de chance de l'avoir dans le monde des faiseurs de programme...

Ici j'aimerais partager avec vous une petite méthode pour ne serait ce que donner une ébauche de réponse a cette question. Car comme l'autre le dit tout le temps, 

définition n'est pas réponse
darwing bnath

Mais avant sans lire la suite, exercer vous avec cette question a haute voix et écouter vous :
- Qu'est ce que la programmation ?

Prenez 10 étudiants en informatique, 10 fan de code ... vous arriverez au constat qui est mien. Répondre a cette question est plus qu'un tourment.

Mais comme nous avons l'habitude de la faire, expliquer simplement ce que c'est que la programmation.

Allons y !

On va faire simple comme pour une définition de la natation qui est l'art de nater non non sorry l'art de nager et nager lui même c'est le fait d'effectuer des mouvements en vue de se deplacer dans un espace marin ms surtout de  ne pas se noyer. Donc pour la Programmation on va dire ....

La programmation consiste à dire à l'ordinateur ce qu'il doit faire. Comme par exemple produire de sons, afficher des images, additionner des nombres ...

La programmation c'est [l'art d'] écrire un programme. c'est la narration/action de donner le "quoi" d'un programme. En parlant de programme, j'ai une mnémotechnique à vous livrer. il s'agit à chaque fois que vous entendrez programme (ou des termes de son champ lexical) de faire appel aux lettres O-D-I. Lorsqu'on me demande ce que c'est qu'un programme , un algo ... bon tous les yiAyis à coté à coté la , je refais sortir la mémo du ODI. Man , tu peux faire comme tu veux dans l'ordre d'apparition des lettres hein. Ainsi

O = Opération

D = Donnée

I = Instruction

Après le recall, on peut faire une phrase simple.

• # La programmation : c'est l'art de produire une suite d'INSTRUCTION qui permet d'effectuer des OPÉRATIONS sur des DONNÉES.

Et bien sur pourquoi pas faire long et intéressant sachant qu'on peut développer les mots comme par exemple pour les données on peut les présenter en deux blocs: des données en entrée (paramètre) et des données en sortie (résultat). Ainsi on peut agrémenter

• # La programmation : c'est l'art de produire une suite d'INSTRUCTION qui permet d' effectuer des OPÉRATIONS sur des informations initiales (entrée en paramètre  pour produire un résultat (information de sortie) dans le but de résoudre un problème donné.

Et bien sur on peut faire encore plus long en établissant la différence en le code qui est la transcription (écrire dans un fichier/feuille de papier) et le programme qui est l’exécution de ce code -ci par la machine. Ainsi on peut encore agrémenter

• # La programmation :  c'est l'art de produire du Code qui est la suite d' INSTRUCTION qui une fois exécuter par la machine/ordinateur devient un programme et permet d' effectuer des OPÉRATIONS sur des informations initiales (entrée en paramètre  pour produire un résultat (information de sortie) dans le but de résoudre un problème donné.

et encore on peut enrichir, en y ajoutant le concept de compilation ou d’interprétation  de langage de programmation, de méthode d'algorithme etc. Ainsi de suite. Mais tout part d'une simple mnémotechnique qui une fois déployée, nous fait dire plus qu'on ne pourrait de manière intelligente.
ODI== Opération |Donnée|Instruction. A ce stade faire un tour sur la série des métiers de l'informatique sera d'une grande aide.(par ici)

+ Plus

LES METIERS DE L'INFORMATIQUE (PART4)

The IT FourSquare

Ok c'est reparti pour notre série sur les piliers de l'informatique. Les Quatre éléments fondamentaux (Biensur selon le bloggeur). Pour ceux qui nous prennent en cours c'est par ici les premiers articles :

- Partie 1 :: Une Introduction la serie IT 4Square : Bien sympa :)
- Partie 2 :: Philosophie sur l'essence de L'info dans L'informatique : Du Genre Pytagore :/
- Partie 3 :: Premier Pilier énoncé concernant le Transport ; SQUARE 1 := RESEAUX INFORMATIQUE ET TÉLÉCOMS.

Et aujourd’hui on parle du second pilier qui dans notre liste de la Chaîne IT est : la Conservation de l'information.

La liste ici pour ceux qui toujours n'ont pas un bon debit internet (Pff Maman Africa) :

•  Naissance de l'information
•  Partage de l'information
•  Conservation de l'information
•  Interprétation de l'information
•  Protection de l'information
•  Mort de l'information

 Allez c'est partie... Go!

Tout ce qui est créé vient de ce que nous avons consciemment ou inconsciemment désiré, rêvé ou simplement imaginé. Cette information-imagination est la source première des grandes inventions et surtout de la démonstration de l'intelligence humaine.

Donc si vous me suivez un peu de loin;
( mais je préfère de prés, mais pas trop proche quoi , j'aime pas les frottements non négligeables :/ )
vous considérez avec moi que l'intelligence n'est pas 100% un Don venu d'en haut ...

[Comment ce fait t-il qu'en pleine interrogation , c'est le plafond qu'on scrute ?]
L'élève cherche la bonne réponse, celle que le maître attend du plafonD !

... mais plutôt la capacité de synthétiser un agrégat de données pour aboutir à une résultante solvant d'un problème donné ( Ce qui vient d’être dit , peut ne pas être considéré hein!).

Ainsi, je veux montrer l'importance d'une base de faits, ou pour faire simple, d'une base de Donnée. (Même si il se peut que ce soit raté d'avance :)

Pour faire un peu glou, je pourrai citer Joseph Ki-Zerbo,  ( Mais bien avant, Souvenir souvenir, je me rappelle que c’était le surnom de l'un de mes meilleurs amis du lycée. Au fait c’était un Troisième Dan Kung-fu ...  (Vraiment utile dans ce lycée ! -lol ). Ok citons Joseph - pas le charpentier bien sur!.

La mémoire doit être un tremplin pour l'avenir 
[Joseph Ki­ZerbO]

Tansition ... Comme l'histoire c'est la mémoire de la vie, pour faire toujours glou,  l'histoire c'est la base de donnée des civilisations. Et voila Nous avons compris tout l'article. ON peut donc la relire en commençant par juste en-bas de cette ligne.

---

Pas, compris !

Si on faisait encore plus simple ;)

Pour construire une voiture, il aurait bien fallu comprendre comment le déplacement personnelle se réalise  On va pas fouiller dans nos livres et cahiers de leçons, 300 pages de préhistoire pour nous souvenir comment elle nous enseigne au long  des époques les différentes transitions pour que l'homme-singe puisse apprendre a se tenir debout et se mettre en mouvement.

 

Mais selon moi et ça ne tient qu'a moi, il a fallu que cet homme-signe , voit mon grand aïeule, l'homme-homme pour se créer un calque. Je sais pas si toi es un modèle évolué des homes-singes mais chez nous on savait déjà marcher oh :)

Revenons à la voiture, il aurait donc fallu a l'homme se mouvoir, dompter et dresser les animaux pour  cette fin c-a-d se mouvoir (merde, je me répète). Il a bien fait bien-sur de se créer de petits systèmes à la Tarzan , c'est bien efficace. (Je me suis arraché une dent pour ça) et enfin si on saute brusquement au temps du machinisme et des grandes inventions , on arrive à l’époque ou il a conçu des vélos  des voitures, des trains et même des vaisseaux spatiaux inter-galactique (-- non non je vais trop vite , Désolé).

Mais qu'est ce que tu as fait , Hors-Sujet !
Pas compris ... Voici le remix - Reload. ça Va Djah

Toi même imagine que c’était la fin du monde et comme moi,  tu es sur la liste des survivants ( l'article par ici). Tous est gnagami comme on le dit. Je suis à Denver (c'est aux ,Etat unis , bon ce qui en reste après la fin du monde koi !) et toi , bof a gbeibitto (Tu connais pas , c'est ou j'ai grandi la ! ce qui est sur tu y est Piannn).

Situation fictive 1.1.00.1.

Tu veux venir me retrouver à Denver. Pour me dire que notre maison de gbeibitto à été détruite  ( ça se comprend tu est trop gentil -lol  : : Mais d'autre diront plutôt akpess Mendi , cube maggi , tchrouuu )

1. Y'a pas avion, bateau, voiture et même vélo. Surtout tu as peur de chat donc tu peut pas monter dessus pour venir oooh
2. Y'a pas internet , téléphone et surtout t'avais pas été initie DOGBA! avec un peu de PORO +VODOU comme nous autre là :)  et en plus tu connais pas les techniques de communication Magique oooh
3. Y'a pas bonne route aussi oh , Google Map a disparu et la Chiche/Gbane/LaMJane ne pousse plus pour dire qu'avec une cérémonie chaman tu va me localiser. Mais plus encore Prête vodou a Douff

---- Hum, c'est complique hein. Sauf que tu a Encarta, l'encyclopedie en version française ( TU es trop le bilingue mais pardon faut lire option langue = FR ) qui te dit (Mais pas tout) comment venir faire ton afferage a Denver. Sans Encarta,

Mon frère la la , tu as compris , c'est pour Les gos je m’inquiète mais on va explique :-)

Je me demande combien de temps ça te prendra comme dans minus et cortex d'aboutir a quelque chose de fiable !?

Et voila, Pour Les Gos ! Remix version trial ;)

Les filles vous vous rappelez de  Brigitte Non, La Go du Réseau ? Huuuum bien sur que si,  c'est ici on a parler d'elle (le lien). La go Brigitte koi, elle a dossier de tout le monde. Son surnom au quartier, en plus d’être Réseau sans fil, c'est la go-Data !

Juste un petit résumé, c'est la go à qui Aya avait confié que Marco l'avait Gbé et qu'elle voulait mettre ça dans poubelle et puis ça pris tout le quartier là.

J'avais oublié de vous dire que Si vous voulez connaitre aussi : qui a fait quoi,  avec qui, ou et pourquoi, quand et Comment ... C'est juste à la villa 119 , chez Brigitte.
Elle a tout ça dans sa tête hein, hum! Et surtout qu'avec son diplôme informatique d'administrateur de base de donnée;  elle va te sortir ce que tu cherche vite et propre même et si tu veux, avec commentaires et interprétations en Mode Data Mining complet !

Tu veux douter ?
Faut taper sa porte tu va essayer de faire

SELECT * FROM AFFAIRRAGE WHERE PERSONNE = MOIMEME AND count (KPAKPATOYA).

QUI A DIT que les filles n'ont pas compris ? Faut pas être trop Macho les gars. Je comprends Maintenant le Feminisme (kiaaaaa, looool , gbiia gbiaaa )
Sinon Y'a un ami hein Nazali Mobali Kitoko ;  lui c'est son domaine il va mieux expliquer. Dites lui que vous venez de ma part , c'est pas pour les filles seulement hein :)

Je pense que la on a Fini par avoir une belle entrée pour notre second IT 4Square. Sous vos acclamations : STOCKAGE ET GESTION DES DONNÉES.
Mon Ami(e) on va abréger BASE DE DONNÉE.


Merci  a vous les gars e BD. Grace a vous demain et après Demain ce article pourrait etre disponible  a qui veut bien le consulter (Mais pardonner conserver ça aussi longtemps) .

Quelque Conseils :

Comment souvent c'est cool de se relire la , je vous Maya pas hein, je vais revenir un jour ici et donner plus d'indications pour tous ceux qui veulent bien embrasser une carrière IT en Base de donnée et aussi filer des tuyaux a ceux qui y sont déjà.

Mais pur le moment soyez sociable les gars.
Commentez, Discutez, Partagez ces lignes stockez dans un fichier html  il me semble chez google grâce a son service de blog qui assurément conserve tout les fichiers dans un Data center à Denver .....


A vous revoir ...

---

PS : désolé pour les fautes d’orthographe mais n’hésitez pas à me les dire je les corrigerai…

+ Plus

Front-end Developer Interview

QUESTIONNAIRE DE RECRUTEMENT

General Questions:

• Êtes-vous sur Twitter ?
  • Si oui, qui suivez-vous ?
• Êtes-vous sur GitHub ?
  • Si oui, donnez quelques exemples de dépôt que vous suivez.
• A quels blogs êtes-vous abonné ?
• Quel logiciel de gestion de versions avez-vous déjà utilisé ? (Git, SVN etc.)
• Quel est votre environnement de développement préféré ? (OS, Editor, Browsers, Tools etc.)
• Pouvez-vous décrire votre workflow lorsque vous créez une page web ?
• Pouvez-vous décrire la différence entre amélioration progressive et dégradation progressive ?
  • Un point bonus si vous décrivez des méthodes de détection
• Expliquez ce que le terme "HTML sémantique" signifie.
• Quel naviguateur et outils de débogage web utilisez-vous ?
• Comment optimisez vous les performances de vos page web (assets/resources) ?
  • Énumérez quelques solutions comme :
    • La concaténation des fichiers
    • La minification des fichiers
    • L'utilisation d'un Content Delivery Network (CDN)
    • La mise en cache
    • etc…
• Pourquoi est-il préférable de disposer ses assets sur des domaines différents ?
  • Combien de ressources différentes un navigateur peut télécharger à partir d'un même domaine à un instant T ?
• Donnez 3 façons qui permettent de réduire le temps de chargement d'une page. (perçu ou réel)
• Si vous démarrez sur un projet existant, que votre prédécesseur a utilisé des tabulations pour indenter son code et que vous utilisez des espaces, que faites-vous ?
  • Vous proposez d'utiliser quelque chose comme EditorConfig (http://editorconfig.org)
  • Vous restez fidèle aux conventions
  • issue :retab! command
• Développez un simple slideshow
  • Un point bonus si vous le faites sans JS
• Quel outils utilisez vous pour tester la performance de votre code ?
  • JSPerf (http://jsperf.com/)
  • Dromaeo (http://dromaeo.com/)
  • etc…
• Si vous pouviez maitriser parfaitement une technologie cette année, laquelle serait-ce ?
• Expliquez l'importance des standards et des organisations les édictant.

Questions spécifiques à HTML :

• Qu'est-ce qu'un doctype fait, et combien pouvez-vous en nommer ?
• Quelle est la différence entre les modes standard et quirks
• Quelles sont les limitations des pages XHTML ?
  • Y a t'il des problèmes à envoyer des pages avec le content-type application/xhtml+xml ?
• Comment servez vous une page avec du contenu multilingue ?
  • À quoi devez-vous faire attention quand vous designez ou développez des pages pour des sites multilingues ?
• Pouvez vous utliser une syntaxe XHTML en HTML5 ?
• Comment utilisez vous du XML en HTML5 ?
• À quoi servent les data- attributes ?
• Que sont les modèles de contenus en HTML4, et diffèrent-ils de HTML5 ?
• Si l'on considère que HTML5 est une plateforme web ouverte, quels sont les briques de base de HTML5 ?
• Décrivez la différence entre cookies, sessionStorage, et localStorage.

Questions spécifiques à JavaScript :

• Quelles sont les librairies JavaScript que vous avez utilisé ?
• En quoi JavaScript est-il différent de Java ?
• Qu'est-ce qu'une hashTable ?
• Que sont les variables undefined et undeclared ?
• Qu'est-ce qu'une closure, et pourquoi / comment en utiliseriez vous une ?
  • Votre patten favori pour les créer ? (seulement pour les IIFEs, fonctions-expressions évoquées immédiatement)
• Quel est un cas d'utilisation typique pour une fonction anonyme ?
• Expliquer les pattern JavaScript de "Module", et quand vous l'utiliseriez.
  • Un point bonus si vous parlez de namespacing
  • Que se passe t'il si vos modules ne sont pas namespacés ?
• Comment organisez vous votre code (pattern modulaire, héritage classique ?)
• Quelle est la différence entre objets hôtes et objets natifs ?
• Différence entre : javascript function Person(){} var person = Person() // et var person = new Person()
• Quelle est la différence entre .call et .apply ?
• Expliquez Function.prototype.bind ?
• Quand optimisez-vous votre code ?
• Pouvez vous expliquer comment fonctionne l'héritage en JavaScript ?
• Quand utiliseriez-vous document.write() ?
  • La plupart des pubs utilisent encore document.write() même si son utilisation est découragée.
• Quelle est la différence entre détection de feature, inférence de feature, et l'utilisation de l'User Agent ?
• Expliquez un call AJAX dans le plus grand détail possible
• Expliquez comment JSONP fonctionne (et en quoi ca n'est pas réellement de l'AJAX)
• Avez-vous déjà utilisé du templating en JavaScript ?
  • Si oui, quelles librairies avez-vous utilisé (Mustache.js, Handlebars etc…)
• Expliquez "hoisiting".
• Quest-ce que le FOUC, comment l'évitez vous ?
• Décrivez le bubbling d'événement.
• Quelle est la différence entre un "attribut" et une "propriété"
• Pourquoi étendre les objets natifs JavaScript n'est pas une bonne idée ?
• Pourquoi étendre les objets natifs est une bonne idée ?
• Quelle est la différence entre les événements load et ready du document?
• Quelle est la différence entre == et === ?
• Expliquez comment vous récupéreriez un paramètre de querystring de l'URL du browser.
• Expliquez la politique d'origine commune et ses implication en JavaScript.
• Expliquez la délégation d'événement.
• Expliquez les patterns d'héritage en JavaScript.
• Faites fonctionner ceci : javascript [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
• Décrivez une stratégie de mémoization (pour éviter la répétition des calculs) en JavaScript.
• Qu'est-que qu'une instruction 'Ternaire', et qu'indique le mot 'Ternaire'
• Qu'est-ce que l'arité d'une fonction ?

Exemples de code JS

~~3.14

Question: Que retourne ce code ? Réponse: 3

"je suis un bouffeur de lasagne".split("").reverse().join("");

Question: Que retourne ce code ? Réponse: "engasal ed rueffuob nu sius ej"

( window.foo || ( window.foo = "bar" ) );

Question: Que retourne window.foo? Réponse: "bar" seulement si window.foo n'était pas défini ou faux, autrement il garde sa valeur

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Question: Que se passe-t-il à l'éxécution de ce code ? Réponse: "Hello World" & ReferenceError: bar is not defined

var foo = [];
foo.push(1);
foo.push(2);

Question: Quelle est la valeur de foo.length ? **Réponse: 2

var foo = {};
foo.bar = 'hello';

Question: Quelle est la valeur de foo.length ? **Réponse: undefined

Questions spécifiques à jQuery :

• Expliquez le chainage
• Expliquez 'deferred'
• Décrivez des optimisations spécifiques à jQuery que vous pouvez implémenter.
• Que fait .end() ?
• Pourquoi et comment restreindriez-vous un événement bindé à un un namespace ?
• Nommez 4 valeurs différentes que vous pouvez passer à la méthode jQuery.
  • Sélecteur (string), HTML (string), Callback (function), HTMLElement, objet, tableau, tableau d'éléments, objet jQuery, etc…
• Qu'est-ce que la queue d'effets (fx queue) ?
• Quelle est la différence entre .get(), [], et .eq() ?
• Quelle est la différence entre .bind(), .live(), et .delegate()?
• Quelle est la différence entre $ et $.fn? Ou bien seulement : qu'est-ce que $.fn.
• Optimisez ce sélecteur : javascript $(".foo div#bar:eq(0)")

Questions spécifiques CSS :

• Décrivez ce que fait un fichier CSS Reset, et pourquoi il est utile.
• Décrivez les Floats, et comment ils fonctionnent.
• Quelles sont les différentes méthodes de clearing des floats, et laquelle est appropriée pour chaque contexte ?
• Expliquez les sprites CSS, et comment vous les implémenteriez sur une page ou un site.
• Quelles sont vos techniques favorites de remplacement d'images, et comment les utilisez vous ?
• hacks de propriétés CSS, fichiers .css inclus avec des commentaires conditionnels, ou autre ?
• Comment servez vous vos pages pour les browsers aux fonctionnalités réduites ?
  • Quelles techniques / process utilisez vous ?
• Quelles sont les différentes manières de masquer du contenu (en le laissant disponible pour les lecteurs d'écran) ?
• Avez-vous déjà utilisé un grid system, et si oui, lequel préférez-vous ?
• Avez-vous déjà implémenté des media queries, ou des layouts/CSS spécifiques aux mobiles ?
• déjà touché au styling de SVG ?
• Comment optimisez vous vos pages pour le print ?
• Quelques trucs pour écrire du CSS efficace ?
• Utilisez vous des préprocesseurs CSS ? (SASS, Compass, Stylus, LESS)
  • Si oui, décrivez ce que vous aimez et n'aimez pas des préprocesseurs que vous avez utilisé.
• Comment implémenteriez-vous une créa web qui utilise des typos non standard ?
  • Webfonts (services comme: Google Webfonts, Typekit etc.)
• Expliquez comment un browser détermine ce qui matche un sélecteur CSS.

Questions optionnelles, pour le geste.

• Quel est le tuc le plus cool que vous ayez jamais codé, de quoi êtes-vous le plus fier ?
• Connaissez vous le signe de gang du HTML5 ?
• Êtes-vous ou avez-vous déjà été sur un bateau ?
• Quelles sont vos parties favorites des outils de développement que vous utilisez.
• Avez-vous des projets chouchous ? Quel genre ?
• Expliquez 'cornify'.
• Sur un bout de papier, écrivez les lettres A B C D E verticalement. Maintenant mettez les en ordre descendant sans écrire une ligne de code.
  • Regardez si ils retournent le bout de papier.
• Pirate ou Ninja.
  • Bonus si c'est une doublette, et si il y a une bonne raison. (+2 pour des Zombies Singes Ninja Pirates)
• Si c'était pas du Dev, vous feriez quoi ?
• Ou est Carmen San Diego ?
  • Indice : La réponse est toujours fausse.
• Quelle est votre feature favorite de IE ?
• Complétez cette phrase Brendan Eich et Doug Crockford sont les __________ de JavaScript.
• jQuery : superbe librairie, ou la meilleure ? Discutez.

CREDIT : https://github.com/darcyclarke/Front-end-Developer-Interview-Questions

Contributors

@bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.com/), @SlexAxton (http://alexsexton.com/), @boazsender (http://boazsender.com/), @miketaylr (http://miketaylr.com/), @vladikoff (http://vladfilippov.com/), @gf3 (http://gf3.ca/), @jon_neal (http://twitter.com/jon_neal), @wookiehangover (http://wookiehangover.com/) and @darcy_clarke (http://darcyclarke.me)

+ Plus