This chapter discusses incorporating graphics and color into web design. It covers common graphic file formats like GIF, JPG, and PNG and how to choose the appropriate format. It also discusses using the <img> tag to insert images and CSS properties to control image alignment, borders, and spacing. The chapter then explains computer color basics like color depth and how to specify colors using names, RGB values, or hexadecimal codes in CSS.
From Students to Learners: New Learning Environments for 21st Century Learnersbobpearlman
Students of the 21st Century, in the US and elsewhere, need a richer school experience that connects them to the real world, real work, and quality relationships with teachers and adult mentors in the workplace and the community. Teaching and learning also need to be totally redesigned to enable students to master 21st Century knowledge and skills.
Bob Pearlman will take you on a virtual tour of several of the most innovative new schools in the US, UK, and Australia where students become self-directed and self-assessing learners. You will learn about the new learning environments and the new language of school design that characterizes these new and re-designed schools.
What does 21st Century Learning look like?bobpearlman
This is an activity for you and your colleagues to envision what 21st Century Learning looks like and an opportunity to identify and list its key characteristics and features.
We Make Makers! The new Innovation Labs, Makerspaces, and Learning Commonsbobpearlman
At public and independent schools across the country there is a an explosion of new Innovation Labs, Makerspaces, and Library Learning Commons. These new learning environments go by many names - Innovation Labs, IDEA Labs, FabLabs, weCreate Centers, Learning Commons, etc. These centers provide new learning environments for students to work individually or collaboratively on entrepreneurial, STEM, STEAM, and Design Thinking projects. Each of these centers also provide programs and pedagogy that together with the new learning environments develop a culture of self-directed and self-assessing learners.
From Students to Learners: New Learning Environments for 21st Century Learnersbobpearlman
Students of the 21st Century, in the US and elsewhere, need a richer school experience that connects them to the real world, real work, and quality relationships with teachers and adult mentors in the workplace and the community. Teaching and learning also need to be totally redesigned to enable students to master 21st Century knowledge and skills.
Bob Pearlman will take you on a virtual tour of several of the most innovative new schools in the US, UK, and Australia where students become self-directed and self-assessing learners. You will learn about the new learning environments and the new language of school design that characterizes these new and re-designed schools.
What does 21st Century Learning look like?bobpearlman
This is an activity for you and your colleagues to envision what 21st Century Learning looks like and an opportunity to identify and list its key characteristics and features.
We Make Makers! The new Innovation Labs, Makerspaces, and Learning Commonsbobpearlman
At public and independent schools across the country there is a an explosion of new Innovation Labs, Makerspaces, and Library Learning Commons. These new learning environments go by many names - Innovation Labs, IDEA Labs, FabLabs, weCreate Centers, Learning Commons, etc. These centers provide new learning environments for students to work individually or collaboratively on entrepreneurial, STEM, STEAM, and Design Thinking projects. Each of these centers also provide programs and pedagogy that together with the new learning environments develop a culture of self-directed and self-assessing learners.
If you want to make your web project faster, keeping the file sizes down is your number one goal.
Image files make up the majority of web site weight according to HTTP archive. However, many people still neglect image optimization in their projects. Learn practical tips and tricks on how to optimize image files on your site to keep the file sizes down and your visitors happy.
Design for Non-Designers: An Introduction to Design for NonprofitsNetSquared Vancouver
Do you feel like you're always outsourcing every little design project to a contract or even in-house designer? Do you wish you could dig in a bit more to create more engaging social media images, email marketing media, brochures, and powerpoints?
Join us for a free Design for Non-Designers hands-on workshop. We'll have a presentation on basic fundamentals for good design as well as demonstrations of some easy tools to use. Then bring your laptop and create some images and graphics on the spot to get assistance and guidance from an experienced designer!
Things you'll need:
• Your laptop
• A current graphic design project or an idea for one
• If you have Photoshop, our speakers can help you create your graphics with that! If you don't have Photoshop, you can create a free account with Canva and use that to create graphics with our speakers.
Our Speakers
Dana Lu is a Vancouver based freelance graphic designer with over 11 years of experience. She specializes in designing printed marketing materials (like brochures and sell sheets) and food/product packaging (like bottle labels, pouches and boxes). See some of her projects at www.danalu.ca.
Jesus Parlange, Organic Code Design
Presented February 14
https://www.meetup.com/net2van/events/236669226/
Practical information for images in ebooks - ebookcraft 2015 - Joshua TallentBookNet Canada
"Practical information for images in ebooks" by Joshua Tallent (Firebrand Technologies) for ebookcraft 2015, presented by BookNet Canada and eBOUND Canada - March 10, 2015
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
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.
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
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
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
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
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
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.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
2. Objectives
When you complete this chapter, you will be able to:
• Understand graphic file formats
• Choose a graphics tool
• Use the <img> element
• Control image properties with CSS
• Understand computer color basics
• Control color properties with CSS
• Control background images with CSS
2Web Design Principles 5th
Ed.
4. Understanding Graphic File
Formats
• You can currently use only three image file
formats on the Web: GIF, JPG, and PNG
– A newer format, SVG, has had limited success
• These formats all compress images to create
smaller files
– Knowing which file format to use for which type of
image is important
• If you choose the wrong file type, your image
won’t compress or display properly
4Web Design Principles 5th
Ed.
5. 5
GIF
• GIF uses a lossless compression
technique, meaning that no color
information is discarded when the image is
compressed
• The color depth of GIF is 8-bit, allowing a
palette of no more than 256 colors
• GIF excels at compressing and displaying
flat color areas, making it the logical choice
for line art and color graphics
Web Design Principles 5th
Ed.
6. GIF Transparency
• With GIF files, you can choose any one color
in an image to appear as transparent in the
browser
• The background color or pattern will show
through the areas that you have designated
as transparent
• Using transparent areas allows you to create
graphics that appear to have an irregular
outside shape, rather than being bounded by
a rectangle
Web Design Principles 5th
Ed. 6
8. GIF Animation
• The GIF format lets you store multiple images
and timing information about the images in a
single file
• This means that you can build animations
consisting of multiple static images that play
continuously, creating the illusion of motion
Web Design Principles 5th
Ed. 8
10. JPG
• JPG is best for photographs or continuous
tone images
• JPGs are 24-bit RGB images that allow
millions of colors
• JPGs use a “lossy” compression routine
especially designed for photographic
images
– When the image is compressed, some color
information is discarded, resulting in a loss of
quality from the original image
Web Design Principles 5th
Ed. 10
11. JPG
• When you create the JPG file, you can also
manually balance the amount of compression
versus the resulting image quality
• The higher the compression, the lower the
image quality
– You can play with this setting to create files that
are as small as possible but still look good
• Many photos can sustain quite a bit of
compression while still maintaining image
integrity
Web Design Principles 5th
Ed. 11
13. PNG
• A royalty-free file format that is intended to
replace GIF
• This lossless format compresses bit
images to smaller file sizes than GIF
• PNG supports transparency and interlacing
but not animation
Web Design Principles 5th
Ed. 13
14. SVG
• A language for describing two-dimensional
graphics using XML
• SVG graphics are scalable to different
display resolutions and are printable
• Most new browsers now support SVG
Web Design Principles 5th
Ed. 14
15. Using Interlacing & Progressive
Display
• These are the gradual display of a graphic in a
series of passes as the data arrives in the browser
• Most Web-capable graphics editors let you save
images in an interlaced or progressive format
• You can choose this display option when creating
GIF, PNG, and JPG files
• GIF and PNG files use interlacing, while JPGs use
progression
Web Design Principles 5th
Ed. 15
17. Where You Can Find Images
• Stock photo collections
• Digital cameras
• Scanner
• Public-domain Web sites
• Clip art
• Create your own
• Remember to respect copyright laws!
Web Design Principles 5th
Ed. 17
18. Choosing the Right Format
• GIF: the everyday file format for all types of
simple colored graphics and line art
– GIF’s transparency feature lets you seamlessly
integrate graphics into your Web site
• JPG: use JPG for all 24-bit full color
photographic images, as well as more
complicated graphics that contain color
gradients, shadows, and feathering
Web Design Principles 5th
Ed. 18
19. Choosing the Right Format
• PNG: you can use PNG as a substitute for
GIF
• SVG: offers many advantages, wait for
complete browser support
Web Design Principles 5th
Ed. 19
21. Choosing a Graphics Tool
• You use graphics software to create or manipulate
graphics
• Look for a tool that meets your needs and will not
take a long time to learn
• Shareware and freeware software are available
Web Design Principles 5th
Ed. 21
23. Using the Image Element
• <img> is a replaced element
• <img> is an empty element, so never use
a closing tag with it
Web Design Principles 5th
Ed. 23
24. Using the Image Element
• Normal image alignment is to the baseline
of the text
• Images that are within a line of text must
have spaces on both sides, or the text will
touch the image
Web Design Principles 5th
Ed. 24
27. Specifying alt and title Attribute Text
• The alt text is displayed if the image does
not appear, providing a description of the
image
• The title text appears as a pop-up when
the user places the cursor over the image
Web Design Principles 5th
Ed. 27
29. <img src="balloons_sm.jpg" width="200" height="267"
alt="Hot Air Balloon image" title="Balloons at the
Great Falls Festival in Lewiston, Maine"/>
Web Design Principles 5th
Ed. 29
30. Specifying Image Width and Height
• Every <img> element on your site should
contain width and height attributes
• These attributes provide important information
to the browser by specifying the amount of
space to reserve for the image
• This information dramatically affects the way
your pages download to the user, especially at
slower connection speeds
Web Design Principles 5th
Ed. 30
33. Sizing Graphics for the Page
• Size graphics appropriately
• Keep their dimensions small and appropriate to the
size of the page
Web Design Principles 5th
Ed. 33
35. Controlling Image Properties with CSS
• Removing the hypertext border
• Aligning text and images
• Floating images
• Adding white space around images
Web Design Principles 5th
Ed. 35
36. Removing the Hypertext Border
from an Image
• When you create a hypertext image, the
browser’s default behavior is to display the
hypertext border around the image
• This border is often unnecessary as users
often use their mouse to point to each
image to see if the hypertext cursor
displays
<img src="balloon.jpg" width="100"
height="100" alt="balloon”
style="border: none" />
Web Design Principles 5th
Ed. 36
38. Aligning Text and Images
• You can align text along an image border
using the align attribute
• Text and image alignment defaults to
bottom alignment, which means the bottom
of the text aligns with the bottom edge of
the image
• Valid values are: top, middle, bottom, left,
right
Web Design Principles 5th
Ed. 38
40. Floating Images
• The float property can be used to float an
image to the left or right of text
• The following style rules create two
classes of <img> elements, one of which
floats to the left of text; the other floats to
the right
img.left {float:left;}
img.right {float:right;}
Web Design Principles 5th
Ed. 40
42. Adding White Space around Images
• Add white space around your images to
reduce clutter and improve readability
• Use the CSS margin property to increase
the white space around an image
Web Design Principles 5th
Ed. 42
44. Understanding Computer
Color Basics
• Monitors display colors by mixing three basic
colors of light: red, green, and blue
– Intensity ranges from:
• 0% (complete absence of color) to 100% (complete presence
of color)
• Color depth
– Amount of data used to create the color
• bit (256 colors), 16-bit, and 24-bit (16.7M colors)
Web Design Principles 5th
Ed. 44
45. Color Depth
• The amount of data used to create color on a
display is called the color depth
• If your users have a 24-bit color display, they
can appreciate the full-color depth of your
images
• If your monitor doesn’t support the full color
depth of an image, the browser must resort to
mixing colors that attempt to match the
original colors in the image
Web Design Principles 5th
Ed. 45
47. Specifying CSS Color Values
• Color names
• RGB color values
• Hexadecimal color values
Web Design Principles 5th
Ed. 47
48. Using Color Names
• Sets color values using common color names
– Blue, gray, red, etc.
• Limited to small range of colors
• Not a very specific representation of color
Web Design Principles 5th
Ed. 48
50. Using RGB Color Values
• Numerical values that specify the blending of the
red, green, and blue color channels
• Range: 0-100% (zero color to max color)
– Also: 0-255 (integer)
• Can be expressed as percentage or integer:
P {color: rgb(0, 100%, 100%);}
or
P {color: rgb(0, 255, 255);}
Web Design Principles 5th
Ed. 50
51. Using Hexadecimal
Color Values
• Numerical values that specify the blending of the
red, green, and blue color channels
– Base 16 number system (0-9, A-F)
• Range: 00-FF (zero color to max color)
– Example: Red → FF 00 00
– The following rules specify the same color:
P {color: #00FFFF;}
P {color: rgb(0, 100%, 100%);}
P {color: rgb(0, 255, 255);}
Web Design Principles 5th
Ed. 51
52. Understanding Element Layers
• Background color layer—the backmost layer,
specified by the background-color property
• Background image layer—the middle layer,
specified by the background-image property
• Content layer—the frontmost layer; this is the
color of the text content; specified by the color
property
Web Design Principles 5th
Ed. 52
55. Controlling Color Properties
with CSS
• Specifying color values
• Setting default text color
• Changing link colors
• Specifying background color
• Setting the page background color
• Creating a text reverse
Web Design Principles 5th
Ed. 55
56. Specifying Color Values
/* color name */
p {color: blue;}
/* hexadecimal value */
p {color: #0000ff;}
/* RGB numbers */
p {color: rgb(0,0,255);}
/* RGB percentages */
p {color: rgb(0%,0%,100%);}
The following style rules show the different
methods of specifying a color:
Web Design Principles 5th
Ed. 56
58. Changing Link Colors
• You can change the colors of hypertext links by
using the following special CSS classes
• link—the unvisited link color
• active—the active link color; this is the color
displayed when the user points to a link and
holds down the mouse button
• visited—the visited link color
Web Design Principles 5th
Ed. 58
59. Changing Link Colors
• You can use these special classes only with the
<a> tag
• The syntax uses a colon (:) flag character as
shown in the following examples:
a:link {color: #000000;} /* new links are black */
a:active {color: #FF0000;} /* active links are red */
a:visited {color: #CCCCCC;} /* visited links are gray */
Web Design Principles 5th
Ed. 59
61. Specifying Background Colors
• Background-color
– Sets the background color of any element on a
Web page (including padding area)
– By default, background color of any element is
transparent
Web Design Principles 5th
Ed. 61
63. Setting Page Background Color
• To set the page background color, use body as the
selector
• The following rule sets a background color for the
<body> element
body {background-color: #c5f0ff;}
Web Design Principles 5th
Ed. 63
65. Creating a Text Reverse
• The background and foreground colors are
reversed
• The following rule sets the text color to
white and the background color to blue:
h1 { color: #fff;
padding: .25em;
background-color: #f90000;
}
Web Design Principles 5th
Ed. 65
68. Specifying a Background Image
• The background-image property lets you
specify which image to display
• Other CSS background properties control how
the image is displayed
Web Design Principles 5th
Ed. 68
71. Creating a Page Background
• To tile an image across the entire background of
the Web page, use body as the selector
body {background-image: url(clouds.jpg);}
Web Design Principles 5th
Ed. 71
72. Creating an Element Background
h1 {background-image: url(bluetex.jpg); padding: .25em;}
• Images can be applied to the background of
any element
• The following rule applies an image to the
background of the H1 element:
Web Design Principles 5th
Ed. 72
79. Creating a Nonrepeating
Background Image
• Allows creation of a single instance of an
image in the background
• The following style rule shows the use of the
no-repeat value:
body {
background-image: url(balloon_sm.jpg);
background-repeat: no-repeat;
}
Web Design Principles 5th
Ed. 79
80. Specifying Background Position
• The background-position property lets you use
three types of values: percentage, length, or
keywords
#right {
background-image:
url(rightgradient.gif);
background-repeat: repeat-y;
background-position: right;
}
Web Design Principles 5th
Ed. 80
82. Positioning Vertical and Horizontal
Background Images
• Positions images that repeat on either the
horizontal or vertical axis of the Web page
Web Design Principles 5th
Ed. 82
84. Summary
• The four popular file formats for the Web are GIF,
JPG, PNG, and SVG
• Your computer monitor displays color by mixing the
three basic colors of light: red, green, and blue
(RGB)
• Reduce image size to the appropriate dimensions
• The color scheme you choose for a Web site
should create a distinctive look without detracting
from your content’s legibility
Web Design Principles 5th
Ed. 84
85. Summary
• Use the color property to set foreground colors for
elements
• Background colors affect any padding areas in the
element
• Choose background images that do not detract
from the legibility of your content
• Test your work on different browsers and
computing platforms
Web Design Principles 5th
Ed. 85