Initiation aux bases du développement web : HTML / CSS / JavaScript
Mise en pratique en développant un site internet moderne en 30 minutes de type Facebook
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?
Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.
Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Mon atelier survole les actions de bases régulièrement oubliées lorsqu’on démarre un site dans WordPress. Souvent perçues comme de petits détails anodins, ce sont pourtant ces actions qui permettent de présenter un site web professionnel.
Ton nom d’utilisateur est “admin”? Ton mot de passe c’est “password”, ou mieux: “password123″? T’as pas activé le plugin Akismet (Ak-quoi?)? T’as pas changé tes permaliens et t’as pas de Gravatar (C’est quoi ça hein, un “GRAVATAR”)? Le slogan de ton site c’est encore “Just another WordPress site”? Viens donc voir ma conférence, on va arranger ça!
Initiation aux bases du développement web : HTML / CSS / JavaScript
Mise en pratique en développant un site internet moderne en 30 minutes de type Facebook
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?
Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.
Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Mon atelier survole les actions de bases régulièrement oubliées lorsqu’on démarre un site dans WordPress. Souvent perçues comme de petits détails anodins, ce sont pourtant ces actions qui permettent de présenter un site web professionnel.
Ton nom d’utilisateur est “admin”? Ton mot de passe c’est “password”, ou mieux: “password123″? T’as pas activé le plugin Akismet (Ak-quoi?)? T’as pas changé tes permaliens et t’as pas de Gravatar (C’est quoi ça hein, un “GRAVATAR”)? Le slogan de ton site c’est encore “Just another WordPress site”? Viens donc voir ma conférence, on va arranger ça!
Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
Il n'y a ni Web mobile, ni de Web pour les PC et pas plus de Web spécifiques aux tablettes. Nous voyons le même Web, mais de différentes façons. Alors, comment fait-on? En se débarrassant de nos approches à largeur fixe et appareil spécifique, tout en utilisant la technique du design Web adaptatif. Cette présentation se veut une explication de cette façon de développer des sites et applications Web. Cette approche à 3 volets permettra à vos projets actuels d'être capable de s'adapter aux appareils dans le futur.
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
Les 10 Erreurs des Debutants avec WordPressNicolas Richer
Lorsque l'on débute avec WordPress, on ne se doute pas que certaines décisions minimes peuvent affecter notre site dans un futur plus ou moins proche.
Que cela concerne la bonne installation, la sécurité du site ou son référencement, il vaut mieux partir avec ces 10 conseils en tête avant de se lancer !
Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
Il n'y a ni Web mobile, ni de Web pour les PC et pas plus de Web spécifiques aux tablettes. Nous voyons le même Web, mais de différentes façons. Alors, comment fait-on? En se débarrassant de nos approches à largeur fixe et appareil spécifique, tout en utilisant la technique du design Web adaptatif. Cette présentation se veut une explication de cette façon de développer des sites et applications Web. Cette approche à 3 volets permettra à vos projets actuels d'être capable de s'adapter aux appareils dans le futur.
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
Les 10 Erreurs des Debutants avec WordPressNicolas Richer
Lorsque l'on débute avec WordPress, on ne se doute pas que certaines décisions minimes peuvent affecter notre site dans un futur plus ou moins proche.
Que cela concerne la bonne installation, la sécurité du site ou son référencement, il vaut mieux partir avec ces 10 conseils en tête avant de se lancer !
How to set up a social media strategy within a well-established institution I...Stefano Mirti
A presentation for the III Open Global Systems Science Conference on “Unpacking Green Growth” Brussels 8/9 October 2014.
You can intend this presentation as a manual of instructions. How to set up social media-based communication within a traditional institution.
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)Alphorm
Formation complète ici http://www.alphorm.com/tutoriel/formation-en-ligne-html5-css-3-et-javascript-70-480
Cette vidéo/tutorial fait partie de la Formation HTML5, CSS 3 et JavaScript (70-480). Elle est réalisée par Chamseddine OUERHANI pour http://www.alphorm.com. Vous pouvez retrouver toute la formation ici http://www.alphorm.com/formation/formation-html5-css-3-et-javascript-70-480
Voici le plan de cette vidéo/tutorial :
Vue d'ensemble de HTML et CSS
Créer et styler une page HTML5
Introduction à JavaScript
Créer des formulaires pour collecter des données et valider les entrées utilisateurs
Communiquer avec une source de données distante
Styler HTML5 en utilisant CSS3
Créer des objets et des méthodes en utilisant JavaScript
Créer des pages interactives en utilisant les API HTML5
Ajouter le support du mode hors ligne aux
applications
Implémenter une interface utilisateur
adaptative
Créer des graphiques avancés
Animer l'interface utilisateur
Implémenter la communication temps-réel
avec les Web Sockets
Créer un processus Web Worker
Bonne formation.
Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.
- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Vue.js, on pourrait presque passer à côté sans la remarquer tellement cette librairie est discrète. Ce serait dommage ! Alors, partons à la découverte de cette librairie JavaScript pour le développement web, simple, légère et qui offre une excellente alternative à Angular ou React, pour ceux qui souhaitent ne pas investir trop de temps dans l’apprentissage d’un nouveau framework.
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
Aujourd'hui la quasi-totalité des CMS proposent des fonctionnalités d'internationalisation afin de réaliser des sites disponibles en plusieurs langues. Mais qu'en est-il du coté de l’intégrateur ? Celui-ci va aussi devoir internationaliser certaines images utilisées dans ses CSS, voir faire des changements de style suivant la langue qui sera affichée. Les fichiers javascript sont aussi concernés si ils sont amenés à générer du contenu textuel.
Cet atelier vous proposera de découvrir différentes méthodes afin d'organiser au mieux vos fichiers CSS, images et scripts javascript et de faciliter ainsi leur maintenance. Nous verrons aussi quels outils peuvent nous assister dans notre travail et ce que nous propose les frameworks javascript comme jQuery ou encore Mootools.
La meilleure application est une
page blanche.
Nous couvrons tout ce dont vous avez besoin pour créer votre premier site Web. De la création de votre première page jusqu'au téléchargement de votre site sur Internet.
Cours de webdesign destiné aux étudiants de communication de l’école CREA Genève. Le but est qu’ils appréhendent le métier de webdesigner dans sa globalité et soient capables d’avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Renoir Boulanger
La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Imaginez si vous étiez capable de gagner du temps. Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?
Nous allons couvrir des techniques clé qui permettent d'optimiser le travail, comment être plus efficace avec votre équipe technique et savoir jauger le niveau d'expérience.
L’objectif de la séance est de donner des outils pour évaluer le niveau de qualité d’un site; des pistes pour en améliorer la performance et s’assurer de pouvoir en entretenir le code après plusieurs révisions.
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04Frédéric Harper
We live in an era where developers are rock stars. I don’t like that expression as much as you, but let’s be honest, the supply and demand right now are insanely good for us, developers, which means that there is no better time than today to start your freelance career. Still, starting a business is not easy, and truth to be told, it’s not for everyone. Based on my successes and my failures, let me guide you through the 10 steps to become your own boss. Not sure if you wanna go rogue? This talk will help you understand all the groundwork needed to think about it as much as to start your new journey, but shh, don’t tell your boss you’ll attend this talk!
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Frédéric Harper
Votre application. Votre infrastructure. Votre plateforme. Tous sont les bienvenus avec Microsoft Azure, un service cloud où l’Open Source est un citoyen de première classe. Vous en doutez? Que cela ne tienne, Frédéric Harper de No lion is born king et Raymond Kao de Microsoft Canada feront un survol des forces du logiciel libre en combinaison avec l’infrastructure (IaaS) des nuages provenant du géant de Redmond!
With great power comes great responsibility - Microsoft Canada Open Source co...Frédéric Harper
You are one of the tech leaders in your community and you are passionate about what you do. People can see it. Your tribe, they know it… You are good at what you do, no doubt. Perhaps your blog or you inevitably share your opinions on your social media accounts? Maybe you speak at conferences or organize a user group? No matter what you do, you are an influencer. Stop being humble, you know it’s true, isn’t it? No matter what is your end goal, what you are doing, day to day, has an impact. A positive impact in the tech industry, in your city, at work and even online. So you need to get your shit together, and be responsible for this great power you have, influence! Not that I think you aren’t trustworthy, but, hey, we’ll talk about it...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...Frédéric Harper
Did you ever try to participate in a not so small Open Source project? The experience is awful. Did you ever want to share your code on a public repository because you thought it was the thing to do? Of course, after that day, I felt like the worst developer in the world. I don’t even understand why I should put the code I created to “help” others, to share: I mean, I didn’t sleep for hours and lost a ton of hairs over that crazy problem… You got it, I don’t like Open Source, and you shouldn’t like it either!
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
There is no mobile or desktop Web: we view the same Web, but in different ways. So what is the secret sauce to give the best experience to our users? Drown your fixed-width design, destroy your device-specific approaches and ride the web's unicorn while an orchestra is playing we are the champion in the background: you found the holy grail! It's responsive web design. It's not new. It's not magical. Still, we need it as the bytes going thru the wires doesn't always give us the best experience out there. So stop watching cats videos, and learn more about how you can use Responsive Web Design's approach to your current site, today.
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
There is no mobile or desktop Web: we view the same Web, but in different ways. So what is the secret sauce to give the best experience to our users? Drown your fixed-width design, destroy your device-specific approaches and ride the web's unicorn while an orchestra is playing we are the champion in the background: you found the holy grail! It's responsive web design. It's not new. It's not magical. Still, we need it as the bytes going thru the wires doesn't always give us the best experience out there. So stop watching cats videos, and learn more about how you can use Responsive Web Design's approach to your current site, today.
Is your python application secure? - PyCon Canada - 2015-11-07Frédéric Harper
In today’s world, it's easier than ever to innovate and create great web applications. You release often, but let’s be honest, if you're like most developers out there, you don't spend your days worrying about security. You know it’s important, but you aren’t security savvy. So ask yourself, is your Python application secure? Come learn some of the different ways a hacker (cracker) can attack your code, and some of the best practices out there. In the end, your security is your users’ security.
Personal branding for developers - West Island developers and entrepreneurs m...Frédéric Harper
Personal Branding for developers: it’s more important than you think. Do you think personal branding is not for you? Why should you care about your brand? After all, it’s not like you are an actor or the lead singer for a rock band.
In fact, it’s never been more important for you to think about yourself as a brand. Doing so will provide rocket fuel for your career. You’ll find better jobs or become the “go-to guy” in certain situations. You’ll become known for your expertise and leadership; people will seek your advice and point of view. You’ll get paid better to speak, write, or consult. As a developer, there are many tools you can use to scale, and this presentation will help you understand how to get visibility, make a real impact, and achieve your goal. No need to be a marketing expert or a personal branding guru: be yourself and get your dream job or get to the next level of your career.
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Frédéric Harper
Vous pensez peut-être que le personal branding n'est pas pour vous? Pourquoi devriez-vous vous souciez de votre propre branding, vous n'êtes pas un acteur et encore moins le chanteur d'un groupe rock international, non? En ces jours où tout le monde a le pouvoir de sortir du lot plus facilement, de partager plus rapidement et de faire grandir son réseau comme jamais, il est plus important que jamais de penser à vous, en tant que marque. Bien sûr, le but n'est pas d'aller aussi loin que votre marque de boisson gazeuse préférée, mais nous explorerons ensemble le quoi, pourquoi, qui et comment (what, why, who & how) du personal branding pour les développeurs.
Building a personal brand in the developer community - Codementor Office Hour...Frédéric Harper
Do you think personal branding is not for you? Why should you care about your own brand? After all, it’s not like you are an actor or the lead singer for a rock band. In fact, it’s never been more important for you to think about yourself as a brand. Doing so will provide rocket fuel for your career as a developer. You’ll find better jobs or become the “go-to guy” in certain situations; you’ll become known for your expertise and leadership; people will seek your advice and point of view; you’ll get paid better to speak, write, or consult. As a developer, there are many tools you can use to scale, and this office hours will help you understand how to get visibility, make a real impact, and achieve your goal with a lot of time for Q&A. No need to be a marketing expert or a personal branding guru: be yourself, and get your dream job or get to the next level of your career.
2. Le type en avant
Frédéric Harper
Évangéliste aux développeurs @ Microsoft
fredh@microsoft.com
Blogues, réseaux sociaux, contact…
http://fredericharper.com
3. Les règles
#1 – Présentation de style camp
#2 – La loi des deux pieds
5. HTML5 et vous
A. Vous l’utilisez
B. Vous connaissez et vous allez l’utiliser
C. … et vous n’allez pas l’utiliser
D. Vous ne savez pas de quoi je parle
6. HTML5
• Standard Web
• La version suivante d’HTML4 (Je sais, je suis si brillant)
• Brouillon
• 9 nouvelles structures de tags
• 16 nouveaux éléments HTML
• 13 nouveau type d’entrées (input types)
23. Code
function getLocation() {
if (navigator.geolocation != undefined) {
navigator.geolocation.getCurrentPosition(callBack);
}
}
function callBack(position) {
var accuracy = position.coords.accuracy;
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
32. Une solution, les polyfills
Un correctif qui imite une API future,
offrant des fonctionnalités de secours
pour les navigateurs plus anciens.
33. Je suis un étudiant
Vous utilisez probablement déjà HTML
Pensez site Web ET mobile
Surveillez les nouvelles technologies
Une façon de sortir du lot
34. Prochaines étapes
Essayez le
Lisez sur le sujet
Faire un projet extraordinaire
Ayez du plaisir!