Rapport synthèse : HTML5, CSS3, JavaScript et Baker Framework en format Hpub. Travail présenté à Madame Julie Côté Apprentissage autonome 582-FXA-06

Transcription

1 Audrey LEHOUX Groupe A Rapport synthèse : HTML5, CSS3, JavaScript et Baker Framework en format Hpub Travail présenté à Madame Julie Côté Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques d'intégration multimédia Cégep de Sainte-Foy 25 mars 2013

2 TABLE DES MATIÈRES ii 1. INTRODUCTION.1 2. SYNTHÈSE DES TRAVAUX La recherche L expérimentation Animations et effets spéciaux en CSS Propriétés CSS Baker Framework Intégration du contenu audio et vidéo Laker Problèmes rencontrés et solutions BILAN DE LA PROGRESSION DU TRAVAIL Semaine Semaine Semaine Semaine Semaine Semaine Semaine Semaine Comparatif des heures réalisées versus les heures prévues.6 4. TECHNOLOGIES EMPLOYÉES PERSPECTIVES CONCLUSION BIBLIOGRAPHIE 8 ANNEXES.9

3 1 1. INTRODUCTION Depuis qu Apple a sorti l iphone, l ipod touch et l ipad, le mobile m a toujours fasciné ainsi que ses applications. La manière dont ils sont conçus et programmés m a toujours intrigué. Ma motivation est devenue plus grande lorsqu on est venu à la possibilité de faire un livre numérique à partir d un livre imprimé. L imprimé nous permettait de visualiser l histoire avec notre imagination et le numérique permet que celle-ci soit intégrée au recueil avec des animations ou effets spéciaux programmés en JavaScript et CSS3. Prenez comme exemple l application d Alice aux pays des merveilles créé par la firme Atomic Antelope. La programmation n est pas ma force première. Cependant lorsque j ai su que je pouvais faire l application comme si c était un site, ça m a extrêmement conquise. Ensuite, je n avais qu à le mettre sur le Baker Framework pour le compiler et que mon livre-application prenne vie. Je voulais intégrer mes apprentissages dans mon projet de spécialisation qui est de produire un livre application avec le recueil «L Abécédaire de Pomme et Pépin» illustrée par un professeur en graphisme : Ann-Claire Delisle. Je voulais m amuser et réaliser quelque chose de «joli et simple» pour le projet de spécialisation. J avais quelques obstacles qui pouvaient me donner quelques difficultés à mon apprentissage. Il s agit que le «Baker Framework» s utilise que sur Xcode, que celui-ci est seulement sur les ordinateurs Mac et que je n ai pas de Mac à la maison ce qui me résignait à faire mes expérimentations qu à l école. 2. SYNTHÈSE DES TRAVAUX 2.1. La recherche La documentation sur le «Baker Framework» se retrouve exclusivement sur son site officiel : et sur le forum Git hub. Il y a des tutoriels expliquant le fonctionnement et produire un livre-application dans les deux modes «Newsstand» et «Standalone». Il n y a pas beaucoup d exemples que celui du Hpub qui se retrouve sur le site. Si j avais des questions, je n avais qu à les poser sur le forum Git hub. Pour ce qui est du HTML5, du CSS3 et du JavaScript, j avais entamé une recherche préparatoire pour trouver un certain recueil qui m a donné certaines bases. Pourtant, c est en parcourant le web que j ai pu trouver un peu plus de réponses à mes questions.

4 L expérimentation Au niveau des expérimentations, je me suis surtout penché sur les tutoriaux qui se retrouvent sur le site de «Baker» pour pouvoir compiler mon propre prototype. Pour les autres items, j ai procédé à quelques expérimentations qui se retrouveront dans l annexe Animations et effets spéciaux en CSS3 Je voulais apprendre comment en faire. J en avais déjà vu avant sans aller plus loin dans ce sujet. En parcourant mon recueil, j avais trouvé un exemple que je voulais expérimenter : l effet de «coverflow» qui se retrouve sur le logiciel d ITunes. Je suis quelque peu déçu car j ai perdu un peu de temps et que le résultat ne marche pas comme je le souhaitais. Cependant, je n ai pas tout perdu. J ai pu entrevoir dans le code qu il utilisait beaucoup le préfixe «webkit» pour accompagner les propriétés CSS3 ainsi que du JavaScript Propriétés CSS3 En parcourant sur le web, j ai pu trouver une page illustrant la plupart des propriétés et quelques exemples. J ai procédé à un exemple de transitions qui se retrouve dans un menu. (AlsaCréations) «Baker Framework» J avais hâte d entamer ce sujet et de l expérimenter. J ai suivi un pas à pas pour savoir comment il fonctionne et le tutoriel du mode de «Standalone» qui s applique qu aux livres avec qu une seule publication. J ai téléchargé également l exemple de Hpub qui se retrouvait sur le site. J ai voulu le compiler dans le «Baker Framework» sans grand succès. Il m a pris beaucoup de temps à comprendre les raisons que ça ne fonctionnait pas. J ai découvert un autre exemple d application fait avec «Baker» en fouillant sur le web. Cependant, sa structure était totalement différente de l exemple illustré sur le site que je ne suis pas allé plus loin. Ce n est que plus tard que j ai réussi à faire compiler l exemple de «Hpub» et le parcourir sur le simulateur Intégration du contenu audio et vidéo Je n ai pas beaucoup expérimenté dans ce sujet car je restais souvent bloqué au problème que j avais avec «Baker».

5 Laker Le «Laker» ressemble beaucoup au «Baker» car tous les deux s utilisent dans le même «Framework». J ai téléchargé l exemple se retrouvant sur le site de «Laker» : Je les ai compilé dans les deux formats celui d ipad et d IPhone tout en me servant du tutoriel qui se retrouvait sur «Baker» Problèmes rencontrés et solutions Mes problèmes se sont littéralement situés lorsque j ai commencé à utiliser «Baker». J avais téléchargé l exemple de «Hpub». Cependant, je n ai pas été capable de le compiler car j avais trop accumulé de lecture et que je ne pouvais pas tout dissocier. Le forum de «Git hub» essayait tant bien que mal de répondre à mes questions mais il ne pouvait pas faire grand-chose si je n étais pas capable de m expliquer moi-même. Lors de la compilation, il y a quelques erreurs qui m étaient inconnues qui sont apparues. J étais incapable de trouver la solution. Guillaume Simard s est assis à côté de moi un après-midi et a réussi très facilement à me débloquer de mon problème. Je n avais pas la bonne version de Xcode et le contenu de l exemple de «Hpub» ne retrouvait pas dans le bon dossier. J ai lâché un juron mais aussi un soupir de soulagement. Pour le moment, j ai encore quelques problèmes à compiler mon propre prototype. C est uniquement après mon apprentissage avec un peu de recul que j ai pu avec aisance faire fonctionner mon propre prototype. 3. BILAN DE PROGRESSION 3.1. Semaine 1 Prévu : 12 hres Je devais entamer ma lecture d un chapitre apparaissant dans le livre ipad et IPhone : développez des applications en HTML5, CSS3 et JavaScript ainsi que de fouiller sur le net pour trouver des exemples. Réalisé : 16 hres Mon apprentissage s est très bien passé. Cependant, j ai quelque peu débordé en procédant à l expérimentation de l effet «coverflow».

6 Semaine 2 Prévu : 11 hres Au menu, un certain chapitre de mon livre : Fonctionnalités CSS pour l interface utilisateur. Ensuite de procéder à quelques expérimentations. Réalisé : 11hres Je n ai retenu que quelques affaires de ma lecture car je voulais aller plus loin dans les propriétés CSS3 et voir quels navigateurs les supportent Semaine 3 Prévu : 11 hres Apprendre le fonctionnement de «Baker» était mon but. Je voulais faire compiler un livre-application sans trop de problèmes. Lire et faire le pas à pas en même temps. Réalisé : 11 hres J étais heureuse d avoir trouvé ce pas à pas mais à la fin, je ne comprenais pas ce qui causait le nonfonctionnement de la compilation et qu afin je puisse voir l application Semaine 4 Prévu : 12 hres Encore accroché à mon problème, ma planification a littéralement explosé à partir de cette semaine. Je voulais insérer dans mes apprentissages l intégration du contenu audio et vidéo. Réalisé : 12 hres

7 5 J ai essayé plusieurs affaires mais sans succès. J avais du mal à expliquer le fonctionnement de «Baker». Je dois relire les explications et les tutoriels pour bien dissocier Semaine 5 Prévu : 12 hres Hé oui! Je suis encore accroché à mon problème sauf que je ne veux pas juste travailler là-dessus et je veux le comprendre pour bien le saisir. Réalisé : 12 hres J ai fait un schéma pour dissocier toutes mes lectures et je suis en mesure de bien l expliquer. Je l ai mis en annexe. Grâce à de l aide très précieuse, j ai pu expérimenter l exemple de «Hpub» et le parcourir Semaine 6 Prévu : 12 hres Je veux expérimenter «Baker» avec mon propre prototype ainsi que mon projet de spécialisation. Je veux également commencer un apprentissage supplémentaire lié à «Baker» : «Laker». Réalisé : 12 hres Je n y arrivais pas de faire fonctionner mon propre prototype, il y a peut-être quelque chose dont je n ai pas fait attention. Je n ai pas tout fini mon apprentissage sur «Laker». Je prévois continuer pour les prochaines semaines Semaine 7 Prévu : 12 hres Continuer mon apprentissage sur «Laker», commencer mon bilan final ainsi que régler mon problème sur Baker étaient mes choses prévues pour cette semaine.

8 6 Réalisé : 12 hres J ai pu continuer sur «Laker» et j ai commencé le bilan final en étant quand même déçu que je n étais pas capable de mettre le doigt sur l erreur même en relisant et en exposant mes problèmes sur «Github». Je croyais vraiment que mon problème reposait uniquement sur le «bundle id». J ai expérimenté le «Laker» en le compilant en IPhone et en Ipad. J ai également décidé sur quel sujet je ferai ma conférence Semaine 8 Prévu : 12 hres Même chose que la semaine 7. J ai comme l impression que je n avance pas comme je devrais. Réalisé : 12 hres Je mettais plus mon énergie pour finir le projet Tim mais j essayais de faire mes apprentissages et de surtout régler mon problème avec «Baker». J ai mis du temps aussi pour continuer mon bilan et commencer de ramasser des choses pour ma conférence à propos de ce sujet Comparatif des heures réalisés versus vers les heures prévues. J ai fait un total de 94 heures pour ce cours en répartissant par ci par là des heures pendant la semaine car j avais du mal à les placer pendant la fin de semaine du à mon travail au Concorde. Même si je n avais pas réussi à résoudre mon problème de Baker à la fin de ces heures, j avais acquis beaucoup de notions pour les appliquer pour mon projet de spécialisation et de les expliquer lors de ma conférence. 4. TECHNOLOGIES EMPLOYÉES Mes recherches m ont permis d utiliser une technologie qui m était tout à fait inconnue. Il s agit du Xcode. Même si je ne l utilise que pour compiler l application, j ai pu voir un aperçu de ses fonctions.

9 7 Son seul désavantage, c est son utilisation uniquement en Mac. Ensuite, de revoir et d apprivoiser davantage le JavaScript pour effectuer certains effets à l aide de plusieurs de ses librairies. Il y a également le JSON dont dans un certain fichier que Baker configure ses paramètres dont il a besoin pour fonctionner. 5. PERSPECTIVES Même si mon sujet porte comment procéder à un livre-application, j ai pu voir en fouillant sur le forum de «Git hub» que je peux appliquer presque la même méthode mais en utilisant «Phone Gap» qui permet de convertir un site en application mobile. Je n ai nullement besoin de connaître un autre langage pour faire des applications mobiles. C est une affaire que j aurais aimé explorer si j avais eu davantage de temps durant le cours. Il y a également les effets spéciaux produits avec JavaScript. J ai pu en découvrir quelques-uns lors de mon apprentissage mais je suis restée sur ma faim. Dans un futur proche, j aimerais continuer dans la voie de l applicatif car il offre beaucoup de possibilités comme de convertir un simple document ou un site en application. 6. CONCLUSION Je suis quand même assez fière de cette aventure que m a procurée «Baker» même si j ai eu plusieurs retombées et que j ai eu du mal un peu à les surmonter. J ai pu voir quelles sont mes limites en méthode d apprentissage. Je suis un peu plus rapide lorsque j ai une personne ressource pas trop loin qui peut me guider et éviter des erreurs d inattention qui peuvent retarder mon apprentissage. Je dois également expliquer mon problème avec beaucoup de détails pour avoir une réponse claire et le régler plus rapidement. Enfin, de prendre un recul pour enfin régler ce problème avec facilité. C est une belle technologie le «Baker Framework» et il est vraiment facile à utiliser. Hé oui! Cependant, il faut faire attention à ne pas faire d erreurs car Xcode est un logiciel assez capricieux lors de la compilation. Pourtant, Baker offre beaucoup de possibilités et je compte continuer à l utiliser pour procéder à plusieurs livres applications comme un portfolio car j ai appris plusieurs choses qui peuvent rendre l application un peu plus interactive. Tout est possible!

10 8 7. BIBLIOGRAPHIE - APERS, Chris et PATERSON, Daniel. IPad et IPhone : développement d'applications web en HTML5, CSS3 et JavaScript. Paris: Pearson, 2012, 502 pages. - Propriétés CSS3 avec le préfixe webkit - Site officiel du Baker Framework -Chemin pas à pas du Baker Framework - Paramètres du Baker Framework - Tutoriel de Baker Framework d une version antérieure. - Intégration des contenus vidéo et audio - Démo d une application procédée avec Baker mais d une méthode différente - Article sur Git hub expliquant le problème de version de Xcode. - Laker - Article sur Git hub expliquant mon dernier problème.

11 9 ANNEXES 1. Expérimentation Expérimentation 2

12 3. Schéma de Baker 10

13 11