Paweł Wimmer - blog towarzyszący kursowi języka HTML w Helionie. Założony 10 czerwca 2006.
| < Kwiecień 2017 > |
Pn Wt Śr Cz Pt So N
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Zakładki:
A teraz ebooki
A to moje
Abonowane kanały Youtube
Adresy e-mail
Agregatory
Blogi
Książki i ebooki
Kursy polecane
Software
Witryny



darmowe liczniki - od 17.02.2008

Nowości Helionu


Skopiuj CSS
czwartek, 27 grudnia 2012
HTML 5 w Webmasterze

Plik:HTML5-logo.svg

W ostatnim czasie dopisałem do kursu HTML, do części referencyjnej, ok. 25 poleceń należących do specyfikacji HTML 5. W następnych tygodniach będę aktualizować także treść podręcznikową. Sama specyfikacja, jak wiemy, jest już na etapie "kandydackim", natomiast rekomendacja (czyli de facto wersja finalna) została zapowiedziana na 2014 rok. Z kolei na 2016 rok zapowiedziana jest wersja 5.1, która zapewne będzie zawierać niezbędne poprawki i uzupełnienia. Wygląda więc na to, że przerażająco odległa perspektywa 2022 roku, jaka przez kilka lat straszyła webmasterów, okazała się tylko strachem na wróble.

Spis poleceń

wtorek, 15 maja 2012
Kurs SVG

W kursie HTML rozwijam od niedawna elementarny kurs grafiki wektorowej SVG, która jest już całkiem ładnie interpretowana przez główne przeglądarki. Zachęcam, SVG to świetne uzupełnienie HTML i CSS, doskonale z nimi współpracujące. Na razie jest 7 rozdziałów, całość powinna być gotowa w ciągu paru najbliższych tygodni.

http://webmaster.helion.pl/index.php/svgwstep

czwartek, 07 kwietnia 2011
Google Web Fonts w kursie HTML

Do mojego kursu HTML dorzuciłem rozszerzoną i uporządkowaną informację o wykorzystaniu Google Web Fonts na stronach internetowych:

http://webmaster.helion.pl/index.php/css-google-web-fonts

Mała ciekawostka - w lutym Web Font Blog informował, że serwery Google obsługują 50 mln wywołań fontów dziennie, a korzysta z nich ok. 800 tys. stron internetowych. Zapewne miesięczne tempo wzrostu w wysokości 30% nie utrzyma się zbyt długo, ale i tak będzie to całkiem solidne obciążenie serwerów, które - oby - nie przełożyło się na awaryjność, zwłaszcza że tych fontów będzie z pewnością przybywać. Nas powinno najbardziej interesować, aby coraz więcej miało polskie ogonki.

sobota, 12 marca 2011
Owale i czworokąty w CSS

W kursie HTML umieściłem opisy technik tworzenia owali i czworokątów. Trudno ukryć, że to ciągle partyzantka, sztuczki wyzyskujące rozmaite cechy figur i stylów. Zapewne nie wyczerpuję tym możliwych technik - zresztą eksperymentując odkryłem na swój użytek pewną "magiczną" formułę pozwalającą budować wiele figur na podstawie bazowego modelu, w którym zmienia się zakres i wartości parametrów, jednak nie jest ona wystarczająco ogólna, aby zmajstrować wszystko, co jest potrzebne. Na dodatek niektóre przeglądarki zachowują się nietypowo, co redukuje uniwersalność tego pomysłu. Dlatego go nie przedstawiam.

Zastanawiam się, czy w następnej specyfikacji, CSS4, nie powinno się jednak pomyśleć o jawnie deklarowanych obiektach w rodzaju triangle, quadrangle, oval, z możliwością definiowania w parametrach pozycji i własności. Obecnie "matematyczna" elegancja tych konstrukcji przyprawia o ból zębów.

http://webmaster.helion.pl/index.php/css-figury-geometryczne

Trapezoid:

niedziela, 06 marca 2011
Trójkąty w CSS

Do kursu HTML dodałem rozdział poświęcony tworzeniu trójkątów za pomocą stylów CSS, zarówno za pomocą technik CSS2, jak i CSS3. W perspektywie pojawią się też techniki dotyczące innych figur geometrycznych, jak prostokąty (w tym kwadraty), elipsy (w tym okręgi) czy wielokąty.

http://webmaster.helion.pl/index.php/css-figury-geometryczne

sobota, 05 marca 2011
Animacje w kursie HTML

Skończyłem właśnie opis bloku stylów CSS3 dotyczący animacji. Jest dostępny na stronie:

http://webmaster.helion.pl/index.php/css3-animacje

Animacje, jak już tu wcześniej wspominałem, są interpretowane jedynie przez przeglądarki oparte na silniku WebKit, a więc przez Safari i Chrome (obecnie to 13,5% polskich użytkowników). Nie jest to w tej chwili powód do jakiegoś szczególnego lamentu - jestem pewien, że twórcy innych silników ostro pracują nad wdrożeniem animacji i w ciągu paru czy parunastu miesięcy pojawią się znaczące udoskonalenia. Animacje raczej nie będą powszechnie wykorzystywane przez domowych webmasterów, ale z całą pewnością będą się pojawiać w ambitniejszych projektach, zwłaszcza firmowych. Tu i ówdzie widać imponujące przykłady pomysłowości i smaku artystycznego, pokazujące niezmierzone możliwości wykorzystania tej ciekawej techniki.

Opis w kursie pokazuje jedynie klocki budulcowe i opiera się na prostych obiektach geometrycznych, a przecież w animacjach można wykorzystywać także grafikę rastrową. Zachęcam zatem webmasterów do zapoznania się z tymi technikami - oczywiście poprzez Chrome lub Safari.

poniedziałek, 21 lutego 2011
CSS3 - przemiana

W kursie HTML umieściłem kolejny blok stylów CSS3 - transition. Używam tu polskiego tłumaczenia "przemiana", bo "przejście" jakoś nie bardzo mi pasuje - może zresztą utrze się jakieś inne, zobaczymy.

http://webmaster.helion.pl/index.php/css3-przemiana

Blok obejmuje zbiorcze polecenie transition oraz poszczególne jego części składowe: transition-property (zmieniany wymiar), transition-duration (czas przemiany), transition-timing-function (rozkład czasowy przemiany) oraz transition-delay (opóźnienie startu przemiany).

Style obsługują Opera, Chrome i Safari, natomiast Internet Explorer 9 RC i Firefox 4 z błędami. Dlatego dla użytkowników IE i Firefoksa sporządziłem też dwa króciutkie screencasty (w rozdziale transition) pokazujące, o co tu w ogóle chodzi.

Przykład przemiany
Tagi: CSS3
16:18, prwimmer , Kurs HTML
Link Komentarze (8) »
środa, 16 lutego 2011
CSS3 - systematyczniej o szpaltach

Rok temu pisałem w blogu o szpaltach w kaskadowych arkuszach stylów poziomu 3. Teraz umieściłem w kursie HTML bardziej systematyczny wykład tej techniki - na razie szpalty są obsługiwane w zasadniczej części przez Firefoksa, Chrome i Safari, ale i tak nie wszystkie polecenia są w nich dostępne. Internet Explorer i Opera nie zabrały się jeszcze za wdrażanie tej użytecznej techniki webmasterskiej.

Odsyłam na stronę:

http://webmaster.helion.pl/index.php/css3-szpalty

Tagi: CSS3
06:20, prwimmer , Kurs HTML
Link Dodaj komentarz »
sobota, 12 lutego 2011
Habilitacja z obramowania

We wpisie Doktorat z obramowania zapowiadałem opracowanie w kursie HTML bloku zagadnień związanych z obramowaniem pojemników. Właśnie skoczyłem opis, aczkolwiek o ile zaokrąglenia i cieniowanie są dość łatwe i w pełni wdrożone w przeglądarkach, o tyle obrazkowe obramowania są gotowe połowicznie. Działa podstawowa część zbiorczej definicji border-image, natomiast nie działają jeszcze w przeglądarkach "kanoniczne" definicje poszczególnych parametrów definiowanych z osobna. Dlatego na razie, podając klasyczne definicje, pokazuję też obejścia.

Najtrudniejsze jest zrozumienie, jak dzielony jest obrazek i jakie jego części wchodzą do obramowania. Wydaje się, że udało mi się to w miarę prosto wyjaśnić, przy czym posłużyłem się tu wspominaną już poprzednio aplikacją Border Image Generator, z której zdjąłem kilka ekranów. Gdy uchwycimy, na czym polega "wycinanie" fragmentów obrazka i wstawanie ich do obramowania, jaka jest mechanika działania tego narzędzia, będziemy już w domu.

Nawiasem mówiąc, jest zamieszanie w rozumieniu wirtualnych na razie poleceń outset, slice, width - zaobserwowałem różne interpretacje, a czasem wręcz bezradne rozkładanie rąk - specyfikacja jest tu zagmatwana, a i tak stosujemy na razie obejście. Zobaczymy, co będzie się działo dalej.

Zapraszam zatem ponownie na stronę całego bloku informacji o obramowaniach - webmaster.helion.pl/index.php/css3-obramowania. Będę ją jeszcze uzupełniać, jeśli tylko przeglądarki będą wdrażać poszczególne polecenia w sposób zgodny z zaleceniami W3C. Już teraz polecam jednak tym webmasterom, którzy jeszcze nie interesowali się głębiej nowymi stylami, zapoznanie się z tymi technikami. Są po prostu użyteczne i pozwalają tworzyć efektowne strony.

Tagi: CSS3
08:18, prwimmer , Kurs HTML
Link Dodaj komentarz »
poniedziałek, 07 lutego 2011
CSS3 - manipulowanie tłem

W kursie HTML umieściłem opracowanie technik manipulowania tłem graficznym w pojemnikach - oczywiście mam na myśli nowe polecenia - background-size (wielkość tła), background-origin (zakres zajmowanego obszaru pojemnika) i background-clip (przycinanie tła).

http://webmaster.helion.pl/index.php/css3-tlo

Podane są kody, żywe przykłady, a także ilustracje dla tych użytkowników, których przeglądarki nie obsługują tych stylów.

Obsługa jest zróżnicowana - najlepiej to wygląda w przypadku background-size, gdzie nie radzi sobie tylko IE8. ciut gorzej w background-origin, gdzie poległy IE8 i FF3.x, a całkiem słabo w background-clip, gdzie działa tylko Opera oraz FF4 i IE9.

Widać tu wyraźnie, ile czasu jeszcze upłynie, zanim będzie można swobodnie posługiwać się takimi poleceniami bez stosowania żadnych dodatkowych sztuczek i ryzyka, że interpretacja będzie mocno odmienna w różnych programach. Cały kłopot w tym, że dominujący na światowym rynku Internet Explorer rozwija się wprawdzie sukcesywnie, ale najnowsza wersja nie jest dostępna dla Windows XP, który zajmuje ciągle spory kawał rynku systemów operacyjnych. Może się więc powtórzyć sytuacja z pierwszej połowy poprzedniej dekady, gdy to przeglądarka Microsoftu była hamulcowym webmasterstwa - gorzki paradoks polega tu na tym, że tym razem programiści Microsoftu naprawdę mocno nad nią pracują.

Oprócz tego umieszczam też sukcesywnie w kursie przetestowane ostatnio w blogu selektory pseudoklas.

http://webmaster.helion.pl/index.php/css3-selektory/css3-selektory-pseudoklas

Tagi: CSS3
18:56, prwimmer , Kurs HTML
Link Komentarze (2) »
 
1 , 2