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)
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)
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
This is Part 1 of a two-lecture series on implementing HTML. I created this lecture in an effort to keep my design students from "fearing the code" they encounter in an introductory level course to Dreamweaver and Web Site design.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
This is Part 1 of a two-lecture series on implementing HTML. I created this lecture in an effort to keep my design students from "fearing the code" they encounter in an introductory level course to Dreamweaver and Web Site design.
Learn HTML and CSS_ Learn to build a website with HTML and CSS simodafire
Understanding
Web 2.0
For many people the term Web 2.0 is complicated. They fail truly to
understand what this is and how it works. Many so-called experts have tried
to give their long drawn out technical explanation of this type of web site.
The problem is though is that use so much jargon and hard to understand
technical mumbo jumbo that an average person will need a Rosetta stone to
decipher what these experts are saying.
Understanding
Web 2.0
For many people the term Web 2.0 is complicated. They fail truly to
understand what this is and how it works. Many so-called experts have tried
to give their long drawn out technical explanation of this type of web site.
The problem is though is that use so much jargon and hard to understand
technical mumbo jumbo that an average person will need a Rosetta stone to
decipher what these experts are saying.
Feel free to share to every aspiring ICT SHS teacher that is starting out. Just please do not take the copyright credit. The content is taken from Rex and Abiva Empowerment Technologies books.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page pmgdscunsri
Figma is a cloud-based design tool widely used by designers for prototyping, UI/UX design, and real-time collaboration. With features such as precision pen tools, grid system, and reusable components, Figma makes it easy for teams to work together on design projects. Its flexibility and accessibility make Figma a top choice in the digital age.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
4. Why you should want
to succeed in this class:
“Graphic Design” is not media-specific
Build on your existing skills
Difficulty of learning these skills outside of a
structured environment
More jobs, better pay
It really is fun and empowering to code!
5. How you will succeed this class:
Take it week-by-week
Be an active learner: don’t just copy and paste, ask
lots of questions, make sure you understand the
underlying concepts, and be open to changing your
assumptions about web design and coding
If you miss classes, be serious about contacting me
(or classmates) and catching up on your work
Allow yourself time to get frustrated
and start over on your assignments
9. !
The web is just one service of the internet.
!
It is system of interlinked hypertext documents
accessed via the Internet. With a web browser,
one can view web pages that may contain text,
images, videos, and other multimedia, and
navigate between them via hyperlinks.
12. User types a URL (Uniform Resource Locator)
into a browser, e.g., www.amazon.com
!
The URL is sent to a DNS (Domain Name Service),
which translates the URL into an IP address, e.g.,
18.12.23.1
!
The correct server is found through the IP
address, which is sent an HTTP request (get), and
returns the requested html pages, images, etc,
back to the browser
!
15. You do not need any special software to create html,
css or javascript files, just a plain text editor. I
recommend using bbedit in class. Check out the
resources page on the class site for other options.
The file extension defines the type of language of
the file (file.html, file.css, file.js).
Your html/css/js files do not need to be on a server
to be opened in a browser.
!
16.
17. Rich Text to Plain Text
Just as with InDesign, when you receive text from
someone that has already been formatted (e.g. from
Word), you should always paste that text into TextEdit, and
convert to plain text.
18. Rich Text to Plain Text
In TextEdit, go to ‘Format’ to ‘Make Plain Text.’
19. Rich Text to Plain Text
Copy and paste the plain text into your HTML and start
typing in tags to recreate the document structure.
24. Markup Language
A markup language is a
set of markup tags.
The purpose of the tags
are to describe page content.
25. Markup Language
Without any markup to give your content structure, the
browser renders unformatted and unstyled text, also
known as “plain text”.
26. Markup Language
HTML tags give structure and meaning to your content.
“Semantic markup” refers to the use of meaningful tags to
describe content (e.g. using header tags for header content).
27. Markup Language
Once your content is marked up, the browser applies built-in
default styles to the tags. While you can override these styles
with css, your marked up, non-css styled document should be
readable and have a clear hierarchy.
29. Anatomy of an Element
<tag>Content</tag>
An HTML element includes both
the HTML tag and everything between
the tag (the content).
30. Anatomy of an Element
<tag>Content</tag>
The element tag gives the
content structure and meaning.
31. Anatomy of an Element
<tag>Content</tag>
Tags normally come in pairs. The
first tag is the start tag, and the second
tag is the end tag.
32. Anatomy of an Element
<h1>Main Headline</h1>
HTML has a defined set of tag
names (also called keywords) that
the browser understands.
33. Anatomy of an Element
<html lang=”en”></html>
Most elements can have attributes,
which provides additional informatin
about the element.
34. Anatomy of an Element
<div class=”left-nav”></div>
Attributes always follow the same
format: name=”value”. You can use
either single or double quotes.
37. EXCEPTION
<!DOCTYPE html>
The doctype is not actually a tag,
but a declaration, telling the browser
what kind of html you are using. The
doctype above declares HTML 5.
42. Nesting
The use of our first three tags (html, head and body),
introduces and important concept: Nesting, which is when
tags “wrap” other tags. When you create markup, you should
indicate nesting by indenting the nested tags with 2 spaces
(preferred) or a tab.
43. Document Hierarchy: Parents, children and siblings
Just as in a genealogy tree, the family hierarchy is described in
terms of relationships. All elements in the document have a
parent (up to ‘document’, which is at the top), and may have
children (nested inside) or siblings (placed alongside).
<parent x>
<child and sibling y> </child and sibling y>
<child and sibling z> </child and sibling z>
</parent x>
47. <title></title>
The title element:
• defines a title in the browser toolbar,
• provides a title for the page when it is
added to favorites
• displays a title for the page in search
engine results.
51. <link>
The <link> tag defines the
relationship between a document
and an external resource. It is a
single tag.
52. EXAMPLE
<link rel="stylesheet" type="text/css" href="stylesheet.css">
In the example above, the <link> tag
has three attributes: rel (relationship),
type, and href (hypertext reference).
55. <h1></h1>
through
<h6></h6>
The header elements are block-level
tags that give you the ability to assign
semantic weight (importance) to your
headlines.
59. <img>
The <img> element is a single, inline
tag that works anywhere in the body
to insert a jpg, png, svg or gif file.
60. NOTE
The <img> tag is empty;
it requires a src (source) attribute to
“pull in” the image into the page. It does
not require an “alt” tag, but if the image
is essential to the content (e.g. not a
background or decorative element), it
should have one.
61. EXAMPLE
<img src="images/logo.gif" alt=”Acme Corp”>
All <img> tags should also contain an
alt attribute. This is “alternate” text
that will appear if for some reason the image
link is broken or the file is unavailable.
67. NOTE
List tags are always used in nested pairs.
!
The wrapping tags define the list type,
and indicate where the list series begins
and ends.
68. <ul>
<li></li>
</ul>
The <ul> (unordered list) element is a
block-level tag that wraps a series of <li>
(list item) elements. The default property
for the list items is a bullet.
70. <ol>
<li></li>
</ol>
The <ol> (ordered list) element is a
block-level tag that wraps a series of <li>
(list item) elements. The default property
for the list items is decimal (1, 2, 3).
73. <a></a>
The <a> element is an inline
tag that works anywhere in the
body to create a hyperlink.
74. EXAMPLE
<a href="aboutme.html">About Me</a>
<a href="http://www.colum.edu">My school</a>
<a> tags are always used in pairs,
wrapping the content you want to activate
as a link. If you use an absolute URL, it
must start with “http://”.
75. Relative vs Absolute links
Whenever you link to a file with an ‘href‘ (hypertext reference )
or ‘src’ (source) attribute, you are providing the browser and
address to the resource. That address can be relative or
absolute.
root directory (www.mysite.com)
index.html
images
logo.png
report.pdf
stylesheet.css
!
76. Relative vs Absolute links
A relative link is relative to the resource’s location in its
directory. It is like saying “the restaurant is 2 blocks away.”
In the example below, if ‘logo.png‘ were linked from the
homepage (index.html), the tag would be:
<img src=”images/logo.png”>
root directory (www.mysite.com)
index.html
images
logo.png
report.pdf
stylesheet.css
77. Relative vs Absolute links
An absolute link is the full address to the resource’s location in
the entire web. It is like saying “the restaurant is at 222 West
Grand, Chicago IL 60625.”
<img src=”http://www.mysite.com/images/logo.png”>
root directory (www.mysite.com)
index.html
images
logo.png
report.pdf
stylesheet.css
78.
79. Where did those text styles come from?
All browsers have what is called a
“client stylesheet” that applies formatting
to your html elements, such as text size, font,
color, margins, line-height, and much more.
Your custom css overrides
some of these default styles.
80. But it is ugly!
Before we begin learning how to add
visual design to our pages, it is crucial
that we understand how to create a
foundation of solid structural design.
83. FTP Software
All premium code editors have ftp built in, which allows you to
sync your project files to the server easily.
You will often need to post or download files from the server
manually. For this you can use dedicated ftp software:
Fetch, Transmit and FileZilla & Fireftp (both free) are all good
choices for Mac.
88. CMS
A Content Management System (CMS)
is a computer program that allows publishing, editing and
modifying content on a web site as well as maintenance from a
central page.