HTML5のご紹介

Feb 11, 20129 likes1,934 views

The document discusses HTML5 and its features. It provides an overview of the history and development of HTML5. It describes several key HTML5 APIs and features including offline storage, multimedia, graphics and 3D, real-time connectivity, device access, semantics, and CSS3 styling. It also discusses polyfills that can be used to enable HTML5 features in older browsers and lists some resources for learning more about HTML5.

HTML
DevFestX Sapporo
2012/2/11
Toru Yoshikawa ( @yoshikawa_t )

Toru Yoshikawa
@yoshikawa_t

• Google API Expert Chrome

• html5j.org / HTML5

• Web Chrome Web Store Apps

• allWeb jQuery Mobile

• http://d.hatena.ne.jp/pikotea/

HTML5
• 1999 HTML4.01 10

•

• WHATWG Web Applications 1.0 Web
Forms 2.0 W3C

• 2014

W3C
1. Working Draft

2. Last Call Working Draft ←

3. Candidate Recommendation

4. Proposed Recommendation

5. Recommendation

HTML5
W3C XHTML1.0
HTML XHTML
1998
XHTML2.0

XHTML
... Ajax Web2.0
Web
W3C HTML
2004

HTML5
Apple Mozilla Opera WHATWG
Web Hypertext Application Technology
2004 Working Group
HTML5 Web

2007 W3C WHATWG

2008 W3C HTML5

HTML5
2009 XHTML2.0
HTML5 Last Call Working
2011
Draft

NOW

• HTML5
- Semantic Elements
- Multimedia Elements
- HTML5 Forms
- Event model & APIs
- Ofﬂine Events
- Drag & Drop API
- HTML5 Parser
• HTML Canvas 2D Context
• HTML Microdata
• HTML5 Web Messaging

HTML5

The Web platform: Browser technologies
http://platform.html5.org/

Ofﬂine & Storage
• Application Cache …
• Web Storage …
• Indexed Database … KVS
• File APIs …
• File System API …
• online/ofﬂine events … /

Multimedia
• video/audio … /

• WebVTT …
• Web Audio API …
• HTML Media Capture …

Multimedia
Demo
• Blowing apart fragments of video
• Using WebSRT to create video captions
• HTML5 Wow Visualizer

Graphics, 3D & Effects
• Canvas …
• WebGL … 3D
• SVG …

Graphics, 3D & Effects

Demo
• 3D Nyan Cat!!!!
• WebGL City

Realtime / Connectivity
• WebSocket …

• Server-Sent Events …
/Comet

• Web Messaging … Web

• XMLHttpRequest Level2 …

• Notiﬁcations …

• WebRTC … /

Realtime / Connectivity

Demo
• WebRTC Video Element Demo
※chrome dev channel -enable-media-stream

Device Access
• Geolocation API … GPS
• Speech Input …
• Device Orientation …
• Contacts API …
• Calendar API …
• Battery Status API …
• Network Information API …

Device Access
Demo
• Ball Pool
• Google Gravity
• data: text/html, <input type="text" x-webkit-
speech style="font-size: 64px;">
※

Semantics
• … header/footer/section/article
108 30 14

• … menu/progress/meter

• HTML5 Forms … input type search/email/date/
range/color

• Microdata … itemscope/itemprop

Semantics

Demo
• Web Forms 2.0 demo page
※Opera

CSS3 / Styling
• CSS3 Selectors … :ﬁrst-child/:nth-child(odd)

• border-radius …
• text-shadow/box-shadow …
• gradient …
• Webfonts …
• Transforms …
• Transitions/Animations … CSS

CSS3 / Styling
Demo
• Button Maker
• Round corners - HTML5Rokcs %23 #

• CSS3 Patterns Gallery
• CSS Clock

Polyﬁll
A shim that mimics a future API providing fallback
functionality to older browsers. - Paul Irish

API

HTML5 Please
HTML5 Cross Browser Polyﬁlls

HTML5Rocks
http://www.html5rocks.com/en/

Chrome Experiments
http://www.chromeexperiments.com/

Chromium samples
http://chromium.googlecode.com/svn/trunk/samples/

Internet Explorer 10 Test Drive
http://ie.microsoft.com/testdrive/

html5wow
http://www.htmlﬁvewow.com/

HTML5
http://www.slideshare.net/shumpei/html5-11207810

html5j.org

http://www.html5j.org/

Thank You!!
Toru Yoshikawa ( @yoshikawa_t )

Michael Schmid discussed his experience with Drupal 8, highlighting improvements in internationalization, accessibility, content management, and site building. Boris Baldinger commented that Drupal 8 allows for building sites out of the box but sometimes requires thinking differently, and bugs can cause issues. Alex Tkachev praised Drupal 8's use of modern technologies like Symfony, calling it "the right way" to code. Kathryn McClintock found Twig templates easier than Drupal 7 templates. The discussion ended with notes on Drupal 8's status, upcoming releases, and when it's appropriate to start using it.

Building rich interface components with SharePointLouis-Philippe Lavoie

The document discusses building rich interfaces for SharePoint using JavaScript and other technologies. It defines a rich interface as browser-based with features similar to desktop applications. The speaker will cover tools for building rich interfaces like jQuery, frameworks, and SharePoint's REST endpoints. He demonstrates a task board application built with jQuery, jQueryUI, and KnockoutJS. The document also discusses SharePoint 2013's focus on JavaScript, REST, and HTML5/CSS3 and considerations for localizing, managing state, and browser back button behavior in rich interfaces.

HTML 5Karthik Madhavan

The document provides an overview of HTML5, including its key features and differences from HTML4. It discusses new HTML5 elements like <canvas>, <video>, and <audio> that enable embedding multimedia. It also covers new form input types, attributes, and APIs in HTML5 for local storage, 2D drawing, and playing video/audio. The document states that HTML5 aims to make web applications more interactive by supporting drag and drop features, editing, and offline capabilities, without requiring plugins. It concludes by discussing how HTML5 could standardize web applications and blur the line between desktop and web apps.

DEFCON-23-Nadeem-Douba-BurpKitNadeem Douba

Nadeem Douba presents BurpKit, a tool that integrates the WebKit rendering engine with Burp Suite to allow security tools to dynamically render and interact with web pages like modern browsers. BurpKit uses JavaFX's implementation of WebKit to provide a real-time rendering tab in Burp Suite that supports JavaScript. It also includes a bidirectional bridge between Burp Suite and WebKit to allow interaction with the DOM. Demos show features like DOM manipulation, XSS tracking, and Burp extensions. The goal of BurpKit is to evolve security tools to keep up with the increasing complexity of web applications.

Planidoo & ZotonicDavid de Boer

David de Boer presented on his work with Planidoo, an event organization platform built using Zotonic and other technologies. The current architecture uses two separate APIs and data stacks that interconnect data between Zotonic and other services like Elasticsearch. De Boer discussed potential solutions to streamline the architecture including using Elasticsearch as a single data source or rebuilding the system entirely in Erlang. He also emphasized the importance of building community around new projects through stability, documentation, and approachability.

SPTypeOutGrid: Knockout + TypeScript + SharePoint 2010 = Cool Grids in List F...Sam Larko

This document provides an overview of using TypeScript, Knockout, and model-view-viewmodel (MVVM) frameworks to create editable grids in SharePoint list forms. It introduces TypeScript as a strongly typed superset of JavaScript, Knockout as a library for two-way data binding, and how MVVM frameworks like Knockout separate the model and view. The document then demonstrates editable grid code using these technologies and provides resources for further information.

UWP apps development - Part 2Jiri Danihelka

This document discusses structuring a Universal Windows Platform (UWP) application. It outlines where to place different types of code components like views, view models, models, and repositories. It also discusses using complementary technologies like WebAPI, Entity Framework, and T4 templates. It covers consuming WebAPIs in UWP apps and validation requirements. Finally, it discusses authentication using Azure Active Directory and securing apps and services.

A modern web centric development-deployment environment Paulo Mattos

This document discusses a modern, web-centric software development and deployment environment. It outlines key driving forces behind web-based tools like ubiquity, platform independence, and enabling remote work. Specific tools are mentioned for source control (Subversion), documentation (MediaWiki), modules repository (Ivy), project management (FogBugz), and remote assistance (Copilot). Some open issues with user interfaces and standards are also noted. The document concludes by mentioning software products and games from Olympya.

Introduction to PHP H/MVC Frameworks by www.silicongulf.comChristopher Cubos

Model-View-Controller (MVC) is a software architecture, currently considered an architectural pattern used in software engineering. Separation of concerns is one of the major reasons why MVC Frameworks were created. Learn more about it in our presentation. This presentation was done in more than 8 Universities, Colleges, and other training institutions in the Philippines by Christopher John Cubos. Comparison of PHP MVC Frameworks like Zend Framework, Symfony, CodeIgniter, Kohana, Yii Framework, and the latest PHP Framework - FuelPHP.

Html5で変わるいろんなことMasakazu Muraoka

This document discusses HTML5 and provides resources for learning more about it. It mentions that HTML5 was discussed at the 2010 WordCamp conference in Yokohama and that HTML5 includes new elements like header, footer, and section, as well as new features like canvas, video, audio, and offline web applications. It then provides links to articles and websites that provide more information on HTML5 APIs, demonstrations of HTML5, and tools for web designers related to HTML5.

BladeRunnerJS Show & TellPhil Leggetter

Going mobile with RichFacesLukáš Fryč

The rise of portable devices last year shows how important is making applications compatible with mobiles. When it comes to web applications, JSF offers the same strong background for mobile development as it does for desktop applications: an extensible framework with a widely-accepted development model, allowing reuse of JSF programming skills and technologies on the mobile platform. RichFaces 4.1 goes behind concepts brought by JSF and provides developer with framework which makes your applications ready for mobile devices and offers you as rich component suite as for desktop environments. Lukas is going to show you how the RichFaces Showcase was turned into an application for portable devices, how a light-weight javascript framework was designed for making RichFaces applications mobile ready, the principles of an one-page application design and what are the necessary optimizations for making RichFaces applications run on mobile devices properly.

SoCal Code Camp 2011 - ASP.NET 4.5Jon Galloway

This document summarizes the agenda for a presentation on ASP.NET 4.5. The presentation focuses on improvements to ASP.NET Web Forms like strongly typed data binding and attributed models. It also discusses common features across ASP.NET like asynchronous processing. The document provides examples of using new HTML5 form features and model-view-controller patterns in ASP.NET MVC. It directs readers to online resources for additional information.

Migration from ASP.NET MVC to ASP.NET CoreMiroslav Popovic

This document discusses migrating from ASP.NET MVC to ASP.NET Core. It begins with a brief history of ASP.NET and reasons for migrating such as improved performance, cross-platform support and easier containerization. The migration process involves analyzing dependencies, migrating non-web projects to .NET Standard, creating a new ASP.NET Core project and migrating code, views, and configuration. Challenges like missing APIs, database access and identity are also addressed. The document argues that ASP.NET Core offers benefits for modern web development while acknowledging when a rewrite may not be worthwhile.

Micro-frontends – is it a new normal?Lohika_Odessa_TechTalks

На JavaScript Odesa #TechTalks мы поговорили о микрофронтендах как о современном архитектурном стиле проектирования для фронтенд разработки, который облегчает поддержку и деплой обновлений для крупных проектов. Также мы обсудили: Что такое микрофронтенды? Как использовать их с старым проектом? Монорепа vs мультирепа и почему? О спикере: Максим Белкин, Senior Software Engineer с 10-летним опытом коммерческой разработки веб-приложений. У Максима большой опыт в создании одностраничных приложений с использованием современных фреймворков и инструментов, а также большой опыт в области серверной разработки и создания REST API. Он также обладает глубокими знаниями в области объектно-ориентированной разработки, алгоритмов, кодирования и шаблонов тестирования и имеет опыт в гибкой разработке программного обеспечения, включая роли SCRUM Master и Team Lead.

Digital Publishing Made Easy with the OSCI ToolkitKyle Jaebker

Developing digital publications can often be a challenging process with uncertain outcomes. The OSCI Toolkit was developed to ease the publishing process by creating both an authoring environment for content creators and a flexible reading experience for users. This session will show how the OSCI Toolkit can be leveraged to generate online publications and ePub documents. With lots of out-of-the-box functionality, main features will be discussed, as well as customizing for your institution.

RichFaces CDK: Rapid JSF Component DevelopmentLukáš Fryč

JSF component libraries provide you with a solid basis for building enterprise UIs as they are covering most common use cases. But what can you do in a case that no existing component fits your project requirements? There are many JavaScript component projects which offer together nearly infinite possibilities. But it might not be evident that leveraging these JavaScript frameworks is as easy as writing plain old HTML code, separating component and page development efforts. But how to wrap these components to fit into JSF eco-system? That’s exactly where RichFaces CDK comes into play.

Share point saturday presentation 9 29-2012-2Derek Gusoff

This document summarizes a presentation about using JavaScript in SharePoint 2010. It discusses why JavaScript is useful for customizing SharePoint, introduces jQuery for DOM manipulation and AJAX calls, and covers various APIs for interacting with SharePoint data from JavaScript like ASMX web services, REST, and the Client Object Model. It also provides examples of debugging techniques and deploying JavaScript to SharePoint. A case study demonstrates building a filtered lookup field using only JavaScript.

Portal - Lego set for app developmentbdaw

Intro to DotNetNuke 6Antonio Chagoury

The document provides an introduction and overview of the new features in DotNetNuke 6. Some of the key highlights include: - The conversion of DotNetNuke from VB.NET to C# for improved performance and maintenance. - A redesigned user interface with new templates, control panels, and module categorization. - Updates to the RadEditor and new icon APIs for developers and designers. - New folder providers that integrate with Amazon S3 and Windows Azure cloud services. - An expanded commerce module and new SharePoint connector for the commercial editions. Extensive testing was conducted during development, including over 1500 manual and 500 automated test cases. A demo of the new

Haufe #msaday: "Building a Microservice Ecosystem"Daniel Bryant

Microservice platforms are finally becoming a reality: Mesos, Kubernetes, and a whole bunch of PaaS-style offerings are available, but the reality is that these platforms still don’t provide everything you need in order to build a fully functional microservice ecosystem. Come to this session to learn about the essential deployment, orchestration, and glue components that often have to be self-assembled. The presentation begins by looking at deployment techniques and tools and examines where to test (QA, staging, or production), how to test (integration and contracts), and how to separate deployment and release. It then discusses orchestration, configuration, and service discovery. Finally it looks at essential glue such as logging, monitoring, and alerting.

Staying connected: An Overview of Announcements from Microsoft’s Connect();dotNet Miami

1ST TECH TALK: "Yii : The MVC framework" by Benedicto B. Balilo Jr.Bicol IT.org

This document provides information about the Yii PHP framework. It discusses an upcoming workshop on September 28, 2013 about Yii from 1:00-5:00pm in the BUCS Auditorium. It provides an overview of Yii, including its features like MVC architecture, internationalization, caching, security measures, and code generation capabilities. It also discusses installing Yii, generating CRUD applications, and some recent news items about Yii releases and website updates. The presentation encourages developing careers in Legazpi using the Yii framework to reduce development time compared to hardcoding.

Node.js BFFs: our way to better/micro frontendsEugene Fidelin

About 2 years ago Marktplaats.nl started to build a new platform. We migrated from huge Java-based frontends towards smaller Node.js BFFs (backend-for-frontends). We are close to the next step and adapt a micro-frontends approach. Here I would like to share the outcomes of this quest: what architecture solutions are made, how does Marktplaats.nl run and scale so many BFFs in production, how we grew as a team, educated frontend-developers to write backend code and what were our biggest challenges.

Dayton webusers creatinghybridapps-webeditionMartin Davis III

The document discusses creating hybrid mobile apps. It provides an overview of different types of mobile apps including native, HTML5, translated JavaScript, and hybrid apps. It then focuses on hybrid apps, describing how they work by wrapping web content in a native container. The document demonstrates building a sample hybrid app using Trigger.io's Forge platform, highlighting both benefits and limitations. It concludes by introducing the company MD3 and their expertise in Drupal and connecting it to mobile apps.

Highlights from microsoft ignite 2015Kim Frehe

The document provides a summary of highlights from the Ignite 2015 conference. It discusses upcoming releases of products like SharePoint Server 2016, Windows Server 2016, SQL Server 2016, and Office 2016. Keynotes focused on team productivity, mobility, content co-creation, and security. Windows 10 and cloud computing were emphasized. Updates to SharePoint include new limits, Groups, video portals, and Delve integration. Developers were excited about Xamarin for cross-platform mobile apps and updates to Entity Framework and .NET. Resources for learning more about the conference sessions and products were provided.

Micro frontend architecture_presentation_ssoniSandeep Soni

This document discusses micro frontends, which is a microservices approach to front end web development. It outlines some issues with monolithic frontends like scaling and communication problems. It then discusses micro frontend design principles such as autonomous features, team ownership, being tech agnostic, driving value, and following microservices patterns. Finally, it covers techniques for implementing micro frontends including using separate or shared runtimes with options like micro apps, iframes, or webpack modular federation and integrating them through runtime, build time, or iframe methods.

Web技術の現状と将来 (Open Source Conference 2011 Tokyo Spring)Rikkyo University

The document discusses several topics from a W3C/Keio meeting: 1. HTML5 and the Web and TV Interest Group which is working to bring the web to televisions through HTML5. 2. The CSS CJK working group which is developing CSS specifications to support complex text layouts for Chinese, Japanese, and Korean languages. 3. The goal of "Globalization" to create a unified "Global One Web" using W3C standards that can support languages and writing systems around the world.

InfoTalk#17 1stWakasa Masao

HTML5 is a new version of the HTML standard that was developed by the W3C and WHATWG to address limitations in previous versions and support new features. It includes new elements, scripting APIs, and various application programming interfaces. HTML5 aims to improve web applications by including features like local storage, web workers, geolocation, canvas, video and audio elements, and more. Demos and examples show how HTML5 features can be used to build richer applications that work offline and have capabilities similar to native desktop apps.

More Related Content

What's hot (20)

A modern web centric development-deployment environment Paulo Mattos

Introduction to PHP H/MVC Frameworks by www.silicongulf.comChristopher Cubos

Html5で変わるいろんなことMasakazu Muraoka

BladeRunnerJS Show & TellPhil Leggetter

Going mobile with RichFacesLukáš Fryč

SoCal Code Camp 2011 - ASP.NET 4.5Jon Galloway

Migration from ASP.NET MVC to ASP.NET CoreMiroslav Popovic

Micro-frontends – is it a new normal?Lohika_Odessa_TechTalks

Digital Publishing Made Easy with the OSCI ToolkitKyle Jaebker

RichFaces CDK: Rapid JSF Component DevelopmentLukáš Fryč

Share point saturday presentation 9 29-2012-2Derek Gusoff

Portal - Lego set for app developmentbdaw

Intro to DotNetNuke 6Antonio Chagoury

Haufe #msaday: "Building a Microservice Ecosystem"Daniel Bryant

Staying connected: An Overview of Announcements from Microsoft’s Connect();dotNet Miami

1ST TECH TALK: "Yii : The MVC framework" by Benedicto B. Balilo Jr.Bicol IT.org

Node.js BFFs: our way to better/micro frontendsEugene Fidelin

Dayton webusers creatinghybridapps-webeditionMartin Davis III

Highlights from microsoft ignite 2015Kim Frehe

Micro frontend architecture_presentation_ssoniSandeep Soni

A modern web centric development-deployment environment Paulo Mattos

Introduction to PHP H/MVC Frameworks by www.silicongulf.comChristopher Cubos

Html5で変わるいろんなことMasakazu Muraoka

BladeRunnerJS Show & TellPhil Leggetter

Going mobile with RichFacesLukáš Fryč

SoCal Code Camp 2011 - ASP.NET 4.5Jon Galloway

Migration from ASP.NET MVC to ASP.NET CoreMiroslav Popovic

Micro-frontends – is it a new normal?Lohika_Odessa_TechTalks

Digital Publishing Made Easy with the OSCI ToolkitKyle Jaebker

RichFaces CDK: Rapid JSF Component DevelopmentLukáš Fryč

Share point saturday presentation 9 29-2012-2Derek Gusoff

Portal - Lego set for app developmentbdaw

Intro to DotNetNuke 6Antonio Chagoury

Haufe #msaday: "Building a Microservice Ecosystem"Daniel Bryant

Staying connected: An Overview of Announcements from Microsoft’s Connect();dotNet Miami

1ST TECH TALK: "Yii : The MVC framework" by Benedicto B. Balilo Jr.Bicol IT.org

Node.js BFFs: our way to better/micro frontendsEugene Fidelin

Dayton webusers creatinghybridapps-webeditionMartin Davis III

Highlights from microsoft ignite 2015Kim Frehe

Micro frontend architecture_presentation_ssoniSandeep Soni

Similar to HTML5のご紹介 (20)

Web技術の現状と将来 (Open Source Conference 2011 Tokyo Spring)Rikkyo University

InfoTalk#17 1stWakasa Masao

WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi

This document discusses HTML5 and provides an overview of its key features. It explains that HTML5 is not just the HTML language, but also includes related APIs that allow richer functionality. Some of the major areas covered include semantics and accessibility, rich internet applications using new APIs, and specific technologies like canvas, video/audio, web storage, and web workers. The document emphasizes that HTML5 is still evolving and aims to unify web development across browsers.

HTML5 History & FeaturesDave Ross

Change by HTML5dynamis

The document summarizes key features of HTML5 including updated markup, forms, multimedia elements, APIs, and specifications. It discusses the evolution of HTML in an incremental way to ease authoring of web applications. Specific HTML5 features covered include forms, Canvas, WebSockets, and APIs for drag-and-drop, geolocation, offline events, and more. Browser support for HTML5 is also addressed.

HTML 5Prof. Erwin Globio

Prof. Erwin M. Globio gave a presentation on HTML5 that covered: 1) The history and development of HTML5 by groups like WHATWG and its adoption by W3C. 2) New features in HTML5 like audio, video, and canvas elements to enable richer content as well as geo-location APIs for mobile apps. 3) Issues with older standards like HTML4 and XHTML2 that HTML5 aims to address and improve cross-browser compatibility. 4) Questions around browser support for HTML5 and implications for web designers in adopting the new standard.

HTML5 Webinar - Mind Storm SoftwareRomin Irani

HTML5: An OverviewNagendra Um

HTML5 and Beyonddynamis

This document is a presentation on HTML5 and beyond given by Tomoya Asai at JSiSE at Hokkaido University. The presentation covers the current state and future of HTML5, browsers, JavaScript APIs, and new web technologies. It provides examples and references to specifications, browser implementations, and demos related to HTML5 features such as semantic markup, forms, canvas, WebSockets, geolocation, and more.

HTML5 어디까지 왔나?정현 황

- HTML5 is the latest evolution of the standard Hypertext Markup Language (HTML) and was last updated by the WHATWG in 2004. It includes new elements, formatting, and interactivity features that allow for richer web content and applications. - Key new features in HTML5 include the canvas element for 2D graphics and animation, video and audio elements, and APIs for things like local storage, geolocation, and web sockets. These features are being adopted by modern browsers and are making the web more app-like without plugins. - HTML5 is supported by all major browsers now and usage has grown significantly over the past few years according to statistics. It provides capabilities that were previously only possible with plugins

Open Source Conference 2010 福岡 W3C/Keio 講演ウェブ技術の現状と将来Rikkyo University

Html5 PrimerGraeme Bryan

This document provides an overview of HTML5 including its history and development. It discusses the key organizations involved like the W3C. It outlines new HTML5 features like new semantic tags, forms improvements, canvas, video, geolocation, local storage, and cache manifest. It also discusses related technologies like XHTML5 and differences from HTML4. Finally, it recommends resources for learning more about HTML5.

WHAT IS HTML5?(20100510)Shumpei Shiraishi

This document discusses HTML5 and provides an overview of its features. It introduces Shumpei Shiraishi and their work related to HTML5 and Google APIs. It then explains that HTML5 is about more than just HTML, it also includes APIs that allow richer interactions. Some of the key features covered include semantics and accessibility, rich internet applications, 2D and 3D graphics, video and audio, offline web applications, and more. Resources for the Japanese HTML5 community are also listed.

HTML5 Introductiondynamis

This document provides an overview and introduction to HTML5. It begins with a discussion of browser market share statistics and the birth of HTML5 by the WHATWG organization. It then outlines the wide range of new HTML5 markup, elements, events, APIs and technologies including forms, canvas, web sockets, and more. The remainder of the document discusses the status and implementation of these HTML5 features across modern browsers like Firefox, and provides references to HTML5 test suites, specifications, implementations and demos.

HTML 5 & The Modern WebJumping Bean

This document discusses the importance of HTML 5 and the open web. It provides an overview of HTML 5 and its capabilities including new semantic elements, offline storage, device access, connectivity improvements, multimedia support, 3D graphics, performance enhancements and styling. It also covers threats to the open web like walled gardens, privacy issues and legislation. The document compares native apps to HTML 5 and discusses where HTML 5 is currently in terms of adoption. It outlines the future of HTML 5, JavaScript and related web technologies.

HTML5 development in 30 minutesNazrul Kamaruddin

Nazrul Kamaruddin will give a 30 minute presentation on HTML5 development. The agenda includes a sprint into HTML5, code examples, and references. Browser support for HTML5 is high in modern browsers like Chrome and Opera Mobile but lower in older browsers like IE9. The presentation will cover HTML5 elements, CSS features like rounded corners and shadows, JavaScript tools like Modernizr, and mobile APIs for geolocation and bookmarks. Resources recommended include HTML5 Boilerplate, Dive Into HTML5 book, and sites for HTML5 news and tutorials. The talk concludes by mentioning mobile development frameworks like PhoneGap and next events.

HTML5 and web platformdynamis

Building modern web sites with ASP .Net Web API, WebSockets and RSignalAlessandro Pilotti

My session at ITCamp.ro 2012: Web site development is an ever changing landscape. Thanks to the latest web browser technologies it's possible to create highly responsive single page applications, requiring a new approach to design and development on the server side. During this session we'll see ho to use .Net technologies to get the best out of the new Web API, WebSockets and the excellent RSignal framework.

PhoneGap at Facebook Mobile HackPhoneGap

PhoneGap allows developers to write mobile apps using web technologies like HTML, CSS, and JavaScript. It works by embedding a webview browser into a native app shell, providing a bridge to access device APIs. Developers write their app code once using web standards, and PhoneGap packages it to deploy to various mobile platforms like iOS, Android, and more. It has a large community of contributors and many popular apps have been created with PhoneGap.

전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)zinyus

The document discusses predictions for trends in web and HTML5 for 2013. The top 10 trends are: 1) Increased use of HTML5-enabled devices, 2) HTML5 becoming the standard, 3) Plans to finalize HTML5.1 in 2014, 4) Specialization of web apps, 5) Growth in the number of web APIs, 6) Emergence of web operating systems, 7) Expansion of the web into new areas like digital signage, 8) Responsive web design, 9) Need for policies around web development, and 10) Rethinking the web ecosystem. The document provides details on each trend and related technologies.

Web技術の現状と将来 (Open Source Conference 2011 Tokyo Spring)Rikkyo University

InfoTalk#17 1stWakasa Masao

WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi

HTML5 History & FeaturesDave Ross

Change by HTML5dynamis

HTML 5Prof. Erwin Globio

HTML5 Webinar - Mind Storm SoftwareRomin Irani

HTML5: An OverviewNagendra Um

HTML5 and Beyonddynamis

HTML5 어디까지 왔나?정현 황

Open Source Conference 2010 福岡 W3C/Keio 講演ウェブ技術の現状と将来Rikkyo University

Html5 PrimerGraeme Bryan

WHAT IS HTML5?(20100510)Shumpei Shiraishi

HTML5 Introductiondynamis

HTML 5 & The Modern WebJumping Bean

HTML5 development in 30 minutesNazrul Kamaruddin

HTML5 and web platformdynamis

Building modern web sites with ASP .Net Web API, WebSockets and RSignalAlessandro Pilotti

PhoneGap at Facebook Mobile HackPhoneGap

전문가 토크릴레이 1탄 html5 전망 (전종홍 박사)zinyus

More from yoshikawa_t (20)

Ionicで作るTechfeedyoshikawa_t

困った時のDev toolsの使い方（初心者向け）yoshikawa_t

TechFeedというテクノロジーキュレーションサービスを作った話yoshikawa_t

Chrome DevTools Awesome 10 Features +1yoshikawa_t

Toru Yoshikawa highlights 10 awesome features of Chrome DevTools including the ability to pick colors from the screen in Elements, adjust animation speed in Elements, define animation timing in Elements, search by selector in Elements, take timeline screenshots in Timeline, show layers in Layout, enable network throttling in Network, display variable values inline in Sources, store variables as globals in Sources, manage framework blackboxing in Sources, and enable remote debugging of WebViews. Yoshikawa also provides links to resources on using Chrome DevTools and its official documentation.

これからのモバイルWebと最新動向yoshikawa_t

いまさら聞けないHTML5概要yoshikawa_t

オフラインWebアプリの再到来で今、再び注目されるAPIの本命　ーJavaScript SQL-like databaseyoshikawa_t

jQuery Mobile is not dead!yoshikawa_t

HTML5開発最前線yoshikawa_t

Chrome Apps のデバイスAPIyoshikawa_t

Chrome Apps & Chromeウェブストア概要yoshikawa_t

Chrome DevTools for beginners v1.2yoshikawa_t

モバイル時代のWebパフォーマンスyoshikawa_t

モバイル時代のWebパフォーマンスTipsyoshikawa_t

Chrome apps for mobile 概要yoshikawa_t

Chrome Apps 概要yoshikawa_t

Chrome Devtools for beginners (v1.1)yoshikawa_t

Html5概要 & デモyoshikawa_t

いまさら聞けないCSSレイアウト入門yoshikawa_t

Sencha touch vs j query mobileyoshikawa_t

Ionicで作るTechfeedyoshikawa_t

困った時のDev toolsの使い方（初心者向け）yoshikawa_t

TechFeedというテクノロジーキュレーションサービスを作った話yoshikawa_t

Chrome DevTools Awesome 10 Features +1yoshikawa_t

これからのモバイルWebと最新動向yoshikawa_t

いまさら聞けないHTML5概要yoshikawa_t

オフラインWebアプリの再到来で今、再び注目されるAPIの本命　ーJavaScript SQL-like databaseyoshikawa_t

jQuery Mobile is not dead!yoshikawa_t

HTML5開発最前線yoshikawa_t

Chrome Apps のデバイスAPIyoshikawa_t

Chrome Apps & Chromeウェブストア概要yoshikawa_t

Chrome DevTools for beginners v1.2yoshikawa_t

モバイル時代のWebパフォーマンスyoshikawa_t

モバイル時代のWebパフォーマンスTipsyoshikawa_t

Chrome apps for mobile 概要yoshikawa_t

Chrome Apps 概要yoshikawa_t

Chrome Devtools for beginners (v1.1)yoshikawa_t

Html5概要 & デモyoshikawa_t

いまさら聞けないCSSレイアウト入門yoshikawa_t

Sencha touch vs j query mobileyoshikawa_t

Recently uploaded (20)

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Procurement Insights Cost To Value Guide.pptxJon Hansen

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Want to learn practical tips for designing systems that can scale efficiently without compromising speed? Join us for a workshop where we’ll address these challenges head-on and explore how to architect low-latency systems using Rust. During this free interactive workshop oriented for developers, engineers, and architects, we’ll cover how Rust’s unique language features and the Tokio async runtime enable high-performance application development. As you explore key principles of designing low-latency systems with Rust, you will learn how to: - Create and compile a real-world app with Rust - Connect the application to ScyllaDB (NoSQL data store) - Negotiate tradeoffs related to data modeling and querying - Manage and monitor the database for consistently low latencies

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Procurement Insights Cost To Value Guide.pptxJon Hansen

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

HTML5のご紹介

1. HTML DevFestX Sapporo 2012/2/11 Toru Yoshikawa ( @yoshikawa_t )

2. Toru Yoshikawa @yoshikawa_t • Google API Expert Chrome • html5j.org / HTML5 • Web Chrome Web Store Apps • allWeb jQuery Mobile • http://d.hatena.ne.jp/pikotea/

3. • HTML5 • HTML5 API

4. HTML5 • 1999 HTML4.01 10 • • WHATWG Web Applications 1.0 Web Forms 2.0 W3C • 2014

5. W3C 1. Working Draft 2. Last Call Working Draft ← 3. Candidate Recommendation 4. Proposed Recommendation 5. Recommendation

6. HTML5 W3C XHTML1.0 HTML XHTML 1998 XHTML2.0 XHTML ... Ajax Web2.0 Web W3C HTML 2004

7. HTML5 Apple Mozilla Opera WHATWG Web Hypertext Application Technology 2004 Working Group HTML5 Web 2007 W3C WHATWG 2008 W3C HTML5

8. HTML5 2009 XHTML2.0 HTML5 Last Call Working 2011 Draft NOW

9. HTML5 • HTML5 • HTML5

10. • HTML5 - Semantic Elements - Multimedia Elements - HTML5 Forms - Event model & APIs - Ofﬂine Events - Drag & Drop API - HTML5 Parser • HTML Canvas 2D Context • HTML Microdata • HTML5 Web Messaging

11. HTML5 Web HTML5 …

12. HTML5 The Web platform: Browser technologies http://platform.html5.org/

14. Ofﬂine & Storage

15. Ofﬂine & Storage • Application Cache … • Web Storage … • Indexed Database … KVS • File APIs … • File System API … • online/ofﬂine events … /

16. Ofﬂine & Storage Demo • HTML5 Terminal

17. Multimedia

18. Multimedia • video/audio … / • WebVTT … • Web Audio API … • HTML Media Capture …

19. Multimedia Demo • Blowing apart fragments of video • Using WebSRT to create video captions • HTML5 Wow Visualizer

20. Graphics, 3D & Effects

21. Graphics, 3D & Effects • Canvas … • WebGL … 3D • SVG …

22. Graphics, 3D & Effects Demo • 3D Nyan Cat!!!! • WebGL City

23. Realtime / Connectivity

24. Realtime / Connectivity • WebSocket … • Server-Sent Events … /Comet • Web Messaging … Web • XMLHttpRequest Level2 … • Notiﬁcations … • WebRTC … /

25. Realtime / Connectivity Demo • WebRTC Video Element Demo ※chrome dev channel -enable-media-stream

26. Device Access

27. Device Access • Geolocation API … GPS • Speech Input … • Device Orientation … • Contacts API … • Calendar API … • Battery Status API … • Network Information API …

28. Device Access Demo • Ball Pool • Google Gravity • data: text/html, <input type="text" x-webkit- speech style="font-size: 64px;"> ※

29. Semantics

30. Semantics • … header/footer/section/article 108 30 14 • … menu/progress/meter • HTML5 Forms … input type search/email/date/ range/color • Microdata … itemscope/itemprop

31. Semantics Demo • Web Forms 2.0 demo page ※Opera

32. CSS3 / Styling

33. CSS3 / Styling • CSS3 Selectors … :ﬁrst-child/:nth-child(odd) • border-radius … • text-shadow/box-shadow … • gradient … • Webfonts … • Transforms … • Transitions/Animations … CSS

34. CSS3 / Styling Demo • Button Maker • Round corners - HTML5Rokcs %23 # • CSS3 Patterns Gallery • CSS Clock

36. When can I use Mobile HTML5

37. Polyﬁll A shim that mimics a future API providing fallback functionality to older browsers. - Paul Irish API HTML5 Please HTML5 Cross Browser Polyﬁlls

39. HTML5Rocks http://www.html5rocks.com/en/ Chrome Experiments http://www.chromeexperiments.com/ Chromium samples http://chromium.googlecode.com/svn/trunk/samples/ Internet Explorer 10 Test Drive http://ie.microsoft.com/testdrive/ html5wow http://www.htmlﬁvewow.com/ HTML5 http://www.slideshare.net/shumpei/html5-11207810

40. html5j.org http://www.html5j.org/

41. Thank You!! Toru Yoshikawa ( @yoshikawa_t )

HTML5のご紹介

Recommended

More Related Content

What's hot (20)

Similar to HTML5のご紹介 (20)

More from yoshikawa_t (20)

Recently uploaded (20)

HTML5のご紹介