SlideShare una empresa de Scribd logo
1 de 24
Javascript,
          l’assembleur du web ?



François Stephany
<div id="footercontainer">
  <div class="footercolumn">
    <h2>Contact us</h2>
    <p>
      If you have any questions, write us at:
      <span class="email">
        <a href="mailto:info@agilitic.com">info@agilitic.com</a>
      </span>
    </p>
    <p>
      <img alt="Phone-icon" src="/images/phone-icon.png"/>
      +32 496 21 33 79
    </p>
  </div>

  <div class="footercolumn footercolumn2">
    <h2>Informations</h2>
    <p>
      <strong>agilitic SCRL</strong><br />
      Rue Lecat 1 bte 4<br />
      7020 Nimy (Mons), Belgium<br />
      TVA BE 817 331 995
    </p>
  </div>
HTML
GET - POST


             Serveur

  HTML
Javascript
Ajax
$('#about_us');


$.get('/search/', params, function(data){
 $('#search_results').replaceWith(data);
 $('img.search_spinner').hide();
});
Yeah !
Solutions
Web Services
GET - POST


             Serveur

  JSON
   XML
{
    "firstName": "John",                 JSON
    "lastName": "Smith",
    "age": 25,
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": "10021"
    },
    "phoneNumber": [
        { "type": "home", "number": "212 5551234" },
        { "type": "fax", "number": "646 555-4567" }
    ]
}
SproutCore
Google Web Toolkit
Cappuccino
@implementation PhotoCell : CPView
{
    CPImage         image;
    CPImageView     imageView;
    CPView          highlightView;
}

- (void)setRepresentedObject:(JSObject)anObject
{
    if(!imageView)
    {
        imageView = [[CPImageView alloc] initWithFrame:CGRectMakeCopy([self bounds])];
        [imageView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];
        [imageView setImageScaling:CPScaleProportionally];
        [imageView setHasShadow:YES];
        [self addSubview:imageView];
    }

    [image setDelegate:nil];

    image = [[CPImage alloc] initWithContentsOfFile:thumbForFlickrPhoto(anObject)];

    [image setDelegate:self];

    if([image loadStatus] == CPImageLoadStatusCompleted)
        [imageView setImage:image];
    else
        [imageView setImage:nil];
}
http://agilitic.com
francois.stephany@agilitic.com
Femme: http://www.flickr.com/photos/glouk/4523649809/
Bébé: http://www.flickr.com/photos/collin_key/2981543442
Relais: http://www.flickr.com/photos/corpmjo/3486656862/
Spaghetti: http://www.flickr.com/photos/hanan/2204357625/
Jump: http://www.flickr.com/photos/eole/2342256254/
Café: http://www.flickr.com/photos/57908537@N00/4494131909/
Choux: http://www.flickr.com/photos/bachaboulou/92698416/
Plage: http://www.flickr.com/photos/htjems/2956672568/

Más contenido relacionado

Destacado

Managing Project Resources
Managing Project ResourcesManaging Project Resources
Managing Project Resources
Toyin Osunlaja
 
Erfgoed en Nieuwe Media module 2
Erfgoed en Nieuwe Media module 2Erfgoed en Nieuwe Media module 2
Erfgoed en Nieuwe Media module 2
Erfgoed 2.0
 
Recent Transactions
Recent TransactionsRecent Transactions
Recent Transactions
Busekrus
 
2015 09 EFAdvisor Article - How to Reinvent Your Mature Business With Young (...
2015 09 EFAdvisor Article - How to Reinvent Your Mature Business With Young (...2015 09 EFAdvisor Article - How to Reinvent Your Mature Business With Young (...
2015 09 EFAdvisor Article - How to Reinvent Your Mature Business With Young (...
William (Bill) Verhelle
 
Afstudeeronderzoek linked open data duurzaam voor de toekomst
Afstudeeronderzoek linked open data   duurzaam voor de toekomstAfstudeeronderzoek linked open data   duurzaam voor de toekomst
Afstudeeronderzoek linked open data duurzaam voor de toekomst
Erfgoed 2.0
 

Destacado (18)

Managing Project Resources
Managing Project ResourcesManaging Project Resources
Managing Project Resources
 
seebeyondwords
seebeyondwordsseebeyondwords
seebeyondwords
 
2008 10 03 Verhelle presentation at LeasEurope
2008 10 03  Verhelle presentation at LeasEurope2008 10 03  Verhelle presentation at LeasEurope
2008 10 03 Verhelle presentation at LeasEurope
 
African Teacher Education OER Network
African Teacher Education OER Network African Teacher Education OER Network
African Teacher Education OER Network
 
Erfgoed en Nieuwe Media module 2
Erfgoed en Nieuwe Media module 2Erfgoed en Nieuwe Media module 2
Erfgoed en Nieuwe Media module 2
 
Verhelle 2008 11 11 Australia Presentation
Verhelle 2008 11 11 Australia PresentationVerhelle 2008 11 11 Australia Presentation
Verhelle 2008 11 11 Australia Presentation
 
Linguafranca Seebeyondwords1
Linguafranca Seebeyondwords1Linguafranca Seebeyondwords1
Linguafranca Seebeyondwords1
 
We Herstellen
We HerstellenWe Herstellen
We Herstellen
 
Crossovers als levenselixer
Crossovers als levenselixerCrossovers als levenselixer
Crossovers als levenselixer
 
Recent Transactions
Recent TransactionsRecent Transactions
Recent Transactions
 
2015 09 EFAdvisor Article - How to Reinvent Your Mature Business With Young (...
2015 09 EFAdvisor Article - How to Reinvent Your Mature Business With Young (...2015 09 EFAdvisor Article - How to Reinvent Your Mature Business With Young (...
2015 09 EFAdvisor Article - How to Reinvent Your Mature Business With Young (...
 
Matiasy Kevin1
Matiasy Kevin1Matiasy Kevin1
Matiasy Kevin1
 
OER for Unisa - what, why, how
OER for Unisa -  what, why, howOER for Unisa -  what, why, how
OER for Unisa - what, why, how
 
Kendel Avaya-Fabric connect - Demo Lab Guide – SPB vIST-5
Kendel Avaya-Fabric connect - Demo Lab Guide – SPB vIST-5Kendel Avaya-Fabric connect - Demo Lab Guide – SPB vIST-5
Kendel Avaya-Fabric connect - Demo Lab Guide – SPB vIST-5
 
D Andrea
D AndreaD Andrea
D Andrea
 
Presentazione Ict Per Imprese
Presentazione Ict Per ImpresePresentazione Ict Per Imprese
Presentazione Ict Per Imprese
 
Afstudeeronderzoek linked open data duurzaam voor de toekomst
Afstudeeronderzoek linked open data   duurzaam voor de toekomstAfstudeeronderzoek linked open data   duurzaam voor de toekomst
Afstudeeronderzoek linked open data duurzaam voor de toekomst
 
Curator20
Curator20Curator20
Curator20
 

Similar a Javascript l'assembleur du web ?

HTML5 and Mobile
HTML5 and MobileHTML5 and Mobile
HTML5 and Mobile
doodoofish
 
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road aheadWhat’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
Nguyên Phạm
 
Building the new AppExchange using Responsive Design
Building the new AppExchange using Responsive DesignBuilding the new AppExchange using Responsive Design
Building the new AppExchange using Responsive Design
Salesforce Developers
 

Similar a Javascript l'assembleur du web ? (20)

The Future of CSS with Web components
The Future of CSS with Web componentsThe Future of CSS with Web components
The Future of CSS with Web components
 
The Future of CSS with Web Components
The Future of CSS with Web ComponentsThe Future of CSS with Web Components
The Future of CSS with Web Components
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
executive-mba-pune.pdf
executive-mba-pune.pdfexecutive-mba-pune.pdf
executive-mba-pune.pdf
 
HTML5 and Mobile
HTML5 and MobileHTML5 and Mobile
HTML5 and Mobile
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
 
HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015HTML5 after the hype - JFokus2015
HTML5 after the hype - JFokus2015
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Tracking Contact Form 7 Enquiries with Google Analytics
Tracking Contact Form 7 Enquiries with Google AnalyticsTracking Contact Form 7 Enquiries with Google Analytics
Tracking Contact Form 7 Enquiries with Google Analytics
 
What’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road aheadWhat’s new in WinJS? Windows Phone 8.1 and the road ahead
What’s new in WinJS? Windows Phone 8.1 and the road ahead
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
HTML5
HTML5HTML5
HTML5
 
The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14
 
Building the new AppExchange using Responsive Design
Building the new AppExchange using Responsive DesignBuilding the new AppExchange using Responsive Design
Building the new AppExchange using Responsive Design
 
Mobile Web Design Code
Mobile Web Design CodeMobile Web Design Code
Mobile Web Design Code
 
Vue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue routerVue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue router
 
Getting Started Building Windows 8 HTML/JavaScript Metro Apps
Getting Started Building Windows 8 HTML/JavaScript Metro AppsGetting Started Building Windows 8 HTML/JavaScript Metro Apps
Getting Started Building Windows 8 HTML/JavaScript Metro Apps
 
Tools and Projects Dec 2018 Edition
Tools and Projects Dec 2018 EditionTools and Projects Dec 2018 Edition
Tools and Projects Dec 2018 Edition
 

Último

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Último (20)

Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 

Javascript l'assembleur du web ?

  • 1. Javascript, l’assembleur du web ? François Stephany
  • 2. <div id="footercontainer"> <div class="footercolumn"> <h2>Contact us</h2> <p> If you have any questions, write us at: <span class="email"> <a href="mailto:info@agilitic.com">info@agilitic.com</a> </span> </p> <p> <img alt="Phone-icon" src="/images/phone-icon.png"/> +32 496 21 33 79 </p> </div> <div class="footercolumn footercolumn2"> <h2>Informations</h2> <p> <strong>agilitic SCRL</strong><br /> Rue Lecat 1 bte 4<br /> 7020 Nimy (Mons), Belgium<br /> TVA BE 817 331 995 </p> </div>
  • 4.
  • 5. GET - POST Serveur HTML
  • 8. $('#about_us'); $.get('/search/', params, function(data){ $('#search_results').replaceWith(data); $('img.search_spinner').hide(); });
  • 11.
  • 12.
  • 14. GET - POST Serveur JSON XML
  • 15. { "firstName": "John", JSON "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021" }, "phoneNumber": [ { "type": "home", "number": "212 5551234" }, { "type": "fax", "number": "646 555-4567" } ] }
  • 17.
  • 19.
  • 21. @implementation PhotoCell : CPView { CPImage image; CPImageView imageView; CPView highlightView; } - (void)setRepresentedObject:(JSObject)anObject { if(!imageView) { imageView = [[CPImageView alloc] initWithFrame:CGRectMakeCopy([self bounds])]; [imageView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable]; [imageView setImageScaling:CPScaleProportionally]; [imageView setHasShadow:YES]; [self addSubview:imageView]; } [image setDelegate:nil]; image = [[CPImage alloc] initWithContentsOfFile:thumbForFlickrPhoto(anObject)]; [image setDelegate:self]; if([image loadStatus] == CPImageLoadStatusCompleted) [imageView setImage:image]; else [imageView setImage:nil]; }
  • 22.
  • 24. Femme: http://www.flickr.com/photos/glouk/4523649809/ Bébé: http://www.flickr.com/photos/collin_key/2981543442 Relais: http://www.flickr.com/photos/corpmjo/3486656862/ Spaghetti: http://www.flickr.com/photos/hanan/2204357625/ Jump: http://www.flickr.com/photos/eole/2342256254/ Café: http://www.flickr.com/photos/57908537@N00/4494131909/ Choux: http://www.flickr.com/photos/bachaboulou/92698416/ Plage: http://www.flickr.com/photos/htjems/2956672568/

Notas del editor

  1. C&amp;#x2019;est quoi ? * HTML utilis&amp;#xE9; uniquement pour la pr&amp;#xE9;sentation * Pas de comportement * Vu comme un arbre XML
  2. OK pour des pages statiques
  3. * Manipulation du HTML avec du Javascript =&gt; Interaction * e.g., cacher un DIV, afficher une lightbox.
  4. JS Permet de faire des requ&amp;#xEA;tes asynchrones
  5. Ca fait quoi ?
  6. * Bataille d&amp;#x2019;IDS * Comportement difficile &amp;#xE0; identifier / cerner ? * HTML + JS + r&amp;#xE9;ponse serveur + CSS -&gt; Homogene ?
  7. * Paradigme existant pour des applications Desktop * Pourquoi se faire chier &amp;#xE0; &amp;#xE9;crire du HTML/JS &amp;#xE0; la main ? * Utiliser HTML 5 de mani&amp;#xE8;re totalement transparente
  8. * Delicious Library * hautement dynamique * int&amp;#xE9;gration webcam, redimensionnement &amp;#xE0; la vol&amp;#xE9;e, actions instantan&amp;#xE9;es
  9. * Thunderbird * Client mail
  10. * O&amp;#xF9; stocker les donn&amp;#xE9;es ? * Web Services (JSON) * RPC (Google web toolkit) * Stockage local (HTML 5)
  11. * Reste du JS * Plus comme un framework MVC * Assez proche du web. * Maintenant avec un Interface builder (GreenHouse)
  12. * MobileMe -&gt; Synchronisation Apple
  13. * Google Wave * GMail * ...
  14. * Code en java * G&amp;#xE9;n&amp;#xE8;re du JS * Debug enti&amp;#xE8;rement en Java * RPC Java pour communication FrontEnd / Backend
  15. * Plus d&amp;#x2019;URLs * Indexation google nick&amp;#xE9;e * Uniquement pour des applications, pas des sites
  16. * Objective-J * Cocoa * D&amp;#xE9;mo du truc ou on peut dessiner son salon
  17. Les trois noms ?