@media 2008

“Rails 2.0, czyli web aplikacje jeszcze bardziej subiektywnie” - tu powrót do korzeni :) Jarosław Rzeszótko (http://www.stifflog.com/pl/) zaprezentuje nam zmiany jakie wprowadzono w nowej wersji Railsów,

“Technicznie, czyli pomimo czego Blip.pl działa” - Zbigniew Sobiecki (http://www.linkedin.com/in/zbigniewsobiecki) opowie nam o tym co Blip ma pod maską,

“Blip w kontekscie, kontekst w Blipie” - Marcin Jagodziński (http://netto.blox.pl/) opowie m.in o tym czy Blip uzależnia i czy jest to groźne.

Po prezentacjach jak zawsze nieformalne rozmowy kuluarowe. Gorąco zapraszamy wszystkich 19 stycznia w samo południe do klubu Chłodna 25 w Warszawie.

I tried to find the best solution, on the Google there isn’t a lot of information about good practice in JavaScript, however I think that I know how to do this best. I show you few solutions; unaccessible, bugged and accessible solutions.

The Goal

On the page div #book must be visible with JavaScript turned off and not hiding with flickering (blinking) when JavaScript is turned on. After clicked on the headline #book must be showed by JavaScript.

The page without any scripts and hiding CSS - example 0.

Really bad, however not flickering

The part of the page, that should be showed by JavaScript is hiding by CSS.

CSS code:

#book {
 display: none
}

When JavaScript is on we can show hidden part by mouse click.

JavaScript code:

$(function() {
$('h2').click(function() {
 $('#book').show();
 });
});

When JavaScript is off, the #book is never visible. That solution is not acceptable. Example 1.

Accessible but flickering

Second solution is really simple and accessible, but during hiding parts of content then blinking is appreciable.

Just add hiding class by JavaScript, that you have guaranty when JavaScript is off anyone can see content.

JavaScript code:

$(function() {
 $('#book').addClass('javascript);
  $('h2').click(function() {
   $('#book').show();
  });
});

CSS code:

.javascript {
 display:none
}

View example 2.

Accessible but document.write

Yes, that example is accessible but… Always is but. The problem is in document.write. I think you know what’s going on with it. Maybe in this case we can use document.write? I’m really confused at this point. Unfortunately, when we write something with document.write it will not work when we serve it as application/xhtml+xml.

JavaScript code:

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});

document.write('<style type=\"text/css\" media=\"screen\">
 #book{display:none}
</style>');

View example 3.

Accessible, better than previous, but…

I hate buts! That example is accessible but to valid this page with any version of HTML or XHTML you have to extend DTD, really.

JavaScript code:

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});

CSS code:

#book {
 display:none
}

CSS code:

<noscript>
 <style type="text/css" media="screen">
 #book {
  display:block
 }
</style>
</noscript>

The problem of that case: We need to put style inside the noscript tag to show the content when JavaScript is off. We cannot put style tag inside body and we can put noscript tag only inside body tag, disaster…

View example 4.

The winner!

documentElement.className If it is a holy grail of my search? It looks like.

I did not observe any delay during hiding content using this method. Even of a huge page.

How it works? We added class to html tag by JavaScript. Next, each element that should be hidden when JavaScript is turned on, preceded by the class and add to it display:none or something like this. That’s all.

JavaScript code:

document.documentElement.className += " js";

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});

CSS code:

.js #book {
 display:none;
}

View example 5.

To test these examples you can reload it few times to see flickering effect. To show the hidden content, click at headline Wojciech Bednarski’s favorite book.

Co prawda nie działa jeszcze sklep online, ale… Myślałem, że tego nie doczekam, lecz kto wie, może kolejne jabłko kupię w Polsce?

Pierwsze kupiłem w Niemczech, drugie w USA a obecne w UK w takim trochę większym ispocie. Nawet w UK było taniej niż w naszym śmiesznym sadzie, eh…

Poczekajmy jeszcze chwilkę, zobaczymy.

About new cool features, like CSS animation, SVG, Styleable Form Controls and so on, you can read on the Safari’s Blog - Ten New Things in WebKit 3

For testing web sites under Safari 2.0, you can keep Safari.app before update to 10.4.11 in different directory or download any version from repository.

For example you cannot install software like Adobe Photoshop CS3 or Age of Empires III on a case-sensitive filesystem. (I know only about that two) Adobe and Microsoft don’t write anything about filesystem requirement in software requirements at the box or even documentation. Why?!

Age of Empires III cannot be played on a Case-sensitive formatted volume. For more information, please consult the game’s Read Me file.

On Adobe support page I found solution, but it doesn’t work… The solution is to install software on a case-insensitive volume. When you create second partition with a case-insensitive volume and try to install software there, nothing will happen. You cannot install still.

This is not the first time when I get lesson from OS X that only its defaults are right…

ProSeminarium

Data imprezy: 07.11.2007

Bezpłatne ProSeminarium składa się z trzech głównych tematów; Mac OS X Leopard, Final Cut Studio 2 i Logic Studio.

Leopard Tech Talk

Data imprezy: 07.12.2007

Leopard Tech Talk jest przewidziany dla developerów piszących aplikacje pod OS X-a.

Tak by the way, chodzą słuchy, że w przyszłym roku w sierpniu kończy się umowa SAD-u z Apple’m i SAD będzie tylko zwykłym resellerem ze swoimi ispotami, a w internetowym sklepie Apple’a w końcu pojawi się na liście krajów do wyboru Polska.

Myślę że w tedy już nie trzeba będzie czekać na wygenerowania klucza do QuickTime Pro dwóch tygodni, itp historie…

Mowa jest także o innowacyjnej technologii Eyescreener. Owa technologia jest zgodna ze wszystkimi poziomami WCAG i umożliwia takie poszeregowanie informacji, menu nawigacyjnego, podręcznego aby odczytywanie wiadomości przez program czytający było najefektywniejsze.

Bardzo jestem ciekawy wyników prac agencji z osobami niepełnosprawnymi i formy dokumentu który powstanie. Ponieważ rezultaty pracy specjalistów z osobami niewidomymi powinny przynieść najlepsze efekty. Zaraz zaraz, ale czy to już nie zostało zrobione? Czy to właśnie nie z udziałem takich osób powstała specyfikacja WCAG 1.0? :- )

Po tym jak zobaczyłem stronę agencji (table layout) i ikonki zgodności z WAI na poziomie AAA na stronie widzialni, która została zrobiona przez tą agencje mam pewne wątpliwości. Strona nie jest zgodna nawet z drugim poziomem WAI, może i z pierwszym też. Tego nie wiem, nie sprawdzałem bo bez walidacji widać niezgodność po linkach: czytaj więcej. Jakoś HTML-a i CSS oraz użyteczność strony też nie zachwyca.

Zobaczymy co z tego Eyescreenera wyniknie.

Bootstrap 7.7 - agenda