The chapter discusses incorporating graphics and color into web design. It covers graphic file formats like GIF, JPG, and PNG and how to use them properly. It also explains how computers display color and how to control color properties with CSS, including specifying background images and colors.
Theming Joomla! can be hard work. Choosing the right template for a site involves balancing a wide range of style, structure and function factors. The choice often involves compromises and modifications. This is an overview of the theming and customization process, and a showcase of the broad spectrum of template options and tools, including reviews and demos of the most important ones. Presented to the Melbourne Joomla! User Group on 27 Aug 2014.
Learntek is global online training provider on Big Data Analytics, Hadoop, Machine Learning, Deep Learning, IOT, AI, Cloud Technology, DEVOPS, Digital Marketing and other IT and Management courses.
Srihitha Technologies provides Web Designing Online Training in Ameerpet by real time Experts. For more information about Web Designing online training in Ameerpet call 9885144200 / 9394799566.
This slide was presented during the Latino Web Developer NYC meetup. Learn the new flexbox grid and components of bootstrap 4. Customize styles using the source Sass files - Michael Posso @micposso
This presentation was used on a five half-day course on basic web design. The goal of this workshop is to enable participants to create their own Wordpress site by the end of the course. The agenda adjust according to the pace of the participants.
This presentation introduces the new WCM features of SharePoint 2013 that web developers/architects can consider when desgining and developing Publishing websites on SharePoint 2013
This presentation shows a great overview about what is html 5 and all new features of this new generation of html with examples and outstanding bibliography and references.
A great starting point
#SPSLondon - Session 2 JSLink for IT ProsPaul Hunt
These are the slides from my second session at SPSLondon, there's a little cross over between the two sessions if you went to both!
This one covers an introduction to Display Templates for IT Pros, show the what, why and how of Display Templates in List View Web Parts with an IT Pro focus.
Theming Joomla! can be hard work. Choosing the right template for a site involves balancing a wide range of style, structure and function factors. The choice often involves compromises and modifications. This is an overview of the theming and customization process, and a showcase of the broad spectrum of template options and tools, including reviews and demos of the most important ones. Presented to the Melbourne Joomla! User Group on 27 Aug 2014.
Learntek is global online training provider on Big Data Analytics, Hadoop, Machine Learning, Deep Learning, IOT, AI, Cloud Technology, DEVOPS, Digital Marketing and other IT and Management courses.
Srihitha Technologies provides Web Designing Online Training in Ameerpet by real time Experts. For more information about Web Designing online training in Ameerpet call 9885144200 / 9394799566.
This slide was presented during the Latino Web Developer NYC meetup. Learn the new flexbox grid and components of bootstrap 4. Customize styles using the source Sass files - Michael Posso @micposso
This presentation was used on a five half-day course on basic web design. The goal of this workshop is to enable participants to create their own Wordpress site by the end of the course. The agenda adjust according to the pace of the participants.
This presentation introduces the new WCM features of SharePoint 2013 that web developers/architects can consider when desgining and developing Publishing websites on SharePoint 2013
This presentation shows a great overview about what is html 5 and all new features of this new generation of html with examples and outstanding bibliography and references.
A great starting point
#SPSLondon - Session 2 JSLink for IT ProsPaul Hunt
These are the slides from my second session at SPSLondon, there's a little cross over between the two sessions if you went to both!
This one covers an introduction to Display Templates for IT Pros, show the what, why and how of Display Templates in List View Web Parts with an IT Pro focus.
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
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.
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
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.
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.
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.
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.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
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
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/
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.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
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