... relying on the Internet infrastructure

(interconnected networks)

= a serie of interconnected servers

http Request/ http response

static website

 (aka site vitrine)

+ browser

http Request/ http response

dynamic website

 (aka web application)

+ browser

Page built

Computers are machines 
that can be told what to do

softwares are telling them
what you want them to do

binary instructions  1001101001001010100

    vs

nicer programming languages

behind the various programming languages :
a common logic : algorithmics

nicer programming languages

vs

BINARY INSTRUCTIONS  1001101001001010100

back-end languages

The fizzbuzz example

0.  Enumerate numbers until a defined stopper ('N')

1.  Start by considering 'number' is equal to 1

2.  If 'number' is a multiple of 3, say Fizz

3.  If 'number' is a multiple of 5, say Buzz

4.  If 'number' is a multiple of both, say FizzBuzz

5.  Else say the current value of 'number'

6.  Increment the value of 'number' by 1

7.  Repeat until the value of 'number' is equal to 'N'

The fizzbuzz example

http://rosettacode.org/wiki/FizzBuzz

ASSEMBLY

The fizzbuzz example

http://rosettacode.org/wiki/FizzBuzz

RUBY

The fizzbuzz example

JAVA

we could program everything from scratch...

...but it's boring & non productive

So we decided to

 create re-usable blocks 

of functionalities

pre-packaged libraries

within a specific framework

up to Build anything !

human to machine communication

but also mainly 
machine to machine communication

thanks to API (application programming interfaces)

API

API

API

API

the machine does not care about the look

(color, size,...)

what a human likes to see

...only structured content

{"richestPeople":[
    {"firstName":"Bill", "lastName":"Gates", "value":"81"}, 
    {"firstName":"Carlos", "lastName":"Slim", "value":"79"},
    {"firstName":"Warren", "lastName":"Buffet", "value":"72"}
]}

what a machine likes to see

web services

more & more content is created today
by calling the APIs of third-party web services
(Google maps, Facebook authentication,...)

web services

can be integrated into your website 

by copy/pasting a snippet of code in your HTML file

to call & consume to their API (application programming interface) 

<!--
    You need to include this script on any page that has a Google Map.
    When using Google Maps on your own site you MUST signup for your own API key at:
        https://developers.google.com/maps/documentation/javascript/tutorial#api_key
    After your sign up replace the key in the URL below or paste in the new script tag that Google provides.
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCukr6vo0mkusgzjemMGVI83TDUo-oqpzw&sensor=false"></script>

<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 15,

            disableDefaultUI: true,
            panControl: false,
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            scrollwheel: false,


            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(48.864848, 2.379853),

            // How you would like to style the map.
            // This is where you would paste any style found on Snazzy Maps.
            styles: [{"featureType":"all","stylers":[{"saturation":0},{"hue":"#e7ecf0"}]},{"featureType":"road","stylers":[{"saturation":-70}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"visibility":"simplified"},{"saturation":-60}]}]
        };

        // Get the HTML DOM element that will contain your map
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);

        var myMarker = new google.maps.Marker({
          position: new google.maps.LatLng(48.864848, 2.379853),
          map: map
        });
    }
</script>

Example: script to insert a Google Map

It has never been so easy to make software !

Front-end languages

HTML is a markup language.

It structures the content of a web page.

In order to design and animate its elements, 

we have to tag them first!

html skeleton

<!DOCTYPE html>












<!-- end of file -->

html skeleton

<!DOCTYPE html>
<html>


  <!-- your content (text, images,...) 
  and all the other html tags 
  to structure this content goes here -->


</html>
<!-- end of file -->

html skeleton

<!DOCTYPE html>
<html>
  <head>

    <!-- intelligence (meta-data) -->

  </head>
  <body>

    <!-- stuff to be displayed on your web page -->

  </body>
</html>
<!-- end of file -->

html skeleton

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title> 
    <!-- text appearing in the tab + used by Google in its search results -->
    <meta charset="utf-8"/> 
    <!-- to display properly the special characters -->
  </head>
  <body>

    <!-- stuff to display in the page -->

  </body>
</html>
<!-- end of file -->

html skeleton

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title> 
    <!-- Text appearing in the tab + used by Google in its search results -->
    <meta charset="utf-8"/> 
    <!-- To display properly the special characters -->
  </head>
  <body>
    <h1>Hello buddies!</h1>

    <!-- Stuff to display in the page -->

  </body>
</html>
<!-- end of file -->

html syntax

<element_name attribute_name="attribute_value">element_content</element_name>

opening tag

closing tag

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

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

html syntax

html elements

<h1>[...]</h1>  <!-- Only one per page! SEO important -->

<h2>[...]</h2>

<h3>[...]</h3>

<h4>[...]</h4>

<h5>[...]</h5>

<h6>[...]</h6>

titles

html elements

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Veritatis laboriosam mollitia autem at ab omnis iure quis
  asperiores inventore eos nam aut iusto officiis deserunt
  nihil, sequi tempore impedit quae?
</p>

paragraphs

html elements

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Butter</li>
</ul>

<h2>World Cup 2014</h2>
<ol>
  <li>Germany</li>
  <li>Argentina</li>
  <li>Netherlands</li>
  <li>Brazil</li>
</ol>

lists

html elements

<img src="logo.png" alt="Le Wagon logo"/>

images

html elements

<a href="http://www.lewagon.org" target="_blank">Le Wagon</a>

links

html elements

<form name="input" action="/subscribe" method="post">
  
  input elements
  
</form>

forms

html elements

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname">

</form>

input - type: text

html elements

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female

</form>

input - type: radio

html elements

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car

</form>

input - type: checkbox

html elements

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car<br>
    <input type="submit" value="Submit">

</form>

input - type: submit

we need to configure a server

on the back-end side of our website 

to receive and store these user inputs

html elements

resources

HTML ​Cheat Sheet 

HTML5 Doctor

CSS is used to add some style properties

to specific & properly selected HTML elements

css power

What would this website surfingla.fr look like without any CSS ? 

css power

Well, let's neutralise the CSS by deleting the head of the HTML document in the browser inspector!

css power

Here is the result ! Quite different, isn't it ? ; ) 

css link

For your CSS stylesheet to be taken into account, you need to

add a link to it in the head of the HTML document

css syntax

css syntax

css syntax

css properties

/* syntax 1 : color name in English */

body {
  color: orange;
}

color

css properties

/* syntax 2 : hexadecimal color reference */

body {
  color: #FFA500;
}

color

css properties

/* syntax 3-a : RGB color reference */

body {
  color: rgb(255, 165, 0);
}

color

css properties

/* syntax 3-b : RGBA color & opacity reference */

body {
  color: rgba(255, 165, 0, 0.8);
}

color

RGBA has a 4th parameter: opacity 

(which may vary between 0 and 1)

css properties

color tools

• Choose a good color scheme with Adobe Color CC
• Add & use the ColorZilla plug-in to pick nice colors on-the-fly
• A nice tool to help you to select your colors: material palette
• You can pick them among the trendy flat colors :)

css properties

text color vs
background color

css properties

background image

css properties

fonts - family (1)

css properties

fonts - family (2)

css properties

fonts - family (3)

css properties

fonts - size & spacing

css properties

fonts - color

css properties

fonts - decoration

css properties

fonts - alignment

css properties

fonts tools

• Choose nice free fonts with Google Fonts
• You can identify any web font with the Fontface Ninja (or WhatFont) plugin
• Good practices: 3 fonts max per website/webpage
• Use sans-serif fonts (such as, Open-Sans for basic text,  PillsGothic for h1, h2, Museo-Slab for secondary titles (h3, h4))

icons resources

<link 
    rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

textual icons

Font Awesome

• A font for icons (hence, to change their color, size, etc. => use CSS!)
• Paste the following code into the <head> section of your HTML file

• Then choose icons from the Font Awesome set
• And integrate each of them in your html file, where you want each of them to be displayed, by adding the <i>...</i> tag provided by Font Awesome

<h1><i class="fa fa-cutlery"></i> MY RESTAURANT</h1>

icons resources

graphical icons

The Noun Project

You can get these icons both in :

• PNG format = with a transparent background
• SVG format = perfectly resizable and customisable! 

Pictures resources

• Flickr 
• FreePik
• Unsplash (high-res)
• other sources here, here and here 

Be careful about the picture/file's size :
too small, it will be blurred; 
too big, it will slow down your page load!

=> to compress your pictures: ImageOptim  

Select your pictures according to specific criteria (free of rights, landscape, min width 1024 px,...) :

css properties

picture size & shape

Play with HTML elements & CSS properties !

coding is about practice

• Change the colors, background, sizes and radius
• Add a new Google font to all the texts of your body
• Add another Google font of your choice for your titles
• Make live-experiments on your CSS using Chrome dev tool

html elements

divisions and box model

Any modern website...

html elements

... is made of <div>

divisions and box model

html elements

=> structure your HTML code with <div> elements,  
to group all the contents that fits together

divisions and box model

css properties

the box model

CSS PROPERTIES

the box model

CSS PROPERTIES

syntax and shorcuts

css properties

div{
  border-top: 1px solid red;
  border-right: 2px dotted black;
  border-bottom: 1px dashed green;
  border-left: 2px dotted black;
}

borders

divisions and box model

div{
  background: white;
  border: 1px solid lightgrey;
  padding: 20px;
  margin: 30px;
}

you can make the box structure more visible
by adding some CSS rules on this <div>

css properties

id and class

Name your html tags

To add some style only to :

• a specific unique html element, use the id attribute 
• a specific set of html elements, use the class attribute

id and class

Name your html tags

in your HTML file 

id and class

Name your html tags

1  #logo {
2     width: 30%;
3  }
4  
5  .staff {
6      border-radius: 50%;
7  }

in your CSS file 

id and class

Name your html tags

example 

Prerequisites : dev' tool belt

to work efficiently

opened

simultanuously

on your screen

Prerequisites : basic knowledge

to customize front-end code

Front-end framework

to rapidly & smoothly set up 
a fully-responsive front-end (html, css, js)

Foundation

WrapBootstrap

Bootstrap

web services

select the best ones
already widely tested & acclaimed
for their usability & functionality

Stripe (payment)

Google Map (maps)

MailChimp (e-mailing)

set up the front-end theme

selected & downloaded from WrapBootstrap

set up the front-end theme

copied-pasted in the editor & revealed in the browser

customize content & design

of your landing page

add background image to contextualize

customize content & design

of your landing page

update favicon & logo

customize content & design

of your landing page

update title, description, headline & subhead

customize content & design

of your landing page

update call-to-action

customize content & design

of your landing page

reset countdown

Add a form to collect user inputs

Remember the form tag in HTML

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car<br>
    <input type="submit" value="Submit">

</form>

we need to configure a server

on the back-end side of our website 

to receive and store these user inputs

or...

REminder : html elements

<form name="input" action="/subscribe" method="post">
  
  input elements
  
</form>

forms

REMINDER : HTML ELEMENTS

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname">

</form>

input - type: text

REMINDER : HTML ELEMENTS

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female

</form>

input - type: radio

REMINDER : HTML ELEMENTS

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car

</form>

input - type: checkbox

REMINDER : HTML ELEMENTS

<form name="input" action="/subscribe" method="post">

    Username: <input type="text" name="firstname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car<br>
    <input type="submit" value="Submit">

</form>

input - type: submit

we need to configure a server

on the back-end side of our website 

to receive and store these user inputs

use great web services

MailChimp

(to collect user inputs & manage contacts)

use great web services

MailChimp

(to collect user inputs & manage contacts)

use great web services

MailChimp

(to collect user inputs & manage contacts)

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="http://8thcolor.us4.list-manage.com/subscribe/post?u=506ea88e9f457f1a4960a3310&id=868a950c07" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    ...
  </form>
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

A form...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<h2>Subscribe to our mailing list</h2>
<div class="mc-field-group">
  <label for="mce-EMAIL">Email Address </label>
  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

with minimal fields...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

error messages...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
  <input type="text" name="b_506ea88e9f457f1a4960a3310_868a950c07" tabindex="-1" value="">
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

bot signup protection...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<div class="clear">
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

and the action.

Use analytics tools

Google Analytics

(to monitor your website)

• ​Determine where your best visitors are located

• Learn what people are searching for on your site

• Visualize what people click on the most

• Uncover your top & worst performing content

• Determine where people abandon & your bounce rate

• Determine your mobile traffic

Use analytics tools