Zrób se paczkę.

Ogólne

18 maj 2012

Dziś wpis pod znakiem tych piątkowych i weekendowych. Za pewne nie wiele wniesie w kwestii kodowania, ale na pewno pomoże nie jednej osobie poradzić sobie z osobliwym problemem braku opakowania na płytę… Dziś takowe możemy nabyć w szpuli w liczbie przekraczającej dziesiątki – i wiem że powoli odchodzi się od ich stosowania, wciąż jednak są one od czasu do czasu potrzebne. Powodów ich użycia może być wiele i na pewno wymieniać ich nie zamierzam. Wpis jednak dotyczy problemu bezpiecznego transportu krążka w przypadku gdy nie mamy na niego opakowania. I tak: czy to sami potrzebujemy takową gdzieś przemycić, czy chcemy wysłać np. portfolio klientowi zazwyczaj nie mamy w czym. Poniżej zaprezentowany został sposób jak zgrabnie i szybko złożyć proste i niezwykle budżetowe opakowanko na naszego cd’eka… Swoją drogą tak przygotowany „pokrowiec” robi ciekawe i oryginalne wrażenie, co więcej może być konstruowane w zamyśle i odpowiednim celu np. promocyjnym! Sprawdźcie!

Zobacz cały wpis.

Podziel się tym wpisem

z-index dla youtube iframe video.

JavaScript|jQuery

16 maj 2012

Tajemniczo? Na problem powiązany z takim zagadnieniem trafiłem wczoraj. Zadanie polegało na osadzeniu klipu z youtube’a w standardowo generowanym iframie pod warstwami grafiki, tak by można było dodatkowo ów youtube’m nawigować – swoją drogą to bardzo ciekawy temat, ale chyba na inną okazję, pod zupełnie innym tytułem. Wróćmy jednak do klipu wideo, którego ramka zewnętrznie wymusza wysoki z-index – na tyle wysoki by skutecznie zakrywać wszystkie elementy pod nim, mimo że te ów wartość posiadają wyższą. Okazuje się że wartość taką wymusza includowany iframe w którym umieszczony jest klip z serwisu youtube. Dodatkowo nie przyjmuje on właściwości wmode=transparent, którą należy nadpisać. Jak to w życiu jednak bywa, można w prosty i łatwy sposób poradzić sobie z tego typu zdarzeniem przy pomocy javascriptu. Poniżej skrypt który trwale rozwiąże omawianą bolączkę…

1
2
3
4
5
6

$(document).ready(function () {
    $('iframe').each(function() {
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

I znów – proste rozwiązanie wstępnie nie ładnie wyglądającego problemu…

Podziel się tym wpisem

clouds.psd

Kreacja

10 maj 2012

Jakiś czas temu przygotowywałem kształty chmurek na potrzebny pewnej kreacji, która nie została wykorzystana w całości. Tym samym pomyślałem że warto podzielić się tym co pozostało. Poniżej link do pliku psd w którym znajdziecie trzy kształty chmurek które będziecie mogli wykorzystać wewnątrz własnych projektów.

» http://www.mediafire.com/i/?qevz7d3q93zn5ft

Podziel się tym wpisem

Poprawne wyświetlanie @font-face w Internet Explorer / IE.

CSS|CSS3

10 maj 2012

Szybki wpis dla tych którzy mają problem z wyświetlaniem typografii w formie @font-face w Internet Explorerze. Do zapisu otwartego formatu eot niezbędne jest dopisanie kilku znaczków kodu – ?#iefix. Powinno to m.w. wyglądać tak.

@font-face {
src: url(‘../fonts/font.eot?#iefix’) format(‘embedded-opentype’),
font-weight: normal;
font-style: normal;
}

To powinno pomóc w prawidłowym renderowaniu typografii dla IE. Wiadomo oczywiście że jakość wyświetlanego fonta może pozostawiać wiele do życzenia i w dużej mierze zależne jest to od przeglądarki, ale na to większego wpływu już niestety nie mamy.

Podziel się tym wpisem

Poprawa jakości dla CSS3 transform.

CSS3

8 maj 2012

Śmieszna sprawa… Sama właściwość jest chyba wszystkim bardzo dobrze znana, możemy wykorzystać ją właściwie w każdy dowolny sposób. Dzięki css’owemu transform mamy możliwość obracać obiekt, zmieniać jego skalę a także go deformować. Nikt jednak nigdy nie wspominał o jakości edytowanych elementów. A wszyscy dobrze wiemy że pozostawia ona wiele do życzenia – te chropowate krawędzie, fonty, piksel goni piksel… Widzieliście kiedyś wielokrotnie obróconą warstwę w Photoshopie? No właśnie. Co ciekawe wraz z dokładną specyfikacją ów css’owego zastosowania została uwzględniona również właściwość visibility-property, która skutecznie niweluje ów wątpliwie estetyczny problem. Zapis został przedstawiony poniżej; domyślną jego wartością jest oczywiście wartość visible.

.class {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}

Zapis musi uwzględniać użycie właściwości zarówno dla silników -webkit, -moz oraz pozostałych. Opisywane rozwiązanie świetnie sprawdza się w nakładanych na siebie elementach, animacjach czy umieszczonej wewnątrz deformowanego obiektu typografii. Cóż, przechodzi mi jednak przez głowę myśl o domyślnej interpretacji.

Podziel się tym wpisem

Ajax loader czyli jak przygotować ładowanie dla dynamicznej treści konkretnego bloku/diva.

CSS|CSS3|JavaScript

30 kwi 2012

Już chyba dwu-krotnie pisałem o przykładach wykorzystania ajaxowwych loaderów… Dziś możemy użyć do tego celu generowane obrazki gif lub skoczyć lekko w przyszłość i zaprzęgnąć canvas’y w html5 – jak więc to zrobicie w 100% zależy do was. Chciałbym jednak przedstawić wam rozwiązanie na to jak taki loader zaaranżować względem konkretnego bloku witryny. Być może dla ludzi od front-endu zagadnienie wyda się banalne i machną ręką, będą jednak i tacy którym zdecydowanie opcja ta się przyda. Osobiście słyszałem już nie raz od programistów z którymi współpracowałem – „te Łukasz, potrzebny mi jest jakiś ajaxowy loader”. Natchniony takimi właśnie sytuacjami pragnę stanąć na wysokości zadania i wesprzeć wspomnianą część środowiska web-developerów …

Zacznijmy od tego że sam obrazek z loaderem nie rozwiązuje problemu. Do pełnej satysfakcji potrzebny jest nam również kod css jak i html. Obrazek jednak będzie pierwszym z elementów który stworzymy. W tym celu przeniosę was na stronę dość popularnego generatora tzw. kręciołków. Witryna pozwali wam na wybranie jednej z kilku nastu możliwych opcji loaderów, nadania im odpowiedniej kolorystyki a także zapisu w postaci obrazu gif. Przy okazji generowanie ów elementu polecam zaznaczyć opcję „Transparent background” a także określenie koloru tła na jakim będziecie chcieli umieścić „ładowarkę”. Zdecydowanie ułatwi to wam dopasowanie obrazu pod kątek wypełnienia bloku nadrzędnego który okalał będzie loader. Idźmy dalej.

Przygotowaliście sobie już obrazek, wrzuciliście do katalogu z obrazami, co dalej? Czas na mały kod html.

1
2
3

<div class="ajax_loader">
    <div class="ajax_loader_container"></div>
</div>

Te trzy linie kodu należy umieścić w miejscu gdzie znajduje się blok w którym jakaś treść będzie dynamicznie doładowywana. Kodzik z loaderem wrzućcie do tego właśnie diva. Może to więc być lewa bądź prawa szpalta waszego serwisu, może to być mały 30 pikselowy blok gdzieś u dołu witryny, może to również być wewnątrz tagu body. Dowolność jest nieograniczona. Pamiętajcie jednak by takie ładowanie wskazać w miejscu jak najbardziej je sugerującym. Dla bloku w którym umieszczony zostanie loader należy dodać pozycje relatywną w css. A dalej już sam kod…

.main_block {
position: relative;
}

.ajax_loader {
width:60px;
height: 60px;
position: absolute;
top: 40%;
left: 42%;
z-index: 10;
background-color: rgba(255, 255, 255, 0.8);

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.ajax_loader_container {
background: url(‘img/ajax-loader.gif’) center center no-repeat;
position: relative;
width:60px;
height: 60px;
}

Wielkość diva o klasie ajax_loader, który będzie okalał nasz loader zależy oczywiście od jego rozmiaru, warto dodać parę pikseli by sztucznie lecz dość uniwersalnie uzyskać efekt paddingu. Dla uwidocznienia kręciołka blokowi który go obejmuje nadaliśmy biały kolor tła z lekką przezroczystością (tu wróćcie myślami do generowania gifa i jego parametrów). Oddalony jest on w pozycji absolutnej od górnej krawędzi nadrzędnego diva o 40% – po to by był m.w. w zasięgu wzroku, jeśli część witryny która aktualnie jest ładowana jest dość długa/wysoka możecie tę odległość zmniejszyć. Co do centrowania elementu użyty został zapis oddalenia bloku od lewej krawędzie o 42%. Będzie to chyba najbardziej prawidłowy zapis w przypadku podobnych rozmiarów samego obrazu który wykorzystaliśmy jako loader. Gdy tylko będzie on większy można oddaleniem od lewej krawędzi odpowiednio manipulować tak by loader znajdował się dokładnie na środku bloku rodzica. Ponad to kontener z obrazem otrzymuje zaokrąglone rogi oraz wałściwość z-index na 10, tak by zawsze był on nad blokiem ajaxowego ładowania – w przypadku gdy wykorzystujecie wyższe wartości adekwatnie do nich zmieńcie również i tę dla omawianego diva. Element o klasie ajax_loader_container zawierał będzie obraz z wygenerowanym wcześniej ajaxowym ładowakiem. W środku elementu możecie umieścić go dzięki klasycznemu centrowaniu tła w danym elemencie lub używając po prostu zapisu procentowego 50/50.

Jeśli chodzi o IE, jedyne co musicie zmienić to tło. Do tego celu zamiast wykorzystania rozwiązania :rgb w CSS3 dodajcie zwykły półprzezroczysty obrazek który powielicie. Może to być również zdefiniowany kolor, będzie on tym samym najzwyklejszym tłem.

I to tyle jeśli chodzi o to zagadnienie. Powodzenia! W razie pytań piszcie.

Podziel się tym wpisem
Starsze wpisy

witam i zapraszam

Kategorie

Archiwum

  • djlukas: To na pewno musi lecieć jakimś ajaxem i konieczne jest określenie jakiejś formy dzielenia tych s [...]
  • szyryn: Dodajcie sobie po prostu pętlę w jscript lub php przy generacji kodu html i sprawa załatwiona. T [...]
  • djlukas: W wolnej chwili chętnie to zrobię, bo rzeczywiście może być to potrzebne :) [...]
  • art: Silverowi chyba chodziło o to w jaki sposób można dogenerować kolejne numery - odpowiedź jest p [...]
  • djlukas: Co masz na myśli pisząc dodawać strony? Pytam ponieważ można to rozumieć wielorako :) napisz d [...]

Demos

Twitter

  • Future toy. http://t.co/M2Vo4QYi
    2012/05/20 12:59 by Instagram
  • my 100 000 track at last.fm http://t.co/G7sLkDjn
    2012/05/18 09:24 by Twitter for Mac
  • Mobile facebook feed just like mobile facebook wall.
    2012/05/17 13:52 by Twitter for iPhone
  • instagram digital camera :) nicehttp://t.co/wcU76ErG
    2012/05/17 10:44 by Twitter for Mac
  • opera still without css perspectives ...
    2012/05/17 05:14 by Twitter for Mac
  • I'm going to In Flames at Campus SGGW in Warsaw, Poland - Jun 2 http://t.co/Kp80MQoz
    2012/05/17 03:09 by Bandsintown
  • much more than @onGameStart conference page - awesomehttp://t.co/h4xVNFXP
    2012/05/15 17:51 by Twitter for Mac
  • FREE video offer ends today! 2.5hrs of Photoshop painting projects from @digital_tutors: http://t.co/dKXhILNj
    2012/05/15 17:11 by Twitter for iPhone
  • Chrome 18, it's on!
    2012/05/15 16:33 by Twitter for iPhone
  • #noty need some alerts, info notifications? this is it!http://t.co/rANbk4j8
    2012/05/14 07:37 by Twitter for Mac

Mikroblog

    Penultimate w rękach Evernote / 08 maj 2012

  • Evernote nabywa dziś prawa do Penultimate, aplikacji która służy do ręcznego notowania. Penultimate to wg Apple czwarta najlepiej sprzedająca się aplikacja na iPada w historii. Swoją popularność zawdzięcza przede wszystkim intuicyjnemu interfejsowi oraz świetnemu odtwarzaniu pisma odręcznego. Wraz z przejęciem przez Evernote Penultimate zyska synchronizację z usługami serwisu, pozostanie jednak odrębną aplikacją. W przyszłości w Evernote pojawią się też funkcje działające w oparciu w pismo odręczne, jednak szczegóły nie są na razie znane. Więcej na ten temat możecie zobczyć na youtube. / MyApple

    • Diablo III / 17 mar 2012

  • Po dwunastu latach oczekiwań, firma Blizzard - producent kultowej serii gier Diablo, ogłosiła, że trzecia część tej gry ukaże się 15 maja 2012 r. Miłośnicy Diablo muszą bardzo długo czekać na kolejną część swojej ulubionej gry, jednak już wiosną ich oczekiwanie dobiegnie końca. Gra zostanie wydana w wersji dla komputerów PC i Mac, w standardowej i kolekcjonerskiej edycji. Tytuł można już zamówić przez Battle.net - cena została ustalona na poziomie 59,99 €. Co ciekawe, jeśli ktoś zdecyduje się opłacać przez rok abonament World of Warcraft (innej gry Blizzarda), to w prezencie dostanie cyfrową kopię Diablo III. Promocja kończy się z dniem 1 maja 2012 r. / MyApple

    • html5 accessibility / 14 lut 2012

  • Zainteresowanym rozwojem html5 polecam odwiedzić witrynę html5accessibility.com - sprawdzicie tam która z przeglądarek najlepiej interpretuje standardy nowej (bo ciąż nią jest) "technologii". Firefox na tym polu wypada zdecydowanie najlepiej, dalej daleko za lisem stoi Chrome. Wszystkie z poszczególnych tagów języka w nowej specyfikacji dokładnie opisane i oznaczone pod względem zgodności znajdziecie właśnie tam. Warto zajrzeć przed każdym nowo-rozpoczętym serwisem.

    • Prezenty / 03 sty 2012

  • Uwaga, uwaga! Apple udostępniło na czas świąt specjalną aplikację dzięki które przez 12 dni około świąteczno-noworocznych można pobierać zupełnie za darmo ciekawe aplikacje z AppStore a także media prosto z iTunes. Co prawda już prawie po ptakach ale może jeszcze niektórzy z was załapią się na coś co przypadnie wam do gustu. Zostały 3 dni. Aplikacja nazywa się 12 Days of Christmas i oczywiście pobrać można ją ze sklepu AppStore. I tak dziś np. wyhaczyć można live single James'a Morrisona...

    • Georgia go Pro / 23 lis 2011

  • Po latach globalnej ekspansji wielu z bardzo powszechnie stosowanych fontów twórcy tych najbardziej popularnych postanowili odświeżyć linie i wydać je w wersji Pro. Mowa o Georgi i Verdanie. Skala z jaką dzisiejsze witryny www wykorzystują owe jest tak ogromna że wraz z rozwojem technologii związanych z webdesignem postanowiono pójść krok dalej by wdrożyć nowy charakter tych jakże popularnych rodzajów kroju. Dziś są one jednak płatne i pełna licencja związana z użytkowaniem jest bagatelnie kosztowana, lecz nadzieje na rozpowszechnienie ich pozwalają być optymistycznie nastawionym względem przyszłości wizualnej prezentacji kontentu na naszych stronach www. Sprawdźcie witrynę promującą nowe wersje Georgi i Verdany.

    • 4S w Polsce / 04 lis 2011

  • Jak zostało to zapowiedziane długo nie kazano nam - Polakom - czekać na nową odsłonę iPhona dostępnego do reki. Już od 11 listopada będzie można nabyć go w Polskim Apple Store. Dziś jednak można już składać przedpremierowe zamówienia. Tym samym rezerwować możemy własny egzemplarz nowej czwórki. Obok tych cudownych wiadomości nie bez uwagi pozostać muszą pozostałe jabłkowe produkty których ceny, nieznacznie, lecz jednak lecą w dół. Nie wykluczone że tuż po premierze nowego smartphona, poprzednie wersje będą dostępne w jeszcze niższych cenach. Ponad to uwagę zwracają wybrane modele iPadów oraz MacBooków których kwoty również delikatnie wywindowały z siłą grawitacji...

    • jQuery Standards Team / 25 paź 2011

  • jQuery powołuje specjalny organ wsparcia tworzony przez i dla userów / developerów. Od wczoraj można dołączyć do specjalnego teamu który będzie definiował standardy wsparcia dla jQuery. Ma to również mieć na celu możliwość zgłaszania błędów, sugestii oraz niezbędnych korekt dla biblioteki by ta była coraz bardziej elastyczna i kompatybilna z szeroką gamą przeglądarek istniejących na rynku. Super!

    • Tani iPad / 19 paź 2011

  • Już 15 listopada rusza wysyłka nowego budżetowego tabletu od Amazon. Urządzenie dostępne jest w trzech wersjach: Kindle Classic, Kindle Touch oraz Kindle Fire. Ten ostatni wyposażony w system operacyjny Android staje się mocnym pretendentem do tego by zatrzymać szerzącą się z dnia na dzień ekspansję tabletu od Apple. Czy tak się stanie? Być może cena 199$ to coś co mocno wpłynie na fakt decyzji o zakupie jednego lub drugiego urządzenia. Nasuwa się jednak pytanie czy nowy produkt od Amazon będzie tak dobry jak iPad. Życie pokazało że konkurenci mimo wielu zalet nie potrafili zmienić reali jakie kierują tym rynkiem. Nie wątpliwie cena to wielki atut, lecz czy to wystarczy?

    • Zanim go zobaczysz / 11 paź 2011

  • Wszyscy czekaliśmy (my fani Apple) na to co 4 października zobaczymy podczas kolejnej konferencji, która traktować miała głównie i przede wszystkim o nowym modelu iPhona. Po całej masie plotek i spekulacji większość oczekujących wręcz na 100% przekonana była o tym że zobaczymy nowy model smartphona sygnowany numerem 5. Cóż, tak się nie stało. Nowy szef giganta Tim Cook przedstawił dopracowany, szybszy, wydajniejszy lecz przede wszystkim ten sam model narzędzia które już znamy. Ehhh, może nie ten sam, lecz nie inny - odświeżony. Dostaliśmy iPhona 4S. Wiele więc nadziei zgasło - po zdrowym przemyśleniu tego wszystkiego ogrom fanów zdało sobie jednak sprawę że to jest właśnie to na co czekali. Pierwszego dnia więc zamówiono ponad 1 000 000 sztuk urządzeń których tak naprawdę nie ma jeszcze fizycznie w sklepach... To się nazywa siła marketingu! Komentarz do tej całej sytuacji jaki nasuwa się w konsekwencji jest prosty i zwięzły - tak miało być, i wszyscy o tym bardzo dobrze wiedzieli, nikt jednak nie wiedział o tym co stanie się chwilę później... Odszedł Seve Jobs.

    • iTunes Polska / 08 wrz 2011

  • Pięknie? Pojawiły się dziś informacje o tym jakoby Apple szykowało się do wdrożenia na polski rynek iTunes Store. Co za tym idzie użytkownicy z naszego kraju będą mogli bezpośrednio przy życiu programu iTunes legalnie nabyć muzykę za całego świata, za całej ogromnej ponad 2 milionowej biblioteki utworów muzycznych. Są to na razie jedynie plotki i domysły. Informacja o tym że we wrześniu takie wydarzenie będzie miało miejsce pojawiła się w czerwcu, a źródła były nie w pełni wiarygodne i oficjalne. Warto jednak ślepo wierzyć że domysły i gdybania są słuszne i już za kilka dni będziemy mogli za parę groszy wyhaczyć dużo dobrej i legalnie dystrybuowanej muzyki!

    • Php Storm 2.1.3 / 01 wrz 2011

  • Jet Brains przedstawiło kilka dni temu nową, poprawioną wersję dla PhpStrom 2.1. Tym razem mamy upgrade do wersji 3 a więc - 2.1.3. Co w nowej odsłonie? W zasadzie nie wiele, poprawionych zostało kilka drobiazgów takich jak choćby margowanie plików po SVN, czy integracja JavaScriptu wewnątrz pliku oddzielnego środowiska. Z moich natomiast wstępnych oględzin wynika że usprawniona została wydajność względem dużych plików mieszczących sporo kodu takiego jak choćby CSS. Wciąż najlepszy!

Kalendarz

Maj 2012
P W Ś C P S N
« kwi    
 123456
78910111213
14151617181920
21222324252627
28293031  

Copyright © 2007 - My Loved Creation – Frontend Web Development. Pharmacy online