Niezalogowany [ logowanie ]
Subskrybuj kanał ATOM Kanał ATOM    Subskrybuj kanał ATOM dla tagu javascript Kanał ATOM (tag: javascript)

Autor wpisu: Kamil, dodany: 03.11.2010 10:44, tagi: javascript

Jakiś czas temu pisałem o wchodzącej do przeglądarek technologii, jaką jest Web Workers. Nadszedł więc czas na opisanie kolejnej, trochę podobnej technologii – Server-Sent Events. Czym jest Server-Sent Events? Jest to API do wykonywania połączeń HTTP – wysyłania zdarzeń przez serwer do przeglądarki (komunikacja jednokierunkowa). Czyli mówiąc inaczej, jest to znajoma wszystkim komunikacja serwer-klient wywoływana [...]

Autor wpisu: Vokiel, dodany: 24.10.2010 22:15, tagi: jquery, css, javascript

Autor wpisu: batman, dodany: 22.10.2010 14:57, tagi: javascript

Mozilla Labs jest kuźnią pomysłów, w której powstają projekty mające na celu usprawnienie przeglądarki Firefox. Jednym z takich projektów, który opuścił laboratoria Mozilli i zawitał do najnowszej wersji Firefoxa, jest Sync.

Tym razem programiści popuścili wodze fantazji i wpadli na pomysł, by udostępnić programistom API, dzięki któremu będzie można dowolnie modyfikować wygląd okna przeglądarki. Najciekawsze w tym wszystkim jest to, że modyfikacji będzie można dokonywać z poziomu kodu HTML.

Projekt Chromeless, bo o nim mowa, powstał z połączenia Cuddlefish Lab i Jetpack SDK z domieszką XULRunnera. Diagram prezentujący zasadę idealnie oddaje bieżący stan projektu i wygląda następująco:

Chromeless znajduje się w fazie pre-alfa i jedyne co w chwili obecnej jest dostępne, to repozytorium projektu - http://github.com/mozilla/chromeless. Docelowo projekt Chromeless ma zostać przekształcony w SDK, z którego każdy będzie mógł skorzystać i stworzyć własną przeglądarkę.

Autor wpisu: batman, dodany: 16.10.2010 15:30, tagi: jquery, javascript

Kilka godzin temu napisałem o wydaniu pierwszej alfy jQuery Mobile, a tutaj programiści pracujący nad podstawową wersją biblioteki wydali jQuery 1.4.3. Obok usunięcia kilku błędów i wprowadzeniu ogólnych usprawnień, w bibliotece pojawiły się nowe interesujące funkcjonalności. Są to między innymi:

  • przepisanie całego modułu odpowiedzialnego za CSS. Od wersji 1.4.3 można tworzyć własne pluginy, które mogą korzystać z funkcji css i/lub animate. Jako przykład można podać plugin jQuery Rotate.
    $('#myDiv').css('rotate', 90);
    $('#myDiv').animate({rotate: 180});
  • znaczna poprawa wydajności metod odpowiedzialnych za przeszukiwanie drzewa DOM.
  • prosta, aczkolwiek bardzo potrzebna rozbudowa zdarzenia click, którego wynikiem powinno być zablokowanie domyślnej akcji
    $("a").bind("click", false)
  • jQuery.type – funkcja pozwalająca określić typ (wewnętrzną klasę Javascript) wskazanej wartości
  • jQuery.fx.interval – właściwość pozwalająca na określenie ilości klatek na sekundę dla uruchamianej animacji. Dzięki temu przeglądarki, które korzystają z akceleracji sprzętowej, będą w stanie wyświetlać bardziej płynne animacje.
  • jQuery.isWindow – prosta metoda pozwalająca na określenie, czy wskazany obiekt jest oknem (window).
  • szereg usprawnień w module data, m.in. wsparcie dla atrybutów data- w HTML5.

Autor wpisu: batman, dodany: 16.10.2010 12:57, tagi: jquery, javascript

Nie tak dawno, bo zaledwie dwa miesiące temu, ekipa odpowiedzialna za jQuery ogłosiła rozpoczęcie prac nad mobilną wersją biblioteki. Dzisiaj programiści otrzymali w swoje ręce pierwszą wersję alfa jQuery Mobile.

W wydanej właśnie wersji mamy do dyspozycji takie komponenty jak:

  • zarządzanie wyglądem (Theming)
  • kontrolki formularza
  • okna dialogowe
  • widoki list
  • zdarzenia
  • efekty przejścia

Biblioteka jQuery Mobile została napisana w taki sposób, aby była jak najbardziej przyjazna dla użytkownika. Udało się to uzyskać poprzez zastosowanie szeregu dobrych praktyk. Są to między innymi:

  • Progressive Enhancement – progresywne rozszerzanie funkcjonalności. Nowa biblioteka skupia się na dodawaniu funkcjonalności do już istniejącej treści. Dzięki takiemu podejściu, przeglądarki nieobsługujące Javascript będą w stanie poprawnie wyświetlić stronę.
  • Graceful Degradation – stopniowe zmniejszanie jakości prezentowanych treści w zależności od funkcjonalności obsługiwanych przez przeglądarkę. Dzięki temu eliminuje się zero jedynkowe podejście do problemu, czyli działa – nie działa. Oznacza to tyle, że w przypadku braku obsługi jakichś właściwości CSS, przeglądarka wyświetli standardowy element, np. przycisk pozbawiony gradientów, cienia, itp.
  • konfiguracja oparta o język znaczników – jQuery Mobile nie wymaga do konfiguracji ani jednego wiersza Javascript. Wszystko odbywa się w kodzie HTML poprzez odpowiednie atrybuty.
  • niewielki rozmiar – w przypadku urządzeń mobilnych, rozmiar ma znaczenie. Cały kod Javascript “waży” zaledwie 12KB, a CSS 6KB.

Skąd pobrać?

Niestety w chwili powstawania tego wpisu, wszystkie linki prowadzące do dokumentacji oraz do plików źródłowych były niepoprawne. Dlatego też odsyłam was na oficjalną stronę projektu, gdzie w niedługim czasie powinny się pojawić poprawione linki.

Autor wpisu: batman, dodany: 14.10.2010 08:00, tagi: jquery, javascript

Na początku miesiąca napisałem recenzję książki jQuery. Poradnik programisty. Od tego czasu przeczytałem ją jeszcze raz i z czystym sumieniem oddam ją komuś, kto jako pierwszy odpowie na następujące pytanie.

Co to za miejsce i gdzie się ono znajduje?

DSC09105

Jakiś czas temu pisałem o tym miejscu, więc wystarczy poszukać w archiwum. Odpowiedzieć można w komentarzu pod postem lub wysyłając wiadomość przy pomocy formularza kontaktowego. Powodzenia!

Autor wpisu: Blame, dodany: 05.10.2010 15:36, tagi: javascript

Z racji tego, że powstało już baardzo wiele sposobów na zaokrąglone rogi pomyślałem, że nie będę pisał o niczym nowym. Ten wpis będzie zbiorem tych licznych rozwiązań wykorzystujących zarówno HTML, CSS jak i JavaScript. Na końcu każdej metody pozwoliłem sobie pokazać wady i zalety jej stosowania. Zapraszam do lektury :)

Sposób pierwszy – CSS3

Jak wiadomo, najnowsza wersja arkuszy stylów pozwala na uzyskanie krągłości na naszej stronie. Aby to zrobić wystarczy nadać danemu elementowi odpowiedni selektor, np. klasę a następnie dodać mu poniższe style:

-khtml-border-radius: 10px / 10px;

-webkit-border-radius: 10px / 10px;

-moz-border-radius: 10px / 10px;

border-radius: 10px / 10px;

Dla wyjaśnienia, pierwsza wartość to szerokość zaokrąglenia, z kolei wartość po slash’u „/” definiuje jego wysokość. W tym wypadku godna polecenia jest strona CSS Border Radius Generator dzięki której wpisując odpowiednie wartości w pola przy rogach możemy na bieżąco obserwować kształt boków a następnie skopiować cały kod CSS.

 

Zalety

  • Wymaga niewielkich zmian w kodzie,
  • Używa najnowszych rozwiązań.

Wady

  • Rozwiązanie obsługiwane tylko przez najnowsze przeglądarki.

 

 

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Wszystkie wpisy należą do ich twórców. PHP.pl nie ponosi odpowiedzialności za treść wpisów.