HTML5, CSS3 and other technologies bring sexy back to the mobile web. The document discusses several HTML5 features including audio and video tags, CSS3 styling properties like rounded corners, transitions and animations, and geolocation APIs. It explains how these features allow building richer mobile web apps that are more feature-complete and performant compared to earlier technologies.
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
CSS3 - is everything we used to do wrong? Russ Weakley
This presentation from Remix 2011 explores CSS3, why we should use it and some of the issues. It also explores the bigger picture. Css resets, frameworks, Object oriented CSS, pre-processors, and responsive web design.
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Web 2.0 Expo New York 2011.
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
Take a look at CSS3 and ponder whether we are ready to use it in our client work. We will consider arguments both for and against. Then we will take a look at a couple of sites using CSS3 and go under the hood to whet your appetite for the exciting things it can do.
My second talk at Apache Barcamp Spain 2011. It includes a series of starting points about how to get started with CSS3, caveats with CSS3 and some techniques to get up-to-speed with IE.
This presentation (together with our "CSS for non-designers" talk) got the award to the best presentation at Apache Barcamp Spain.
Take a look at CSS3 and ponder whether we are ready to use it in our client work. We will consider arguments both for and against. Then we will take a look at a couple of sites using CSS3 and go under the hood to whet your appetite for the exciting things it can do.
My second talk at Apache Barcamp Spain 2011. It includes a series of starting points about how to get started with CSS3, caveats with CSS3 and some techniques to get up-to-speed with IE.
This presentation (together with our "CSS for non-designers" talk) got the award to the best presentation at Apache Barcamp Spain.
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
We go over what parts of HTML5 and CSS3 you can use right away and how to degrade gracefully in order to appease the older browsers. Then, we play with some of the awesome visual candy you can make using the latest properties.
- Presented at PyGotham
Make Your Animations Perform Well - JS Conf Budapest 2017 Anna Migas
As presented at the JS Conf Budapest on 2017:
Animations have been around the web for some time already; badly implemented can be deadly to the website’s performance and the user’s delight. Let’s learn together how the browser renders our page, to know where to look for optimisations and what are the best techniques to get our animations smooth and fast.
Make your animations perform well - Anna Migas - Codemotion Rome 2017Codemotion
CSS animations have been around the web for some time already and have been helping us in many ways: they give the users feedback on their actions, lead them through a page, cheer them. Badly implemented animations on the other hand can be deadly to the website's performance and the user's delight. Let's learn together what are the best techniques to get our animations smooth.t
Mistakes I Made Building Netflix for the iPhonekentbrew
Slides for the talk by the same name I gave at SxSW 2011. You can view the demo app at http://iflx.com, and fork the source from https://github.com/kentbrew/iflx.
"The crimes are tough too, so the heroes have attitude, don’t sugar-coat the truth and never play it cute."
General presentation to my colleagues at #Liones on what\'s new in HTML5 and CSS3, how we can use it today, and what we must mind to do so.
Similar to HTML5, CSS3, and other fancy buzzwords (20)
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
4. What exactly is
an HTML5?
• HTML4 all grown up?
• xHTML's way cooler cousin?
• 5 Highly Trained Militant Lemurs? Steve Jobs
Inventor of HTML5
5. a bit of HTML
+
a dash of CSS
+
a whole sprinkling of JavaScript
6. The HTML5 Family
Semantics Geolocation
Forms Offline
Presentation Storage
Styling
Transforms
Animations
Web
Workers
Rich Media
Audio
Video Web Sockets
Canvas
Minus some legitimate & illegitimate cousins...
9. Richness without
cost
Add all the whiz, bang, and fireworks without having to
rely on 3rd party libraries and plugins.
Stuff that took images and extra markup and hours to
perfect, now available through a CSS property or two.
10. New levels of
interactivity
APIs that help us build more powerful, feature-rich
mobile webapps.
Helping bridge the gap between native and web.
12. • It's finally growing up
• WebApps are better, smarter, sexier
• WebApps can do more with less
• WebApps can do the same, if not more
than Native Apps
17. Desktops have all the fun!
Player is customizable and programmatically accessible
through javascript (i.e. play, pause, etc.)
Not the case on mobile devices
(iPad excluded)
18. Most devices
offload audio and
video playback to
their native media
players...which is a
good thing
19. Oh, and support kinda sucks...
YAUFW!
(Yet Another Unnecessary Format War)
24. Some of the fancy new properties:
Rounded corners:
border-radius
Drop shadows:
box-shadow & text-shadow
Multiple columns:
column-count & column-gap
Transparent backgrounds:
rgba
Multiple backgrounds
Background gradients
25. Because CSS3 is not yet a finalized
spec, base properties don’t work in
most browsers.
Instead, you have to use the
proprietary prefix for each browser.
26. -moz-border-radius (for Fennec / FF)
-o-border-radius (for Opera Mobile)
border-radius
-webkit-border-radius (in Mobile
Safari, Android, webOS, BB6)
-ms-border-radius (in IE Mobile)
29. Attribute pattern-matching
starts with
[rel^=”awesome”]
ends with
[title$=”amazing”]
contains
[name*=”super”]
30. Element matching
nth-child
nth-child(odd) nth-child(2) nth-child(2n)
nth-last-child
same as above, except working backwards
not
:not(input)
and a whole bunch of others...
60. Transition Properties
Which properties should be animated?
transition-property: color;
default: all
How long should the transition take?
transition-duration: 1s;
default: 0, which means no animation.
Required!
Should we wait a bit before starting?
transition-delay: 0.5s;
default: 0
Can be negative. Will start as if pre-animated.
61. Transition Properties (cont’d)
Which timing curve should we use?
transition-timing-function: ease-out;
default: ease
Other values:
linear
ease-in
ease-out
ease-in-out
cubic-bezier (custom-defined)
74. Define tween checkpoints and the
properties to be changed at each.
#box1.animated {
animation-name: goCrazy
}
@keyframes goCrazy {
0% {
}
33% {
left: 200px;
}
66% {
-webkit-transform: rotate(-90deg);
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}
}
75. Animation Properties
Same as before
animation-duration: 1s;
animation-delay: 0.5s;
animation-timing-function: ease-out;
Which direction should animations run?
animation-direction: alternate;
default: normal;
Which direction should animations run?
animation-iteration-count: 4;
default: 1;
Use infinite for a never-ending loop.
104. Exactly what it sounds
A blank slate with which you can do (almost) anything:
- create elements, shapes, lines, images, 3D things, text.
- modify them
- animate them
- etc.
112. if(navigator.geolocation) {
watch = navigator.geolocation.watchPosition( success );
// Callback triggered whenever position changes
// Success callback could add a point to a map
// Or refresh a list of nearby locations
// Etc.
}
// Stop stalking
clearWatch(watch);
CODE
114. Stalking Best Practices
Always provide a fallback!
IP location can suck.
GPSes are awesome, but satellites can have bad days.
Have an [edit location] button AND manual entry
125. Manifest Storage
Cache for storing HTML, CSS, JS Cache for storing data.
required for offline usage. 3 flavours:
sessionStorage
localStorage
Web SQL
(and a few other types being
cooked up for the future...)
126. Beyond just for "I'm going
underground" scenarios.
Pre-loading of content improves speed and prevents
repeated roundtrips to server.
Cache heavy or unique data loads that are unlikely to
change, e.g. location information, favourites, etc.
137. Depends on the specificity
and complexity of your use
cases.
sessionStorage: Cupcake
localStorage: Slice of cake
Web SQL: Multi-tiered wedding cake
(Though, the last two can vary depending on your views on SQL / noSQL)
154. What’s Next?
Hardware access?
Notifications?
Mind control?
155. Thank You!
Mohammad Jangda
Vortex Mobile
batmoo@gmail.com
mohammad.jangda@vortexmobile.ca
http://digitalize.ca
@mjangda
Editor's Notes
(Note: I've omitted some APIs, since they're not relevant or not yet prime-time ready)
In context of mobile, can mean the difference between a happy user and a hate mail user
Optimized for playback and Usability (big buttons)
(ever try using a Flash-based player with the teeniest of controls -- no offense Adobe)
It makes for a bit of a jagged UX
Images are dead
Okay, no.
Pure CSS graphics?
I'd say we're far from seeing that
matrix property = [a, b, c, d]
Though, tools coming out that will help make the process far easier.
Set z-index as well
Set z-index as well
Set z-index as well
Set z-index as well
Set z-index as well
Set z-index as well
Set z-index as well
Traditional user flows for location based apps
Enter City or Postal Code ---> Narrow Down Choices ---> Done
     (City -- long name)               (5 choices)                (done)
     (Postal Code --- wrong format)   ("Did you mean?")     (done)
Cut that down to two simple clicks
Work similar to XHR requests
--- Specify callbacks
--- Have to wait for the location in some instances (if the GPS is slow)
Caveat: WatchLocation stops when screen times out
Though, I’ve heard (but not tested) that web workers can get around this
Once allowed though, most devices remember the allow and won’t prompt the user again.
The one key thing needed to enable offline
Just a file that tells the browser what to cache
Browser serves up cached content when user's connection is offline
What about navigator.onLine / navigator.offLine ?
Supported, but Google thinks otherwise
sessionStorage is window-specific
localStorage is browser-specific
Standard key-value store 
Processing.js -> Canvas
Wrappers for geolocation (with fallback to Google IP geolocation)
CSS3 animation / transition support
etc