structured content philosophy
DESCRIPTION
Structured Content Philosophy. Structure 4 Meaning. Content meaning is tagged: Tag application is more consistent Special browsers can act smarter Aids in language translation, localization Presentation usually follows meaning. Text Meaning Tags. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/1.jpg)
Structured Content Philosophy
![Page 2: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/2.jpg)
Structure 4 Meaning
•Content meaning is tagged: <strong> <em> <h1> <del>
•Tag application is more consistent
•Special browsers can act smarter
•Aids in language translation, localization
•Presentation usually follows meaning
![Page 3: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/3.jpg)
Text Meaning Tagsabbraddressblockquotecaptioncitecodedddeldfndivdldtemh1-h6inskbdliolpqsampstrongsubsupulvar
![Page 4: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/4.jpg)
Presentation Tagsareabblockquote *brdivh1-h6 *hrimapprespanstylesub *sup *tabletbodytdtfootththeadtr
![Page 5: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/5.jpg)
HTML 5 Tagsarticleasideb *datagriddetailsdialogheaderi *figurefootermeternavoutputsectionsummarytime
![Page 6: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/6.jpg)
Tags Worth Usingaabbraddressareabbaseblockquotebodybrbuttoncaptioncitecodedddeldfndivdldtemfieldsetformh1-h6headhrhtmliimginputinskbdlabellegendlilinkmapmetanoscriptobjectoloptgroupoptionpparampreqsampscriptselectspanstrongstylesubsuptabletbodytdtextareatfootththeadtitletrulvar
![Page 7: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/7.jpg)
The Object Perspective
How a programmer might think of HTML
![Page 8: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/8.jpg)
Parsing Overview• Generic SGML / XML parsed: <findsTags>
• Parsed TAG data:
1.Tag/Element name
2.attributes
3.Construct New Object( with these attributes )
4.Attach this new Object to its Parent Object to maintain the relationship between the tags:
5.<p><b></b></p> ≈
6.p.children[0]= b;
![Page 9: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/9.jpg)
A Tag Element Object
<td rowspan=“2”>Cell</td>object.nodeType HTMLElement
object.nodeName
TD
object.attributes[]
rowspan=“2”
object.innerHTML
Cell
object.styleinherited <td>
style
![Page 10: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/10.jpg)
•X= new TagObject(“p”);
•X.setAttribute(“align”, “center”);
•X.innerHTML= “Paragraph of text”;
•document.appendChild( X );
OOP might be like:
![Page 11: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/11.jpg)
Images
![Page 12: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/12.jpg)
•<img src = “filename” width=”9” height=”#”/>
•GIF
• interlacing, transparent colors, animation
•2 - 256 colors ONLY
• JPG (JPEG)
•PNG (sometimes pronounced “ping”)
Images
![Page 13: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/13.jpg)
Binary Data
•Images are LARGE binary files
•If HTML can’t contain it:
•HTML refers to them EXTERNALLY
•External data means you can place it anywhere in the world separate of your html document
![Page 14: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/14.jpg)
•<img src=“picture.gif" align=“middle" vspace="value" hspace="value" />
•<img src=“http://ibm.com/picture.gif" height="value" width="value" />
IMG tag attributes
![Page 15: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/15.jpg)
•<body background="image.gif">
•<body bgcolor="color" background="image.gif" >
Background Images
![Page 16: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/16.jpg)
•Make sure a user can still read the text.
•Avoid putting text into an image.
•Do not use a large image file. (Less than 20 KB) More will increase load times.
•Background must look seamless, not tiled.
•Don’t link to another site for an image
Care in Selecting an Image
![Page 17: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/17.jpg)
•JPGs can be compressed and yield smaller file sizes in some cases
•Primarily used when you want to have all 16.7 million colors
•JPEG 2000 is not widely supported
•NO transparency! NO animation
JPEGs (JPG)
![Page 18: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/18.jpg)
• 2 - 256 colors
• Transparency (uses one color)
• ANIMATION
• Great for small or low color images (small file)
GIF
![Page 19: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/19.jpg)
PNG (ping)
•Portable Network Graphic
•zero quality loss
•8-bit (2-256 color) OR 24-bit (16.7 million)
•Transparency (8-bit alpha mask)
•Animation
•MS IE <7 had trouble with transparency
![Page 20: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/20.jpg)
APNG
•PNG with animation
•Similar to GIF animation
•LARGE FILES-- useful only on small things
•Browsers lack support for it (2008)
![Page 21: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/21.jpg)
•Reduce image file sizes
•Reduce number of colors in images
•Use smallest file type
•Thumbnails
•Reuse images and backgrounds
Quicker Pages
![Page 22: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/22.jpg)
Flash•Flash is NOT an image
•Flash is a plug-in which is widely distributed
•Flash STARTED as a vector image format
•animation was supported
•Flash grew into a means to force macromedia’s multimedia software (Director/Shockwave) onto the web
![Page 23: Structured Content Philosophy](https://reader035.vdocument.in/reader035/viewer/2022070415/56814fac550346895dbd6832/html5/thumbnails/23.jpg)
SVG•XML based Vector graphics
•Animation supported
• Images supported - external images, like HTML does it
•Text supported
•CSS used for text & graphic presentation
•Possible to INTEGRATE inside XHTML