Modern Web Pages – What are we using everyday? – All the technology behind.

View Github Repository Open presentation in a new window

riomus

See all presentation from riomus

Modern Web Pages – What are we using everyday? – All the technology behind.

0 0

modernWebApps

On Github riomus / modernWebApps

Modern Web Pages

What are we using everyday?

Presentation Plan

Dictionary Introduction All the technology behind. Web Consortium Web accessibility. Try to look nice! Not only news. Describe your self. Be first Conclusion

Dictionary

  • Maszyna wirtualna - virtual machine
  • Semantyczny - semantic
  • Znacznik - tag
  • Pętla - loop
  • Składnia - syntax

Introduction

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

All the technology behind.

A lot of it!

  • Client side:
    • HTML
    • CSS
    • JS
    • AJAX
    • DOM
    • ...
  • Server side:
    • Java
    • Scala
    • Ruby
    • PHP
    • Python
    • ...

HTML5

<article> 
    I am like a book!
    <section>
        And I am like a chapter
    </section>
    <aside> I am not important :(</aside>
</article>

CSS3

div {
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}

/* Standard syntax */
@keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}

JS

(function(){
    for(var i = 0; i<100; i++){
        console.log("Hello world!")
    }
}()

Web Consortium

Defining standards

385 members

Standards:

  • XML
  • HTML
  • CSS
  • JavaScript Web API
  • PNG
  • SVG
  • Accessibility

Members

Web accessibility.

WCAG 2.0 - Web Content Accessibility Guidelines

Web Accessibility Initiative

Try to look nice!

A lot of ready to use frameworks!

  • Bootstrap
  • Foundation
  • HTML KickStart
  • Bootflat

Bootstrap

Foundation

HTML KickStart

Bootflat

Not only news.

Single Page Applications - SPA

No need to wait till page is loaded

Fell like using standalone computer application

Offline also!

Describe your self.

Semantic web.

  • Business cards
  • Recipes
  • Reviews
  • Time tables

Google search example

Be first

SEO - Search Engine Optimization

Conclusion

Be online!

THE END

BY Roman Bartusiak

http://riomus.github.io/modernWebApps

0