SlideShare uma empresa Scribd logo
1 de 34
Baixar para ler offline
HTML5 and SVG
HTML5 and SVG,[object Object],Nuno Rosa,[object Object],[Developer  | Byclosure],[object Object],[nuno.rosa@byclosure.com],[object Object],[@yarcub],[object Object]
WHo,[object Object]
WHere,[object Object]
Agenda,[object Object],HTML5 & SVG,[object Object],Adoption,[object Object],SVG 101,[object Object],Why & where?,[object Object],Q & A,[object Object]
SVG is not HTML5...,[object Object]
SVG is not HTML5...,[object Object],...but they get along.,[object Object]
Are we there yet?,[object Object],Real world examples,[object Object]
Bing Maps,[object Object],Route paths,[object Object]
Google Visualization API,[object Object],On demand charts (e.g. Google Docs),[object Object]
Vexflow,[object Object],Music notation rendering (http://vexflow.com),[object Object]
PepsiCo SXSW 2011 Zeitgeist,[object Object],Twitter stream visualization (http://pepsicozeitgeist.com/),[object Object]
SVG 101,[object Object],The basics,[object Object]
Describes 2D vector images,[object Object],Static,[object Object],Animation,[object Object],XML,[object Object],Full DOM support,[object Object],Scripting,[object Object],Open standard (W3C),[object Object],Modern browsers support (no plugins),[object Object],Fallback options available,[object Object],In a nutshell,[object Object]
Standalone,[object Object],<object data="myfile.svg" 		type="image/svg+xml" width="100" 			height="100"/>,[object Object],<embedsrc="myfile.svg" width="100" 			height="100"/>,[object Object],<iframesrc="myfile.svg" width="100" 			height="100"/>,[object Object],<imagesrc="myfile.svg" width="100" 			height="100"/>,[object Object],No scripting,[object Object],{background-image: url('myfile.svg');},[object Object],No scripting,[object Object],SVG on web pages,[object Object]
Standalone (scripting),[object Object],HTML Document,[object Object],SVG Document,[object Object],SVG on web pages,[object Object],<object id="svgContainer" data="myfile.svg" 		type="image/svg+xml" width="100" 			height="100"/>,[object Object],SVGDoc = document.getElementById("#svgContainer")		.getSVGDocument();var element = SVGDoc.querySelector("#elementId");element.setAttribute("x", 100);,[object Object],<svgxmlns="http://www.w3.org/2000/svg">	<rect id="elementId" width="10" height="10"/></svg>,[object Object]
XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">,[object Object],	<html 	xmlns="http://www.w3.org/1999/xhtml",[object Object],			xmlns:svg="http://www.w3.org/2000/svg">,[object Object],	<head></head>,[object Object],	<body>,[object Object],	<div id="container">,[object Object],<svg:svg width="100" height="100" >,[object Object],		<svg:rect y="10" X="10" width="20" height="20"/>,[object Object],	 </svg:svg>,[object Object],	</div>,[object Object],	</body>,[object Object],	</html>,[object Object],Inline,[object Object]
HTML5<!DOCTYPE HTML><html><head></head><body> <div id="container"><svg width="100" height="100" >	<rect y="10" X="10" width="20" height="20"/>   </svg>  </div></body></html>,[object Object],Inline,[object Object]
Inline  (scripting),[object Object],<div id="container">	  <svg width="100" height="100" >	    <rect id="myShape" y="10" X="10" 				width="20" height="20"/>   </svg>  </div>,[object Object],Core DOM  (HTML and SVG documents)var shape = document.querySelector("#myShape");shape.setAttribute("width", 100); ,[object Object],SVG DOM (SVG documents specific)var shape = document.querySelector("#myShape");shape.width.baseVal.value = 100; //Faster,[object Object],SVG on web pages,[object Object]
2D x-y plane,[object Object],viewBox defines visible area,[object Object],in IE9 default overflow != hidden,[object Object],<svgviewBox="0 0 343 501" >,[object Object],All element coordinates are absolute,[object Object],SVG viewport,[object Object]
SVG capabilities overview,[object Object],Primitive shapes,[object Object],Text,[object Object],Fill/Strokes,[object Object],Gradients,[object Object],Patterns,[object Object],Filters,[object Object],Scripting,[object Object],Metadata,[object Object],SMIL(SynchronizedMultimediaIntegrated Language),[object Object],Styling (CSS2),[object Object],Links,[object Object],Groups,[object Object],Transformations,[object Object],Clipping Paths,[object Object],Masking,[object Object],Foreign Objects,[object Object],Conditionals,[object Object],DOM events,[object Object]
SVG primitive shapes,[object Object],<circle />,[object Object],<rect />,[object Object],<ellipse />,[object Object],<line />,[object Object],<polyline />,[object Object],<polygon />,[object Object], <path />,[object Object],Linear,[object Object],Quad,[object Object],Cubic,[object Object]
Selectable and searchable,[object Object],Even when following paths,[object Object],Just another element,[object Object],Fill ,[object Object],Border,[object Object],Transformations,[object Object],SVG text,[object Object]
Group elements, treat them as one,[object Object],<g id="aGroup"fill="orange"><rect x="20" y="30" width="40" height="40"/><circle cx="100" cy="100" r="10" />,[object Object],</g>,[object Object],Group,[object Object]
Element property, transform="…",[object Object],Rotation, revolves element around point,[object Object],	transform="rotate(degrees, cx, cy)",[object Object],Scale, multiply all (x,y) coordinates,[object Object],	transform="scale(xfactor, yfactor)",[object Object],Translation, add (x,y) positions,[object Object],	transform="translate(dx, dy)",[object Object],Transform,[object Object]
Elements declared inside definitions are not rendered. ,[object Object],Ideal for reusing elements,[object Object],Gradients,[object Object],Text paths,[object Object],Clipping paths,[object Object],Repeated elements,[object Object],<defs>,[object Object],	<circle id="dot"cx="10" cy="10" r="5">,[object Object],</defs>,[object Object],<use xlink:href="#dot" transform="translate(120,0)" />,[object Object],<use xlink:href="#dot" transform="translate(120,100)" />,[object Object],Reuse,[object Object]
SVG capabilities overview,[object Object],Primitive shapes,[object Object],Text,[object Object],Fill/Strokes,[object Object],Gradients,[object Object],Patterns,[object Object],Filters,[object Object],Scripting,[object Object],Metadata,[object Object],SMIL(SynchronizedMultimediaIntegrated Language),[object Object],Styling (CSS2),[object Object],Links,[object Object],Groups,[object Object],Transformations,[object Object],Clipping Paths,[object Object],Masking,[object Object],Foreign Objects,[object Object],Conditionals,[object Object],DOM events,[object Object],http://caniuse.com/#search=svg,[object Object]
Why SVG?,[object Object],Some advantages,[object Object]
Scale factor,[object Object],Multiscreen applications,[object Object],High fidelity graphics,[object Object],Text Format,[object Object],Accessibility ,[object Object],Version Control,[object Object],Semantic,[object Object]
Bandwith,[object Object],Small filesize,[object Object],Changes can be done in browser,[object Object],avoiding server round-trip,[object Object],Gzip encoded .svgz,[object Object],Server must send reponse headerContent-Enconding: gzip,[object Object]
An SVG Primer for Today's Browsers,[object Object],http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html,[object Object],Byclosuregithub account ,[object Object],http://github.com/Byclosure/SVG101,[object Object],RaphaelJS,[object Object],http://raphaeljs.com/,[object Object],jQuery SVG,[object Object],http://keith-wood.name/svg.html,[object Object],Inkscape,[object Object],http://inkscape.org/,[object Object],Visual Studio SVG schema Intelisense plugin,[object Object],http://visualstudiogallery.msdn.microsoft.com/22479d6b-42d5-499f-b501-18e90e579540,[object Object],SVGWeb (cross-browser support),[object Object],http://code.google.com/p/svgweb/,[object Object],References,[object Object]
Market is adopting SVG,[object Object],Different ways to place SVG on HTML,[object Object],SVG basic concepts,[object Object],Tools & Frameworks,[object Object],Recap,[object Object]
Check the demos.(http://github.com/Byclosure/SVG101)Go out and play!,[object Object]
Thank you.Questions?,[object Object],nuno.rosa@byclosure.com,[object Object],@yarcub,[object Object]

Mais conteúdo relacionado

Mais procurados (20)

Css3
Css3Css3
Css3
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
 
Css3
Css3Css3
Css3
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
 
Html5
Html5Html5
Html5
 
Getting started with html5
Getting started with html5Getting started with html5
Getting started with html5
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Css3
Css3Css3
Css3
 
Drupal Backbone.js in the Frontend
Drupal Backbone.js in the FrontendDrupal Backbone.js in the Frontend
Drupal Backbone.js in the Frontend
 
Html5
Html5Html5
Html5
 
CSS3: Simply Responsive
CSS3: Simply ResponsiveCSS3: Simply Responsive
CSS3: Simply Responsive
 
Css3
Css3Css3
Css3
 
D3 Basic Tutorial
D3 Basic TutorialD3 Basic Tutorial
D3 Basic Tutorial
 
Css3 Presetation
Css3 PresetationCss3 Presetation
Css3 Presetation
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
 
Svghtml5 Meetup
Svghtml5 MeetupSvghtml5 Meetup
Svghtml5 Meetup
 
Comparing XAML and HTML: FIGHT!
Comparing XAML and HTML: FIGHT!Comparing XAML and HTML: FIGHT!
Comparing XAML and HTML: FIGHT!
 

Destaque

Dive Into SVG
Dive Into SVGDive Into SVG
Dive Into SVGyomotsu
 
제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
 제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP 제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
제 5회 DGMIT R&D 컨퍼런스: HTML Graphics APdgmit2009
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)zahid-mian
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examplesAlfredo Torre
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 

Destaque (11)

Dive Into SVG
Dive Into SVGDive Into SVG
Dive Into SVG
 
제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
 제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP 제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
제 5회 DGMIT R&D 컨퍼런스: HTML Graphics AP
 
ES6
ES6ES6
ES6
 
HTML 5_Canvas
HTML 5_CanvasHTML 5_Canvas
HTML 5_Canvas
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
 
HTML 5 Canvas & SVG
HTML 5 Canvas & SVGHTML 5 Canvas & SVG
HTML 5 Canvas & SVG
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 

Semelhante a HTML5 and SVG

[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 RefresherIvano Malavolta
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsIvano Malavolta
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3Helder da Rocha
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of WebMirza Asif
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5Jamshid Hashimi
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebGeorge Kanellopoulos
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webPablo Garaizar
 
Svg Overview And Js Libraries
Svg Overview And Js LibrariesSvg Overview And Js Libraries
Svg Overview And Js Librariesseamusjr
 

Semelhante a HTML5 and SVG (20)

Web Vector Graphics
Web Vector GraphicsWeb Vector Graphics
Web Vector Graphics
 
SVG introduction
SVG   introductionSVG   introduction
SVG introduction
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Html5 CSS3 jQuery Basic
Html5 CSS3 jQuery BasicHtml5 CSS3 jQuery Basic
Html5 CSS3 jQuery Basic
 
D3.js and SVG
D3.js and SVGD3.js and SVG
D3.js and SVG
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
 
Svg Overview And Js Libraries
Svg Overview And Js LibrariesSvg Overview And Js Libraries
Svg Overview And Js Libraries
 
Hardboiled Web Design
Hardboiled Web DesignHardboiled Web Design
Hardboiled Web Design
 

Último

The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 

Último (20)

The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 

HTML5 and SVG

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

Notas do Editor

  1. Primeiros minutos muito importantes
  2. Separar documentos.
  3. For example, if an HTML implementation also supports SVG, then the Document object implements both HTMLDocument and SVGDocument.
  4. Same file with “sprite sheet” containing multiple elements.Embed the same object in several web page locations but with different viewboxs.SHOW SVG FILE DEMO (change viewport)
  5. SHOW DEMO: 01_primitives.htmlpoint-in-polygon: uma linha horizontal se cruzar um múmero de fronteiras impar(dentro) ou par(fora)
  6. Mostrar exemplo do texto
  7. SHOW REUSE EXAMPLE.In retrospective, recap code for TEXT EXAMPLE