Wpisy na temat technologii HTML i CSS

Zmiany polityki cenowej i nowe limity w Google Maps API

W czerwcu 2018 roku Google wprowadziło znaczące zmiany w niektórych usługach Google Maps. Dotyczą one zarówno poszerzenia zakresu usług, jak i wprowadzenia płatnego planu taryfowego dla wszystkich właścicieli stron internetowych – niezależnie od tego, jaki ruch generują witryny. Sprawdź, jak wygląda nowe rozliczenie z Google Maps API i jakie inne zmiany weszły w życie w czerwcu 2018 roku. Czytaj dalej

Pliki cookies i spółka, czyli w sieci nigdy nie jesteś anonimowy

Trzy lata temu na wszystkich szanujących się stronach internetowych pojawiły się komunikaty dotyczące cookies. Ciasteczka to dane przechowywane na komputerze lokalnym w postaci pliku tekstowego. Pliki cookies gromadzimy podczas wędrówek po internecie, łącznie składać się one mogą na kompleksowy obraz użytkownika internetu, co wcale nie jest wiadomością dobrą. Internet, który wie o nas za dużo, nie tylko uprzejmie podsuwa nam dopasowane do naszych potrzeb treści, ale stanowi też bank danych, często wrażliwych, które w niepowołanych rękach stanowić mogą potężną broń.  Niestety, sposobów na to, by dowiedzieć się o nas wszystkiego, jest więcej, niż tylko powszechnie znane cookies, zaś czyszczenie historii czy tryb incognito nie gwarantują nam niewidzialności.

Podstępne cookies, czyli na czym problem polega:

Ciasteczka oraz podobne środki wykorzystania nowych technologii wspomagają marketing poprzez jego automatyzację oraz służą jako narzędzia do usprawnienia procesów sprzedażowych. Na podstawie zgromadzonych danych dotyczących zainteresowań konsumenta, czynników demograficznych czy czynności podejmowanych na danej witrynie, oprogramowanie identyfikuje internautę, a następnie kieruje do nich spersonalizowany specjalnie dla nich przekaz marketingowy w postaci reklam, które w szczególności mogą zainteresować zidentyfikowany lead. Również mailowy spam reklamowy oraz wciąganie do baz danych zawdzięczamy ciasteczkom. Wszystko to składa się na automatyzację marketingu i gromadzenie danych przez marketingowców.

Przykłady takich danych to :
• typ przeglądarki,
• pluginy zainstalowane w przeglądarce,
• czas lokalny,
• preferencje językowe,
• typ urządzenia,
• wielkość ekranu urządzenia, głębia kolorów wyświetlacza, czcionki systemowe.

Nie tylko zwykłe cookies – również inne mechanizmy szpiegowskie, na które trafić możemy w internecie:

  • Ciasteczka FLASH – działają w ten sam sposób, co zwykłe cookies, czyli gromadzą dane, jednak ich informacje są używane przez program Adobe Flash Player, który lokalnie je przechowuje. Wykazują one podobne zagrożenie prywatności, jak normalne pliki cookie, jednak nie jest łatwe ich blokowanie, ponieważ ich wykrycie nie jest wspierane natywnie przez przeglądarki internetowe. Jednym ze sposobów, by je wykryć i kontrolować to wykorzystanie rozszerzeń firm trzecich lub dodatków do przeglądarki. Można również odinstalować dodatek Flash dla przeglądarki, jednak może to znacznie ograniczyć nasze możliwości w sieci. Jak działają ciasteczka FLASH? Przeglądarka internetowa odczytuje i tworzy ich kopię, nie wysyłając bezpośrednio pakietów z lokalnej maszyny. W badaniu z 2009 roku, ciasteczka Flash okazały się popularnym sposobem na gromadzenie informacji o użytkowniku na 100 najpopularniejszych stronach WWW.
  • Evercookie – przedrostek „wszech” informuje nas bez ogródek, że mamy do czynienia z poważnym zawodnikiem. „Wszechciastka” to aplikacje oparte na języku JavaScript, które produkują ciasteczka w przeglądarce internetowej. To, co je wyróżnia, to wyjątkowa odporność – usunięcie „wszechciastka” skutkuje jego wskrzeszeniem w innej, dostępnej postaci, np. ciastka Flash.

Co dalej ze zgromadzonymi danymi?

Informacje zebrane przez ciastka trafić mogą w kilka miejsc, a w każdym z tych miejsc zrobić z danymi można naprawdę imponujące rzeczy:

  • Google AdSense – czyli usługa, która umożliwia wydawcom w witrynach partnerskich Google publikować tekst, obrazy, video oraz interaktywne treści reklamowe, które są kierowane do odwiedzających witrynę na podstawie kontekstu stron odwiedzanych przez użytkownika.
  • Google AdWords – system reklamowy, pozwalający na wyświetlanie linków sponsorowanych w wynikach wyszukiwarki Google i na stronach współpracujących w ramach programu AdSense.

Warto pamiętać:

nawet jeśli uważanie, że utrata prywatności nie jest wysoką ceną za spersonalizowane, przydatne reklamy, starajcie się unikać ciastek, chociażby poprzez czyszczenie historii. To ważne – trackery zwyczajnie spowalniają internet i utrudniają korzystanie z niego.

Uważajcie na ciastka!

On-site optimization: zaklęcia przy optymalizacji SEO.

Do wpojonego w dzieciństwie zestawu magicznych słów z „proszę” na czele, każdy administrator czy twórca strony internetowej, któremu jej pozycja w wyszukiwarce nie jest obojętna, powinien dodać jeszcze kilka słów-wytrychów (elementów tzw. on-site optimization). Są takie programistyczne zaklęcia, które otwierają możliwość walki o top10 w Google – dziś poznamy przynajmniej kilka z nich.

1. W3C – The World Wide Web Consortium – organizacja, która stworzyła wytyczne dla strony głównej i podstron serwisów. Trzymanie się tych wytycznych to podstawa sukcesu strony. Nie wiesz, czy Twoja strona spełnia wymagania? Zawsze możesz to sprawdzić dzięki dostępnym w internecie walidatorom dla kodu HTML i dla kodu CSS.

2. DOCTYPE – kodowa deklaracja technologii wykonania strony. To z deklaracji DOCTYPE przeglądarka dowiaduje się, z jakim typem dokumentu ma do czynienia. Deklaracja po prostu musi znaleźć na stronie i musi odpowiadać rzeczywistości. W przypadku HTML5 wystarczy <! DOCTYPE html>. Dlaczego przywołuję HTML5…? Ponieważ…

3. HTML5 – język, zgodnie z którym powinna być zbudowana nowoczesna strona. Należy pamiętać, że użyty system znaków powinien zostać przez stronę zasygnalizowany: dla HTML5 będzie to <meta charset=”UTF-8″/>. Wszystkie niestandardowe znaki powinny zostać zakodowane poprzez tzw. encje html-owe (np. £ to &pound).

4. <table> – znacznik przydatny wyłącznie przy przedstawianiu danych tabularycznych. Nie powinien być w żadnym razie stosowany do budowania struktury czy layoutu strony. Skoro zaś mowa o budowie strony: nie należy na tym etapie stosować elementów graficznych (takich jak przeźroczyste gify) do kontrolowania wysokości czy szerokości. Elementy graficzne nie powinny też być stosowane jako nawigacja.

5. <meta name=”description”…> – znacznik zawierający opis strony. Powinien się znaleźć na każdej podstronie.

6. <label>, czyli etykiety. Przydatne rozwiązanie do kontroli i opisu pól formularzy.

7. <title> – niezwykle ważny znacznik, który na każdej stronie prezentuje pozycjonowane frazy. Najważniejsze na początku wyliczanki, bardziej ogólne dalej. Maksymalnie 70 znaków ze spacjami.

8. <meta name=”keywords”…> – znacznik służący do wyodrębnienia występujących na stronie słów kluczowych. Warto pamiętać, że ilość powtórzeń danego słowa kluczowego na danej podstronie to maksymalnie 2-5% z odmianami w stosunku do całej treści (bez kodu).

9. Nagłówki <h1>,<h2>,<h3>… – nagłówki zawierające słowa kluczowe i ich odmiany. <h1> powinien składać się z dwóch-trzech słów, pozostałe mogą być dłuższe.

10. <londesc> – atrybut, który powinien się pojawić, jeśli umieszczamy na stronie element graficzny z długim opisem. Należy pamiętać, że opisy atrybutów graficznych są ważne – powinny zawierać słowa kluczowe.

Te dziesięć elementów optymalizacji (on-site optimization), które przywołałem, przydaje się stronom dbającym o pozycję.  Wiadomo, że to tylko dziesięć pojęć z morza haseł istotnych w SEO, co więcej, każde jest jedynie zasygnalizowane. Zachęcam do samodzielnej dalszej eksploracji tematu pozycjonowania, niedługo postaram się pomóc nowym postem:).

Rozmiar ma znaczenie, czyli jak najlepiej skalować ikony

Mamy tu do czynienia z pewną klęską urodzaju: olbrzymi wybór różnych ekranów, a co za tym idzie – rozdzielczości, zmusza grafików do nieustannej gimnastyki, czyli dostosowywania stron i aplikacji www poprzez skalowane ikony. Jednym z rozwiązań jest osadzanie ikon jako czcionki (poprzez @font-face), pomagają w tym aplikacje takie jak http://icomoon.io/app/. Można też wykorzystać zalety grafiki wektorowej w formacie SVG i skorzystać z takich narzędzi jak Grunticon. Warto poznać wady i zalety obu rozwiązań, zanim zdecydujemy na wdrożenie któregoś z nich w naszym projekcie.

#1Co zrobić, jeśli komplikujemy sobie życie udziwniając fonty, różnicując je w obrębie strony lub stosując niestandardowe?

SVG daje szansę zróżnicowania rangi ikon i ładowania ich osobno, najpierw te bardziej znaczące, później kolejne, mniej potrzebne użytkownikom. Font-face pozwala na różnicowanie fontów. Jeden do tekstu, inny do ikon. Można? Można.

#2Niektóre urządzenia mają problem z „Private Unicode Area”

W zwiazku z tym, że jest możliwość nadpisywania znaków (glyphs) w „Private Unicode Area” i wykorzystania tego mechanizmu do serwowania wybranych znaków,  istnieją urządzenia które ten mechanizm wykorzystują. Zapisywanie tych znaków może nastepować w różnych zakresach  standardu Unicode, stąd powoduje to konflikty.

#3Czarne kwadraty i krzyżyki na Opera Mini oraz inne zniekształcenia.

Nie da się przewidzieć wszystkich problemów, które mogą zaistnieć na różnych stronach. 100-procentowego poczucia bezpieczeństwa nigdy mieć nie będziecie, ale według niektórych znawców tematu, dzięki SVG możecie chociaż trochę odetchnąć. Polecam tekst Iana Feathera TU.

#4Chrome Canary i Beta robią z fontem straszne rzeczy.

Zauważyliście? Z SVG nie ma tego problemu. Po prostu.
Jednocześnie: w stabilnej wersji Chrome face-font sobie radzi bez problemów.

#5W Firefoksie ikony są wyraźniejsze…

… w efekcie nie do końca jesteśmy w stanie zapanować nad ostatecznym wyglądem strony. Z SVG możemy normalizować wygląd wszystkich elementów dla każdej przeglądarki.

#6Wygenerowane treści.

Jeśli chcesz użyć font-icon w CSS musisz je prawidłowo skojarzyć z wygenerowanymi treściami. Nie zawsze jest to łatwe, zwłaszcza, jeśli masz już spory zasób „:before” i „:after”. Można oczywiście kombinować z umieszczeniem ich w linii, ale wiadomo, że to się może skończyć pominięciem lub zapomnieniem, zwłaszcza w dużych aplikacjach. W SVG nie ma tego problemu – możesz stosować wiele warstw i umieszczać ikony chociażby w tle innych treści.

#7Umieszczanie wszystkich elementów we właściwych miejscach wcale nie jest łatwe.

Z face-font – warto dodać. SVG daje możliwość rozdzielenia na poszczególne warstwy konkretnych treści i kombinowanie z rozmiarami pod kątem poszczególnych przeglądarek.

#8Chcemy multikoloru.

I jesteśmy skazani na SVG, bo tylko tam mamy opcję multikolor, a nie pojedyncze kolory, jak w przypadku font-face. Teoretycznie, nawet w font-face możemy problem obejść, stosując warstwy przy tworzeniu ikon. Jest to jednak działanie ryzykowne. Jednocześnie, należy zaznaczyć, że font-face ma więcej możliwości działań związanych z kolorami. Na dodatek, łatwo się z nich korzysta.

#9Mamy ochotę na animację.

I SVG nam na to pozwala. W przeciwieństwie do font-face.

Podsumowując:

Sporo zależy od projektu, jeszcze więcej od osobistych preferencji. Stawiacie na font-face czy SVG?

Frameworki do responsive design, które warto znać

Często zdarza się, że w celu usprawnienia i przyspieszenia pracy nad frontendem aplikacji www korzystamy z różnego rodzaju frameworków. Najbardziej znane to Foundation i Bootstrap. Wiadomo, że najbardziej lubimy te piosenki, które znamy, ale warto przyjrzeć się także tym mniej popularnym rozwiązaniom, bo może któryś z nich skuteczniej sprosta zadaniu i lepiej dopasuje się do naszych potrzeb.

Na co wypada zwrócić uwagę:

  • Semantic UI

    Twierdzą, że są inni niż wszyscy i odmienność tę prezentują TU. W pełni responsywny framework z przyjemnym interfejsem.  Co ma nam do zaoferowania? Buttony, ikony, które można formatować – zmieniać rozmiar i kolor, popularne ikony, takie jak odnośniki do mediów społecznościowych, wszelkie etykiety i dużo, dużo więcej. Współpracuje z WordPressem i Tumblr. Zachęceni? TU to można ściągnąć.

  • Ionic

    Wciąż nie do końca gotowe, ale już zachwyca – wyjątkowo piękny frontend framework, który można sobie ściągnąć w wersji alpha. Darmowe, ogólnodostępne narzędzie stworzone z myślą o interaktywnych aplikacjach mobilnych w HTML, ale też CSS i JavaScript. Świetnie współpracuje w tandemie Sass i AngularJS. AngularJS jest zalecany, bo pozwala nam z Ionic wyciągnąć wszystko, co najlepsze, ale możecie też poprzestać na CSS bez Anglar. Zainteresowani? Klikamy TU.

  • Almost Flat UI

    Almost Flat UI bazuje na Foundation Framework, czyli jeśli lubicie jedno, polubicie też pewnie drugie, co więcej, narzędzie obsługiwać będziecie właściwie intuicyjnie. Almost Flat sprawdza się przy tworzeniu widżetów, takich jak [ czy to ma polskie odpowiedniki? CSS panels, pricing tables, thumbnails with nice hover effects, breadcrumbs, tabs, alerts, and tool tips]. Chcecie? To bierzcie STĄD.

  • Ulkit

    Niezły framework, przydatny szczególnie przy tworzeniu szybkich i mocnych interfejsów. Dostępny za darmo, z solidnym zapleczem interesujących dodatków. Godna odnotowania jest chociażby możliwość pisania i podglądania zmian w czasie rzeczywistym. Do ściągnięcia TU.

  • Bootflat

    Framework, który bazuje na Twitter Bootstrap 3. Możliwe są dwie wersje: Bootflat Default UI Skin i Bootflat Square UI Skin. Jeśli jesteś fanem płaskich rozwiązań, to może być opcja dla Ciebie. Pobierz ją sobie TU.

  • Brick

    Framework ze stajni Mozzilli. Nie jest to alternatywa dla Foundation czy Bootstrap, ponieważ nie jest to kompletne narzędzie do tworzenia frontendów. Brick oferuje komponenty do aplikacji mobilnych. To wciąż beta, ale można zaryzykować TU.

Oczywiście – jest wiele frameworków, który nie trafiły na powyższą listę, choć powinny. Jakieś sugestie?