Nie jakąś zaawansowaną, najprostszą. Na razie niewiele się w niej konfiguruje. Jest ona wynikiem "zamówienia" jednego fotografa na stronę. Ponieważ nie znalazłam niczego, co by w 100% zaspokoiło moje (w sumie to tego fotografa) wymagania, to zaczęłam pisać coś swojego. Najpierw chciałam sama, ale z czasem doszłam do wniosku, że się nie wyrobię w terminie, więc używam jQuery.
Kilka następnych wpisów będzie swoistym dziennikiem moich zmagań. Proszę się nie śmiać :))
czwartek, 20 października 2011
wtorek, 18 października 2011
odwoływanie się do elementów obiektu w JS
W JavaScripcie jest swoista dowolność jeśli chodzi o adresowanie elementów w obiekcie. W ramach przypomnienia - wszystko w JS jest obiektem - Array, Function, String... Adresować elementy możemy używając kropki i nazwy elementu:
lub tak, jak w tablicy biorąc nazwę w nawiasy kwadratowe (już bez kropki):
Gra i buczy. A co zrobić, gdy nazwę pola mamy w zmiennej? Wtedy zapis z kropka zwróci nam undefined, bo w zapisie z kropką podajemy nazwę bez stringów, czyli w kodzie:
odwołujemy się do pola o nazwie "abc".
W sytuacji, gdy nazwy pól mamy w zmiennych najbezpieczniej jest korzystać z zapisu z nawiasami kwadratowymi:
obiekt.pole
lub tak, jak w tablicy biorąc nazwę w nawiasy kwadratowe (już bez kropki):
obiekt["pole"]
Gra i buczy. A co zrobić, gdy nazwę pola mamy w zmiennej? Wtedy zapis z kropka zwróci nam undefined, bo w zapisie z kropką podajemy nazwę bez stringów, czyli w kodzie:
var abc = "pole";
alert(obiekt.abc);
alert(obiekt.abc);
odwołujemy się do pola o nazwie "abc".
W sytuacji, gdy nazwy pól mamy w zmiennych najbezpieczniej jest korzystać z zapisu z nawiasami kwadratowymi:
var abc = "pole";
alert(obiekt[abc]);
alert(obiekt[abc]);
sobota, 15 października 2011
jak async może skrócić życie developera o kilka lat
To, że nie mam jeszcze siwych włosów jest chyba tylko zasługą ich koloru dobrze wyschniętej słomy.
Piszę "prostą" galerię, oczywiście w JavaScript, a co. Dodatkowo korzystam z ogłupiacza o nazwie jQuery, choć coraz poważniej myślę o porzuceniu jQuery i napisaniu surowego JS. Oczywiście moja aplikacja korzysta z Ajaxa, bo w przeciwieństwie do znalezionych przeze mnie różnych gotowych tworów ma ona obsługiwać nieznaną ilość zdjęć, więc ładowanie ich wszystkich w HTML mija się z celem. Tak więc wymyśliłam sobie, że przy uploadzie plików na serwer dane o pliku oraz jego opisie wrzucane są do pliku txt, który trzyma zserializowany obiekt JSON z danymi wszystkich plików.
No i pobieram sobie Ajaxem wyżej wymieniony plik. Tuż przed operacją Ajaxową zdefiniowałam sobie lokalną dla pliku zmienną do której będzie wczytywany obiekt. W funkcji callbackowej dla success (przypominam, ze pracuję na jQuerowej funkcji $.ajax()) przypisuję sobie uzyskane dane i...
... i nic.
Po dobrych dwóch godzinach szukania ki diabeł, zabawy alertami, Firebugiem itp, coś mnie tknęło i jeszcze raz przeanalizowałam co ja do tej funkcji przekazuję. A jest trochę tych rzeczy. A wśród nich "async" ustawiony na... true...
No to jak ja mogę oczekiwać, że kod, który wykonuje się w funkcji ajax będzie pisał mi coś do zmiennej, która już nie jest używana, bo korzystający z niej kod wykonał się, gdy funkcja ajax wykonywał request...
Zmiana wartości parametru "async" z true na false rozwiązała problem... Oby wszystkie potknięcia dało się tak łatwo rozwiązać...
Piszę "prostą" galerię, oczywiście w JavaScript, a co. Dodatkowo korzystam z ogłupiacza o nazwie jQuery, choć coraz poważniej myślę o porzuceniu jQuery i napisaniu surowego JS. Oczywiście moja aplikacja korzysta z Ajaxa, bo w przeciwieństwie do znalezionych przeze mnie różnych gotowych tworów ma ona obsługiwać nieznaną ilość zdjęć, więc ładowanie ich wszystkich w HTML mija się z celem. Tak więc wymyśliłam sobie, że przy uploadzie plików na serwer dane o pliku oraz jego opisie wrzucane są do pliku txt, który trzyma zserializowany obiekt JSON z danymi wszystkich plików.
No i pobieram sobie Ajaxem wyżej wymieniony plik. Tuż przed operacją Ajaxową zdefiniowałam sobie lokalną dla pliku zmienną do której będzie wczytywany obiekt. W funkcji callbackowej dla success (przypominam, ze pracuję na jQuerowej funkcji $.ajax()) przypisuję sobie uzyskane dane i...
... i nic.
Po dobrych dwóch godzinach szukania ki diabeł, zabawy alertami, Firebugiem itp, coś mnie tknęło i jeszcze raz przeanalizowałam co ja do tej funkcji przekazuję. A jest trochę tych rzeczy. A wśród nich "async" ustawiony na... true...
No to jak ja mogę oczekiwać, że kod, który wykonuje się w funkcji ajax będzie pisał mi coś do zmiennej, która już nie jest używana, bo korzystający z niej kod wykonał się, gdy funkcja ajax wykonywał request...
Zmiana wartości parametru "async" z true na false rozwiązała problem... Oby wszystkie potknięcia dało się tak łatwo rozwiązać...
wtorek, 11 października 2011
i gdzie to gna??
Siedzę w aplikacjach internetowych od 2000 roku. Jak zaczynałam, HTML3 (pamięta ktoś to?) wciąż był w użyciu a HTML4 stawiał swoje już nie pierwsze, ale wciąż niezbyt pewne kroki. PHP3 kończyło swój żywot i właśnie 4 zaczynała hasać po serwerach. Wszystko pięknie.
W 2009 roku pojawiły się pierwsze informacje o HTML5, ale dopiero w tym roku specyfikacja osiągnęła taki poziom, by można było zacząć coś dłubać. PHP trochę szybciej 5 wersję wypuściło, ale umówmy się, że specjalnie innego wyjścia nie było... bo w 4 to tylko cień obiektowości gdzieś majaczył na horyzoncie.
Ale teraz to chyba już za daleko zaszło. Ktoś pamięta pierwszego Firefoxa? Ja pamiętam. W tym roku instalowałam najnowszą 4 wersję. A dziś Firefox mi się narzuca z wersją 7 (no już od kilku tygodni). SIÓDMA wersja!!!
CSS3 rekomendację W3C dostał w tym roku. Zanim przeglądarki zaimplementują wszystko, (zwłaszcza IE) to pewnie kilka lat minie. A na w3.org już można wstępny moduł specyfikacji CSS4 przeczytać... Google Chrome dużo młodszy niż Firefox, a już 10 wersję ma...
No więc ja się pytam... gdzie to wszystko gna? Po kiego grzyba nam te wersje softu i technologii rosną jak szalone? Przecież nie ma możliwości nad tym wszystkim panować. Podjęłam decyzję, że 7 wersji Firefoxa nie zainstaluję. Póki co opanowałam jakoś HTML5 i właśnie utrwalam zdobytą wiedzę, właśnie staram się jakoś dogadać z CSS3... choć różnie mi to wychodzi...
Trzymajcie kciuki, bo ja tak gnać nie umiem... a jako członek społeczności IT muszę trzymać rękę na pulsie... wracam do CSS3.
W 2009 roku pojawiły się pierwsze informacje o HTML5, ale dopiero w tym roku specyfikacja osiągnęła taki poziom, by można było zacząć coś dłubać. PHP trochę szybciej 5 wersję wypuściło, ale umówmy się, że specjalnie innego wyjścia nie było... bo w 4 to tylko cień obiektowości gdzieś majaczył na horyzoncie.
Ale teraz to chyba już za daleko zaszło. Ktoś pamięta pierwszego Firefoxa? Ja pamiętam. W tym roku instalowałam najnowszą 4 wersję. A dziś Firefox mi się narzuca z wersją 7 (no już od kilku tygodni). SIÓDMA wersja!!!
CSS3 rekomendację W3C dostał w tym roku. Zanim przeglądarki zaimplementują wszystko, (zwłaszcza IE) to pewnie kilka lat minie. A na w3.org już można wstępny moduł specyfikacji CSS4 przeczytać... Google Chrome dużo młodszy niż Firefox, a już 10 wersję ma...
No więc ja się pytam... gdzie to wszystko gna? Po kiego grzyba nam te wersje softu i technologii rosną jak szalone? Przecież nie ma możliwości nad tym wszystkim panować. Podjęłam decyzję, że 7 wersji Firefoxa nie zainstaluję. Póki co opanowałam jakoś HTML5 i właśnie utrwalam zdobytą wiedzę, właśnie staram się jakoś dogadać z CSS3... choć różnie mi to wychodzi...
Trzymajcie kciuki, bo ja tak gnać nie umiem... a jako członek społeczności IT muszę trzymać rękę na pulsie... wracam do CSS3.
poniedziałek, 10 października 2011
Pozycjonowanie tekstu
Wyśrodkowanie tekstu w pionie i poziomie nie zawsze jest najłatwiejszą sprawą. Widać to zwłaszcza po różnych pomysłach, np div w znaczniku p, przezroczysty 1px gif, który jest rozciągany i wstawiany tak, żeby przesunąć tekst względem dowolnego elementu itp.
Najprostszym sposobem jest użycie dwóch właściwości css:
- text-align (wyśrodkowanie w poziomie)
- line-height (wyśrodkowanie w pionie).
Użycie jest dość proste i wyjaśnione na podlinkowanych stronach. Od siebie dodam, że text zawsze będzie się wyświetlał dokładnie w połowie wysokości linii, tak więc ustawiając wartość line-height na równą wysokości kontenera mamy pewność, że tekst będzie wyśrodkowany w pionie.
Najprostszym sposobem jest użycie dwóch właściwości css:
- text-align (wyśrodkowanie w poziomie)
- line-height (wyśrodkowanie w pionie).
Użycie jest dość proste i wyjaśnione na podlinkowanych stronach. Od siebie dodam, że text zawsze będzie się wyświetlał dokładnie w połowie wysokości linii, tak więc ustawiając wartość line-height na równą wysokości kontenera mamy pewność, że tekst będzie wyśrodkowany w pionie.
sobota, 8 października 2011
HTML5 i outline
Każdy frontendowiec zna właściwość outline z CSS.Wraz z HTML5 pojawił się nowy outline, tym razem w kontekscie samego HTML.
Co to jest outline? To inaczej spis treści strony zrobiony na podstawie znaczników tworzących nowe sekcje i opisujących ich znaczników hx (gdzie x jest cyfrą od 1 do 6). No tak, i tu wchodzimy w to, co nowego przyniósł nam HTML5. Za bardzo teraz rozwodzić się nie będę, zostawię to na inny wpis. Jednak to co jest ważne, to fakt, że znaczniki zostały pogrupowane ze względu na ich zastosowanie. Została wyróżniona grupa znaczników, które tworzą nowe sekcje w kodzie, pod względem semantycznym. Zaliczamy do nich znaczniki:
- section
- article
- nav
- aside.
Ich użycie poza semantycznym wyróżnieniem elementu (np artykułu, sekcji z newsami, nawigacji czy bloku reklam) dodaje nową sekcję w outline. Jeśli wewnątrz takiego tagu umieścimy tag hx (gdzie x jest cyfrą od 1 do 6) t w outlinie zamiast informacji o nienazwanej sekcji pojawi się tekst wpisany w tag hx.
Powstało kilka aplikacji (m.in. na Chrome i FF) sprawdzających outline, ale ja sama korzystam z oulinera dostępnego online. Wszystkim ciekawym polecam sprawdzenia outline WP.pl. Według mnie jest bardzo dobry, wręcz idealny :).
Biorąc pod uwagę outline, pojawia się nowy standard w kodowaniu. Nie dość że strona ma się walidować, wyświetlać poprawnie pod różnymi przeglądarkami, to jeszcze musi mieć poprawny outline.
Co to jest outline? To inaczej spis treści strony zrobiony na podstawie znaczników tworzących nowe sekcje i opisujących ich znaczników hx (gdzie x jest cyfrą od 1 do 6). No tak, i tu wchodzimy w to, co nowego przyniósł nam HTML5. Za bardzo teraz rozwodzić się nie będę, zostawię to na inny wpis. Jednak to co jest ważne, to fakt, że znaczniki zostały pogrupowane ze względu na ich zastosowanie. Została wyróżniona grupa znaczników, które tworzą nowe sekcje w kodzie, pod względem semantycznym. Zaliczamy do nich znaczniki:
- section
- article
- nav
- aside.
Ich użycie poza semantycznym wyróżnieniem elementu (np artykułu, sekcji z newsami, nawigacji czy bloku reklam) dodaje nową sekcję w outline. Jeśli wewnątrz takiego tagu umieścimy tag hx (gdzie x jest cyfrą od 1 do 6) t w outlinie zamiast informacji o nienazwanej sekcji pojawi się tekst wpisany w tag hx.
Powstało kilka aplikacji (m.in. na Chrome i FF) sprawdzających outline, ale ja sama korzystam z oulinera dostępnego online. Wszystkim ciekawym polecam sprawdzenia outline WP.pl. Według mnie jest bardzo dobry, wręcz idealny :).
Biorąc pod uwagę outline, pojawia się nowy standard w kodowaniu. Nie dość że strona ma się walidować, wyświetlać poprawnie pod różnymi przeglądarkami, to jeszcze musi mieć poprawny outline.
czwartek, 6 października 2011
HTML5... i co z tym począć ??
HTML5 bardzo mi przypadł do gustu. Semantyka, outline... to złapało mnie za serce. Kod wygląda czytelnie i jest przejrzysty nawet dla kogoś kto nie przyłożył ręki do jego stworzenia.
Wzięłam się za specyfikację i ogólne poznawanie nowych znaczników oraz standardów i... no właśnie i porażka. O ile w Chrome i FF jakoś te strony wyglądają, o tyle IE mnie dobił. I jak tu pisać czytelne strony i stosować się do standardów, jeśli nawet najnowsze wersje przeglądarek nie rozumieją co do nich mówię??
No nic uczę się dalej...
Wzięłam się za specyfikację i ogólne poznawanie nowych znaczników oraz standardów i... no właśnie i porażka. O ile w Chrome i FF jakoś te strony wyglądają, o tyle IE mnie dobił. I jak tu pisać czytelne strony i stosować się do standardów, jeśli nawet najnowsze wersje przeglądarek nie rozumieją co do nich mówię??
No nic uczę się dalej...
sobota, 1 października 2011
permanentny brak czasu...
Nauka zajmuje wściekle dużo czasu... a codziennie pojawia się tyle nowych rzeczy, których chciałabym się nauczyć...
Subskrybuj:
Posty (Atom)