Posts Tagged ‘ html5

API rocks – niezły wstęp do HTML5

Na stronach API rocks można znaleźć ciekawy i praktyczny wstęp do HTML5, napisany w całości w HTML5 icon smile API rocks   niezły wstęp do HTML5

zrzut ekranu 21 600x380 API rocks   niezły wstęp do HTML5

a w niej o :

  • JS API
  • web sockets
  • geolokalizacji
  • nowych tagach html5
  • Microdata
  • atrybuty ARIA
  • nowych typach inputów
  • znaczniku <audio> i <wideo>
  • canvas
  • webGL
  • nowych selektorach CSS
  • gradienty CSS
  • cienie CSS
  • transformacje CSS
  • chorme frame

link do prezentacji tutaj

html5media – znaczniki audio i video na każdej przeglądarce

Rozszumiany ostatnio znacznik video działa oczywiście tylko na nowoczesnych przeglądarkach (IE8 nie jest nowoczesną przeglądarką). Ale pojawiła się biblioteka JS umożliwiająca korzystanie nie tylko ze znacznika video ale i audio na każdej przeglądarce (włączając IE6).

bibliotekę można ściągnąć tutaj.

1269560980 camcorder html5media   znaczniki audio i video na każdej przeglądarce

Transformacje CSS nawet w IE6 !!!

Tak! Czekałem na ten moment. W sieci pojawił się specjalny js, który umożliwia prawie bezstresowo korzystać z transformacji w IE począwszy od wersji 6.

Są jeszcze drobne rzeczy, które twórca chce jeszcze poprawić, ale i tak stworzył wyjątkowo przydatny skrypt.

zrzut ekranu 11 600x399 Transformacje CSS nawet w IE6 !!!

kod źródłowy tutaj

strona twórcy tutaj

Magia HTML5 :)

http://9elements.com/io/projects/html5/canvas/

piękne kółeczka icon smile Magia HTML5 :)

pobrane 2 600x319 Magia HTML5 :)

Pracuj nad usability! Odc 1 “input i label”

W wielu wielu miejscach można spotkać <div> czy <p> które zawierają etykietę dla pola formularza, czasami trafiają one nawet do tabelek. Najlepszym sposobem na wyświetlanie labelek do pól jest <label>

<label for="android-16">Android 1.6</label>
<input id="android-16" type="radio" value="1.6" name="os" />
 
<label for="android-20">Android 2.0</label>
<input id="android-20" type="radio" value="2.0" name="os" />
 
<label for="inny">Inny</label>
<input id="inny" type="radio" value="error" name="os" />

co nam daje kod:

jeśli klikniemy w

div#formularz-telefony label
{
  float: left;
  width: 120px;
  text-align: right;
}

Border Radius w IE9 :)

IE9 powoli nabiera kształtów, a na oficjalnym blogu pojawiają się kolejne informacje o nowościach.

  • IE9 ma w pełni obsługiwać selektory CSS3
  • ma mieć ładniejsze renderowanie czcionek
  • będzie wspierał border radius icon smile Border Radius w IE9 :)

Dean PDC 4 300x188 Border Radius w IE9 :)

ale i tak póki co ma 32/100 w teście ACID3 icon razz Border Radius w IE9 :)

HTML5 – paczka elementów może drastycznie zwiększyć wydajność stron

Na blogu Alexandra Limi można znaleźć ciekawy wpis na temat optymalizacji zapytań do serwera podczas ładowania strony.

Zaproponował on, aby zamiast ściągać 13 obrazków, 2 css’y i 3 js’y, spakować całość do jednego pliku zip i poprosić przegladarkę o załadowanie i rozpakowanie zawartości przed próbą wczytania tych elementów “tradycyjnie”.

Co to daje? Potencjalnie olbrzymi wzrost wydajności, serwery zamiast obsługiwać kilkadziesiąt zapytań, będą potrzebowały tylko jednego aby dostarczyć użytkownikowi taką samą treść.

Limi proponuje następującą składnię:

<link rel="resource-package"
      href="site-resources.zip" />

ale co najciekawsze, pomysł ten podchwycili developerzy Firefoxa i planują włączyć obsługę tego znacznika w kolejnej becie 3.7! Czyżby za rok serwery mają szansę złapać drugi oddech?