Web Accessibility is more than getting colours to match, and knowing when to change from one display layout to another.
Web Accessibility is more than adding "alt" tags to images and "title" tags to links.
Web Accessibility starts with the Semantics on your web page.
This is a talk I put together to show just how much I DON'T know, and how much each of these areas truly is a specialist field
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
APEX& jQuery Mobile
Binnenkort zal Oracle versie de lang aangekondigde upgrade naar release 4.2 van Oracle Application Express beschikbaar maken. Een van de meest besproken nieuwe features die voor dit nieuwe release zijn aangekondigd is de integratie van het jQuery Mobile framework. Met de integratie van dit framework zal het mogelijk worden om met APEX applicaties te ontwikkelen, die geschikt zijn voor mobiele toestellen.
Wat is en hoe werkt jQuery Mobile en wat betekend dit voor het ontwikkelen in APEX. Dat zijn de onderwerpen die de presentatie aan bod komen. En waarom wachten tot het release van 4.2. Het is namelijk nu al mogelijk om jQuery Mobile in APEX te integreren en gebruiken. Hoe, wordt in een demo getoond. Deze sessie is waarschijnlijk de enige waarin u gevraagd zal worden om uw mobile telefoon aan te laten staan.
"Mobile themes for Wordpress, QR codes, and custom shortURLs". Delivered by Chris Traganos, Web Developer at Harvard Public Affairs & Communications, on May 18th, 2010 at Lamont Library, Forum Room.
WAI-ARIA provides roles, states and properties that act as a bridge between HTML and rich widgets to make dynamic web content and applications more accessible to assistive technologies and people with disabilities. It allows non-standard widgets and dynamic content to be accessed by defining roles like slider, menu and tab, as well as states, properties and live regions to indicate changes to the content. WAI-ARIA has been implemented by most assistive technologies and browsers and can be used even on simple pages, for example by adding landmark roles, required labels and other properties.
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...Patrick Lauke
This document introduces the Accessible Rich Internet Applications (ARIA) specification. It discusses:
1) The need for ARIA to make complex web applications accessible to assistive technologies like screen readers, as traditional HTML elements may not adequately convey semantics.
2) Common interactive widgets and how ARIA attributes like role, state, and properties help expose their purpose and functionality.
3) Best practices for applying ARIA, including using native HTML where possible, and ensuring custom interactive elements are keyboard navigable and have accessible names.
The document provides examples of how to make common structures and widgets like buttons, menus, sliders accessible with ARIA. It emphasizes ARIA enhances, rather than replaces, traditional
This document provides a basic cheat sheet for CSS properties and selectors. It defines selectors like id and class, and properties for styling text, backgrounds, borders, positioning and layout. Key properties covered include color, font, text styles, link states, background images, padding, margins and floats. CSS rules are defined for styling elements, links, and selecting odd and even table rows.
The document discusses various jQuery UI widgets including tabbed panels, accordion panels, date pickers, sliders, and progress bars. It provides instructions on how to set up and configure each widget with examples of the required HTML, JavaScript, and options. The widgets can be used to create interactive user interfaces for applications.
This document discusses modern web UI components and frameworks. It introduces templates, custom elements, and HTML imports that allow developers to build reusable components. It then summarizes the Brick library from Mozilla, which includes common UI elements like calendars, sliders, and tabs. Developers can also build their own custom elements. The document encourages using these techniques and libraries to rapidly develop cross-browser web apps.
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
APEX& jQuery Mobile
Binnenkort zal Oracle versie de lang aangekondigde upgrade naar release 4.2 van Oracle Application Express beschikbaar maken. Een van de meest besproken nieuwe features die voor dit nieuwe release zijn aangekondigd is de integratie van het jQuery Mobile framework. Met de integratie van dit framework zal het mogelijk worden om met APEX applicaties te ontwikkelen, die geschikt zijn voor mobiele toestellen.
Wat is en hoe werkt jQuery Mobile en wat betekend dit voor het ontwikkelen in APEX. Dat zijn de onderwerpen die de presentatie aan bod komen. En waarom wachten tot het release van 4.2. Het is namelijk nu al mogelijk om jQuery Mobile in APEX te integreren en gebruiken. Hoe, wordt in een demo getoond. Deze sessie is waarschijnlijk de enige waarin u gevraagd zal worden om uw mobile telefoon aan te laten staan.
"Mobile themes for Wordpress, QR codes, and custom shortURLs". Delivered by Chris Traganos, Web Developer at Harvard Public Affairs & Communications, on May 18th, 2010 at Lamont Library, Forum Room.
WAI-ARIA provides roles, states and properties that act as a bridge between HTML and rich widgets to make dynamic web content and applications more accessible to assistive technologies and people with disabilities. It allows non-standard widgets and dynamic content to be accessed by defining roles like slider, menu and tab, as well as states, properties and live regions to indicate changes to the content. WAI-ARIA has been implemented by most assistive technologies and browsers and can be used even on simple pages, for example by adding landmark roles, required labels and other properties.
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...Patrick Lauke
This document introduces the Accessible Rich Internet Applications (ARIA) specification. It discusses:
1) The need for ARIA to make complex web applications accessible to assistive technologies like screen readers, as traditional HTML elements may not adequately convey semantics.
2) Common interactive widgets and how ARIA attributes like role, state, and properties help expose their purpose and functionality.
3) Best practices for applying ARIA, including using native HTML where possible, and ensuring custom interactive elements are keyboard navigable and have accessible names.
The document provides examples of how to make common structures and widgets like buttons, menus, sliders accessible with ARIA. It emphasizes ARIA enhances, rather than replaces, traditional
This document provides a basic cheat sheet for CSS properties and selectors. It defines selectors like id and class, and properties for styling text, backgrounds, borders, positioning and layout. Key properties covered include color, font, text styles, link states, background images, padding, margins and floats. CSS rules are defined for styling elements, links, and selecting odd and even table rows.
The document discusses various jQuery UI widgets including tabbed panels, accordion panels, date pickers, sliders, and progress bars. It provides instructions on how to set up and configure each widget with examples of the required HTML, JavaScript, and options. The widgets can be used to create interactive user interfaces for applications.
This document discusses modern web UI components and frameworks. It introduces templates, custom elements, and HTML imports that allow developers to build reusable components. It then summarizes the Brick library from Mozilla, which includes common UI elements like calendars, sliders, and tabs. Developers can also build their own custom elements. The document encourages using these techniques and libraries to rapidly develop cross-browser web apps.
This document provides instructions for creating a basic template in Joomla. It discusses the file structure of a basic Joomla template which includes folders for CSS, images, and template files. It then outlines 4 steps to create a template: designing the layout, adding HTML markup, writing CSS code, and "Joomlafying" the code to integrate Joomla functions. The goal is to provide a basic understanding of what is required to build a functional Joomla template.
The document discusses how to improve WordPress admin pages by following WordPress UI guidelines and best practices. It covers topics like using the proper icons, headers, buttons, forms, containers and other interface elements. It also provides examples of how to implement tabs, tables, scripts, stylesheets, media uploaders, pointers and data storage options. The document encourages contributors to explore more WordPress admin UI resources and to contribute to improving the WordPress UI.
This document provides instructions on converting a Photoshop (PSD) design into a WordPress theme. It explains that you should visualize how the PSD design will translate to HTML elements like headers, menus, content areas, etc. before beginning to code. Key areas covered include using an existing framework versus coding from scratch, including necessary WordPress functions and files, and organizing code into templates, functions.php, and other standard WordPress theme files. The goal is to understand the technical structure of the design and properly structure the theme code.
This document discusses lessons learned in making various web development frameworks like Drupal, WordPress, and jQuery accessible. It notes that while frameworks make building apps quicker, they can result in accessibility issues if not implemented properly. The document outlines strategies for planning accessibility into frameworks, such as listing all interactive elements, describing how they should work, prioritizing native interactions, validating code, and checking frameworks with keyboard and assistive technologies. Overall it emphasizes considering accessibility from the start when using frameworks to develop websites and applications.
The project gutenberg e book, fairy tales from brazil, by elsie spicerAndrei Hortúa
This document is the full text of the book "Fairy Tales from Brazil" by Elsie Spicer Eells. It contains 18 folk tales from Brazilian folklore that explain natural phenomena or aspects of the natural world. The stories are introduced as if they are being told by an "ama" or maid named Theresa to children under mango trees in a Brazilian garden at story time.
Model View Controller (MVC) is a software architectural pattern commonly used for developing web applications. It promotes separation of concerns by dividing the application into three interconnected parts - the Model, the View, and the Controller. The Model manages the data logic and rules of the application. The View displays the user interface and presentation logic. The Controller interprets user input, communicates between the Model and View, and controls the flow of data and functionality. MVC enables modular and reusable application components and code and simplifies application maintenance. Django is a web framework that follows the MVT (Model Template View) pattern, which is very similar to MVC.
How to use media queries to optimize the same markup for different devices and features.
Get an overview for designing sites for mobile, desktop and even the iPad. Examples include mimicking native appearance and animations with CSS3.
Front-end Rails-приложений приложений, основанный на БЭМАлександр Ежов
This document discusses front-end Rails application organization based on the BEM methodology. It introduces some BEM concepts and provides examples of implementing BEM in Sass and HTML. Key points include:
- Organizing stylesheets by global styles, layouts, and component blocks.
- Using BEM naming conventions like block__element and block--modifier.
- Implementing common patterns like icons through mixins and global styles.
- Structuring Sass imports, variables, and mixins to support the BEM methodology.
This document summarizes the schema mappings and properties for Microsoft PowerPoint file formats. It describes the core presentation elements like slides, masters and views. It also outlines the different property sets for structuring information, presentation-level attributes, and configurations for outputs like web publishing, printing and slide shows. Key elements and examples are provided for different aspects like slide lists, HTML properties and view settings.
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.
This document discusses various page layout techniques using CSS, including floats, positioning, and responsive design. It begins by outlining a typical website layout with common elements like headers, navigation bars, page content, and footers. It then covers using CSS properties like float and clear to create basic page layouts with columns. The document also discusses centering pages, different positioning techniques, and creating fluid and responsive designs that adapt to different screen sizes using media queries. Specific techniques covered include removing default styling from lists to create navigation bars, and styling list items as navigation buttons.
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind
The document discusses Windows 8 app development. It covers topics like the Windows 8 platform and tools, UI controls like AppBar and FlipView, semantic zoom and grouping in ListView, contracts, notifications, publishing to the Windows Store, and key development points. Visual Studio 2012 is introduced as the development tool. Code examples are provided for various controls and concepts.
Dr. Strangelove or: How I learned to stop worrying and love HTML, CSS and Jav...RobotDeathSquad
In this session we'll take a hands on approach to building reusable and scaleable front end code. We walk through building a modern web application UI using microformats, gracefully degrading CSS3 and Javascript closures. Finally, we'll see how the same code can be used throughout an application with little modification.
Are you new to Joomla! template designing and keen to learn how to go about creating one? This is beginner-level training for Joomla! template developers conducted on 2 Oct 2010 for free.
Slashes and Dots provide Joomla training on demand basis and free Joomla! related training from time to time
jQuery Mobile: Progressive Enhancement with HTML5Todd Anderson
This document provides an overview of jQuery Mobile, a JavaScript framework for building mobile web sites and apps. It discusses how jQuery Mobile uses progressive enhancement with HTML5 to provide cross-platform support and a native look-and-feel on mobile devices. Key aspects covered include jQuery Mobile's use of progressive enhancement to enhance content, presentation, and behavior; its reliance on HTML5 data attributes for markup; support for various widgets like pages, buttons, forms and lists; and options for native deployment using technologies like PhoneGap.
A walkthrough showing you how to take a webpage template and create the HTML and CSS for it. We go through each of the parts of the page individually and explain how to create them all
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
Dialogs
Buttons and Toolbars
-Ways to Make a Button
-Placing Icons on Your Buttons
-Inline Buttons
-Button Groupings
-Navigation Toolbars
Collapsible Content
Event Handling
-Responding to various events
-Page related events
Ajax & Interaction with server (REST & SOAP)
Deployment using Phonegap (e.g. Android)
Overview of Android Devt Environment
Best Practices in jQM
Hands-on exercises
This document discusses design basics for the web, including layout, color, typography, and design as it relates to Drupal. It defines design and explains how it differs from art. It covers layout fundamentals like wireframes and grids and why grids are useful. Typography basics like font selection, sizing, and hierarchy are outlined. Color consistency and defined palettes are noted as important. Potential pitfalls for web design like non-web safe fonts and lack of communication with developers are also mentioned. Finally, online tools for design, color, grids, type, and more are showcased.
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
This document discusses jQuery Mobile and Sencha Touch, which are frameworks for building rich mobile web applications. It provides an overview of key features of each framework.
jQuery Mobile is built on jQuery and uses a modular library approach with markup-driven configuration. It supports features like progressive enhancement, pages, transitions between pages, disabling AJAX loading, back buttons, themes, toolbars, footers, buttons, lists, forms, and touch events.
Sencha Touch is a JavaScript framework that supports components, data access and MVC patterns, forms, scrolling, touch events, theming, and charts. It uses an application architecture with stores, models, and views. It supports common UI elements like lists, nested
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee
The document discusses the Bootstrap framework for responsive web design. It explains that Bootstrap allows developers to create responsive websites without relying on graphic designers. It provides instructions for including Bootstrap's CSS and JavaScript files. The document also includes an example of how to use Bootstrap features like navbars and dropdown menus in an MVC application.
This document provides instructions for creating a basic template in Joomla. It discusses the file structure of a basic Joomla template which includes folders for CSS, images, and template files. It then outlines 4 steps to create a template: designing the layout, adding HTML markup, writing CSS code, and "Joomlafying" the code to integrate Joomla functions. The goal is to provide a basic understanding of what is required to build a functional Joomla template.
The document discusses how to improve WordPress admin pages by following WordPress UI guidelines and best practices. It covers topics like using the proper icons, headers, buttons, forms, containers and other interface elements. It also provides examples of how to implement tabs, tables, scripts, stylesheets, media uploaders, pointers and data storage options. The document encourages contributors to explore more WordPress admin UI resources and to contribute to improving the WordPress UI.
This document provides instructions on converting a Photoshop (PSD) design into a WordPress theme. It explains that you should visualize how the PSD design will translate to HTML elements like headers, menus, content areas, etc. before beginning to code. Key areas covered include using an existing framework versus coding from scratch, including necessary WordPress functions and files, and organizing code into templates, functions.php, and other standard WordPress theme files. The goal is to understand the technical structure of the design and properly structure the theme code.
This document discusses lessons learned in making various web development frameworks like Drupal, WordPress, and jQuery accessible. It notes that while frameworks make building apps quicker, they can result in accessibility issues if not implemented properly. The document outlines strategies for planning accessibility into frameworks, such as listing all interactive elements, describing how they should work, prioritizing native interactions, validating code, and checking frameworks with keyboard and assistive technologies. Overall it emphasizes considering accessibility from the start when using frameworks to develop websites and applications.
The project gutenberg e book, fairy tales from brazil, by elsie spicerAndrei Hortúa
This document is the full text of the book "Fairy Tales from Brazil" by Elsie Spicer Eells. It contains 18 folk tales from Brazilian folklore that explain natural phenomena or aspects of the natural world. The stories are introduced as if they are being told by an "ama" or maid named Theresa to children under mango trees in a Brazilian garden at story time.
Model View Controller (MVC) is a software architectural pattern commonly used for developing web applications. It promotes separation of concerns by dividing the application into three interconnected parts - the Model, the View, and the Controller. The Model manages the data logic and rules of the application. The View displays the user interface and presentation logic. The Controller interprets user input, communicates between the Model and View, and controls the flow of data and functionality. MVC enables modular and reusable application components and code and simplifies application maintenance. Django is a web framework that follows the MVT (Model Template View) pattern, which is very similar to MVC.
How to use media queries to optimize the same markup for different devices and features.
Get an overview for designing sites for mobile, desktop and even the iPad. Examples include mimicking native appearance and animations with CSS3.
Front-end Rails-приложений приложений, основанный на БЭМАлександр Ежов
This document discusses front-end Rails application organization based on the BEM methodology. It introduces some BEM concepts and provides examples of implementing BEM in Sass and HTML. Key points include:
- Organizing stylesheets by global styles, layouts, and component blocks.
- Using BEM naming conventions like block__element and block--modifier.
- Implementing common patterns like icons through mixins and global styles.
- Structuring Sass imports, variables, and mixins to support the BEM methodology.
This document summarizes the schema mappings and properties for Microsoft PowerPoint file formats. It describes the core presentation elements like slides, masters and views. It also outlines the different property sets for structuring information, presentation-level attributes, and configurations for outputs like web publishing, printing and slide shows. Key elements and examples are provided for different aspects like slide lists, HTML properties and view settings.
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.
This document discusses various page layout techniques using CSS, including floats, positioning, and responsive design. It begins by outlining a typical website layout with common elements like headers, navigation bars, page content, and footers. It then covers using CSS properties like float and clear to create basic page layouts with columns. The document also discusses centering pages, different positioning techniques, and creating fluid and responsive designs that adapt to different screen sizes using media queries. Specific techniques covered include removing default styling from lists to create navigation bars, and styling list items as navigation buttons.
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind
The document discusses Windows 8 app development. It covers topics like the Windows 8 platform and tools, UI controls like AppBar and FlipView, semantic zoom and grouping in ListView, contracts, notifications, publishing to the Windows Store, and key development points. Visual Studio 2012 is introduced as the development tool. Code examples are provided for various controls and concepts.
Dr. Strangelove or: How I learned to stop worrying and love HTML, CSS and Jav...RobotDeathSquad
In this session we'll take a hands on approach to building reusable and scaleable front end code. We walk through building a modern web application UI using microformats, gracefully degrading CSS3 and Javascript closures. Finally, we'll see how the same code can be used throughout an application with little modification.
Are you new to Joomla! template designing and keen to learn how to go about creating one? This is beginner-level training for Joomla! template developers conducted on 2 Oct 2010 for free.
Slashes and Dots provide Joomla training on demand basis and free Joomla! related training from time to time
jQuery Mobile: Progressive Enhancement with HTML5Todd Anderson
This document provides an overview of jQuery Mobile, a JavaScript framework for building mobile web sites and apps. It discusses how jQuery Mobile uses progressive enhancement with HTML5 to provide cross-platform support and a native look-and-feel on mobile devices. Key aspects covered include jQuery Mobile's use of progressive enhancement to enhance content, presentation, and behavior; its reliance on HTML5 data attributes for markup; support for various widgets like pages, buttons, forms and lists; and options for native deployment using technologies like PhoneGap.
A walkthrough showing you how to take a webpage template and create the HTML and CSS for it. We go through each of the parts of the page individually and explain how to create them all
Advanced JQuery Mobile tutorial with Phonegap Rakesh Jha
Introduction to jQuery Mobile (jQM) - cont'd
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.
Dialogs
Buttons and Toolbars
-Ways to Make a Button
-Placing Icons on Your Buttons
-Inline Buttons
-Button Groupings
-Navigation Toolbars
Collapsible Content
Event Handling
-Responding to various events
-Page related events
Ajax & Interaction with server (REST & SOAP)
Deployment using Phonegap (e.g. Android)
Overview of Android Devt Environment
Best Practices in jQM
Hands-on exercises
This document discusses design basics for the web, including layout, color, typography, and design as it relates to Drupal. It defines design and explains how it differs from art. It covers layout fundamentals like wireframes and grids and why grids are useful. Typography basics like font selection, sizing, and hierarchy are outlined. Color consistency and defined palettes are noted as important. Potential pitfalls for web design like non-web safe fonts and lack of communication with developers are also mentioned. Finally, online tools for design, color, grids, type, and more are showcased.
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
This document discusses jQuery Mobile and Sencha Touch, which are frameworks for building rich mobile web applications. It provides an overview of key features of each framework.
jQuery Mobile is built on jQuery and uses a modular library approach with markup-driven configuration. It supports features like progressive enhancement, pages, transitions between pages, disabling AJAX loading, back buttons, themes, toolbars, footers, buttons, lists, forms, and touch events.
Sencha Touch is a JavaScript framework that supports components, data access and MVC patterns, forms, scrolling, touch events, theming, and charts. It uses an application architecture with stores, models, and views. It supports common UI elements like lists, nested
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee
The document discusses the Bootstrap framework for responsive web design. It explains that Bootstrap allows developers to create responsive websites without relying on graphic designers. It provides instructions for including Bootstrap's CSS and JavaScript files. The document also includes an example of how to use Bootstrap features like navbars and dropdown menus in an MVC application.
HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article> that help provide more meaning to the structure of content compared to non-semantic divisions. It allows for clearer outlines of content and separation of concerns between content, structure and presentation. While the benefits of semantic HTML5 may not be immediately visible, it can help future-proof websites and provide more accessibility for assistive technologies.
The document discusses the importance of web accessibility and provides tips to improve accessibility. It emphasizes that web content should be perceivable, operable, understandable, and robust for all users, including those with disabilities. The tips include using proper semantics with HTML5 elements and ARIA roles, adding descriptive text alternatives, ensuring sufficient color contrast and font sizes, and enabling keyboard navigation and screen reader support. The overall message is that an accessible web is open and inclusive for everyone.
The document discusses HTML5 and slicing templates. It introduces HTML5, explaining what it is and is not. It describes new HTML5 tags like <header>, <nav>, <section>, <article>, and <footer> that provide semantic structure. It also covers new HTML5 features like simplified tags, internationalization, multimedia, graphics, forms, and APIs. The document recommends a default slicing template for creating uniform website designs and provides contact information for the authors.
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011brucelawson
What new semantics does HTML5 bring us? Why? Are they enough? What more could we do with? Do semantics matter any more (tl;dr:) yes.
Video and transcript at http://fronteers.nl/congres/2011/sessions/html5-semantics-bruce-lawson
I often ask myself these questions: Will this code be easy for the others to edit? Does it scale? Can I forget it and change it later without being lost?
While Scalable and Modular Architecture for CSS (SMACSS) is just one methodology, the principals of modular CSS are applicable to sites large and small. Using a modular approach in tandem with Sass can greatly improve development efficiency and project maintenance. I'll discuss specific techniques, such as selector inheritance and interpolation, that can greatly reduce the amount of code written. Your code will be more portable, making it easier to use code on other projects.
The document discusses HTML5 and how it can be implemented in Drupal. It covers new HTML5 elements like <section>, <header>, <article>, and new form input types. It also discusses HTML5 APIs for geolocation, websockets, web workers and web storage. The document recommends resources for learning HTML5 and lists HTML5 modules for Drupal like HTML5 Tools that add HTML5 elements and features to Drupal.
This document discusses HTML structural elements and semantics. It defines elements like <header>, <nav>, <article>, <section>, and <aside> that help provide meaning and structure to a document. It also covers HTML forms, using the <form> element to contain user-submittable forms, and common page layouts with elements like <header>, <nav>, <main>, <aside>, and <footer>.
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...Patrick Lauke
Vanilla HTML is limiting and boring. Our clients demand highly engaging and interactive web experiences. And wouldn’t you know, with just a bit of HTML and JavaScript we can craft amazing custom controls, widgets and effects that go far beyond the confines of traditional static markup. But how can we ensure that these custom experiences are both understandable and usable for people with disabilities, and in particular those using assistive technologies such as screen readers?
In this talk, we will look at the basics of making some common custom-built components accessible - covering how browsers and assistive technologies interact, the limitations of HTML, and how ARIA can help make interactive experiences more accessible. In addition, we will explore some of the recent additions in ARIA 1.1, as well as some particular challenges when it comes to traditional ARIA patterns and assistive technologies on mobile/tablet/touch devices.
Evergreen slidedeck at https://patrickhlauke.github.io/aria/presentation/ / https://github.com/patrickhlauke/aria/
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...Patrick Lauke
Vanilla HTML is limiting and boring. Our clients demand highly engaging and interactive web experiences. And wouldn’t you know, with just a bit of HTML and JavaScript we can craft amazing custom controls, widgets and effects that go far beyond the confines of traditional static markup. But how can we ensure that these custom experiences are both understandable and usable for people with disabilities, and in particular those using assistive technologies such as screen readers?
In this talk, we will look at the basics of making some common custom-built components accessible - covering how browsers and assistive technologies interact, the limitations of HTML, and how ARIA can help make interactive experiences more accessible. In addition, we will explore some of the recent additions in ARIA 1.1, as well as some particular challenges when it comes to traditional ARIA patterns and assistive technologies on mobile/tablet/touch devices.
Evergreen slidedeck at https://patrickhlauke.github.io/aria/presentation/ / https://github.com/patrickhlauke/aria/
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap.
Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI
Ever tried to maintain a design system across a large site? Collaborated with a front-end designer or front-end developer who wants to design/code in the style guide, but can’t see what impacts that will have on the actual site? Do you use and maintain a single design or brand across multiple sites? Are you building on design frameworks like Bootstrap or Foundation but not sure if you’re “doing it right”?
At the conclusion of this Meetup you will have a better understanding of what it takes to design, build and support more scalable, systemized designs.
In this two part presentation, we’ll first present an overview of pattern libraries, atomic design, and design systems. You’ll understand these important concepts and be prepared to start thinking about how to use them in your work.
We’ll then show you how Exygy uses pattern libraries in a way that empowers our designers and engineers to collaborate effectively and efficiently as a team. We’ll touch on leveraging pattern library specific tools like Fabricator (using Node.js and Handlebars templates), and finish with a solution for creating and maintaining a pattern library within WordPress and integrating it into the templates for your custom WordPress theme.
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3Salvatore Iaconesi
This document provides an introduction and tutorial on HTML and CSS. It explains that HTML defines the structure of a web page, including tags for titles, paragraphs, images, and other elements. CSS controls the aesthetics and formatting of HTML elements. The document covers important HTML concepts like meta data, internationalization, accessibility, and semantic markup. It also discusses using CSS classes and IDs to assign roles and styles to HTML elements.
Create Responsive Website Design with Bootstrap 3Wahyu Putra
This document provides an overview of how to create responsive website designs using Bootstrap 3. It discusses how Bootstrap is a popular framework for responsive, mobile-first projects. It then covers the basics of getting started with Bootstrap, including downloading Bootstrap, including the necessary files, and using Bootstrap's grid system and other components to create responsive designs.
This document provides an overview of Object Oriented CSS (OOCSS), HTML5, and web performance. It discusses what OOCSS is, how to implement it, and why it is useful. It also briefly covers some HTML5 forms and communication features. Finally, it examines how to improve website speed. The goal is to look at these topics and discuss elegant and lean CSS as opposed to "fat sack of crap" code.
Html layout elements ppt and techniques ICTwhatthefvck2
The document discusses various HTML layout elements and techniques for creating multi-column website layouts. It describes common elements like <header>, <nav>, <section>, and <footer> that define different parts of a page. It then covers four techniques for building column-based designs: CSS frameworks like Bootstrap, the CSS float property, Flexbox for responsive designs, and CSS Grid for a grid-based layout system. Examples are provided for float-based and Flexbox layouts.
Cordova training : Day 5 - UI development using Framework7Binu Paul
This document provides an overview of using the Framework7 framework to build user interfaces for mobile apps. Framework7 allows developing hybrid mobile apps with native iOS and Android look and feel. It includes many pre-built user interface widgets like forms, text areas, lists, tabs and more. The document outlines how to set up the basic app layout and include the Framework7 CSS and JS files to add these UI components to apps using only HTML.
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...APNIC
Adli Wahid, Senior Internet Security Specialist at APNIC, delivered a presentation titled 'Honeypots Unveiled: Proactive Defense Tactics for Cyber Security' at the Phoenix Summit held in Dhaka, Bangladesh from 23 to 24 May 2024.
Securing BGP: Operational Strategies and Best Practices for Network Defenders...APNIC
Md. Zobair Khan,
Network Analyst and Technical Trainer at APNIC, presented 'Securing BGP: Operational Strategies and Best Practices for Network Defenders' at the Phoenix Summit held in Dhaka, Bangladesh from 23 to 24 May 2024.
HijackLoader Evolution: Interactive Process HollowingDonato Onofri
CrowdStrike researchers have identified a HijackLoader (aka IDAT Loader) sample that employs sophisticated evasion techniques to enhance the complexity of the threat. HijackLoader, an increasingly popular tool among adversaries for deploying additional payloads and tooling, continues to evolve as its developers experiment and enhance its capabilities.
In their analysis of a recent HijackLoader sample, CrowdStrike researchers discovered new techniques designed to increase the defense evasion capabilities of the loader. The malware developer used a standard process hollowing technique coupled with an additional trigger that was activated by the parent process writing to a pipe. This new approach, called "Interactive Process Hollowing", has the potential to make defense evasion stealthier.
HijackLoader Evolution: Interactive Process Hollowing
Semantic accessibility
1. Presentation, Accessibility, and Semantics
There are a few things that one needs to consider when creating a website
(note, I did not say "design" - that has the wrong connotations):
What words does it use
(both the actual language, and the word-choice within that language)
How does it look
(lets be honest, the vast majority of the consumption of our information will be
visual)
Can it be understood
(humans have a huge capacity to make sense of the unintelligible)
(“If You Can Raed Tihs, You Msut Be Raelly Smrat” & “Smart, you must be”)
2. Where does "Semantics" fit into all this?
What is "Semantics" anyway?
In this environment, Semantics is the "logic" of a web page, the "structure" - as opposed to the "presentation"
The elements <ol> and <ul> have semantic meaning: Ordered List and Unordered List
The elements <div> and <span> have no semantic meaning, then just identify things as a block level group or an inline group
Semantics is used by presentation tools to render the html document for users to "read"
Web browsers have spent 20+ years writing tools to visually render some [sometimes truly awful] html files into something readable.... like knowing a paragraph has ended because a new "block-level element" has started.
We have grown up without having to use Semantics in web pages.
3. NOT “Semantic Web”
Semantic Web is RDF
Semantic Web is Web 3.0
Semantic Web is big & bulky
<div vocab="https://schema.org/" typeof="Person">
<span property="name">Paul Schuster</span> was born in
<span property="birthPlace" typeof="Place" href="https://www.wikidata.org/entity/Q1731">
<span property="name">Dresden</span>.
</span>
</div>
"Paul Schuster was born in Dresden"
4. High Level blocks
We are used to:
<html>
<head>
</head>
<body>
<div class=”header”>...</div>
<div class=”content”>...</div>
<div class=”footer”>...</div>
</body>
</html>
This is semantically meaningless
Compare to:
<html>
<head>
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
This has definite semantic structure - a
renderer knows exactly where the main
Pages have things called "landing areas" - high-level conceptual blocks of functionality.
5. What is that side-bar?
The classic 2-column layout is:
<div class="container">
<div class="main">
<p>...</p>
</div>
<div class="left-sidebar">
<p>...</p>
</div>
</div>
The two columns have equal weight,
semantically.
Compare to:
<section>
<article>
<p>...</p>
</article>
<aside>
<p>...</p>
</aside>
</section>
This has definite semantic structure - a
renderer knows exactly where the main
content is, and what’s supporting it.
6. Articles, Divs, and Sections
We have three variations of "block of content" available to us: <article>, <div> and <section>
These are the most useful, but least understood part of html5
<div> is the most general purpose element. It has no special meaning. It’s purpose is to group content that is not semantically related. Because it is essentially meaningless to screen readers, it should be sparingly used.
<section> is slightly more specific that a <div>. It is applied to a generic section of content that can be grouped together in a semantically meaningful way.
<article> is the most specific blocking tag. It is also applied to a section of content that is semantically related, and should also have a heading. However, this section of content should additionally be "self-contained". This means that the contents of an <article> should be able to be isolated from the rest of the page and still be meaningful.
... think of a journal: a journal may have a number of articles - which may both contain sections, and be contained in sections.
7. Does this affect non-techs
Yes: Your content creators can design with these semantic
distinctions in place,
Yes: Your presentation designers can isolate & style sections as
generic sets,
Yes: Your accessibility auditors can identify the significance of
segments of the whole, and help identify how the presentation
should respond across different devices,
8. html5 Landmarks
Landmarks are an accessibility feature that help identify the high-level regions of the page.
The following elements define landmarks:
<main> — There is only ever one <main>
<nav>
<aside>
<section> — only if it has a title (aria-labelled-by, aria-label, or title attribute)
<header> — only if it’s not within one of the other landmark sections listed above
<footer> — only if it’s not within one of the other landmark sections listed above
The use of landmarks makes it easier for Accessibility Systems to find their way around the page. All content on your page should be inside a landmark.
<article> is not a landmark element!
9. semantics inside <article>s
An independent piece of content, one suitable for putting in an <article> element, is content that makes sense on its own.
This yardstick is up to your interpretation, but an easy smell test is would this make sense in an RSS feed?
Articles, therefore, can quite sensibly have their own <header> & <footer> elements.
<article>
<header>
<h1>Apple</h1>
<p>Published: <time pubdate="pubdate">2009-10-09</time></p>
</header>
<p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
...
<footer>
<p><small>Creative Commons Attribution-ShareAlike License</small></p>
</footer>
</article>
10. Menus are <nav> elements
For menus, use lists, not <menu> (it’s not well supported)
Yes, you can have multiple <nav> sections – but we may want to distinguish them (see ARIA, later)
<nav>
<ul>
<li>
<a href="home.html">Home</a>
<ul>
<li><a href="presentation.html">presentation</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li>
<a href="shop.html">shop</a>
<ul>
<li><a href="candy.html">candy</a></li>
<li><a href="chocolate.html">chocolate</a></li>
</ul>
</li>
<li><a href="news.html">News</a></li>
11. Other tips & tricks
Identify page language, and language changes (<p>You'd say that in Chinese as <span lang="zh-Hans">中国科学院文献情报中心</span>.</p>)
Associate a label with every form control
Use <button> not <div class=button> for buttons
Have alt text for every image*
Reflect the reading order in the code order
Use headings correctly to organize the structure of your content.
Give your links unique and descriptive names.
Use tables for tabular data, not for layout.
Use ARIA roles and landmarks (however the first rule of ARIA is “Don’t use ARIA.”)
[*] Not all images are content, see ARIA
12. Accessible Rich Internet Applications
Officially, the spec is WAI-ARIA
Accessibility Tree vs Document Object Model
ARIA is a set of attributes for filling accessibility gaps
ARIA compliments html5 semantics
“No ARIA is better than Bad ARIA”
13. What ARIA provides
ARIA provides Web authors with the following:
Roles, which define what an element does (role="banner")
Properties, which define things about elements (aria-required="true")
States, which define the current conditions of the element (aria-hidden="true")
An important point about ARIA attributes is that they don't affect anything about the web page, except for the information exposed by the browser's accessibility APIs (where
screenreaders get their information from). ARIA doesn't affect webpage structure, the DOM, etc., although the attributes can be useful for selecting elements by CSS.
14. Real world examples (I)
Distinguishing multiple menus
Without labelling, all <nav>s are just called
“navigation”
By adding labels, each “menu” becomes
identifiable
<nav aria-label="Site Menu">
<ul>
...List on links here...
</ul>
</nav>
<article>
<h1>Title</h1>
…
<footer>
<nav aria-labelledby="id-1">
<h2 id="id-1">
Related Content
</h2>
<ul>
...List on links here...
</ul>
</nav>
</footer>
</article>
<footer>
<nav aria-label="repeated footer">
<ul>
...List on links here...
</ul>
Navigatio
n
Banner
Search
Navigatio
n
Navigatio
n
Skip to main content
complementary
Banner
Site search
Language choice navigation
Main Menu navigation
Main
Footer repeat main navigation
15. Real world examples (II)
aria-hidden
Indicates whether the element is exposed to an accessibility API.
<img src=”/media/pretty_picture_23.svg” alt=”A pretty picture used for visual
appeal” aria-hidden=”true” />
The image will be shown in a web UI, but hidden from an accessibility reader
16. Real world examples (III)
Breadcrumb
Indicates what sort of
navigation this set is.
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="../../">
WAI-ARIAAuthoring Practices 1.1
</a>
</li>
<li>
<a href="../../#aria_ex">
Design Patterns
</a>
</li>
<li>
<a href="../../#breadcrumb">
Breadcrumb Pattern
</a>
</li>
<li>
<a href="./index.html" aria-current="page">
Breadcrumb Example
</a>
</li>
</ol>
17. Real world examples (IIII)
menu/menubar
Indicates what sort of
navigation this set is.
menu implies vertical
menubar implies horizontal
<nav aria-label="Mythical University">
<ul id="menubar1"
role="menubar"
aria-label="Mythical University">
<li role="none">
<a role="menuitem"
aria-haspopup="true"
aria-expanded="false"
href="#"
tabindex="0">
About
</a>
…...
</li>
</ul>
</nav>
18. Real world examples (V)
grid
Provides an alternative
to flex/grid layouts
<h4 id="grid1_label">
Related Documents
</h4>
<div role="grid"
class="list-links"
aria-labelledby="grid1_label"
data-wrap-cols="true"
data-wrap-rows="true"
data-restructure="true">
<div role="row">
<span role="gridcell" class="list-link">
<a tabindex="-1"
href="http://www.w3.org/TR/wai-aria-1.1/">
ARIA 1.1 Specification
</a>
</span>
<span role="gridcell" class="list-link">
<a tabindex="-1"
href="https://www.w3.org/TR/core-aam-1.1/">
Core Accessibility API Mappings 1.1
</a>
</span>
…...
</div>
19. My Personal Problem with ARIA
My problem with ARIA is that there are 100+ attributes:
Some have been superceded by html5 elements (role=”banner” →
<header>)
Some appear to be the same as css, but aren’t (grids)
Some I can’t wrap my head around (aria-owns=”??”)
20. ARIA Role attributes
Widget Roles Composite widget Roles Document Structure Landmark Roles
alert
alertdialog
button
checkbox
dialog
gridcell
link
log
marquee
menuitem
menuitemcheckbox
menuitemradio
option
progressbar
radio
scrollbar
slider
spinbutton
status
tab
tabpanel
textbox
combobox
grid
listbox
menu
menubar
radiogroup
tablist
tree
treegrid
article
columnheader
definition
directory
document
group
heading
img
list
listitem
math
note
presentation
region
row
rowgroup
rowheader
separator
toolbar
application
banner
complementary
contentinfo
form
main
navigation
search
22. Presentation - CSS
Cascading Style Sheets have been around for a long time.
CSS is how you turn plain structure into presentation.
Context will tell you if you need semantic to style
<p style="font-weight: bold; font-size: 200%; font-family: Arial;">This is NOT a Heading. It Just Looks Like One.</p>
<h2>This IS a Heading and It Looks Like One Too.</h2>
<p>It is <span style="font-weight:bold;">extremely</span> important to use CSS correctly!</p>
<p>It is <strong>extremely</strong> important to use CSS correctly!</p>
23. What Are We Looking At?
A paper flier is a known thing... lets say A5, portrait.
A web page is not a flier
A desktop computer probably has a 24 to 27” monitor, and a landscape format. My 23” desktop monitor is 1920x1080px
A laptop probably has a 15 to 17” display (or 13” if ultra-portable), again, landscape format. My 13” laptop display is 1355x768px
A tablet is usually a 10” display, and can be either landscape or portrait depending on the user. My tablet has a screen size of 1920x1200px
A smartphone is less the 7” display, and flips mode as well. My phone has a screen that’s 2400x1080px
… and in all cases – that’s screen size, not the size of the window the web-browser app is displaying in!
24. We know CSS can define lengths in a variety of units
Absolute units: px/pt/mm/...
Relative units: em/vw/%/...
But what are these sizes in relation to?
….. it’s complicated: a pixel is not normally an actual device pixel; a point is usually related to an inch; an em is related to the font (face & size);
percentages don’t round well; and viewports are the antithesis of a graphic image.
For accessibility, consistently use em (or rem) for scalable layouts.
Pixels, Points, and ems
.sidebar {
Width: 120px
}
25. The Responsive Requirement
Looking at the semantic structure of your page
How do to the blocks flow across all those screen sizes?
Where are you going to put your change-points?
Looking at the visual presentation, is all of it needed?
Can you drop some parts of the presentation for a smaller visual area?
Could you swap pictures depending on the size?
Also look as svg images – they scale more cleanly
Do you want to consider what’s printed, as opposed to viewed?
26. Layout: Flex vs Grid vs Bootstrap
Flex was introduced in 2012, and provides a 1-dimensional flexible model.
In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.
Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
Grid was introduced in 2016, and provides 2-dimensional layouts.
Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
Bootstrap is an after-market addition that makes flexible layouts easier to code.
Bootstrap provides a defined 12-column framework, factored around 4 different screen sizes.
Bootstrap also provides a suite of helper classes, predefined styles, and (some) accessibility functions
27. CSS Preprocessors
CSS – the problem
You quickly get a large collection of similar, but subtly different, classes.
You may have one very large file, or lots of small files.
Solution 1: planning
Pre-plan your styling, and layer them.
Give your elements multiple (additive) classes – like bootstap does
Solution 2: use a preprocessor (sass/scss/less/pleeease/...)
A preprocess will allow you to create a complex CSS file from a set css-like “program” files
We get variables (very useful for colours!)
We get nested definitions (makes it clearer what’s going on)
We get modular files (particularly used in angular)
We get calculations & logic in css
We get mixins & inheritance
Sadly, you also have the additional step of converting (processing) your source files into css