Updated Feb. 9, 2014. This PPT is a review of color and fonts as used with HTML5 and CSS. Used in an undergraduate journalism class called Advanced Online Media Production.
A design talk geared towards designers who are new to the world of web design. I’ll cover items such as: how web design is unique from other kinds of design (such as print), how to leverage research and analytics to create data informed designs, steps to become a proficient web designer and how to choose and work with developers. If there are folks in the room using Illustrator or PSD, I'll show you how to set up Illustrator files for web design and prep files for a developer.
Presentation given at Montclair State University's Graphic Design II course on Introduction to Web Design. This presentation was geared towards year two graphic design students with little to no exposure to web design and predominant print backgrounds.
by: sara cannon
WordPress and your brand “utilizing WP technology to fit your brand, your look, and your goals” In this presentation I will go over different aspects of WordPress and how it applies to company branding. We will cover: – Brand Consistency – Typography tips and tricks – 5 useful recipes for customization
Themes: What they Are - How To Use 'Em - DaytonWP November 2012 MeetUpDaytonWP
Clifton Hatfield will be presenting on topic of WordPress Themes.
In his presentation Clifton will discuss:
- Free vs. Premium Themes: Licensing
- Theme Customizing
- Child Themes
- Responsive Design
Clifton has been a developer since 2004 and in that short time period has created multiple plugins and custom themes.
Find out more about Clifton:
Website: http://cliftonhatfield.com
Facebook: https://www.facebook.com/cliftonhatfield.page
Twitter: https://twitter.com/cliftonhatfield
A design talk geared towards designers who are new to the world of web design. I’ll cover items such as: how web design is unique from other kinds of design (such as print), how to leverage research and analytics to create data informed designs, steps to become a proficient web designer and how to choose and work with developers. If there are folks in the room using Illustrator or PSD, I'll show you how to set up Illustrator files for web design and prep files for a developer.
Presentation given at Montclair State University's Graphic Design II course on Introduction to Web Design. This presentation was geared towards year two graphic design students with little to no exposure to web design and predominant print backgrounds.
by: sara cannon
WordPress and your brand “utilizing WP technology to fit your brand, your look, and your goals” In this presentation I will go over different aspects of WordPress and how it applies to company branding. We will cover: – Brand Consistency – Typography tips and tricks – 5 useful recipes for customization
Themes: What they Are - How To Use 'Em - DaytonWP November 2012 MeetUpDaytonWP
Clifton Hatfield will be presenting on topic of WordPress Themes.
In his presentation Clifton will discuss:
- Free vs. Premium Themes: Licensing
- Theme Customizing
- Child Themes
- Responsive Design
Clifton has been a developer since 2004 and in that short time period has created multiple plugins and custom themes.
Find out more about Clifton:
Website: http://cliftonhatfield.com
Facebook: https://www.facebook.com/cliftonhatfield.page
Twitter: https://twitter.com/cliftonhatfield
700 posts – 1 menu, organizing a large info site with taxonomies and facetsBecky Davis
Ever been on Amazon, searched for shoes and then filtered results to show women’s and red? Yep, WordPress can do that.
How do you set up an informational site that has over 700 pages and is constantly growing? How will anybody find anything? By crafting the menu and template pages to show categories of items and allowing the user to filter the results. Through the use of custom taxonomies, template pages with custom queries and a faceted search result, we’ll walk through how a site can be setup so that it can grow and maintain it’s consistent structure. Even if your project only has 70 posts, being able to cross-reference them with multiple terms so that no matter how they look for things, the information will be found, is very powerful.
This session will be useful for site owners, designers, devs & UX people who are looking for new ways to organize content that go beyond endless hierarchal dropdown menus.
Presentation from the November 2013 East Bay WordPress Meetup: what Sallie Goetsch has learned she needs to tell designers who aren't familiar with WordPress.
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
I was invited by the Hatchery+ to give a presentation and workshop on building products - a brief overview on modern web apps, tech stacks, languages, frameworks, services, APIs and more.
Every website has to improve their speed or otherwise they are just giving away easy customer conversions, higher rankings and overall better user experience.
Blogging 201: From Blank Slate to Blog in Under an HourAdam Gartenberg
So you\'ve decided to start a blog, but aren\'t sure where to begin (or even what platform to use)? This session will start with a comparison of some of the most popular blogging platforms and then walk through step-by-step instructions to get you set up in no time!
(I am also holding Blogging 101 and Blogging 301 sessions if you\'re not sure if blogging is right for you, or if you already have a blog and are looking for more advanced advice.)
This will be presented live on 12/12 - http://anyvite.com/events/home/6omohiadjn
Successful Web Typography - The Developer's AmpersandwichJenn Lukas
Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!
How to utilize web fonts and icon fonts within your projects
How icon fonts can help your site performance
Tools for crafting an efficient type system on the web
“One file to rule them all” In these slides, I detail my three-pronged strategy to create a single EPUB file for most ereaders, as well as the basis for conversion to Kindle/mobi and KF8.
A presentation I did at a Business Bloggers Bootcamp for setting up your digital presence online.
http://www.salfrosceno.com/digital-marketing-business-bloggers-bootcamp/
700 posts – 1 menu, organizing a large info site with taxonomies and facetsBecky Davis
Ever been on Amazon, searched for shoes and then filtered results to show women’s and red? Yep, WordPress can do that.
How do you set up an informational site that has over 700 pages and is constantly growing? How will anybody find anything? By crafting the menu and template pages to show categories of items and allowing the user to filter the results. Through the use of custom taxonomies, template pages with custom queries and a faceted search result, we’ll walk through how a site can be setup so that it can grow and maintain it’s consistent structure. Even if your project only has 70 posts, being able to cross-reference them with multiple terms so that no matter how they look for things, the information will be found, is very powerful.
This session will be useful for site owners, designers, devs & UX people who are looking for new ways to organize content that go beyond endless hierarchal dropdown menus.
Presentation from the November 2013 East Bay WordPress Meetup: what Sallie Goetsch has learned she needs to tell designers who aren't familiar with WordPress.
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
I was invited by the Hatchery+ to give a presentation and workshop on building products - a brief overview on modern web apps, tech stacks, languages, frameworks, services, APIs and more.
Every website has to improve their speed or otherwise they are just giving away easy customer conversions, higher rankings and overall better user experience.
Blogging 201: From Blank Slate to Blog in Under an HourAdam Gartenberg
So you\'ve decided to start a blog, but aren\'t sure where to begin (or even what platform to use)? This session will start with a comparison of some of the most popular blogging platforms and then walk through step-by-step instructions to get you set up in no time!
(I am also holding Blogging 101 and Blogging 301 sessions if you\'re not sure if blogging is right for you, or if you already have a blog and are looking for more advanced advice.)
This will be presented live on 12/12 - http://anyvite.com/events/home/6omohiadjn
Successful Web Typography - The Developer's AmpersandwichJenn Lukas
Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!
How to utilize web fonts and icon fonts within your projects
How icon fonts can help your site performance
Tools for crafting an efficient type system on the web
“One file to rule them all” In these slides, I detail my three-pronged strategy to create a single EPUB file for most ereaders, as well as the basis for conversion to Kindle/mobi and KF8.
A presentation I did at a Business Bloggers Bootcamp for setting up your digital presence online.
http://www.salfrosceno.com/digital-marketing-business-bloggers-bootcamp/
A presentation about webfont services and how to stop using the same old 15 web-safe fonts we've been using for two decades. Examples from four webfont providers: FontSquirrel, Google Font API, Typekit, and Extensis WebINK. Includes implementation details.
An introduction to the SASS language for styling your web projects. Its aim is to explain why you should make the jump from CSS to SASS, and to help you do so as easily as possible.
This presentation also focuses on getting you the highest impact from the simplest features of the SASS language.
If you are new to PrintCSS, one of the biggest tasks is to decide on the rendering tool. PrintCSS.live tries to help you with that decision by allowing you to try out the most popular rendering tools on the market in the browser.
Engage 2019: Building a design system to modernize ConnectionsTiny
At the Engage User Group conference in Belgium, our global head of design Fredrik Danielsson, explained how design systems can bring simplicity to complex enterprise software deployments.
This discussion will focus primarily on the two most popular CSS pre-processors, LESS and SASS. I will take some time to compare the two, by highlighting both their similarities and differences. Though these two “languages” share similar features, the compiler interprets them differently. Furthermore, certain functions and features are easier to execute in one language than the other. The goal of these comparison is to give the audience a feel for the syntax and to demonstrate how some of the features can be used in a practical way.
Moreover, further into the presentation we will take a deeper dive into the advance features of LESS and SASS. In this sections we will explore the latest features of both pre-processors and see how they work with popular 3rd party vendors and libraries. The audience will have a chance to learn about the frameworks and what makes these platforms so special!
Let's talk about web typography!
Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!
Introduces the idea of "Just Enough Code" -- to add a 2- or 3-week module on Web coding into courses like editing, or design, or multimedia. There are 2 reasons to do this. One is to demystify how Web and mobile sites are made. The other is to open a door -- for (at least) some students -- to something they might really have an aptitude for, something they might really enjoy, if you just have a chance to explore it.
Multimedia Journalism Innovations in the ClassroomMindy McAdams
For a panel about "Innovation in Journalism Education": How teaching multimedia journalism has changed since 1999, and how I have adapted my classes and pushed my department to innovate. Journalism students don't have to be programmers, but they should have an opportunity to learn how to create new story forms for web and mobile platforms.
Summary of journalism faculty curriculum workshopMindy McAdams
At the end of a week-long workshop about updating the journalism curriculum at Rhodes University, we discussed a few specific types of assignments and assessment.
Introduction to crowdsourcing for journalists and journalism educators. Use of four cases and what we can learn from them. Three cases include maps; the fourth case does not.
Presentation about curriculum and required courses in journalism programs in the U.S. To lecturers at Rhodes dept. of Journalism and Media Studies, South Africa, June 2014.
Starter presentation in a weeklong workshop for journalism educators at Rhodes University, South Africa, in June 2014. We are trying to discover the needs of the journalism school as it goes forward with changes and updates in the curriculum. Purpose of this pres is to identify some areas where teaching needs to be focused, or refocused.
Blogs cover a very wide variety of styles and approaches. Blogs written by journalists, or housed on the websites of media organizations, are also widely varied. To understand blogs, blogging, and the audiences for blogs, we have to begin by looking at real blogs and comparing them. This presentation was given to 3rd-year journalism students at Rhodes University, South Africa.
Journalism's Future: Journalism, Not NewspapersMindy McAdams
Presentation to 150 journalists and editors at RCS MediaGroup S.p.A., Milan, Italy, May 2013. The goal was to inspire them to take their business forward into a mobile environment where competition comes from everywhere, not only the traditional rivals.
A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
Updated with new exercises - March 2014. Introduction to jQuery (for journalism students) and review of the Code School "Try jQuery" course, Parts 1-3.
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
An introduction to JavaScript that includes side-by-side comparisons with Python -- for journalism students. Based on the free JavaScript exercises/lessons at Codecademy: http://www.codecademy.com/tracks/javascript (Students in this course spent 4 weeks learning Python before they were introduced to JavaScript.)
An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Based on Zed Shaw's "Learn Python the Hard Way," this is a review of Exercises 27 - 34 in that text. For non-computer-science students and learners. Updated with new slides Feb. 2, 2014. Introduces Booleans, if-elif-else, loops, lists.
Based on Zed Shaw's "Learn Python the Hard Way," this is a review of Exercises 13 - 19 in that text. For non-computer-science students and learners. This PPT will not make sense without Zed's lessons. The PPT is intended to supplement and help explain these seven lessons. The PPT was updated on Jan. 17, 2014.
Based on Zed Shaw's "Learn Python the Hard Way," this is a review of Exercises 1 - 12 in that text. For non-computer-science students and learners. Updated with new slides Jan. 12, 2014. Introduces math, print statement, variables, format strings, raw_input().
Brief introduction to the Python programming language, for complete beginners who have never learned a programming language before. Resources and links are included.
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.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
Honest Reviews of Tim Han LMA Course Program.pptxtimhan337
Personal development courses are widely available today, with each one promising life-changing outcomes. Tim Han’s Life Mastery Achievers (LMA) Course has drawn a lot of interest. In addition to offering my frank assessment of Success Insider’s LMA Course, this piece examines the course’s effects via a variety of Tim Han LMA course reviews and Success Insider comments.
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.
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.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
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.
The French Revolution, which began in 1789, was a period of radical social and political upheaval in France. It marked the decline of absolute monarchies, the rise of secular and democratic republics, and the eventual rise of Napoleon Bonaparte. This revolutionary period is crucial in understanding the transition from feudalism to modernity in Europe.
For more information, visit-www.vavaclasses.com
9. Color
• Choose 2 to 5 key colors for your palette
• Specify colors for page background, wrapper
background, and main text
• Specify all pseudo classes
(a:link, a:visited, a:hover, a:active, a:focus)
– Look up a:focus if you don’t know about it
• Test all colors for text legibility with a
Photoshop graphic (is your text easy to read?)
18. Match the generic
• The generic comes at the end of the declaration
• There are three acceptable generics:
– serif
– sans-serif
– monospace
• The fonts specified must be the same
classification as the generic; e.g., Verdana and
Arial are sans-serif fonts, and Georgia and Times
are serif fonts
19. Consider the context
• When creating a CSS “font stack”—is it a
declaration for body or caption text (small) or
heading text (large)?
• The order of the fonts in the stack should reflect
this difference
• Certain fonts work well for paragraphs (small text
size), while others work better at larger sizes.
• Example: Verdana and Arial read slightly better
than Helvetica at smaller sizes on the screen.
Source: Nathan Ford, “Better CSS Font Stacks”
20. There are not many fonts
that you can expect
most online users to have
installed on their devices.
22. Make sure you have seen it
• Many typography Web sites that seem to be
showing you typefaces are only showing you
the faces that are already on your computer.
• To be certain you have really seen a typeface
(before specifying a font family)—Google it!
• The major type foundries (Adobe, Bitstream,
Linotype, etc.) show online samples in PDF
format so you can get an accurate view of the
typefaces. Go to their sites.
23. Use of quotation marks
• Use quotation marks around any font-family name
that includes a space.
• Make certain the quotation marks in CSS are
“straight,” not “curly” (this is necessary for ALL code).
"Book Antigua" (yes) “Book Antigua” (no)
• Make sure the comma comes after the closing
quote:
Baskerville, "Times New Roman", Times, serif;
24. Limit use of different fonts
• A good rule of thumb is to never use more than
three typefaces on any page, and preferably to stick
to only one or two.
• For CSS, this would mean only two different fontfamily “stacks.” (You can have more than two
declarations in the style sheet.)
Source: Susan G. Miller, “Selecting and Combining Typefaces”
25. Limit use of different fonts
• In selecting two fonts to use, it’s a good practice to
select one serif and the other from the sans-serif
group.
– Allows for a nice contrast
– Ensures that the page is attractive and easy to
read
Source: Susan G. Miller, “Selecting and Combining Typefaces”
27. “Design in its most effective form
is a process, an action,
a verb not a noun.
A protocol for solving problems and
discovering new opportunities.
Techniques and tools differ and
their effectiveness [is] arguable,
but the core of the process stays the same.”
—“Design Thinking ... What Is That?” Fast Company, March 2006
28. Design thinking
1: Define the problem
2: Create and consider many options
3: Refine selected directions
3.5: Repeat (optional)
4: Pick the winner, execute
—quoted from “Design Thinking ... What Is That?”
Fast Company, March 2006
29. A five-page student website
has little in common
with a news organization’s
10,000-page site.
31. Linked on our syllabus:
Checklist for your HTML5
and CSS knowledge
http://bit.ly/html_css_checklist
32. Fonts, color, Web design
Presentation by Mindy McAdams
University of Florida
[2014]
Editor's Notes
MMC 4341 - February 2014 – many of the linked resources are no longer available, but some are.
You will ALWAYS need to specify background-color, (text) color, and 4 pseudo classes for the links.
http://americandesignawards.com/
If you analyze award-winning design websites, you will discover that the palettes are usually simple. The number of colors used is limited.
http://www.sasquatchfestival.com/
If you identify more than 2 or 3 colors, it is likely that most of those colors are shades or hues of 1 or 2 base colors.
http://www.androidanalyse.com/category/editorial/
if you do find a “rainbow” palette, you will notice that the “rainbow” is usually used in a limited and restrained way – like this example.
More about the pseudo classes: http://css-tricks.com/pseudo-class-selectors/ … One mistake that inexperienced CSS coders make – they fail to test link colors against different backgrounds.
This example shows minimal specifications for color in a CSS style sheet.
This is a great tool (free, online) for experimenting with color. http://kuler.adobe.com/
Always find and USE the hexadecimal codes for colors! http://kuler.adobe.com/
Always find and USE the hexadecimal codes for colors! http://kuler.adobe.com/ DO NOT use words, e.g. “red,” “black.”
Web designers have published hundreds of articles about the best ways to use fonts with HTML and CSS. Don’t take this for granted.
All shown at 48px – NOTE that the sizes of two different font-families can be EXTREMELY different. This could really mess up your page design.
All shown at 48px – go back one slide and compare. Make sure you KNOW the difference between serif and sans-serif.
Compare this slide with the previous 2 slides. MONOSPACE is very different. These can also be called fixed-width fonts.
Standard best practice is to ALWAYS include one generic at the end of the font-family declaration.
THIS IS A BIG DEAL. Your Web pages can look HORRIBLE if you do not construct your font stacks (in CSS) carefully. You have very LIMITED options.
Google Web Fonts to the rescue! ALTHOUGH – you do not need to DEPEND on these – you can still use “safe” fonts – and you still need to spec a generic!
Different people have different fonts installed (or not installed) – what you see on your computer might be VERY DIFFERENT from what I see, or what others see, when you view YOUR Web page.
If you type these incorrectly, the fonts will not work on the Web page.
Design is a process that addresses a problem, or a set of problems. This is not “problem” in a negative sense – more like a puzzle that has more than one way to solve it. Which way is the best way? That is the problem to be solved.
We’ll talk more next week about agile development and how that contributes to the design process.
What is the problem you are trying to solve? Think it over.
Like Web typography, CSS is a topic about which skilled designers have written many, many articles. Don’t just stick things in. PLAY. Experiment. And Google about what is considered correct, incorrect, and optimal.