Keresőoptimalizálás gyorstalpaló előadás

Nagyon jól sikerült a Drupal Hétvége 2011, innen is köszönöm a szervezőknek. A SEO gyorstalpaló előadásomnál ezt a prezi-t használtam:

Update: ustream.tv kötvetítés itt:

Az idei előadásban az általános dolgokat mutattam be. A Drupal specifikus dolgokról 2010-ben beszéltem, a Drupal keresőoptimalizálás nevű előadásban. Fordított sorrendben több értelme van a dolognak, úgyhogy előbb az idei "SEO gyorstalpaló"-t nézzétek végig, utána a 2010-est.

A robots.txt tiltás nem mindig azt csinálja, mint amire számítunk.

Elképesztő dolog történt velem nemrég. Egy régi kedves ügyfelem, akinek webáruházat készítettem felhívott, hogy valami gond van, mert bejött a boltba egy vásárló aki a weboldalon feladott rendelésére, nem kapott rá semmi választ. Mutatta az emailt amit a webáruház küldött neki automatikusan, szerepelt is benne rendelés azonosító. De mi nyomát sem találtuk a megrendelésnek az adatbázisban.

Kiderült, hogy nem a valódi weboldalon adta fel a rendelését, hanem a fejlesztői szerveren. Meg is találtam a megrendelést ott. A Google küldte a fejlesztői szerverre a vásárlót.

Ez a fejlesztői szerver jelszóval védett volt, de egy rövid időre ki kellett kapcsolnom a jelszó védelmet, egy külső rendszer integrációja miatt. Hogy, hogy nem, a Google anno megtalálta és indexelte a félkész oldalt. Ezt észre sem vettük addig, amíg nem élesítettük a közben elkészült weboldalt. Ekkor keresett rá a saját nevére az ügyfél a Google-ben, és látta hogy a rossz címet hozza ki a valódi weboldal helyett.

Ekkor pár hétig átirányítást állítottam be a fejlesztői szerverről, a valódi honlapra. De később ezt levettem és visszaállítottam a jelszavas védelmet és beállítottam robots.txt tiltást a teljes fejlesztői szerverre. Na ez így együtt hiba volt, mint később kiderült.

Mindez hónapokkal ezelőtt történt. Most megint le kellett vennem a jelszavas védelmet, de a robots.txt tiltás megmarad. És kb. másfél nap alatt a Google képes volt annyi látogatót küldeni a fejlesztői szerverre, hogy abból lett két valódi vásárlás.

Mi történt? A robots.txt tiltást figyelembe vette a Google és soha többet nem töltötte le azokat az oldalakat, amiket egyszer már beindexelt a fejlesztői szerverről. De ennek ellenére hónapokon át küldözgette oda a látogatókat, vásárlókat. Amikor egy pillanatra megszűnt a jelszavas védelem, gyorsan feladták a rendelést a szegény elkeseredett vevők.

Mi ebből a tanulság? Ha el akarsz tüntetni egy címet a Google indexből, arra nem az a megoldás, hogy robots.txt-ben letiltod. És még mi a tanulság? Hogy a link nem minden a Google-nél sem, mert egy árva link sem mutat a fejlesztői szerverre.

Google Maps API használata – 2. Események

Itt az ideje, hogy folytassam a Google Maps API példákat. Az első részben a leg alapvetőbb példát néztük meg, a GMaps API „Hello World”-jét. Most is egy egyszerű dolgot fogunk megnézni, az eseményeket.

Események

A térképnek és a rajta elhelyezett objektumoknak különböző eseményei vannak, amikre fel tudunk iratkozni. Egyelőre csak a térkép objektummal tudunk dolgozni, ezért nézzük meg most ezt:

A google.maps.Map objektum eseményei:

  • zoom_changed
  • center_changed
  • bounds_changed

A nevek elég egyértelműen meghatározzák az eseményeket, sorban: ha változik a zoom, ha változik a középpont és ha változik a befoglaló keret. A dokumentáció szerint az első kettőnél még nem biztos, hogy a befoglaló keret is megváltozott, magyarul nem mindig lehet tudni, hogy pontosan mit is tartalmaz a térkép. A bounds_changed eseménynél viszont már lehet, a gyakorlatban is ez a leghasznosabb, így nézzünk ezzel egy példát.

Példa esemény feliratkozásra

A szokásos módon létrehozzuk a térkép objektumot, ezt már mutattam az első példában:

var myOptions = {
  zoom: 7,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("terkep"), myOptions);

A Hello World példához képest, mindössze ennyivel egészítjük ki a JavaScript részt:

google.maps.event.addListener(map, 'bounds_changed', function() {
  var zoom = map.getZoom();
  var center = map.getCenter();
     
  document.getElementById("zoom").innerHTML = zoom;
  document.getElementById("lat").innerHTML = center.lat();
  document.getElementById("lng").innerHTML = center.lng();
});

A google.maps.event.addListener függvénnyel tudunk feliratkozni egy eseményre. Első paramétere az a térkép objektum, aminek az eseményére fel akarunk iratkozni. A második az esemény neve, az utolsó paraméter pedig a függvényünk, amit meg fog hívni az API, amikor bekövetkezik az esemény.

A függvény tartalma nagyon egyszerű, a map objektum getZoom() és getCenter() függvényeivel kiolvassuk az aktuális középpontot és a zoom értékét, majd egyszerű JavaScripttel kiírjuk a megfelelő span tag-be.

Ezek után a kapcsolódó HTML már nem okozhat meglepetést, mindössze ennyi:

<div id="terkep"></div>
<p>
  Zoom: <span id="zoom"></span><br />
  Center Lat: <span id="lat"></span><br />
  Center Lng: <span id="lng"></span>
</p>

Demó

Működés közben itt lehet megnézni a dolgot:
http://edgarpe.hu/sites/default/files/gmaps-api-2-esemenyek.html

A demó forrásába érdemes lehet belenézni, bár szinte semmi mást nem tartalmaz a fentieken kívül.

Megjegyzések

A teljes Google Maps API dokumentációja angolul:
http://code.google.com/apis/maps/index.html

A példa kódok a fenti dokumentáció alapján készültek, az ott található kódok átalakított változatai.

Legközelebb megmutatom a Markerek használatát (információs pontok a térképen). És továbbra is várom a tippeket, hogy milyen példák legyenek még.

Remélem hasznos volt, jöhetnek a kérdések:

Drupal 7 privát fájlok letöltése csak bejelentkezett felhasználóknak

A Google maps-es példákat hamarosan folytatom, de ezt most muszáj kiírnom magamból.

Ma órákon át téptem a hajam egy egyszerűnek tűnő probléma felett: mindössze annyit szerettem volna elérni, hogy egy Drupal 7 weboldalnál a privát tárolóba feltöltött fájlokat csak bejelentkezett felhasználók tölthessék le.

Az első ötlet, hogy erre lesz egy kis pipa a jogosultságok beállítási oldalán. Hát nincs. Némi utánajárás után kiderült, hogy a Drupal nem így működik. A fájlokhoz akkor enged hozzáférni egy felhasználót, ha az adott node-hoz van hozzáférése a felhasználónak.

Nekem nem ez kellett, a node-ot mindenkinek látni kellett, csak a fájl letöltéshez kell bejelentkezni.

Jó, gondoltam, akkor majd mező (Field) szinten kezeljük a jogosultságokat.

Meg is találtam a Field permissions modult, amivel nagyszerűen be lehet állítgani minden egyes mezőre mindenféle jogot (megtekintés, létrehozás, módosítás). Szépen beállítottam amit szerettem volna, és mint aki jól végezte dolgát, léptem is a következő feladatra.

Véletlenül vettem csak észre, hogy a weboldalról a mezőt ugyan elrejti a Field Permissions modul, de a konkrét fájlt továbbra is le lehet tölteni a megfelelő webcím (URL) ismeretében.

Ezután következett egy órákon át tartó, vad és elkeseredett kattintgatás hadjárat, mindenféle tutorial és issue olvasgatás, néhány modul kipróbálása és mindenféle mágikus varázsigék mormolása. Persze minden hiába, csak nem tudtam célt érni.

És akkor itt jön az Open Source ereje.

Nem volt más hátra, meg kellett nézni a forráskódot, hogy mégis mi a fene történik a háttérben. A megoldást, nem több mint 1 perc után megtaláltam:

  • A fájl pathból (/system/files/) sejteni lehetett, hogy a system.module-ban kell keresgéljek.
  • A system_menu függvényben meg is találtam, hogy a file_download függvény szolgálja ki ezeket a kéréseket.
  • A file.inc-ben meg is találtam a függvényt, bőséges dokumentációval. Mint kiderült létezik egy hook_file_downloads hurok, amivel szabályozható a hozzáférés.

Újabb 1 teljes percet vett igénybe a megfelelő kód megírása:

<?php
modulom_file_download
($uri) {
  if (
user_is_anonymous()) {
    return -
1;
  }
}
?>

Hát ennyi volt. Több óra kattintgatás vs. 1+1 perc kódolás. De sokszor hallottam már, hogy amit lehet, saját kód helyett érdemesebb letölthető modulokkal megoldani. Egy jó darabig még nehéz lesz engem meggyőzni erről.

Google Maps API használata – 1. Helló Google Térkép!

Az elmúlt hetekben két honlap elkészítésénél is előkerült a Google térkép beillesztés lehetősége. Egyedi megoldás kellett, nem volt elég a Drupal Gmap és Location modulok használata. Beleástam hát magam az API használatába, és kiderült, hogy rengeteg izgalmas dolgot tud.

Ezért úgy döntöttem írok egy bejegyzés sorozatot, amiben megmutatom az Google Maps Javascript API használatát. Tőlem szokatlan módon, rövid, egyszerű példa kódok használatával mutatom be a lehetőségeket. Vágjunk is bele:

A legegyszerűbb példa

Nézzük meg a létező legegyszerűbb HTML és JavaScript kódot, amivel beépíthetünk egy Google térképet az oldalunkba a Javascript API használatával. Ennél egyszerűbb példa nincs.

HTML

<body onload="initialize()">
  <div id="terkep"></div>
</body>

Egy terkep id-vel rendelkező div-et helyezünk ez al oldalon, ebbe kerül majd a térkép. Az oldal betöltődésekor pedig meghívjuk az initialize() függvényt.

CSS

<style type="text/css">
  #terkep {
    height: 400px;
    width: 600px;
  }
</style>

Semmi izgalmas nem történik itt, DIV#terkep-nek megadjuk a szélességét és a magasságát.

A Google Maps API importálása

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Külső Javascript kódként hivatkozunk az Google Térkép programozói felületére, rendes nevén az API-ra. A sensor=false paraméter jelentése, hogy egy olyan eszközön fogjuk használni a térkép szolgáltatást, aminek nincs hely meghatározó szenzora. Egy webes böngésző ilyen. Egy okostelefon esetében már lehetne igazra állítani a sensor paramétert.

A lényeg, az inicializáló függvény

<script type="text/javascript">
  var map;

  function initialize() {
    var latlng = new google.maps.LatLng(47.193445480491455, 19.514465109374996);
    var myOptions = {
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };   

    map = new google.maps.Map(document.getElementById("terkep"), myOptions);
  }
</script>

Elérkeztünk a lényeghez.

Először egy latlng nevű objektumot hozunk létre, a google.maps.LatLng nevű függvénnyel. Ez lesz majd a térkép közepe. Két paramétere van, a szélességi és hosszúsági koordináták.

A myOptions objektummal fogjuk felparaméterezni a készülő térképet. A zoom értéke azt hiszem egyértelmű, 1 esetén vagyunk a legtávolabb a földtől, ahogy növekszik, úgy „közeledünk” a földhöz. A center az imént létrehozott középpontot határozza meg. A mapTypeId pedig a térkép típusát határozza meg, jelen esetben a normál térkép nézet, ahol csak utakat látunk. Magyarul, nincsenek szatellit képek.

Végül, az utolsó sorban, felhasználva a fentieket létrehozzuk a térképet a google.maps.Map nevű függvénnyel/objektummal, kinek, hogy tetszik. Első paramétere az a DOM objektum, ahova a térkép kerülni fog, második paramétere pedig a fent létrehozott myOptions beállítások. A DOM objektumot a szokásos document.getElementById függvénnyel szerezhetjük meg.

Demo

Az egész működés közben itt nézhető meg:
http://edgarpe.hu/sites/default/files/gmaps-api-1-hello-terkep.html

Megjegyzések

A Googme Térkép szolgáltatását nem csak JavaScript-el használhatjuk, hanem például Flashben is.

A teljes Google Maps API dokumentációja angolul:
http://code.google.com/apis/maps/index.html

A példa kódok a fenti dokumentáció alapján készültek, az ott található kódok átalakított változatai.

Egy-két példa már be van tárazva, de ha leírjátok mit nézzünk, akkor lesznek olyan példák is. Persze, csak ha meg tudom oldani :)

Oldalak

Feliratkozás Prunk-Éger Edgár RSS csatornájára