Things you can use (by the Yahoo Developer Network and friends)

Things
you
can
use...provided
by
the
Yahoo
Developer
Network
and
friends.Chris&an
Heilmann
‐
YDN
Developer
Evening,
Oslo,
Norway

‐
December
2009

Web
development
is
confusing
enough
as
it
is.

There
is
no
need
to
make
it
harder
by
not
using
what
has
been
done
for
us.

Today,
I
am
going
to
show
you
some
things
that
you
can
use
immediately
to
build
faster
and
beIer
web
 products.

Quickly
about
me:

hIp://developer‐evangelism.com

hIp://developer.yahoo.com Quickly
about
me:

Learning
the
basics 10 INPUT A$ 20 PRINT A$ 30 PRINT“ROCKS!” 40 GOTO 10

WaSP Interact hIp://interact.webstandards.org/

Opera Web Standards curriculumhIp://www.opera.com/company/educa&on/curriculum/

YDN Theater hIp://developer.yahoo.net/blogs/theater/

No
more
copy
&
paste
and
trial
and
error.

Star&ng
with
a
clean
canvas.hIp://developer.yahoo.com/yui/ar&cles/gbs/

Web
sites
are
not
meant
to
look
and
work
the
same
everywhere.


On
the
contrary
‐
the
ability
to
accustom
the
interface
to
different
user
agents
is
what
makes
web
development
so
 powerful.

CSS
frameworks
and
frontend
 libraries(...)

Libraries
make
our
job
predictable
and
allow
us
to
use
web
standards
without
catering
for
browsers.

If
you
build
your
code
based
on
libraries
you
can
fix
your
product
for
the
next
browser
by
upgrading
the
library.

If
you
choose
to
do
everything
yourself
‐
good
luck.


Building
interfaces
that
work

hIp://developer.yahoo.com/ypaIerns

hIp://developer.yahoo.com/ypaIerns/wireframes/

Using
the
web. CMS

Thinking
data
first.

The
complexity
of
your
product
increases
with
the
number
of
APIs
you
use.


Every
API
has
different
ways
to
authen&cate,
expects
different
parameters
and
returns
data
in
different
formats.

Mixing
the
web
with
YQL1)
Define
your
Query3)
Copy
the
URL.2)
Select
your
output

Find
London.select
*
from
geo.places
where
text="london,uk"

Define
London
and
get
photos
taken
there.select
*
from
flickr.photos.search
where
woe_id
in
(

select
woeid
from
geo.places

where
text="london" )

Get
all
the
informa&on
about
these
photos.select
*
from
flickr.photos.info
where
photo_id
in
(select
id
from
flickr.photos.search
where
woe_id
in
(select
woeid
from
geo.places
where
text="london"))

Get
only
what
we
need.select

farm,
id,
secret,owner.realname,
server,
&tle,urls.url.content
from
flickr.photos.info
where
photo_id
in(select
id
from
flickr.photos.search
where
woe_id
in
(select
woeid
from
geo.places
where
text="london"))

Select
format
JSON,
define
a
callback
and
copy
and
paste
the
URL. hIp://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20flickr.photos.info%20where%20photo_id%20in%20(select%20id%20from%20flickr.photos.search%20where%20woe_id%20in%20(select%20woeid%20from%20geo.places%20where%20text%3D%22london%22))&format=json&diagnos&cs=false&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=flickr

Copy
into
a
script
src
and
write
a
few
lines
of
Dom
Scrip&ng.

PROFIT!hIp://isithackday.com/hacks/ajaxexperience/flickrgeophotos.html

Is
this
Yahoo
only?

Any
data
on
the
web
will
do.atom csv feed select
*
from html json microformats rssxml

Any
data
on
the
web
will
do.hIp://isithackday.com/hacks/scraping‐with‐yql/

You
can
also
add
your
own
data
by
providing
a
simple
XML
schema
called
an
open
 table.hIp://developer.yahoo.com/yql/guide/yql‐opentables‐chapter.html

Moving
JavaScript
to
the
server
side.

YQL
open
tables
can
have
embedded
JS
that
runs
on
the
YQL
server
(with
Rhino)
and
supports
XML
na&vely
with
E4X..hIp://developer.yahoo.com/yql/guide/yql‐execute‐chapter.html

Flickr
photos
as
ULsselect
*
from
flickr.photolist
where
text="me"
and
loca&on="uk"
and
amount=20

Display
with
JavaScript

Display
with
PHP

Join
us!






hIp://github.com/yql/yql‐tables

Documenta&on





hIp://developer.yahoo.com/yql/

Building
with
blocks.

Build
a
CSS
layout
that
works.http://developer.yahoo.com/yui/grids/builder/

Use
already
exis&ng
widgets.http://isithackday.com/hacks/cantine/ index.php?loc=covent+gardenhIp://isithackday.com/hacks/can&ne/

hIp://isithackday.com/hacks/delhi/

hIp://developer.yahoo.com/yui/

hIp://developer.yahoo.com/yui/docs/

hIp://developer.yahoo.com/yui/examples/

Wanna
get
super
famous?

YAP
is
the
plalormhIp://developer.yahoo.com/yap/guide/yap‐overview.html

hIps://developer.apps.yahoo.com/dashboard

hIp://developer.yahoo.com/yap/guide/caja‐ready‐code‐exs.html

Yahoo
Markup
LanguagehIp://developer.yahoo.com/yap/guide/yapdev‐yml.html

YML
Tags yml:a yml:name yml:ad yml:profile‐picyml:audio yml:pronoun yml:form yml:share yml:friend‐selectoryml:swf yml:if‐env yml:user‐badge

yml:message

Building
a
form
in
YML.script
to
call element
to
replace

A
very
simple
API
on
top
of
YQL

hIp://yahoo.com/add?yapid=zKMBH94k

hIp://github.com/yahoo/yos‐social‐php

YUI
in
a
nutshell... YUI
 is
the
 system
 that
 Yahoo
 uses
to
 build
 its
web
sites.
It
is
constantly
tested
to
work
for
the
largest
 amount
 of
 users,
 free,
open
 source
 and
covers
everything
from
design
paIerns
to
out‐of‐the‐box
 widgets.
 It
 is
modular
 and
 you
 can
 use
only
 what
 you
 need.
 You
can
 either
 host
 it
 yourself
or
 get
 it
 from
 a
 network
of
 distributed
 servers.

YQL
in
a
nutshellYQL
is
a
web
service
that
allows
you
to
mash‐up
any
data
on
the
web
from
various
sources
with
a
simple
 SQL‐style
 language.
 You
can
 filter
 the
 data
 down
to
 what
 you
 need
 and
 you
can
 convert
 the
 data
 with
server‐side
 JavaScript
 before
returning
 it.
 Data
 providers
 can
use
 YQL
 to
 publish
 an
API
on
 the
 web
on
 top
of
 Yahoo’s
infrastructure
and
cloud
storage.

YAP
in
a
nutshell YAP
 is
the
 Yahoo
 Applica&on
 Plalorm
which
 allows
 you
 to
 build
applica&ons
that
 run
 on
 the
Yahoo
homepage
and
soon
other
proper&es.
You
can
 dive
 into
 Yahoo’s
social
 graph
 to
 promote
 your
applica&ons
 and
 you
 can
create
 highly
secure
web
apps
as
YAP
uses
Caja
to
ensure
code
quality. 


...
and
I
am
spent!

Jump directly to slide:

    Easy Slideshare by Christian Heilmann, licensed with BSD License.