This chapter discusses web typography principles, including choosing fewer fonts and sizes, using common web fonts, and designing for legibility. It covers CSS font properties like font-family, font-size, and font-style. Text spacing properties like text-indent and line-height are also discussed. The chapter concludes with customizing bulleted and numbered lists.
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreSuzanne Dergacheva
As a Drupal themer or site builder, layouts are one of the first considerations when implementing the design of a Drupal site. In this session, we'll talk about different techniques for creating layouts in Drupal 8. From how to configure landing page content using Paragraphs or Panels to implementing a grid system with your theme, you'll walk away with some new tips and tricks under your belt.
Specifically, we'll cover:
Configuring Drupal components to use in your layouts
How Drupal 8 blocks change our approach to building layouts
Creating a design framework for your layouts
Designing successful landing pages layouts
Theming your layouts: sing grid systems or CSS from scratch
This session is aimed at site builders and themers who are familiar with Drupal site building and are looking for new techniques for creating layouts and landing pages.
Creating a Reusable Drupal Website for Higher Education - WebinarSuzanne Dergacheva
Setting up a single website is as easy as pie. But creating dozens or hundreds of similar websites is more like running a pie factory. In this webinar, we’ll talk about techniques for running multiple, similar websites using the Drupal content management system.
We’ll walk through the steps for creating a re-usable Drupal platform for a small university. We’ll also talk about the challenges and benefits that result from a multi-site setup, and its impact on content strategy, design, and site architecture.
Creating a Reusable Drupal Website for Higher Education - at USG Tech DaySuzanne Dergacheva
Setting up a single website is as easy as pie. But creating
dozens or hundreds of similar websites is more like running
a pie factory. In this session, we’ll talk about techniques for
running multiple, similar websites using the Drupal content
management system.
We’ll walk through the steps for creating a re-usable Drupal
platform for a small university. We’ll also talk about the
challenges and benefits that result from a multi-site setup, and
its impact on content strategy, design, and site architecture.
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
#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 in React - ReactJS Dallas Meetup Group, August 8, 2017
Code samples available on Webpack Bin
https://www.webpackbin.com/bins/-Kr37u_ZTzEEKtlBOerx
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.
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.
SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...Anindita Bhattacharya
An SUG Bangalore Session on Overview of Sitecore Experience Accelerator by Pratik Satikunvar, at the Meetup organized on 24th March 2018 @ Sapient, Bangalore.
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreSuzanne Dergacheva
As a Drupal themer or site builder, layouts are one of the first considerations when implementing the design of a Drupal site. In this session, we'll talk about different techniques for creating layouts in Drupal 8. From how to configure landing page content using Paragraphs or Panels to implementing a grid system with your theme, you'll walk away with some new tips and tricks under your belt.
Specifically, we'll cover:
Configuring Drupal components to use in your layouts
How Drupal 8 blocks change our approach to building layouts
Creating a design framework for your layouts
Designing successful landing pages layouts
Theming your layouts: sing grid systems or CSS from scratch
This session is aimed at site builders and themers who are familiar with Drupal site building and are looking for new techniques for creating layouts and landing pages.
Creating a Reusable Drupal Website for Higher Education - WebinarSuzanne Dergacheva
Setting up a single website is as easy as pie. But creating dozens or hundreds of similar websites is more like running a pie factory. In this webinar, we’ll talk about techniques for running multiple, similar websites using the Drupal content management system.
We’ll walk through the steps for creating a re-usable Drupal platform for a small university. We’ll also talk about the challenges and benefits that result from a multi-site setup, and its impact on content strategy, design, and site architecture.
Creating a Reusable Drupal Website for Higher Education - at USG Tech DaySuzanne Dergacheva
Setting up a single website is as easy as pie. But creating
dozens or hundreds of similar websites is more like running
a pie factory. In this session, we’ll talk about techniques for
running multiple, similar websites using the Drupal content
management system.
We’ll walk through the steps for creating a re-usable Drupal
platform for a small university. We’ll also talk about the
challenges and benefits that result from a multi-site setup, and
its impact on content strategy, design, and site architecture.
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
#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 in React - ReactJS Dallas Meetup Group, August 8, 2017
Code samples available on Webpack Bin
https://www.webpackbin.com/bins/-Kr37u_ZTzEEKtlBOerx
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.
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.
SUG Bangalore - Overview of Sitecore Experience Accelerator with Pratik Satik...Anindita Bhattacharya
An SUG Bangalore Session on Overview of Sitecore Experience Accelerator by Pratik Satikunvar, at the Meetup organized on 24th March 2018 @ Sapient, Bangalore.
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
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.
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
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.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
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.
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/
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.
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.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
2. Objectives
When you complete this chapter, you will be able to:
• Understand type design principles
• Understand Cascading Style Sheets (CSS)
measurement units
• Use the CSS font properties
• Use the CSS text-spacing properties
• Build a font and text properties style sheet
• Customize bulleted and numbered lists
2Web Design Principles 5th
Ed.
4. Understanding Type Design
Principles
• Choose fewer fonts and sizes
• Choose available fonts
• Design for legibility
• Avoid using text as graphics
Web Design Principles 5th
Ed. 4
5. Choose Fewer Fonts and Sizes
• Your pages will look cleaner when you choose fewer
fonts and sizes of type
• Decide on a font for each different level of topic
importance, such as page headings, section headings,
and body text
• Communicate the hierarchy of information with changes
in the size, weight, or color of the typeface
5Web Design Principles 5th
Ed.
7. Use Common Web Fonts
• The user’s browser and operating system
determine how a font is displayed
• To control more effectively how text appears on
your pages, think in terms of font families, such as
serif and sans-serif typefaces
7Web Design Principles 5th
Ed.
10. Specifying Proprietary Web Fonts
• The CSS3 font-face property lets you link to a font,
download it, and use it in style rules
• The common browsers support the font-face
property, though they each implement it differently
• The font-face property opens a new range of fonts
to make Web pages more attractive and legible
• Web designers or the clients they work with must
be prepared to pay licensing fees
10Web Design Principles 5th
Ed.
11. Design for Legibility
• Browser version, operating system, and video
capabilities can produce variations in the weight,
spacing, and rendering of the font families to
individual users
11Web Design Principles 5th
Ed.
13. Avoid Creating Text as Graphics
• New font options means less text as graphics
• Most Web sites use text graphics in one form or
another whether for a main logo, banner, or
advertisement
• Because you add download overhead with every
additional graphic, save text graphics for important
purposes
• Whenever possible, use HTML-styled text on your
pages, including creating HTML and CSS-based
navigation
13Web Design Principles 5th
Ed.
15. Understanding CSS
Measurement Units
• CSS offers a variety of measurement units
• The measurement values you choose depends on
the destination medium
• For print media, use absolute units of
measurement
• For the Web, use relative units of measurement
15Web Design Principles 5th
Ed.
17. Absolute Units
• Specify a fixed value
P {margin: 1.25in;}
• Cannot be scaled to client display
• Should only be used when exact measurements of
destination medium are known
17Web Design Principles 5th
Ed.
18. Relative Units
• Enables scalable Web pages that adapt to different
display types and sizes
• Recommended method for Web page design
• Relative measurement values such as em and px are
designed to let you build scalable Web pages that adapt
to different display types and sizes
• The W3C recommends that you always use relative
values
18Web Design Principles 5th
Ed.
19. The em Unit
• The em is a printing measurement, traditionally equal to
the horizontal length of the capital letter M in any given
font size
• In CSS, the em unit is equal to the font size of an
element
• It can be used for both horizontal and vertical
measurement
19Web Design Principles 5th
Ed.
20. Percentages
• Percentages for fonts work exactly the same as
ems
• For example, if the default paragraph font size is
12-point text, a 100% font size equals 12 point; a
font size set to 125% based on a 12-point default
would be 15 points.
20Web Design Principles 5th
Ed.
21. The ex Unit
• The ex unit is equal to the height of the lowercase
letter x in any given font
• The height of the lowercase letter x varies widely from
one typeface to another
21Web Design Principles 5th
Ed.
23. The px Unit
• Pixels are the basic picture element of a computer
display
• The size of the pixel is determined by the display
resolution
• Pixel measurements work well for computer displays,
but they are not so well suited to other media, such as
printing
• Pixels are not a good choice for font sizing
23Web Design Principles 5th
Ed.
25. Using the CSS Font Properties
• font-family
• font-face
• font-size
• font-style
• font-variant
• font-weight
• font-stretch
• font-size-adjust
• font (shorthand property)
25Web Design Principles 5th
Ed.
26. Specifying Font Family
• Allows specification of generic font family
names (e.g., sans-serif) or a specific name
(e.g., Arial)
p {font-family: sans-serif;}
p {font-family: arial;}
26Web Design Principles 5th
Ed.
27. Generic Font Families
• Serif
• Sans serif
• Monospace
• Cursive
• Fantasy
27Web Design Principles 5th
Ed.
29. Specific Font Families
• The font-family property lets you declare a specific
font family such as Arial or Verdana
• The user must have the font installed on his or her
computer; otherwise, the browser uses the default
font
29Web Design Principles 5th
Ed.
30. Font Fallbacks
• You can specify a list of alternate fonts
• The browser will attempt to load each successive
font in the list
• If no fonts match, the browser falls back to the
default font
p {font-family: arial, helvetica, sans-
serif;}
30Web Design Principles 5th
Ed.
31. Specifying Font Face
• The @font-face property lets you specify a font to
be downloaded
• In the style sheet:
@font-face {font-family: Generica;
src: url(http://www.generic.com/fonts/generica.ttf)}
• In the document:
h1 {font-family: generica, serif;}
31Web Design Principles 5th
Ed.
32. Specifying Font Size
• The font-size property gives you control over the
specific sizing of your type
• You can choose from various length units such as
ems or percentages
• The following rule sets the block quote element to
1.5 em Arial:
blockquote {font-family: arial, sans-serif; font-
size: 1.5em;}
32Web Design Principles 5th
Ed.
34. Specifying Font Style
• This font-style property lets you specify italic text
• Remember that italic text is hard to read on a
computer display
• Use italics for special emphasis only
• The following rule sets italicized text for the note
class attribute
.note {font-style: italic;}
34Web Design Principles 5th
Ed.
35. Specifying Font Variant
• The font-variant property lets you define small
capitals
35Web Design Principles 5th
Ed.
36. Specifying Font Weight
• The font-weight property lets you set the weight of
the typeface
• You can use numerical keyword values
• The following style rule sets the warning class to
bold
.warning {font-weight: bold;}
36Web Design Principles 5th
Ed.
37. Specifying Font Stretch
• The font-stretch property lets you expand or
compress the font face
• This is a CSS3 property that is not yet commonly
supported
h1 {font-family: sans-serif; font-
stretch: expanded}
37Web Design Principles 5th
Ed.
38. Using the Font Shortcut Property
• The font shortcut property lets you abbreviate the more
verbose individual property listings
• The following rules produce the same results
p {font-weight: bold; font-size: 18pt;
line-height: 24pt; font-family:
arial;}
p {font: bold 18pt/24pt arial;}
38Web Design Principles 5th
Ed.
40. Using the CSS Text Spacing
Properties
• text-indent
• text-align
• line-height
• vertical-align
• letter-spacing
• word-spacing
• text-decoration
• text-transform
• text-shadow
40Web Design Principles 5th
Ed.
41. Specifying Text Indents
• Use the text-indent property to set the amount of
indentation for the first line of text and element
such as a paragraph
• You can specify a length or percentage value
• The following rules set an indent of 2em for the <p>
element and -2em for the <blockquote> element:
p {text-indent: 2em;}
blockquote {text-indent: −2em;}
41Web Design Principles 5th
Ed.
43. Specifying Text Alignment
• Use the text-align property to set a horizontal
alignment for the lines of text and element
• You can specify for alignment values
– Left
– Center
– Right
– Justify
• The following style rule sets the P element to
justified alignment
p {text-align: justify;}
43Web Design Principles 5th
Ed.
45. Specifying Line Height
• You can specify either a length or percentage value
for the line height
• Line height is also known as leading the white
space between lines of text
• The following rule sets the line height to 150%
p {line-height: 150%;}
45Web Design Principles 5th
Ed.
47. Specifying Vertical Alignment
• The vertical-align property lets you adjust the
vertical line of text within the line box
• Vertical line works only on in-line elements
• You can use this property to superscript or
subscript characters
• The baseline sub and super values are the most
evenly supported
• You can also use vertical alignment to align text
with graphics
47Web Design Principles 5th
Ed.
50. Specifying Letter Spacing
• The letter-spacing property lets you adjust the
white space between letters, often called kerning
• Length you specify is added to the default letter
spacing
• The following rule sets the letter spacing to four
pixels:
h1 {letter-spacing: 4px;}
50Web Design Principles 5th
Ed.
52. Specifying Word Spacing
• The word-spacing property lets you adjust the
white space between words in the text
• The length you specify is added to the default
spacing
• The following rule sets the word spacing to 2 em
h1 {word-spacing: 2em;}
52Web Design Principles 5th
Ed.
53. Specifying Text Decoration
• The text-decoration property lets you apply line
effects to your text
• Underlining should not be used except for
hypertext links
• Some sites choose to remove the underlining from
the hypertext links with this property
53Web Design Principles 5th
Ed.
54. Specifying Capitalization
• The text-transform property lets you change the
capitalization of text
• Useful for headings
• Lets you change text formatting without actually
editing the text
h1 {text-transform: uppercase;}
54Web Design Principles 5th
Ed.
55. Specifying Text Shadow
• The text shadow property lets you define a shadow
that is displayed behind text
• You can specify the horizontal and vertical offset as
well as the blur value
• The first two length values indicate the horizontal
and vertical offset
• The third length value specifies the blur amount
h1 {text-shadow: 2px 2px 2px #666;}
55Web Design Principles 5th
Ed.
58. Customizing Bulleted and
Numbered Lists
• The list-style properties let you control the visual
characteristics of bulleted and numbered lists
58Web Design Principles 5th
Ed.
60. Specifying the list-style-type
Property
• The list-style-type property lets you specify one of
three types of markers for a list
• You can choose a symbol, a numbering system, or
an alphabetical system
60Web Design Principles 5th
Ed.
62. Specifying the list-style-image
Property
• The list-style-image property lets you easily attach
an image to a list and have it repeated as the list
symbol
• The following code shows the style rule that
attaches an image to a bulleted list:
ul {list-style-image: url(pawprint.gif);}
62Web Design Principles 5th
Ed.
66. Summary
• Use type to communicate information structure
• HTML text downloads faster than graphics-based
text
• Use fonts that appear consistently across operating
systems
• Standardize your styles
• Use external style sheets
• Test your work
• Design for legibility
66Web Design Principles 5th
Ed.
67. Summary
• Choose the correct measurement unit based on the
destination medium
• Use font properties to control the look of your letter
forms
• Use text spacing properties to create more visually
interesting and legible text
67Web Design Principles 5th
Ed.