Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

+ Follow

BDW - What is Semantics

by gordonbrander on Jun 16, 2010

1,916 views

So what is semantics anyway?

More…

So what is semantics anyway?

Less

5 Embeds 210

http://gordonbrander.com	162
http://wordpress.trunk	35
http://crowdfavorite.com	8
http://www.paradigme.ch	4
http://www.slideshare.net	1

Statistics

Favorites: 2
Downloads: 14
Comments: 0
Embed Views: 210
Views on SlideShare: 1,706
Total Views: 1,916

- I design and build things with HTML, CSS, Javascript
- I’ve done work for VC firms, Fortune 500 Companies, and startups
- Sites with million+ visits per day
- Study of meaning
- Important for digital designers because...
- There is no limit to what you can do in digital
- We need things to make sense

- HTML is just a plain text file, formatted in a specific way. A "semantic way".
- The web is built on this simple idea
- Take content, make it meaningful, network it: that’s the web
- Cool things happen. I found this by searching “awesome”
- Open, Meaningful content is useful content
- Searchable
- Accessible
- Interoperable
- Every meaningful description is a facet you or a computer can use
- More information = better markets = better-off people
- The grand vision of the web: share our information
- relationship between info is meaningful

- EXAMPLE : Google
- US govt (NOAA) publishing machine-readable semantic data
- Data.gov
- Everyblock
- Future of journalism?
- Looks at LiveJournal, MySpace, Blogger, Flickr, etc
- Irony: it’s closed

- OpenScience
- But maybe your goal is as simple as getting eyeballs on your product
- Semantics helps you do that by making it make sense to computers
- With HTML!!!
- What is a markup language?
- How many of you use Twitter?
- What is a hash tag?
- Hash tag = markup language.
- A plain-text pattern that makes sense to humans and computers.
- Lets you add information to content
- describing what the page is about
- Attributes: more specific description
- Standardized names for things
- hNews received Knight fellowship
- I design and build things with HTML, CSS, Javascript
- I’ve done work for VC firms, Fortune 500 Companies, and startups
- Sites with million+ visits per day

2 Favorites

mrkrm Tags semantic 1 year ago
Cyro Barros at Ikeda 1 year ago

BDW - What is Semantics — Presentation Transcript

ﬂickr.com/photos/apophysis_rocks Semantics in HTML
Gordon Brander Front-end Developer at Crowd Favorite
What is Semantics?
Semantics = Meaning In HTML, semantics is about describing things
Why?
Meaning is what makes the web awesome
ﬂickr.com/photos/i-capture/16136112/ Free market of ideas You never know what people will do with them
Mapping the BP Oil Disaster http://www.iﬁtwasmyhome.com/
We Feel Fine http://www.wefeelﬁne.org/
How?
HTML is a <markup> language
Hashtag: #worldcup HTML: <a href=”http://ﬁfa.com”>World Cup</a>
Tag start Tag end <a href=”http://ﬁfa.com”>World Cup!</a> Attribute Content
Top Three Semantic Hooks • <head>: info about the document • Tags: what a piece of content is • Attributes: more granular info about the content
Two Guidelines • Use the most speciﬁc available tag • Pick good names for your classes
Fancy new tags <header> <nav> <article> <aside> <article> <aside> <article> <aside> <footer> More: http://dev.w3.org/html5/markup/spec.html
Naming things • Bad: <h1 class=”big-red-text”>Cats! LOL</h1> • Bad: <span class=”green-italics”>Some intro text</span> • Good: <h1 class=”article-title”>Cats! LOL</h1> • Good: <strong class=”intro”>Some intro text</strong>
Describe what things are, not what they look like
ﬂickr.com/photos/jurvetson/5268677/ Microformats Why do all the work yourself?
Cool. Me too! I’m going to mark up my contact info like this... Cool. Me too! Cool. Me too! Cool. Me Cool. Me too! too! Cool. Me too! Cool. Me too!
<address class=”vcard”> <a class=”fn url” href=”http://gordonbrander.com”> <span class=”given-name”>Gordon</span> <span class=”family-name”>Brander</span> </a> </address>
<address class=”vcard”> <a class=”fn url” href=”http://gordonbrander.com”> <span class=”given-name”>Gordon</span> <span class=”family-name”>Brander</span> </a> </address>
<address class=”vcard”> <a class=”fn url” href=”http://gordonbrander.com”> <span class=”given-name”>Gordon</span> <span class=”family-name”>Brander</span> </a> </address>
microformats.org • People: vcard • Syndication/Blogging: hAtom • News: hNews • Events: hCalendar • Copyright - rel-license • Lots more...
Gordon Brander gordonbrander.com

BDW - What is Semantics

by gordonbrander on Jun 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 210

Statistics

BDW - What is Semantics — Presentation Transcript