Web Standards Seminar at OpenCraft

Finally, I had the opportunity to introduce some quick intro about the web and some of my concerns, ideas and knowledge to audience of a seminar held at OpenCraft's head quarters.
The atmosphere was, as usual, very friendly and very nice. For those who attended and those whom I was unlucky not to meet I post the seminar summary.

Web Standards Seminar

1. Intro about the web and modern web sites.
1. Today and tomorrow.
1. The web 10 years ago:

http://www.sis.gov.eg
http://www.egyptair.com
http://www.egypt.gov.eg

2. The web today:

http://www.mozilla.org
http://www.drupal.org
http://www.alistapart.com
http://www.zengarden.com

3. The web tomorrow:

http://www.gmail.com
http://maps.google.com
http://www.live.com
http://www.dabbledb.com

2. WWW when and how, Tim Berners-Lee, Sabeer Bhatia.

I believe that the WWW has gained a great momentum after the launch of HotMail by Sabeer Bhatia, which was the first ever service that allows users to use their mailboxes from the browser.
http://www.w3.org/history.html
http://en.wikipedia.org/wiki/WWW
http://www.w3.org/People/Berners-Lee

3. Why the Web?

The web offers a very good solution for major problems of software: availability, portability and platform independancy.

4. Web Browsers.

http://en.wikipedia.org/wiki/Web_browser

2. HTML, XHTML and XML.
1. What's HTML?

Initially, HTML wasn't created with presentation in mind. Browser vendors kept adding features to HTML to allow their browsers view more rich pages.
http://en.wikipedia.og/wiki/HTML

2. Who should learn HTML.
3. HTML editors and tools.

HTML requires no special tools, still you can find many solutions to write good HTML:
ranging from high-end editors like Adobe Dreamweaver moving to moderate ones like Blue Fish ending with very simple ones like Notepad and VIM.
You can also use Tidy to have a better and more readable HTML sent to the browser:
http://www.w3.org/People/Raggett/tidy/

4. HTML standards, DTD.

In 1999 W3C declared XHTML as the standard language of creating web pages.
http://www.w3.org/TR/xhtml1/

5. HTML validators.

http://validator.w3.org/

6. HTML flavors.

http://www.w3.org/MarkUp/#recommendations

3. CSS 1/2/3.
1. What's CSS?

A very informative page:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
And this is really shows up why CSS is sort of a ignored:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Difficulty_with_adop...
You can see some of CSS power here:
http://csszengarden.com/
http://www.mozilla.org
http://www.alistapart.com

2. Basic CSS.
3. CSS 1/2/3 the move.

http://www.w3.org/Style/CSS/#specs

4. CSS and browsers.

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29

5. CSS tips and tricks.

CSS filters:
http://centricle.com/ref/css/filters/
CSS selectors:
http://www.w3.org/TR/CSS21/selector.html
CSS sliding doors: a very cool technique to create tabs in CSS
http://alistapart.com/articles/slidingdoors/
CSS and the no-table layout:
From your Firefox browser, from View menu navigate to style and disable page style while you're browsing this page:
http://www.mozilla.org

6. CSS validators.

http://jigsaw.w3.org/css-validator/

7. What CSS can't do?

http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_limitations

4. JavaScript and DOM.
1. Netscape and Javascript.
2. what's DOM? SAX
3. Why do we need Javascript? validation
4. DHTML.

Is not a language, it's simply the combination of X/HTML, CSS and JavaScript.

5. JavaScript Frameworks.

http://script.aculo.us/
http://openrico.org/rico/demos.page
http://prototype.conio.net/

6. JavaScript tools.

Could be, in my humble opinion, the best tool out there:
https://addons.mozilla.org/firefox/60/

7. What JS can't do?

JavaScript can do almost anything inside the browser chrome. I believe the only thing it can do outside the chrome is shaking the browser window (IE only).

5. W3C Standards.
1. What's W3C?
2. Why do we need standards?
3. Who is responsible for standards.

I believe it's our responsibility to adapt standards and this won't come at no cost.

6. Cross-browser and W3C Compliancy.
1. Cross-browser pages.
2. W3C compliancy.
3. How to make sure I am standards-compliant?

By keeping validating our work, I think we can all approach the standards-compliant pages and solutions.

4. Other various standards.

Take a look at what we couldn't bring to you in the limited time of the seminar:
http://www.w3.org

7. Web 2.0.

* XMLHTTP/AJAX.
* Flikr
* Google GMail.
* Google Maps.
* Microsoft Live.
* Dabble DB.

8. Best Practices:
1. The zeroth standard: what when and how.

In my humble opinion, the most important standard is: the usage of your power.
Back in the early days of Flash and ShockWave players, I recall almost every site, including Yahoo, shifted towards flash. This trend was soon modified and now designers give credit when credit is due. I believe AJAX has some issues like every solution so it's a good idea not to overdo anything or overuse any technology just because we master it.

9. Q&A.

Q1. What's the difference between HTML and XHTML?
A1. XHTML adapts more features from XML. It's more strict and allows us to move easier from HTML to XML combined with its sisters XSL, XSLT, XML-FO, etc.

Q2. Why should we stick to W3C while it provides broken and buggy standards? Mozilla and Apple have formed WHATWG (http://www.whatwg.org) and initiated HTML 5.0 thus we shouldn't follow W3C the whole time.
A2. W3C has a board of members and I recall Apple and Mozilla are members. I believe Mozilla, standing as a big name in the browser market, is trying to impose some new ideas and features. Something analogous to what happened with DVD-R and DVD+R, I believe HTML 5.0 is just misleading the whole market if it's going to be widely supported. I see a good opportunity with having standards managed by one party.

Q3. Is there a way I can save AJAX-generated pages?
A3. Unfortunately I don't know any practical way one can do this. If you tried the save functionality in your browser it will merely save you the original page. I believe this is one big side-effects of using AJAX: losing hard coded HTML source.