Front Trends 2010 Conference Summary
The future of the Web
Tomasz Ścisło (scislot@gmail.com)
Warsaw, 23.10.2010
Why Front Trends in Poland?
- no such conference in Eastern Europe
- many in the world, such as: Fronteers in Amsterdam
How to create such conference?
- inivite one famoust speaker... Duglas Crockford... other will join ;)
- pay for hotels and flights
- no magic here...
What next?
- conference turned up to be very successful
- another, strict JavaScript conference 18-20th May 2011 - FalsyValues.com
- new edition of Front Trends in 2011 - who nows?
Front Trends 21-22 Oct 2010 in Warsaw
Markus Leutwyler and Palm WebOS
- WEB BASED operating system in Palm devices - Palm WebOS 2.0
- widget apps for mobile phones and priters (Palm owner is now HP)
- using WebKit (Open Source browser) with HTML5 and CSS3 support - what's the level of support, that's another question?
- quite handy command line tool with Palm SDK and Palm Ares - WYSIWYG development
- own emulator, which doesn't support hadware features - we're familliar with that also ;)
- limited number of mobile devices: only 2 mobile phones, one more will be shiped this year. A few printer devices, with interesting possibilities of web based apps usage
Markus Leutwyler and Palm WebOS
- Conclusion: every hardware producer is turnig his attention to web apps on his devices - what does it mean we'll see later ;)
Tantek Çelik HTML5: Right here, right now
- Tantek Çelik works as a contractor for Mozilla around web applications user interfaces and social/identity open web technologies. He participates in standards related events for W3C
Tantek Çelik HTML5: Right here, right now
- HTML5 is the only web standard that will be supported and implemented in new browser versions: FireFox 4, IE 9 etc.
- all major browser owners: Mozilla, Google, Apple, Microsoft confirmed that they will support HTML5
- in 2009 W3C dropped XHTML 2.0!!!
- there are some parts of W3C HTML5 specification that are fully implemented in new browser versions - I will show examples later on
- some parts of HTML5 W3C specification are still drafts and browser owners implement them on their own risk
- some parts of HTML5 are still under "brain storming" in the web comunity
New features in HTML5 which
can be used today!
- new simplified document stucture
-
<!DOCTYPE html>
<meta charset="utf-8">
<title> Hello </title>
<p> World Wide Web </p> - new tags eg. <section>, <article>, can be styled in modern browsers, not in IE<8, but there is a workaroud
- new browser API: video and audio support, using this tags is as simple as using <img> tag in HTML4! Not all video and audio formats supported now, but still ;) will Flash die?
- HTML5 supports drawing in document: <canvas> - amazing things can be done using this
- Geolocation API supported by all browsers, exept IE 9!
- File API - maybe? But what about safety???
Real life simple HTML5 examples :)
-
<audio src="multimedia/mj.ogg" controls="controls"></audio>
- <video src="multimedia/crockford.ogg" controls="controls"></video>
- Real problem is not the tag and W3C standard but codecks support in different browsers! The only solution is to use the same file in different formats, browser will find the one which is supported. New JavaScript API which can be used to controll video and audio elements.
Robert Nyman JavaScript & HTML5
- this presentation had many common poits with Tantek Çelik talk
- but the speaker was more funny ;p possibly he makes for the living giving talks at conferences ;)
- “That is a disaster for me! I have made a career out of actively avoiding Javascript.” - Developer
Peter-Paul Koch JSON over SMS
- JSON (JavaScript Object Notation) - is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. With no parsing JSON code can be used as JavaScript object - in fact it is a JavaScript object ;)
-
JSON example:
{car :{ dors : 5, company: "Renault", model: "Megane", types : ['sedan', 'hatback']}
}; - Widget could receive JSON in SMS message... why? Because it is cheap and technology exists
- however this is just guessing, but there is one more conclusion from this talk ;)
In future one JavaScript API
for all mobile devices...
why not for DTVs?
- developer gains access to key device hardware featues on every device in the same way
- right now widget web apps are created using web standards, but they are not compatibile with all devices because of different hardware API... Samsung has it's own, Nokia, Palm and Sony have their own
- difficult to have an agreement between corporations over one API standard -> what hardware features are common and shoud be available using API?... basicly it's good to have dreams ;)
- could the corporations earn money from widgets like they do now... no they couldn't!
Duglas Crockford: JavaScript
- First JavaScript version was invented in Netscape by Brendan Eich in 10 days!!!
- Orginal name was LiveScript, but they decided to change in because of growing Java popularity. This was a big mistake. Nowadays JavaScript is often misunderstood, because of this naming convention which might suggest that JavaScript has someting to do with Java. Well... it doesn't!
- Microsoft using reverse engeeniering created his own version of JavaScript and called it JScript. The implemmentation was extreamly buggy!
- JavaScript was than standarised as ECMAScript. There are two main editions of ECMAScript: 1999 third edition, 2009 fifth edition.
- New in ECMAScript5: some new object oriented features ;)
Duglas Crockford: JavaScript vs Java
- Following statements are Crockford's point of view, not mine ;)
- No threads in JavaScript, just event loop, which is better solution!
- In threaded programming languages races and deathlocks may occure.
- Threads are very important in system programming languages, like C++, but not necessary in Java.
- Designing Java, Sun couldn't decide if it will be application programming language or system programming language, that's why they decided to use threads.
- JavaScript is application programming language - so no threads!
Duglas Crockford XSS (Cross Site Scripting)
- XSS is a type of computer security vulnerability typically found in web applications that enables malicious attackers to inject client-side script into web pages.
- In JavaScript XSS attack is possible beacause it uses global window object, which gives the same set of powerful capabilities to all scripts, also to this from XSS attack ;)
- If the attacer gets some script into page he can request additional scripts from any server in the world.
- An attacker can read the document and see everything users sees. An attacer can make SQL Injection Attack and steal or change data in database.
- HTML5 doesn't fix the XSS problem, in fact it makes it even worse - giving via JavaScript support to some kind of File API and data base API in the future.
Chris Heilman Using data of the web
- Chris Heilman is from the Yahoo... and Yahoo ain't dead yet ;) they do some really cool stuff there.
- Nowadays there are many free web service API's aroud the web... but the real problem is using them, because developers don't have time to lern how to use every single one of them.
- Yahoo gives a free solution to this problem, with YQL (SQL syntax) language. Every developer can use YQL and Yahoo engine will translate YQL into usefull API call.
- Example: select * from flickr.photos.search where text="dog" limit 3 - get 3 dog photos from Flickr
- URL for GET request: http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.search%20where%20text%3D%22dog%22%20limit%203
- Response could be in XML or JSON.
- Conclusion: Using many web services in one DTV Widget could be easy with YQL, but we rely on Yahoo ;)
Lea Verou the only female developer :)
- there are not many female developers, but when one is found she is preety and competent. Moreover a women is perfect for palying around with the CSS3, because she keeps more attention to details than men...
Lea Verou what's new in CSS3
- CSS - Cascading Style Sheets, this is a presentation layer of a web document (HTML is structure, and JavaScript is behaviour)
- New color format RGBA... we know RGB, but adding A it's RGB with opacity (transparency).
- In CSS2 there was only simple rectangular border, in CSS3 one can define border-radius parameter and give two radius values - for eliptical shape.
- In CSS2 we could create shadow for element only using png or gif semi-transparetn picture. Shadow was usually made as image. In CSS3 shadow can be mada using box-shadow parameter. Many visual effects!
- In CSS3 we can rotate every DOM object, which gives us the opportunity to create cool photo albums in pure CSS3
- In CSS3 developer can use special selectors (simmilar to selectors used in jQuery). They can be used to select first child element (#example :first-child). But also we can use more complex selectors (#example nth-child(2n+1) - only odd child elements of DOM id = example)
Real life CSS3
and mixing CSS2 with CSS3
- http://desandro.com/articles/opera-logo-css/ - Opera logo, no radius support in IE ;)
- http://media.24ways.org/2009/14/5/index.html,http://www.3site.eu/examples/gallery/ - using rotation to create gallery
- Twitter uses rounded corners
- we can use CSS3 in browsers that doesn't support it thanks tograceful degradation - it means that the browser will ignore parts of CSS3 that it doesn't support. It's very important when user browses the web with older browser and the developer can use substitutes in CSS2 for the new CSS3 features.
Credits
- This SlideShow uses some HTML5 and CSS3 features, which would not render right in some browsers. But it will work good in Firefox 3.6+ :)
- Very good canvas tutorial at Mozilla
- Thank you for your attention! Questions?