Northeast PHP 2013

Creando sitios web semánticos con HTML5

David Kelleher  · 

Presentación

Vídeo

Transcripción

Extracto de la transcripción automática del vídeo realizada por YouTube.

it was thanks everyone for bearing with us like Michaels in there I'm actually helping out I just wanna quickly mention that right now what uh a little squished here let me see if I do this projected so the next talk is about html5 for semantic web and

basic both to see David as an educator and a web developer and gave a pretty tiring will distracted by the common which is incidental or something so as soon as we get this all straightened out probably shouldn't I probably ought to wait in a minute before

I introduced you that's good ah that's good enough yeah this uh this podium isn't really much yeah we're good my name is David Kelleher website is WWE TLC 8 any feedback you have for this talk I joined in number for this talk is 8 9 13 want

to share a couple of other hobbies and projects that i work on i do kayaking so if you look out the window here and you've seen all the voters out in charles river someday that's me paddling by trying to avoid all the sailboats a lot of fun that rivers

come a long way since I grew up many years ago in this area a couple of other projects I'm working on now one is because I teach film students as well think of ways to make the web more cinematic and it's not appropriate for every site I wouldn't

do it for an informational site but for certain applications like creating websites for bands or for movies I think it'd be interesting to have a more cinematic experience on the web and how can you retain all the usability and accessibility and search

engine friendliness with your content but have a more dynamic multimedia style presentation one one thing one interesting project I did is I went to a recording studio with the band I set up a projector and I set up a camera shooting a blank projector and

then what I did is I made that video the background for my web site so that I dynamically load text into the space where the projector is and the band members kind of like wander around in the background and play their instruments now when you start the music

video I walk out I lower the projector screen the bank comes out plays their song the webpage goes away when you want to exit I come back on pull the screen up and the website comes back into that space so trying to do some interesting creative things with

the other web today I'm here to talk to you about the Semantic Web specifically semantic HTML what are some things we can do to convey meaning when we create our webpages this is an interesting quote I found online somebody's blog about the topic semantics

in HTML is always a hot topic some people strive for it at all times some people criticized the dogmatic adherence to it and some people don't know what the heck it is so I'm going to focus on this area today for today's talk explaining what semantics

is and talking about the mindset so I am going to show examples of code we'll talk about how it works to convey meaning but my goal of today's talk is to get you to think about the mindset of thinking in a semantic way when you're creating tags

and when you're coding your pages so it's begin with the definition of semantics it's just the study of meaning so web semantics there's going to be a lot of tools you know there's going to be a lot of code but really thinking about it

we're just we're applying at science we're applying nning to the work that we do for creating pages and start thinking about this yeah when we have programming tasks I always try and put myself in the place of the computer I think about problems

from the so I took some content from a web scraped it off and I convert it to hexadecimal code anybody read hexadecimal code so so we're looking at the problem from the computers point of view so the computer is going to understand what the tags are so

we know how to code the tags and a browser will know how to interpret the tags but what is inside those tags americus and for us when we're writing our web pages in English and when other people are looking at that content you know we have our brains to

interpret and understand what that means but to a computer it's just a string of characters so I assume nobody out here at this point could guess what the content is of this web page nobody here reads hexadecimal codes in the early days of search engines

you take these strings of text and you would identify punctuation and spacers and so for example these first for this first section up here might be a word and we don't know what that means but we could let people search for that word so somebody types

in a keyword in a search engine and types in that same string of characters we might find that this page would be a good match irrelevant match for it now that might not always be the case words can have multiple meanings so we don't really know the context

of this word to know if this is exactly the the page that they're looking for so we have to do other things you know we really for a search engine we really want to understand what the what the meaning of all this is so that we can better answer user questions

okay so from the computers point of view we have absolutely no idea what this means at this point we're going to try to solve this problem using semantic tags anybody here speak Russian good okay here's another representation of that content this isn't

a language you don't understand but it's closer this language Russian is a lot closer to English then machine language then hexadecimal code and so there we can begin to understand to figure out what the context or what the meaning of this is we have

1977 and 2009 so there's some shared aspects to our languages the numbers are the same what do these look like years yep so we're beginning to understand something about the meaning of our content right now okay moving on so we have tags HTML tags

and how many of you just get a sense i'm not sure what the skill levels here i know we have some people who are new completely new to web development other people have been doing this since the beginning of the web how many of you have have heard the other

rule that when you're coding pages you put your style information in CSS and your content tags are HTML so HTML for content and CSS for style how many people have heard that and do that okay good so it's just about everybody what tag what HTML tag

would you use for this first h1 this is a header how about this last one apia paragraph how about the middle one okay hey it's a tricky one hey you initial yes we'd be it's h2 right why do we think h2 because well it's not quite as big as bold

as our header it but it's also kind of larger and more bold than a regular text and we know that when we render out content inside a h2 tag this is what it looks like so we might pick h2 okay but what we're doing is you're still thinking about

style information that still how the page looks in the browser you're not really thinking about the meaning of your content or what is being conveyed by those tags so this is actually a paragraph it's like a lead paragraph and you see this sometimes

when you have a story when you have an article sometimes they'll take that first paragraph and make it bigger or boulder to draw your attention to it but semantically it is still a paragraph okay so just because you know maybe you put all of your CSS styles

[ ... ]

Nota: se han omitido las otras 3.772 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.