Mobile Web Development

Our December Refresh event was led by web and mobile designer Michael Dick who discussed how to extend the experience from the desktop to the mobile web, as well as tips & tricks you may utilize during the design & development of your mobile site. More info at http://RefreshBmore.org

In this webinar, I describe and demonstrate techniques for formatting images using CSS in MadCap Flare. http://www.clickstart.net

This document discusses techniques for optimizing images for responsive web design. It begins by noting that large images can slow down sites on small viewports. It then covers several approaches to address this issue, including using CSS backgrounds, SVG images, responsive image services, and the picture element with srcset. It emphasizes using the simplest possible solution for each situation, with progressive enhancement as needed, and outlines processes for automating image optimization with tools like Grunt.

Use a mixture of user agent detection and browser feature detection or a device detection library to enhance your responsive website.

I gave this presentation at the 2010 Scotch on the Rocks conference. It features a brief explanation of why HTML5 and CSS3 are necessary, and then goes on to cover most of the cool new features of HTML5 and CSS3 that are supported across most browsers at the time of publication., including <video>, <canvas>, HTML5 forms, the new HTML5 elements, box-shadow, text-shadow, web fonts, media queries, and more. Companion code examples are available at http://people.opera.com/cmills/HTML5_CSS3_examples.zip

1) The document provides best practices for writing embedded user assistance (UA) including using an informal friendly writing style, integrating content from other sources, allowing user feedback, customization, and learning. 2) It demonstrates HTML5 techniques for UA like adding subtitles to videos, editing content, and saving user-provided content using local storage. 3) Forms guidelines are discussed like requiring input, validating formats, and spellchecking. Examples of applications and websites using these techniques are provided.

Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6 Includes a sample project built from scratch in Node.js using LESS available on Github

This document discusses different approaches for using CSS in React applications. It begins by outlining some of the issues with plain CSS, including lack of encapsulation and global namespace pollution. It then examines different methodologies for organizing CSS, including OOCSS, BEM, and SUIT CSS. Next, it covers pre/post-processors like Sass, LESS, and PostCSS. The document dives into examples of implementing styles in React using inline styles, CSS modules, Radium, and Styled Components. For each approach, it highlights the syntax and notes advantages and limitations. Finally, it closes with a brief look at emerging technologies that may impact future CSS practices.

Az előadás témája a HTML5 platform programozása: - canvas, - svg, - audio, - video, - webfonts Az előadás megtekinthető itt: http://devportal.hu/tv/Default.aspx?auth=0&sid=92353d2f-32a4-41e0-97f6-3a2663598249

This document discusses using media queries and responsive web design to adapt content for different screen sizes like desktop, tablet, and smartphone. It recommends using CSS media queries to check for device features rather than specific models or vendors. Media queries allow setting custom CSS styles based on conditions like minimum/maximum width, display ratios, and other features. This allows fitting important content on smaller screens by resizing, rearranging, or hiding less important elements to avoid horizontal scrolling. The goal is to show content in a way that matches the user's device.

This presentation was given at PreDevCampSF on August 10, 2009. It goes over some useful components of newer versions of CSS, as well as some proprietary webkit extensions that can make WebOS development much easier.

The document discusses techniques for making SVG graphics responsive. It describes using media queries directly in SVG code to serve different background images based on viewport width. It also covers embedding SVG using inline, <img>, and <object> tags and their tradeoffs. The "Clown Car Technique" embeds the SVG as an <object> and uses media queries inside the SVG to switch background images. The "Poor Man's Method" defines all icon variants inside the SVG and shows/hides them with media queries. The "Man With A Gun's Method" uses transforms to adapt a single SVG to different sizes. JavaScript can also be added to SVG to make it more dynamic and responsive.

Managing responsive websites with css preprocessors presented at Penn State Webconference Tuesday June 23, 2015. Sass and Less preprocessors simplify managing css for responsive websites.

The document discusses minimalism in web development. It advocates for building simple things using simple tools where appropriate. This includes using microframeworks that do just enough rather than full-featured frameworks, and taking advantage of CSS3 features to simplify layouts and designs. SQLite is recommended for low to medium traffic sites due to its small size and simplicity. Graceful degradation is also discussed to ensure sites still function acceptably in older browsers.

The document discusses new features in HTML5 including: 1. New semantic HTML5 elements like <header>, <nav>, <section>, <article>, and <footer> that help structure and provide meaning to content. 2. New attributes like "role", "data-", "aria-", "draggable", and microdata attributes that add more semantics and meaning. 3. New form input types like email, number, date, time, etc. and new form attributes that make forms more usable.

This document outlines an agenda for an HTML5 essential training. It covers front-end technologies, HTML basics and evolution, terminology, document structure, common elements, section elements, semantic elements, features beyond basics, and useful resources. The training includes live demos of common elements and <div> usage. It compares using HTML4 divs versus HTML5 semantic elements for page structure.

A mobile VR game requires a 3D scene, game characters, controllers for automatic movement, a stereoscopic camera, sound effects, and collision detection. The document discusses implementing these elements in A-Frame, including creating the 3D environment and objects, adding a first-person camera for controller input, integrating GUI elements, detecting collisions, and optimizing performance. Code snippets are provided as examples for building out these various components in an A-Frame VR game.

This document discusses different methods for embedding fonts on web pages, including their advantages and disadvantages. The font tag allowed using images of text for any font but had performance issues. CSS font stacks provide flexibility but not all fonts will be visible to users. JavaScript methods like SIFR and Cufón let any font be used but have limitations. The @font-face rule allows dynamic font usage with full CSS styling across browsers but requires font files in multiple formats and licensing can restrict embedding. Services exist to handle font hosting and formatting but have disadvantages around reliance on their servers. Subsetting and compression can improve performance but must be done carefully.