Tải bản đầy đủ - 0 (trang)
Hack 71. Embed All Kinds of Content in Calendar Events

Hack 71. Embed All Kinds of Content in Calendar Events

Tải bản đầy đủ - 0trang

Sofar,theiCalfilecontainsnothingthatyouaren'tableto

reproducebycreatinganewcalendarfromwithinGoogle's

nativeCalendarinterface.Butthere'smoretoit:withiCal,you

nowhavetheabilitytoaddwhatarecalledwebcontentevents.

Thesecanbeusedtolinkadatetoanimage,orastaticweb

page,orafull-blownwebapplication—likeasmallweb-based

game.ThelinesneededtoaddexternalcontenttoaVEVENT

entryaredisplayedinboldhere:

CodeView:



...

BEGIN:VEVENT

DTSTART;VALUE=DATE:20070929

DTEND;VALUE=DATE:20070930

RRULE:FREQ=WEEKLY

SUMMARY:BookReader'sClubWeeklyGame

X-GOOGLE-CALENDAR-CONTENT-TITLE:Playalinguisticgame!

X-GOOGLE-CALENDAR-CONTENT-ICON:http://blogoscoped.com/googleapp

calendar-icon.gif

X-GOOGLE-CALENDAR-CONTENT-URL:http://www.gamesforthebrain.com/g

anagramania/

X-GOOGLE-CALENDAR-CONTENT-TYPE:text/html

X-GOOGLE-CALENDAR-CONTENT-WIDTH:300

X-GOOGLE-CALENDAR-CONTENT-HEIGHT:350

END:VEVENT

...

























ThesenewlinestellthecalendartoassociateSeptember29,

2007,withaniconstoredonhttp://blogoscoped.comanda

gamehostedonhttp://www.gamesforthebrain.com.Theevent

willrepeatweekly.Theiconhereisa16x16-pixel256color

GIF,andthegameisasmall-displayoptimizedgame.Anyother

third-partywebsitethatdisplayswellonamobilephoneor

withinagadgetcanbeusedthisway,andofcourseyoucan



alsocreateyourownHTMLfiletobedisplayedhere.Insteadof

HTML,youcanalsoshowanimage;todoso,replacethevalue

forX-GOOGLE-CALENDAR-CONTENT-URLwiththeimageURL,and

insteadofthecontent-typetext/html,use(forexample)

image/gif.

Let'sseewhatthiswillnowlooklikeinGoogleCalendar!Login

toyourcalendarandopentheAdddrop-downthatappears

abovethelistofyourcalendars.SelectAddbyURLandenter

yourcalendar'sfullURL(remember,youmusthavesavedthe

fileiniCalformatanduploadedittoaserversomewhere).After

clickingAddandthentheOKbuttonandwaitingafewseconds

forGoogletoloadanddisplayyourfile,youwillseetheiconon

topofadayinthecalendardefaultdisplay.Clickontheicon,

anditexpandstoshowcasethecontentfromtheURLyou

specified,asshowninFigure7-21.



NOTE

GooglecachestheiCalfilethatyouprovidetoit.Ifyou

arestilltestingyourcalendarandyoumakechangesto

theiCalfile,youcanuploaditunderanewfilename,

likemy2.icalinsteadofmy1.ical.Youcanalsoappend

anarbitraryparametertotheURL,like"my.ical?v=2",

tomakesurethatGooglewon'tbeaccessingitsold

copyofyourfile.Note,however,thatGoogledoesnot

cachewebpagesthatyoulinktointheiCalfile—such

astheURLofthegameshownearlier—soyoumay

wanttoimplementcachingonyourownifthecontentis

hostedonyourserverandisgeneratedbyaCPUintensivescript.

ThelocationofyouriCalfilemustbepubliclycrawlable,

soitmustnothaveanyrobots.txtdirectivedisallowing

spideringbyexternalbots.Thiswould,forinstance,

preventyoufromusingtheGoogleSpreadsheetstext

exportoptiontocreateaniCalfilewithGoogleDocs,as

allspreadsheetsaredisallowedfromexternalcrawling.



HackingtheHack:DynamiciCalFiles

Naturally,youarenotrestrictedtoservingstatic,manually

writteniCalfiles.OnewaytoservedynamiciCalfilesistousea

server-sidescriptinglanguage,likePythonorPHP.Forinstance,

youmightwanttoofferdifferentwebcontenteventforevery

dayoftheyear,andlinkittoaURLthatpassestheactualdate

asaquerystring.Thefollowingfilecontentmightbehostedat

aURL,likehttp://example.com/ical.php5:

CodeView:



...

X-GOOGLE-CALENDAR-CONTENT-ICON:http://example.com/default.gif

X-GOOGLE-CALENDAR-CONTENT-URL:http://example.com/web-event.php5

...

























ThatPHPscriptcannowqueryadatabase,likeaMySQLtable

containingdatestampsforeachrow,todefinetheHTML

output,suchasaproductimageofthedaylinkedtothe

productwebpage.

Openingthewebcontentevent,likethisanagramgame



Hack72.StyleYourCalendar

BoredbythesameoldGoogleCalendarlayout,dayinandday

out?Don'tdespair:youcancreateacustomskinordownload

third-partyskins.

Youcanskinanywebsitewithuserstylesheets,home-made

CSS(CascadingStyleSheets)filesthatoverridethedefault

layoutoptionsforanywebsite.Youcanmanagethesefiles

yourselfformostbrowsers[Hack#41].Butifyou'rebrowsing

withFirefox,youcanalsogetalittlehelpintheformofa

FirefoxextensioncalledStylish.

InstallingandUsingStylish

ToinstallStylish,pointFirefoxtohttps://addons.mozilla.org/enUS/firefox/addon/2108.ClicktheInstallNowbutton,confirm

thesetup,andrestartyourbrowser.

YouwillnowseeaniconinthebottomrightofFirefox.Nowsign

intoGoogleCalendar,clicktheStylishicon,andselectManage

Stylesfromthemenu.Inthedialogthatopens,clicktheWrite

button.Youcannowenteradescription,like"MyCalendar

Skin."Inthecodefield,enterthefollowingCSSforyouruser

stylesheet(thefirstlineissplittofithere):

@-moz-documenturl-prefix(http://www.google.com/calendar),

url-prefix(https://www.google.com/calendar){

body{

background-color:gray!important;

}

}

ThisURLprefixsyntaxrestrictsyourstyletoGoogleCalendar

only.Withinthatscope,youdefinedagraybackgroundcolorfor

thewholepage(pretty,thismaynotbe—butit'sjustan

example!).The!importantkeywordisneededtoensurethat

existingauthorstylesheetsofthewebpageareoverridden.

Clickthepreviewbutton,andyouwillseethisuserstylesheetin



action,asshowninFigure7-22.HitSaveifyoulikeit,and

experimentwithfurtherlayoutchanges.Stylishisnotjustfor

GoogleCalendar;itworkswithotherwebpagestoo.

TheStylishextensionhelpsyoudefinecustom

stylesheetsforanywebpage



AddingThird-PartyUserStylesheets

Creatingacustomstylesheettakestime,developmentskills,

andaneyefordesign.Partofthechallengeistodeterminethe

rightCSSselectorssothatyourstylewillbeappliedtothe

correctpartsoftheunderlyingHTMLpage.However,there's

help:http://userstyles.orgisadirectorywhereyoucanfind

ready-madestylesheetstograbandrun.

TheeasiestwaytoaccessGoogleCalendarstylesinthis

directoryistojustclicktheStylishbuttonandselect"Find

StylesforthisPage"whileviewingyourcalendar.Youmaynot

alwaysfindallthestylesavailableforagivenpage,soan

additionalsearchathttp://userstyles.orgfor"googlecalendar"

willalsoretrievegoodresults.



Forexample,supposeyou'velocatedthestylenamed"Slate

Series."Initsdetailspage,scrolldownanclickthe"Loadinto

Stylish"button.You'llprobablywanttoamendthisstylesheet

byaddingsupportfornon-HTTPScalendarconnections;allthis

takesisaminortweaktotheURLprefixsyntax.Clickthe

Stylishicon,selectManageStyles,thenselectGoogleCalendar

("SlateSeries")andclickEdit.Changethefollowingline:

@-moz-documenturl-prefix(https://www.google.com/calendar),

url-prefix(https://www.google.ca/calendar){



to:

@-moz-documenturl-prefix(https://www.google.com/calendar),

url-prefix(https://www.google.ca/calendar),

url-prefix(http://www.google.com/calendar),

url-prefix(http://www.google.ca/calendar){



ClickSave,andtheresultisthedramaticlayoutchange

picturedinFigure7-23!

GoogleCalendarafterapplyingthe"SlateSeries"user

stylesheet



Hack73.QuicklyAddEventsfrom

Anywhere

Google'sQuickAddfunctionalitycanbeaccessedfromoutside

GoogleCalendar,too.

YoumighthavecomeacrosstheQuickAddfeatureattheleft

sideofGoogleCalendar,picturedinFigure7-24.It'slikea

freestyletextinputfieldtocreateanewevent,andaccepts

sentenceslikethefollowing:

meetingwithFrank7pmtomorrow

calljuliaat1pm

familylunchnextTuesdayat14:00

skitrip10/20-10/26

JapaneselanguagecourseeveryThursday7-8pmfor6months



NOTE

Ifyou'reonasupportedU.S.cellphonecarrier,youcan

alsosendsentenceslikethesetoGooglefromyourcell

phone.Asshownin[Hack#66],youcansenda

messagelike"next"or"day"totheshortcode48368

andretrievecalendarentries.ConfigureGoogle

Calendarformobilephonesupportasdescribedinthat

hack,andthentrysendingasentenceliketheexample

onesto48368.

YoucanalsopresstheshortcutqwhileinCalendartobringup

theAddbox.Butwhat'sevenquickerthanopeningGoogle

Calendartoaddaquickevent?Notopeningthecalendar,and

stilladdingaquickevent!AndifyouuseFirefoxtobrowsethe

Web,you'relucky.EliasTorres'QuickAddextensionrunsunder

FirefoxandletsyouopenaQuickAddpromptwheneveryou

needit,nomatterwhichwebsiteyou'reon.

Quick-addingyoureventsinGoogleCalendar



Toinstallthisextension,pointFirefoxto

http://torrez.us/code/quickgooglecal/quickgooglecal.xpiand

followtheinstallationprompts.Afterrestartingyourbrowser,

youwillfindanewmenuentryinyourbrowser'sToolsmenu

reading"GoogleCalendarQuickAdd."Youcannowclickthis

menuentryfromanywhereontheweb,or—evenbetter—press

theshortcutControl-Qtoopenaquick-addbox,asshownin

Figure7-25.EntertheeventinaGoogleCalendar–friendly

syntaxaslistedearlierinthishack,confirmitbyhittingthe

Returnkey,andtheeventwillbeaddedforyou.Ifthereare

anyproblemssavingyourevent,goto

http://calendar.google.com,makesureyouareloggedinto

GoogleCalendar,andtryagain.

Afterspottingadateonanywebpage,youcanquickly

addittoCalendar



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Hack 71. Embed All Kinds of Content in Calendar Events

Tải bản đầy đủ ngay(0 tr)

×