Co to jest Google Maps API?

Google Maps API (Application Programming Interface – Interfejs Programowania Aplikacji) jest usługą, która umożliwia osadzenie mapy na każdej stronie internetowej. Mapki z zaznaczoną lokalizacją firmy pojawiają się zazwyczaj w zakładkach z kontaktem. W przypadku wielu firm takie narzędzie jest niemal obowiązkowym elementem strony www – znacznie ułatwia użytkownikom odnalezienie lokalizacji firmy.

Aby zaimplementować API na swoją stronę internetową, do niedawna należało założyć konto Google i wygenerować klucz API dla wybranych stron. Z Google Maps API można było korzystać zupełnie bezpłatnie (plan Standard) lub wybrać wersję płatną (plan Premium), zawierającą poszerzony zakres funkcjonalności. To jednak uległo zmianie w czerwcu 2018 roku.

Wielkie zmiany w Google Maps

Jedną ze zmian, które wprowadziło Google, jest nowa oferta skierowana do firm trudniących się np. przewozem ludzi czy towarów. Dzięki niej istnieje możliwość wgrania nawigacji Google Maps do firmowej aplikacji i skorzystania z opcji, takich jak lokalizowanie pojazdów w czasie rzeczywistym za pośrednictwem map Google. Zgodnie z założeniami Google podobne innowacje mają podnieść jakość usług, świadczonych przez firmy.

Poza tym wprowadzono też podział usług aplikacji Google Maps na mapy, trasy i miejsca, dzięki czemu wyszukiwanie i korzystanie z nowych funkcjonalności ma być łatwiejsze.

Mimo wymienionych przykładów usprawnień dużo bardziej znaczącą zmianą, którą mogli odczuć zarówno właściciele stron, jak i użytkownicy, wydaje się wprowadzenie płatnego planu taryfowego za korzystanie z Google Maps API na stronach www. W lipcu 2018 roku zaczęły obowiązywać nowe zasady płatności dla użytkowników klucza API. Jakie? Sprawdźmy.

Ile kosztuje Google Maps API?

Na stronach, których właściciele nie zainstalowali nowego klucza po wprowadzeniu zmian przez Google, mapy po prostu zniknęły. Zamiast nich pojawiło się szare, puste pole. Co trzeba zrobić, aby nadal korzystać z Google Maps i wyświetlać fragmenty map na stronach internetowych?

• Zanim założysz konto rozliczeniowe, możesz korzystać z konta wygenerowanego automatycznie. Będziesz mieć do wykorzystania $200 kredytu. Gdy wykorzystasz limit, klucze API przestaną działać.
• Aby nie dopuścić do unieważnienia się klucza, musisz otworzyć konto rozliczeniowe Google Cloud Platform z podpięta do niego kartą kredytową.
• Gdy do swojego konta billingowego dodasz kartę płatniczą, w każdym miesiącu będziesz otrzymywać $200 kredytu.
• Po przekroczeniu kredytu za korzystanie z API należy płacić. Wysokość stawek jest obliczana od 1000 zapytań. Działa to na podstawie modelu zbliżonego do pay-as-you-go. Na przykład, gdy w czasie obowiązywania darmowego limitu użytkownicy 14 000 razy załadują dynamiczny widok ulicy, na której znajduje się Twoja firma, za każde kolejne 1000 odsłon trzeba będziesz musiał zapłacić $14. Po przekroczeniu kolejnego progu, czyli 100 000 osłon, cena za każde kolejne 1000 odsłon będzie wynosiła $11,20.

Wiele firm (szczególnie niewielkich) oraz stron, które nie generują dużego ruchu, może zmieścić się w kwocie $200. Mimo to stworzenie konta billingowego i podanie danych karty kredytowej jest konieczne od dnia 29.10.2018.

Aby korzystać z Google Maps API za darmo, możesz ustawić limitu budżetu, aby nie przekroczyć $200. Dzięki temu będziesz mieć pewność, że żadne opłaty nie zostaną pobrane z Twojej karty. Musisz jednak pamiętać, że w takiej sytuacji po osiągnięciu limitu darmowych wyświetleń, mapka przestanie być wyświetlana na Twojej stronie.

O tym, jak w inny sposób (bezpłatny) osadzić mapę Google na swojej stronie internetowej, przeczytasz w kolejnym wpisie.

The post Zmiany polityki cenowej i nowe limity w Google Maps API appeared first on ISPRO® - Systemy Internetowe.

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!

The post Pliki cookies i spółka, czyli w sieci nigdy nie jesteś anonimowy appeared first on ISPRO® - Systemy Internetowe.

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:).

The post On-site optimization: zaklęcia przy optymalizacji SEO. appeared first on ISPRO® - Systemy Internetowe.

#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?

The post Rozmiar ma znaczenie, czyli jak najlepiej skalować ikony appeared first on ISPRO® - Systemy Internetowe.

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?

The post Frameworki do responsive design, które warto znać appeared first on ISPRO® - Systemy Internetowe.