This document discusses the history and features of cascading style sheets (CSS). It covers CSS versions from CSS1 to the modular CSS3. Key concepts discussed include the box model, selectors, the document object model, responsive web design, media queries and breakpoints. CSS allows separation of document structure (HTML) from presentation (CSS) and enables flexible page layouts across devices with different screen sizes.
The talk starts from very basic concepts, but evolves to an advanced topic: a codebase free of runtime exception. It gives the programmer a good perspective of all the resources available to fill the language gaps to create a bullet-proof code.
Algebraic Thinking for Evolution of Pure Functional Domain ModelsDebasish Ghosh
The focus of the talk is to emphasize the importance of algebraic thinking when designing pure functional domain models. The talk begins with the definition of an algebra as consisting of a carrier type, a set of operations/functions and a set of laws on those operations. Using examples from the standard library, the talk shows how thinking of abstractions in terms of its algebra is more intuitive than discussing its operational semantics. The talk also discusses the virtues of parametricity and compositionality in designing proper algebras.
Algebras are compositional and help build larger algebras out of smaller ones. We start with base level types available in standard libraries and compose larger programs out of them. We take a real life use case for a domain model and illustrate how we can define the entire model using the power of algebraic composition of the various types. We talk about how to model side-effects as pure abstractions using algebraic effects. At no point we will talk about implementations.
At the end of the talk we will have a working model built completely out of the underlying algebra of the domain language.
The talk starts from very basic concepts, but evolves to an advanced topic: a codebase free of runtime exception. It gives the programmer a good perspective of all the resources available to fill the language gaps to create a bullet-proof code.
Algebraic Thinking for Evolution of Pure Functional Domain ModelsDebasish Ghosh
The focus of the talk is to emphasize the importance of algebraic thinking when designing pure functional domain models. The talk begins with the definition of an algebra as consisting of a carrier type, a set of operations/functions and a set of laws on those operations. Using examples from the standard library, the talk shows how thinking of abstractions in terms of its algebra is more intuitive than discussing its operational semantics. The talk also discusses the virtues of parametricity and compositionality in designing proper algebras.
Algebras are compositional and help build larger algebras out of smaller ones. We start with base level types available in standard libraries and compose larger programs out of them. We take a real life use case for a domain model and illustrate how we can define the entire model using the power of algebraic composition of the various types. We talk about how to model side-effects as pure abstractions using algebraic effects. At no point we will talk about implementations.
At the end of the talk we will have a working model built completely out of the underlying algebra of the domain language.
Using and Creating SQL Functions with Ammar Hassan Brohi.
String Functions
Numeric Functions
String / Number Conversion Functions
Group Functions
Date and Time Functions
Date Conversion Functions
Using and Creating SQL Functions with Ammar Hassan Brohi.
String Functions
Numeric Functions
String / Number Conversion Functions
Group Functions
Date and Time Functions
Date Conversion Functions
Indoor Positioning Using the OpenHPS FrameworkBeat Signer
Research paper presentation given at IPIN 2021, Lloret de Mar, Spain.
Hybrid positioning frameworks use various sensors and algorithms to enhance positioning through different types of fusion. The optimisation of the fusion process requires the testing of different algorithm parameters and optimal lowas well as high-level sensor fusion techniques. The presented OpenHPS open source hybrid positioning system is a modular framework managing individual nodes in a process network, which can be configured to support concrete positioning use cases or to adapt to specific technologies. This modularity allows developers to rapidly develop and optimise their positioning system while still providing them the flexibility to add their own algorithms. In this paper we discuss how a process network developed with OpenHPS can be used to realise a customisable indoor positioning solution with an offline and online stage, and how it can be adapted for high accuracy or low latency. For the demonstration and validation of our indoor positioning solution, we further compiled a publicly available dataset containing data from WLAN access points, BLE beacons as well as several trajectories that include IMU data.
Research paper: https://beatsigner.com/publications/indoor-positioning-using-the-openhps-framework.pdf
Personalised Learning Environments Based on Knowledge Graphs and the Zone of ...Beat Signer
Presentation given at CSEDU 2022, Virtual Event.
The learning of new knowledge and skills often requires previous knowledge, which can lead to some frustration if a teacher does not know a learner's exact knowledge and skills and therefore confronts them with exercises that are too difficult to solve. We present a solution to address this issue when teaching techniques and skills in the domain of table tennis, based on the concrete needs of trainers that we have investigated in a survey. We present a conceptual model for the representation of knowledge graphs as well as the level at which individual players already master parts of this knowledge graph. Our fine-grained model enables the automatic suggestion of optimal exercises in a player's so-called zone of proximal development, and our domain-specific application allows table tennis trainers to schedule their training sessions and exercises based on this rich information. In an initial evaluation of the resulting solution for personalised learning environments, we received positive and promising feedback from trainers. We are currently investigating how our approach and conceptual model can be generalised to some more traditional educational settings and how the personalised learning environment might be further improved based on the expressive concepts of the presented model.
Research paper: https://beatsigner.com/publications/personalised-learning-environments-based-on-knowledge-graphs-and-the-zone-of-proximal-development.pdf
Cross-Media Technologies and Applications - Future Directions for Personal In...Beat Signer
Webinar given at icity Lab Talks - The Digital Value Chain
In this talk, I will first provide an overview of the lab’s research on a general data-driven approach for cross-media information system and architectures based on the resource-selector-link (RSL) hypermedia metamodel. We will then have a look at several cross-media applications for personal information management and next-generation presentation solutions (MindXpres). Finally, I will outline the lab’s most recent research on tangible interaction and dynamic data physicalisation.
Codeschool in a Box: A Low-Barrier Approach to Packaging Programming CurriculaBeat Signer
Presentation given at CSEDU 2023, Prague, Czech Republic.
The tech industry is a fast-growing field, with many companies facing issues in finding skilled workers to fill their open vacancies. At the same time, many people have limited access to the quality education necessary to enter this job market. To address this issue, various small and often volunteer-run non-profit organisations have emerged to up-skill capable learners. However, these organisations face tight constraints and many challenges while trying to design and deliver high-quality education to their learners. In this position paper, we discuss some of these challenges and present a preliminary version of a curriculum packager addressing some of these issues. Our proposed solution, inspired by first-hand experience in these organisations as well as computing education research (CER), is based on a combination of micromaterials, study lenses and a companion mobile application. While our solution is designed for the specific context of small organisations providing vocational ICT training, it can also be applied to the broader domain of learning environments facing similar constraints.
Research paper: https://beatsigner.com/publications/codeschool-in-a-box-a-low-barrier-approach-to-packaging-programming-curricula.pdf
Towards a Framework for Dynamic Data PhysicalisationBeat Signer
Presentation given at the International Workshop Toward a Design Language for Data Physicalization, Berlin, Germany, October 2018
ABSTRACT: Advanced data visualisation techniques enable the exploration and analysis of large datasets. Recently, there is the emerging field of data physicalisation, where data is represented in physical space (e.g. via physical models) and can no longer only be explored visually, but also by making use of other senses such as touch. Most existing data physicalisation solutions are static and cannot be dynamically updated based on a user's interaction. Our goal is to develop a framework for new forms of dynamic data physicalisation in order to support an interactive exploration and analysis of datasets. Based on a study of the design space for dynamic data physicalisation, we are therefore working on a grammar for representing the fundamental physical operations and interactions that can be applied to the underlying data. Our envisioned extensible data physicalisation framework will enable the rapid prototyping of dynamic data physicalisations and thereby support researchers who want to experiment with new combinations of physical variables or output devices for dynamic data physicalisation as well as designers and application developers who are interested in the development of innovative dynamic data physicalisation solutions.
Paper: https://www.academia.edu/37336859/Towards_a_Framework_for_Dynamic_Data_Physicalisation
Francesca Gottschalk - How can education support child empowerment.pptxEduSkills OECD
Francesca Gottschalk from the OECD’s Centre for Educational Research and Innovation presents at the Ask an Expert Webinar: How can education support child empowerment?
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Dr. Vinod Kumar Kanvaria
Exploiting Artificial Intelligence for Empowering Researchers and Faculty,
International FDP on Fundamentals of Research in Social Sciences
at Integral University, Lucknow, 06.06.2024
By Dr. Vinod Kumar Kanvaria
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
This slide is special for master students (MIBS & MIFB) in UUM. Also useful for readers who are interested in the topic of contemporary Islamic banking.
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
CSS3 and Responsive Web Design - Web Technologies (1019888BNR)
1. 2 December 2005
Web Technologies
CSS3 and Responsive Web Design
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
http://www.beatsigner.com
2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 28, 2016
Cascading Style Sheets (CSS)
Separation of presentation and content
visualisation of HTML elements defined by styles
enables multiple presentations of the same content
media-specific style sheets via the media attribute
<html>
<head>
...
<link ref="stylesheet" type="text/css" href="default.css"
media="screen, tv" />
<link rel="stylesheet" type="text/css" href="alternative.css"
media="print, handheld" />
</head>
<body>
...
</body>
</html>
3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 28, 2016
CSS Versions
CSS1 specification published in 1996
remember that HTML 3.2 introduced some elements and
attributes (e.g. color) for the visual appearance in 1997
CSS2 specification published in 1998
superset of CSS1
functionality for relative, absolute and fixed positoning of elements
media types
CSS3 divided into separate modules (documents)
2D & 3D transforms
transitions
Flexbox
media queries
...
4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 28, 2016
CSS Versions
Sergey Mavrody, 2014
5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 28, 2016
CSS Syntax
CSS rule consists of two parts
a selector
- HTML element
a declaration block (at least one property and value)
- surrounded by curly braces
- multiple properties are separated with a semicolon
Example
selector {
property1: value1;
property2: value2;
}
h1 {
color: red;
font-size: 10px;
}
6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 28, 2016
Selectors
Selectors are used to target rules to specific elements in
an HTML document (case sensitive)
Universal selector
all elements in the document
Element/Type selector
specific element names
ID selector
element with a specific value for the id attribute
* { ... }
p { ... }
h1, h2, h3 { ... } /* also called grouping selector */
#intro { ... } /* always more weight than class selector */
7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 28, 2016
Selectors …
Class selector
elements with the given class attribute value (elements can have
more than one class)
Child selector
elements that are direct children of other elements
Descendant selector
elements that are descendants of other elements
.main { ... } /* any element with a 'main' class value' */
h1.main { ... }
p>a { ... }
p a { ... }
8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 28, 2016
Selectors …
Attribute selector
elements with a given attribute value
Pseudo element selectors
treated like extra elements
Pseudo class selector
act like additional values for a class attribute
p[type] { ... } /* p element with an attribute called type (existence) */
p[type="new"] { ... } /* p element with attribute value 'new' (equality) */
p[type^="n"] { ... } /* type attribute value starts with letter 'n' */
p[type*="do"] { ... } /* type attribute contains substring 'do' */
h1.main:first-letter { ... }
a:link { ... }
a:visited { ... }
a:hover { ... }
9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 28, 2016
Rule Order
For identical selectors, the last rule will be applied
Furthermore, we have the following internal priorities
(1) rules containing IDs
(2) rules containing classes (or pseudo classes) and attributes
(3) rules containing elements (or pseudo elements)
Rules for selectors that are more specific than the others
have preference
* { color: red; }
p b { color: pink; } /* more specific than p selector */
p { color: blue; }
p { color: green; } /* last rule for p selector */
10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 28, 2016
Inheritance
Some properties such a color or font-family are
inherited by most child elements
leads to simpler style sheets
The inheritance of properties can be enforced via the
inherit keyword
body {
color: red; /* inherited by child elements */
padding: 10px; /* normally not inherited */
}
p {
padding: inherit; /* explicitly inherited from parent element */
}
11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 28, 2016
CSS Inclusion
There are three ways how CSS can be included in HTML
inline style
internal style sheet
external style sheet
Inline style
defined via the style attribute of the corresponding
HTML element
still mixes content and presentation and should therefore be
avoided whenever possible
<h1 style="color:red; font-size:10px">Urgent Tasks</h1>
12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 28, 2016
CSS Inclusion ...
Internal style sheet
used when a single document has a unique style
defined in the <head> section
e.g. used in HTML-encoded emails
<html>
<head>
...
<style>
h1 {color: red; font-size: 10px;}
p {color: blue;}
...
</style>
</head>
<body>
...
</body>
</html>
13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 28, 2016
CSS Inclusion ...
External style sheet (in *.css file)
changes to the overall appearance of an entire website can be
managed in a single file
- removes a lot of potential redundancy
- saves a lot of time
- leads to more consistent websites
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
...
</body>
</html>
14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 28, 2016
Multiple Style Sheets (Cascading)
Multiple styles will cascade into a single one
properties/values are inherited from more specific style sheets
Overriding priorities
(1) inline style (highest priority)
(2) internal style sheet
(3) external style sheet
(4) default browser style
Note that if the link to the external style sheet in the
<head> section is placed after the internal style sheet, then the
external style sheet will override the internal one
A stylesheet can import other stylesheets via @import
15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 28, 2016
Box Model
Box that wraps every single HTML element (content)
by default the box is just big enough to keep its content
padding
- transparent area around the content
border
- around the padding
margin
- transparent area around the border
margin
padding
border
content
div {
width: 300px; /* only content area */
padding: 10px;
border: 10px red;
margin: 5px;
}
16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 28, 2016
Box Model …
By default the width of a box only defines the width of
the content
padding and border are added to that width
Behaviour can be changed via the box-sizing
property
content-box (default) or border-box
width in border-box "mode" includes padding and border width
* {
box-sizing: border-box; /* use border-box for the whole page */
}
17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 28, 2016
Box Model …
Boxes can be either block-level boxes or inline boxes
block-level boxes start on a new line
- main building blocks of any layout
- e.g. <p>, <h1>, <ul>, or <li>
inline boxes flow between sourrounding text
- e.g. <b>, <i> or <img>
Block-level boxes (elements) can be grouped
e.g. number of elements grouped via <div> in a containing or
parent element
Behaviour can be changed via display property
li {
display: inline; /* no longer treated as block-level element */
margin-right: 5px; /* list items shown next to each other with space */
}
18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 28, 2016
Box Model …
CSS3 further introduces a new Flexbox layout mode
new flex and inline-flex values for the display property
19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 28, 2016
Measurements
Absolute or relative units of measurements can be used
Absolute units
px: pixels are not necessary consistent across devices
cm, mm and in: one centimeter is 37.8 pixels, a milimeter 3.78
pixels and an inch 96 pixels (also not consistent across devices)
pt: a point is equal to 1/72 of an inch (common in print design)
Relative units
%: percentage measured against the content
em: ems are relative to the font size of the element
rem: rems are relative to the font size of the document
20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 28, 2016
Layout
Elements (boxes) can be positioned via the position
property
static (default), relative, absolute or fixed position
In normal flow (static) each block-level element starts
on a new line
p {
position: static; /* optional since it is the default anyway */
width: 400px;
}
21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 28, 2016
Layout …
Relative positioning moves the element in relation to
where it would have been shown
Absolute position takes box out of the normal flow
p.test {
position: relative;
width: 400px;
left: 100px; /* move 100 pixels to the right */
top: 20px; /* move 20 pixels down */
}
p.test {
position: absolute;
width: 200px;
left: 300px; /* position the element 300 pixels from the left */
top: 0px; /* position element at the top (of the containing element) */
}
22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 28, 2016
Layout …
Fixed positioning renders an element relative to the
browser window
scrolling no longer changes the position
Boxes with a relative, absolute or fixed position might
overlap
z-index property can be used to control the ordering (higher
values are closer to the front)
p.test {
position: fixed;
width: 400px;
right: 0px;
top: 0px; /* positions the paragraph at the top right corner */
}
23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 28, 2016
Floats
Elements can also be positioned via the float property
succeeding elements will flow around the element
floating can be stopped via the clear property
<p>...</p>
<img class="floatLeft" src="logo.jpg" alt="logo">
<p>...</p>
<h2 class="clearLeft">History</h2>
floatLeft { float: left; }
clearLeft { clear: left; }
24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 28, 2016
Responsive Web Design (RWD)
Websites originally
designed with a fixed size
to fit common desktop and
laptop screen sizes
e.g. 960-pixel-wide layout
Around 2007 mobile
phones able to render
standard HTML pages
dedicated mobile version of
website (e.g. 320-pixel-wide)
- redirection to m-dot websites
25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 28, 2016
Responsive Web Design (RWD) …
Problem of maintainability as more versions added
different phone display sizes and new devices (e.g. iPad)
Design websites that can easily be viewed on devices
with various screen sizes
Only one version of the website (one HTML structure)
design rearranges itself to perfectly fit the screen size
- e.g. single column on mobile device and multiple columns on wider desktop
screens
use different CSS styles based on media queries
only since CSS3 it is possible to query features such as the
screen width and height or the colour capabilities
flexibility via relative horizontal measurements (e.g. percentage)
should automatically look decent on future devices
26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 28, 2016
Content Strategy
Think about the content before thinking about the design
of a website
address user needs
Most important information should be at the top of a
page
Divide content into chunks that can be rearranged on a
page
All users (regardless of the device) should have access
to all the content of a website
27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 28, 2016
The Viewport
Viewport defines the visible area of a web page
without scrollbars, browser borders etc.
HTML5 introduced a new method to control the viewport
via a meta tag
Avoid large fixed width for elements
elements (e.g. images) that are wider than the viewport might
lead to horizontal scrollbars (poor user experience)
Do not rely on a particular viewport width for a page to
render well
<meta name="viewport" content="width=device-width, initial-scale=1.0">
28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 28, 2016
Media Queries
CSS2 allowed media queries for media types
e.g. screen or print
CSS3 allows media queries to apply different declaration
blocks based on device properties (e.g. viewport width)
e.g. typically change the number of columns, navigation, font size
or image size
body {
font-size: 12px;
background-color: red;
}
@media only screen and (min-width: 40em) {
body { background-color: green; }
}
29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 28, 2016
Media Queries
Device properties that can be queried via CSS3
viewport width (width) and height (height)
screen width (device-width) and height (device-height)
orientation (orientation) which can be landscape or portrait
aspect ratio (aspect-ratio or device-aspect-ratio)
- e.g. 16:9 or 4:3
resolution (resolution) of the device screen
- e.g. 300 dpi
does the device support colour (color)
…
30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 28, 2016
Breakpoints
Breakpoint is the point
where we use a media
query to change the
design
e.g. change the number of
columns or font size
Design range is the range
between two breakpoints
design should look good
anywhere within a design
range
31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 28, 2016
Designing Responsive Solutions
Mobile-first approach
start with the basic design (default design) for the narrowest
design range and devices that might not support media queries
Progressive enhancement via different layers ensures
that page is also accessible without CSS and JavaScript
1. HTML
2. CSS (with potential media queries)
3. JavaScript
Responsive design is often based on grids
12-column grid is very common
columns can be grouped
32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 28, 2016
Multi-Column Layout
Compute the percentage for each column and the space
between the columns
e.g. 4-column layout with 21% for each column, 2% between the
columns and 5% for the left and right border
5% 5%21% 21% 21% 21%2% 2% 2%
<article> <aside>
<footer>
33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 28, 2016
Multi-Column Layout …
Example of a breakpoint between a single column layout
and 2-column layout
@media only screen and (min-width: 40em) {
article {
width: 67%;
float: left;
margin-right: 0;
}
aside {
width: 21%;
float: right;
margin-left: 0;
}
footer {
clear: both;
}
}
34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 28, 2016
Images
Scaling of images can be controlled
e.g. via max-width property
Offer different sizes of an image
e.g. via the HTML5 picture element
img {
max-width: 100%; /* do not scale up images */
height: auto;
}
<picture>
<source srcset="smallfBird.jpg" media="(max-width: 300px)">
<source srcset="bird.jpg">
<img src="bird.jpg" alt="Bird"> /* fallback */
</picture>
35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 28, 2016
RWD Frameworks
Bootstrap
mobile-first design philosophy
provides a set of CSS style sheets for the formatting of key HTML
components
additional reusable components (e.g. advanced buttons)
JavaScript components (e.g. UI elements)
Skeleton
…
36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 28, 2016
Use Case: MindXpres
MindXpres presentations
are currently represented
in an XML document
format
Compiler (node.js
application) translates
XML to HTML
Presentation engine
based on HTML5 and
related APIs
e.g. WebSockets for
connectivity
37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 28, 2016
Exercise 6
No Exercise
use time to prepare interim project presentation
38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38October 28, 2016
References
Learning Responsive Web Design:
A Beginner's Guide, Clarissa Peterson,
O'Reilly Media (1st edition), June 2014
ISBN-13: 978-1449362942
HTML and CSS: Design and Build Websites,
Jon Duckett, Wiley (1st edition),
November 2011
ISBN-13: 978-1118008188
39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39October 28, 2016
References …
Cascading Style Sheets (CSS) Snapshot 2010,
W3C Working Group Note
http://www.w3.org/TR/CSS/
Molly E. Holzschlag, Core CSS (Part I, II & III)
(refcardz #19, #25 and #34)
http://refcardz.dzone.com/refcardz/corecss-part1
http://refcardz.dzone.com/refcardz/corecss2
http://refcardz.dzone.com/refcardz/corecss3
CSS Tutorial
http://www.w3schools.com/css/
40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40October 28, 2016
References ...
MDN CSS Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Webplatform.orgl
http://docs.webplatform.org/wiki/css
Bootstrap
http://getbootstrap.com
R. Roels and B. Signer, MindXpres: An Extensible
Content-driven Cross-Media Presentation Platform,
Proceedings of WISE 2014, 15th International
Conference on Web Information System Engineering,
Thessaloniki, Greece, October, 2014
http://beatsigner.com/publications/roels_WISE2014.pdf