A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
It describe the whole detail of html, CSS , html5 for descibing how to use html tags and where we use html tags. It describe the whole detail of html and CSS.
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
CSS Style and selector, In our CSS tutorial you will learn how to use CSS to control the style and selector. Example and Assignment for Web design Technology class
Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web.
How to use bootstrap, a framework for web design
Create A Solid Strategy For Your Website (Higher Ed)Aga Siuda
Strategic design can have a real impact on your school. Discover how a solid web design can create opportunities to acquire new applicants and to engage with your current students, parents, and alumni. Let us show you how Blackbaud’s design services team can transform your vision into a reality.
How to create accessible websites - WordCamp New YorkRachel Cherry
Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities. When your website is inaccessible, research shows you could be excluding up to 20 percent of your visitors and customers. When your website is accessible, everyone can consume your information and interact with you and your services. Visually-impaired users can visit your website using a screen reader. Those who can’t use a mouse can navigate your site using a keyboard or other input device. Designing with accessibility in mind will also improve your SEO. Join my workshop to learn more about accessibility, the importance of universal design, and how to create a high-quality user experience that is inclusive and beneficial to all.
Users First: UX Basics for Websites that Serve People (staff presentation at ...Melissa Van De Werfhorst
Workshop for web design, web development, and marketing staff at UC Santa Barbara on user experience (UX) basics. Introduction to UX. Emphasis on the planning through design concepts of UX. Presented 12/17/14 by Melissa Van De Werfhorst, hosted by the UCSB Web Standards Group.
Cantina Web Content Management (WCM) WebinarMitchel Ahern
Web Content Management (WCM) is the process of creating, managing and delivering information online. Organizations growing their audience are finding that effective WCM is critical, but that implementing it requires a fine balance between emerging technology and business process. Understanding the technologies that are available and the trends that are shaping content consumption are essential to defining and executing a successful WCM strategy which enables more robust, responsively designed websites.
From the Trenches: Building the Accessible WebEffectiveUI
Jon Reid, Senior Developer at EffectiveUI, presented "From the Trenches: A Practical Approach to Building the Accessible Web" at Accessing Higher Ground 2010, an accessible media, web and technology conference hosted by the University of Colorado at Boulder.
In recognition of Global Accessibility Awareness Day on May 21, 2015, this presentation for Code for San Francisco introduces an accessibility strategy to involve the entire team, including user experience, in creating an inclusive, improved experience for everyone:
- Allow everyone to own accessibility
- Empower the team with education
- Share a vocabulary
- Integrate accessibility into your brand
- Institute accessibility into your culture
- Build accessibility into your Content Management System (CMS)
Well before development, there are many opportunities for other team members to integrate accessibility into product planning, content and design. The presentation also takes a closer look at how the content team can be a greater accessibility ally and resource.
UX Patterns That Turn Site Visits Into LeadsClear Digital
In the #B2B marketing realm, lead generation is the name of the game. But despite all this legwork, your site isn’t generating qualified leads at the rate it needs to be. What gives?
Interprting analytics skillswap: How UX and analytics can work togetherWebcredible
The need for businesses to take notice and make the most of big data has been a popular topic of discussion for some time. But how do you move beyond the 'what' of analytics and big data and interpret the 'why' of users' behaviour?
Navigating Excellence Seattle's Top 10 Web Design Services Spotlighting Tatia...Tatiana Designs
In the vibrant tech hub of Seattle, where innovation and creativity converge, a multitude of web design services strive to transform digital landscapes. Among the top-tier players in this dynamic arena, Tatiana Design stands out with its unique blend of artistic flair, technical expertise, and client-centric approach. Here's a closer look at Seattle's finest web design services, with a special spotlight on the exceptional work of Tatiana Design.
Inclusive Design for Web Development TeamsShayne Rempel
Is your agency practicing inclusive design? Does inclusive design add measurable value? Learn which testing tools & resources will help increase your agency's value to clients.
It only takes incremental shifts to our existing workflows to make our websites more accessible and user-friendly to all.
Acetabularia Information For Class 9 .docxvaibhavrinwa19
Acetabularia acetabulum is a single-celled green alga that in its vegetative state is morphologically differentiated into a basal rhizoid and an axially elongated stalk, which bears whorls of branching hairs. The single diploid nucleus resides in the rhizoid.
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.
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.
Normal Labour/ Stages of Labour/ Mechanism of LabourWasim Ak
Normal labor is also termed spontaneous labor, defined as the natural physiological process through which the fetus, placenta, and membranes are expelled from the uterus through the birth canal at term (37 to 42 weeks
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.
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.
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Navigation and Link
1. NAVIGATION, LINKS AND
HOVER ROLLOVERS
322432 Web Design Technology
By Yaowaluck Promdee, Dr.Sumonta Kasemvilas
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 1
2. Meaning of Navigation
Links
Navigation Bar = List of Links
Vertical Navigation Bar
Horizontal Navigation Bar
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
INTRODUCTION
Web Design Technology - 2015 2
3. NAVIGATION
• Navigation is a section of website or online page
intended to aid visitors in traveling through the online
document.
• These sections of the webpage will include links to
the most important sections of the site.
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 3
4. “ The navigation menu on the
website is like a road on
a street or a level directory in
a shopping mall.
You can’t reach your destination
without first knowing where you
are.”
By Tomas Laurivicius
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 4
5. TYPE OF NAVIGATION
• Main Menu
• Secondary Example Catalogs, Chapters
• Help menu Example Search Box, Image Map
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 5
6. GOOD DESIGN NAVIGATION
• Easy to use
• Learnability
• Simple, User friendly
• Mega Drop-Down
• Where You Are
• Back to homepage
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Web Design Technology - 2015 6
7. GOOD DESIGN NAVIGATION > EASY TO USE
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
EASY TO USE
Navigation should be a prominent element of your design.
Web Design Technology - 2015 7
8. GOOD DESIGN NAVIGATION > EASY TO USE
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
EASY TO USE
Web Design Technology - 2015 8
9. GOOD DESIGN NAVIGATION > LEARNABILTY AND SIMPLE
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
LEARNABILITY AND SIMPLE
Web Design Technology - 2015 9
10. GOOD DESIGN NAVIGATION > WHERE YOU ARE
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
WHERE YOU ARE
Breadcrumb Navigation
Web Design Technology - 2015 10
11. GOOD DESIGN NAVIGATION >
WHERE YOU ARE >
IN THE PROCESS
WDS
CS KKU
HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
WHERE YOU ARE
Web Design Technology - 2015 11
12. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
LINKS
WDS
CS KKU
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouse over it
a:active - a link the moment it is clicked
Web Design Technology - 2015 12
13. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Navigation Bar = List of Links
<ul>
<li><a href=“#home">Home</a></li>
<li><a href=”#news">News</a></li>
<li><a href=”#contact">Contact</a></li>
<li><a href=”#about">About</a></li>
</ul>
ul { list-style-type:none; margin:0; padding:0; }
Output?
WDS
CS KKU
Web Design Technology - 2015 13
14. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Vertical Navigation Bar
a { display:block; width:60px; }
/* HTML */
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
WDS
CS KKU
Web Design Technology - 2015 14
15. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
Horizontal Navigation Bar
li { display:inline; }
WDS
CS KKU
Web Design Technology - 2015 15
16. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
/*CSS*/
.linkbox a:link {color: #FF0000} /* unvisited link ………..*/
.linkbox a:visited {color: #00FF00} /* visited link ……………..*/
.linkbox a:hover {color: #FF00FF} /* mouse over link pink color */
.linkbox a:active {color: #0000FF} /* selected link ………………*/
WDS
CS KKU
EXAMPLE1
Web Design Technology - 2015 16
17. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
EXAMPLE 2
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
WDS
CS KKU
Web Design Technology - 2015 17
18. HOME INTRO NIVAGATION TYPE DESIGN LINK EXAMPLE
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden; }
li { float:left; }
a {
display:block; width:60px;
background-color:#dddddd; }
EXAMPLE3
WDS
CS KKU
Web Design Technology - 2015 18
19. ASSIGNMENT#10
WDS
CS KKU
Creating your project “ Personal Blog” followed your
site at least 4 html pages Example Home, About
me, Lab, Lesson, and etc.
Web Design Technology - 2015 19