ARt gallery workshop

This document summarizes Doug Sillars' presentation on building augmented reality experiences in the browser. Sillars discusses using A-Frame to create VR galleries that can be viewed today in the browser. He then explains how to add AR functionality using AR.js by placing 3D objects with markers. Sillars also covers optimizing assets for AR/VR experiences by reducing file sizes and formats. Finally, he demonstrates early AR capabilities with WebXR by hitting 3D objects in a gallery on mobile.

This document discusses augmented reality (AR) and virtual reality (VR) capabilities in web browsers. It begins with an overview of AR and VR technologies like A-Frame and WebXR for building AR and VR experiences. It then demonstrates various AR and VR demos created with A-Frame, including galleries, art viewing, and using markers for AR. The document concludes with recommendations for optimizing assets like images, 3D models and videos for improved performance of AR and VR experiences in the browser.

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser using technologies like A-Frame and WebXR. It provides examples of VR galleries and art created with A-Frame. It also covers optimizing assets for AR/VR experiences, including resizing and compressing images, using Draco compression for GLTF models, and leveraging a cloud-based image optimization service. The presentation emphasizes that high performance AR does not require heavy processing or large data sizes when the right optimizations are applied. It concludes by sharing optimized art assets and code repositories that can be used to build AR/VR galleries and experiences.

This document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It introduces the A-Frame framework for building VR experiences and AR.js for adding AR functionality. Examples are provided of building an art gallery in VR and adding AR markers to view 3D models. Optimization techniques for images, 3D models, and WebXR are covered to improve performance. The talk encourages building AR/VR applications and provides links to art assets and code repositories.

The document discusses augmented reality (AR) and virtual reality (VR) capabilities that exist today in web browsers. It describes how AR can be built using markers and the A-Frame framework to place 3D objects. Optimizations for AR/VR applications are suggested like resizing images, optimizing quality and format, using Draco compression for GLTF files. Future AR capabilities using WebXR are previewed. Code examples and links are provided to build an art gallery application using these AR techniques.

This document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It begins with an overview of VR using the A-Frame framework to build 3D scenes and galleries. It then covers adding AR functionality using AR.js markers to place 3D objects. Optimizations for images, models, and formats are discussed for improved performance of AR and VR experiences. Developments in augmented reality with WebXR are shown, including hit testing. The document concludes with resources shared for building AR/VR projects and links to relevant code and specifications.

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It demonstrates how to create VR galleries and add art using the A-Frame framework. It also shows how to build AR experiences using AR.js that place 3D objects using markers. The document emphasizes optimizations needed for AR/VR like reducing file sizes and formats of images. It highlights upcoming capabilities like AR hit testing using WebXR. In conclusion, the document demonstrates that AR on the web is available today and does not need to be processor intensive or use large amounts of data.

This document discusses building augmented reality (AR) experiences on the web. It begins by introducing AR frameworks like A-Frame that allow creating AR scenes directly in the browser. Examples are shown of building an online art gallery in VR and AR using A-Frame and AR.js. The document then covers using the emerging WebXR standard to access device sensors for AR. Key optimizations for AR/VR like image compression and format changes are demonstrated to significantly reduce file sizes. In conclusion, the document outlines that AR can currently be developed for the web and performance optimized without large data usage or processing requirements.

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It demonstrates how to create a VR art gallery using A-Frame, optimize images and 3D models for AR/VR, and add AR functionality using AR.js markers. It also covers upcoming AR capabilities using WebXR, such as hit testing. Optimizations like resizing images, format and quality adjustments, cropping, and Draco compression are recommended to reduce file sizes and loading times. The talk concludes with resources for setting up a sample AR art gallery project and suggestions for art assets to include.

An overview for user experience designers of mobile experience considerations, approaches to creating mobile web sites, and some of the new capabilities for interaction and UI adaptation introduced via HTML5 and CSS3. Full text transcript of my talk available at: http://jenmatson.com

The Gulf Tower Project aims to use data from Instagram photos to determine the mood of Pittsburgh and display it through light colors on the Gulf Tower. Photos are analyzed using sentiment analysis to assign scores and categorize them as positive, negative, or neutral. Over 16,000 photos were collected, with most being positive. The colors mapped to emotions will light up the Gulf Tower to visually show Pittsburgh's mood. Challenges included API limits, technical issues, and ensuring the story was understandable. The goal is to use technology to represent community feelings from social media data in an artistic display.

This document provides instructions for creating rideable vehicles and objects in Second Life. It explains how to: 1. Adjust shapes and objects by changing their physical attributes like making them drop or disappear over time. 2. Add movement to objects by using flexible paths or different effects. 3. Make objects emit light by adjusting the light intensity. 4. Quickly make objects rideable by copying the script from an existing "Kart" object and pasting it into the new object. 5. Ride the vehicle using arrow keys and page up/down buttons once the script is added. More sophisticated vehicles can be made by linking multiple parts together.

The document is a collection of photos and videos from various sources. It includes 15 photos and 3 videos with citations and credits to the original creators under Creative Commons licenses. The photos and videos cover a range of subjects and were likely gathered for a presentation using Haiku Deck presentation software.

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It begins with an overview of what can currently be done with AR and VR using the A-Frame framework, including examples of building VR art galleries and scenes. It then covers adding AR capabilities using AR.js by placing 3D objects with markers. The document emphasizes optimizations needed for AR and VR like reducing file sizes and optimizing image quality and format. It also discusses the potential for building AR experiences using the emerging WebXR standard. Throughout it provides links to code samples and resources.

Presentation on designing for cross channel holistic customer experiences for Web 2.0 Expo, San Francisco

This document summarizes techniques for optimizing image delivery on mobile websites. It discusses 4 key optimizations: adjusting image quality, choosing optimal file formats like WebP, sizing images responsively, and lazy loading images below the fold. The document shows that these techniques can significantly reduce image file sizes and page load times based on analyses of 500,000 mobile sites. Specific tools are recommended for automating quality adjustments, format conversion, and responsive image breakpoint generation. Lazy loading is shown to improve user experience by deferring loading of off-screen images. Overall, the techniques can help images remain fast to load while retaining high quality for modern responsive delivery.

In this month's podcast I discuss some recent news about ebooks and DRM. There's information about smartphone uses, from Pew Internet, and a quick debate about mobile websites versus apps. FourSquare and geosocial services are explained, in brief. A good portion of the show describes SWON's new partnership with Hive13, a hacker/maker space in Cincinnati. What is that? Listen in to find out.

This document discusses optimizing images for fast page loads on mobile websites. It outlines four simple image optimizations: 1) reducing image quality to 85%, 2) using optimized formats like WebP and SVG, 3) sizing images appropriately for different screen sizes through responsive images, and 4) lazy loading images below the fold. The document provides examples and data showing how these techniques can significantly reduce page load times and data usage. It encourages testing optimizations using tools like WebPageTest and analyzing real-world usage from the HTTP Archive.

Presentation given at ITSSM.com's software dev best practices workshop. Focus on risks of SD and how Agile best addresses them, followed by instructions for learning game to teach Scrum.

Cross-channel design aims to provide a seamless experience for customers across digital and physical touchpoints. The document discusses the need for designing experiences that are convenient, connected, consistent, and contextual across channels over time. It provides five principles and five methods for cross-channel design, including thinking in terms of services, sharing design processes, starting with small experiments, embracing discomfort, and focusing on customer needs over specific solutions. Discovery activities like interviews, research, and experience mapping are recommended to understand the current customer journey. Solution techniques include mental models, storytelling, service blueprints, and touchpoint matrices to holistically design experiences across channels.

The document discusses optimizing images and video for faster load times and reduced data usage on mobile websites. It recommends using Scalable Vector Graphics (SVG) for vector images, lossy compression for raster images at 85% quality, WebP format, responsive images sized for different breakpoints, lazy loading images below the fold, and replacing animated GIFs with MP4 videos for smaller file sizes. Open source tools discussed include ImageMagick, Cloudinary, and LazySizes for implementing these optimizations.

Our presentation for the May 5th Ignite event at Lisbon, dedicated to Portuguese technology. http://igniteportugal.blogspot.com/2010/05/programa-ignite-portugal-tecnologico.html

This document discusses optimizing images for fast delivery on websites. It outlines four simple image optimizations: quality, format, sizing, and lazy loading. For each optimization, it provides examples and data on typical file size savings. It analyzes real-world usage of the optimizations across 500,000 mobile sites. The document encourages testing optimizations using tools like WebPageTest and analyzing trends using HttpArchive. Overall, it promotes delivering beautiful yet fast images through techniques like responsive images and lazy loading.

This document discusses techniques for optimizing image delivery to make it fast, free and beautiful. It outlines four simple image optimizations: 1) reducing image quality, 2) using optimized formats like WebP and SVG, 3) sizing images appropriately, and 4) lazy loading images. It provides examples of how to implement each optimization using tools like ImageMagick, Cloudinary, and responsive breakpoints generators. Analysis of 500,000 mobile sites shows the widespread impact of these optimizations on page load times and data usage. The document encourages testing optimizations and sharing results to win an Amazon gift card.

The document discusses the importance of designing cross-channel experiences that are convenient, consistent, connected, contextual, and span time. It provides 5 principles and 5 methods for holistic experience design across digital and physical touchpoints. The principles are to think of services, share resources openly, gain diverse perspectives, address discomfort, and focus on user needs over solutions. Methods include documenting journeys, mapping experiences, understanding backend systems, storytelling, and cross-training teams. Tools involve using experience maps, getting different perspectives, telling stories, and cross-training teams in other disciplines. The talk encourages designing for the holistic experience rather than any single channel.

The document discusses designing holistic experiences that span both digital and physical channels. It recommends designing for the "space between" interactions by considering the full customer journey. Five principles are outlined for cross-channel design: convenient, connected, consistent, contextual, and cross-time. Five methods and tools are also presented: thinking in terms of services; sharing design work; starting with observations; embracing discomfort; and focusing on customer needs over specific solutions. The overall message is that customers experience brands through all touchpoints, so design must consider the integrated experience.

This document discusses optimizing images for fast delivery on mobile websites. It recommends four simple optimizations: 1) reducing image quality to 85%, 2) using WebP format, 3) generating responsive image sizes, and 4) implementing lazy loading. The document provides details on implementing each optimization and cites research analyzing their impacts. It finds that applying these optimizations can significantly reduce page load times and data usage. Overall, the document advocates that with the right optimizations, images can be both beautiful and fast loading.

The document discusses the importance of storytelling in web design. It argues that storytelling is how humans naturally gather and process information, and that websites should incorporate story elements like characters, plots, and settings to effectively engage users. Specific examples of websites that successfully use stories are provided. The presentation encourages designers to think of themselves as modern storytellers and to integrate narrative elements into their design process from the beginning of a project.

The document discusses how agile principles can be applied in creative agencies. It introduces agile and iterative approaches like Scrum and Kanban that use techniques such as sprints, backlogs, and work-in-progress limits. While some aspects of agile may not directly map to creative work, the core values of transparency, inspection, adaptation, and trust can help agencies improve processes and productivity.

The document discusses designing cross-channel experiences. It begins by explaining that customers experience brands across multiple touchpoints and channels, both digital and physical. The key is to design experiences that are convenient, connected, consistent, contextual, and span across time. The document then provides five principles and five methods for cross-channel design. The principles are to make experiences convenient, connected, consistent, contextual, and spanning across time. The methods are to think in terms of services, share design work across teams, start by observing customer behaviors, be comfortable with ambiguity, and focus on customer needs rather than specific solutions. Finally, the document discusses various discovery and solution activities for cross-channel design, such as stakeholder interviews

This document discusses optimizing images and video for fast delivery on mobile websites. It begins by explaining that fast loading is a human perception based on time thresholds, with 100ms perceived as instant. The document then outlines 4 simple image optimizations: quality, format, sizing, and lazy loading. It provides examples of each optimization and data on real-world usage. Additional topics discussed include responsive images, animated GIFs, save-data considerations, and base64 encoding. The overall message is that images make up most web content and several techniques can significantly improve performance and user experience.

Gareth Hale is a welder. The document provides a brief job description for welders including their responsibilities and qualifications. Welders join metal components together using heat from a torch, melting and fusing the materials. They must have strong hand-eye coordination and attention to detail. A high school diploma is the typical entry-level education requirement to become a welder.

This document discusses optimizing images for fast delivery on mobile websites. It outlines four simple image optimizations: quality, format, sizing, and lazy loading. For each optimization, it provides examples and data on current usage. Quality recommends compressing to 85% without significant quality loss. Format suggests using webp and svg where supported. Sizing involves generating responsive images at appropriate breakpoints. Lazy loading delays image loading to above the fold content. Together, these techniques can significantly improve performance without compromising quality.

The document discusses optimizing images for fast loading on mobile websites. It provides 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like WebP and SVG, 3) proper sizing of images for different screen sizes, and 4) lazy loading images that are not immediately visible. The document shows how these techniques can significantly reduce image file sizes and page load times based on analyzing millions of mobile sites. It also discusses alternatives to animated GIFs like using video formats and preview images to improve performance.

This document discusses optimizing images for fast loading on mobile devices. It recommends four simple image optimizations: 1) reducing image quality to 85%, 2) using efficient formats like WebP and SVG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. Data from the HTTP Archive is presented showing the prevalence and impact of these optimizations. Specific techniques like responsive images and image processing tools are also outlined.

This document provides tips for optimizing images for fast loading on mobile websites. It discusses 4 key optimizations: image quality, format, sizing, and lazy loading. For quality, it recommends reducing to 85% quality, which can significantly reduce file sizes with little quality loss. For format, it promotes webp and svg over jpeg and png. For sizing, it stresses responsive images at different breakpoints to reduce file sizes. And for lazy loading, it shows how delaying non-critical image loads can improve performance. Measurements are given for how widely these techniques have been adopted and the potential savings in load times and data usage. Tools are also listed for implementing the various optimizations.

Doug Sillars discusses using AI and machine learning to simplify image preparation for the web. He describes how object detection can be used for cropping, blurring objects, object removal, and generating alt text. Sillars also provides examples of using these techniques like detecting and adding sunglasses to images. He concludes that image processing with AI and ML can automate tasks like cropping, blurring, object removal, and alt text generation for image optimization.

Doug Sillars presented techniques for optimizing image performance on mobile websites. He discussed 4 key optimizations: 1) reducing image quality to 85%, 2) using efficient formats like WebP and SVG, 3) sizing images responsively, and 4) lazy loading images below the fold. Testing of millions of sites showed these techniques can reduce page load times by up to 15 seconds and data usage by up to 2.4 MB. Sillars recommended tools like ImageMagick, responsive breakpoints generator, and Cloudinary to help automate image optimizations.

This document provides best practices for optimizing video delivery and streaming on the web. It discusses how video files are large and can negatively impact page load times and user data plans. Some key recommendations include resizing videos appropriately for different screens, avoiding downloading hidden or unnecessary videos, using video streaming with a low starting bitrate for faster startup times, stripping audio from silent videos, and auditing third party video hosts for performance issues. The document emphasizes optimizing video delivery to respect mobile users' limited data plans.

The document discusses optimizing video delivery for performance and reducing data usage. It provides examples of HTML code to embed video on a webpage and control playback behavior. It also summarizes techniques for resizing and encoding videos to different formats and bitrates to reduce file sizes while maintaining quality, such as using services like Cloudinary. Optimizing factors like video size, bitrate, and delivery method can help videos start faster and reduce stalling to improve the user experience.

Doug Sillars discusses using AI and machine learning to simplify image preparation for the web. He covers how object detection can be used for cropping, blurring, object removal, and generating alt text. Sillars also demonstrates training a model to add sunglasses to faces in images without manually editing thousands of photos. In summary, AI and ML techniques can automate many image editing tasks previously done manually to optimize images for websites and apps.

This document discusses using AI and machine learning to simplify image preparation for the web. It describes how object detection can be used for cropping, blurring, object removal, and generating alt text. It provides examples of using these techniques to automatically add sunglasses to faces in images. The document concludes by mentioning that image processing with AI and ML can simplify tasks like cropping, blurring, object removal, and alt text generation for images on the web.

Doug Sillars gave a presentation on using AI to optimize images for the web. He discussed how images dominate web content and explained techniques like cropping, blurring objects, and generating alt text using machine learning models. Sillars also demonstrated how to train custom models for tasks like detecting sunglasses and adding filters to photos. The presentation concluded by emphasizing how AI and ML can simplify and automate image preparation and processing for digital content.

This document provides tips for optimizing images on websites to deliver fast loading speeds while maintaining image quality. It discusses optimizing image quality, format, sizing through responsive images, and lazy loading images below the fold. Key recommendations include using JPEG format at 85% quality, responsive images through picture tags, and lazy loading images to improve page load times and reduce data usage. Tools mentioned for optimizing images include ImageMagick, SSIM, LazySizes, and Cloudinary.

This document discusses using AI and machine learning to simplify image preparation for the web. It describes how object detection can be used for cropping, blurring objects, object removal, and generating alt text. It also provides examples of training custom models for tasks like automatically adding sunglasses to faces in images. The conclusion emphasizes that image processing with AI and ML can automate tasks like cropping, blurring, object removal, and alt text generation for image preparation.