Thursday, January 24, 2013

CSS: Internal & External


INTERNAL css

<!DOCTYPE html>
<head>
<title>using INTERNAL css</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
}
</style>
</head>

<body>
</body>
</html>


EXTERNAL css

<!DOCTYPE html>
<head>
<title>using EXTERNAL css</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>

<body>
</body>
</html>

-------
style.css

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
Internal & External CSS }

Punctuation Names


ASCII Pronunciation Rules for Programmers

Common NamesRare Names
!exclamation mark
bang
pling
excl
not
shriek
factorial
exclam
smash
cuss
boing
yell
wow
hey
wham
eureka
spark-spot
soldier
control
"quotation marks
quote
double quote
literal mark
double-glitch
dieresis
dirk
rabbit-ears
double prime
#
hash
pound sign
number sign
pound
sharp
crunch
hex
mesh
grid
crosshatch
octothorpe
flash
square
pig-pen
tictactoe
scratchmark
thud
thump
splat
&ampersand
amp
amper
and
and sign
address
reference
andpersand
bitand
background
pretzel
'apostrophe
single quote
quote
prime
glitch
tick
irk
pop
spark
closing single quotation mark
acute accent
( )opening / closing parenthesisleft / right paren
left / right parenthesis
left / right
open / close
open / close paren
paren / thesis
so/already
lparen/rparen
opening/closing parenthesis
opening/closing round bracket
left/right round bracket
wax/wane
parenthisey/unparenthisey
left/right ear
[ ]opening / closing bracketleft / right bracket
left / right square bracket
bracket / unbracket
square / unsquare
u turn / u turn back


}
opening / closing brace
open / close brace
left / right brace
left / right squiggly
left / right squiggly bracket/brace
brace / unbrace
curly / uncurly
leftit / rytit
left / right squirrelly
embrace / bracelet
< >less / greater than
bra / ket
left / right angle
left / right angle bracket
left / right broket
from / into (or towards)
read from / write to
suck / blow
comes-from / gozinta
in / out
crunch / zap
tic / tac
angle / right angle
*asteriskstar
splat
wildcard
gear
dingle
mult
spider
aster
times
twinkle
glob
Nathan Hale
-dash
hyphen
minus
worm
option
dak
bithorpe
.perioddot
point
decimal point
radix point
full stop
spot
/slash
stroke
slant
forward slash
diagonal
solidus
over
slak
\
backslash
hack
whack
escape
reverse slash
slosh
backslant
backwhack
bash
reverse slant
reversed virgule
backslat
:colondots
two-spot
;semicolon
semi
weenie
hybrid
pit-thwong
=equalsgets
takes
quadrathorpe
half-mesh
^circumflexcaret
hat
control
uparrow
xor sign
chevron
shark (or shark-fin)
to the
fang
pointer
_underline
underscore
underbar
under
score
backarrow
skid
flatworm
`grave accent
backquote
left quote
left single quote
open quote
grave
backprime
backspark
unapostrophe
birk
blugle
back tick
back glitch
push
opening single quote
quasiquote
|bar
or
or-bar
v-bar
pipe
vertical bar
vertical line
gozinta
thru
pipesinta
spike
~tilde
squiggle
twiddle
not
approx
wiggle
swung dash
enyay
sqiggle (sic)

Reading: Am I Too Late to the Web Design Party?

Ask a Madman: Am I Too Late to the Web Design Party?
 Speider Schneider | Comments: 1

I’m a graphic designer just now getting on the web design bandwagon. Am I too late to the party?

For years, my father refused to learn how to set the clock on his VCR. Twice a year (if there were no power failures) I’d get a call from him, asking how to do it. Eventually, he just got acclimated to deducting an hour from the clock time in the spring and summer months rather than try to learn it.

So when my mother bought her first computer, I started screening my calls. But soon enough she learned how to do an email attachment and even set up her own blog—oddly enough—about how to set your VCR clock.
learning web design, too late?
Don't worry, you aren't that late to the web design party.
Some graphic designers have felt left behind by rapidly changing web technologies. At first it was just easy drag-and-drop web design software supplemented by a simple understanding of HTML. Soon Flash and Java scripting became the norm. Then HTML gave way to DHTML, XHTML and HTML5 and so on. Now, putting Dreamweaver on your resume incites snickers from 23-year-old creative directors.
Many of my peers are taking web classes, trying to catch up on needed skills. Some succeed enough to not be laughed at; others just can’t keep up with all the new programming languages and plugins. For the 23-year-olds who grew up coding HTML and build apps for fun, print designers are like the elderly parents who call about VCR clocks. Print designers who have a few more years (or decades) before they retire need to learn some new tricks.
If you confuse PHP with PCP and think jQuery might be something conservative politicians want to outlaw, you may be a little too late to the technology party. To stay competitive with younger, more savvy designers, you’ll need to work twice as hard to catch up. It means not only keeping up with the changes Adobe makes to its graphics programs but knowing about web language developments, learning new software AND having examples to show employers. No one said it would be easy. 
learning web design, too late?
It's never too late to get back on your feet.
In fighting obsolescence, it might seem like there’s just too much technology to digest. So we’ve boiled it down to four main points for you to focus on. Being familiar with all of these concepts is important; being an expert in one of them can help you score jobs and keep hustling.

Learn WordPress.

WordPress makes it easy to set up websites and blogs for clients—and yourself! In fact, the WordPress content management supports the majority of websites started today. You can use a stylish theme to get started, and when you learn some code, you can customize it or even start building and selling your own awesomely designed themes. HOW Interactive’s got a whole series on how to use Wordpress themes, plugins and tools.

Be a presentation software guru.

Believe it or not, there are design companies that do 90% of their business in creating digital presentations. Creatives excel at presentations because of our ability to make beautiful visuals, and clients big and small need presentation material. While PowerPoint is still the gold standard in corporate environments, keeping up with emerging presentation technologies can be a great selling point for yourself. For example, check out this amazing animated presentation made with Google Docs:

Stay on top of new technologies.


From left: a QR code, a Microsoft Tag and a Data Matrix.
If you haven’t seen these crossword-looking things on packaging or posters, you aren’t getting out enough. QR codes are barcodes you scan with your smartphone to go to a web page, video, app or to make a call. The boring black-and-white squares can also be modified with great design and color. New design firms are popping up everywhere to handle the design of these codes. With trial and error, you can still create some really impressive pieces for clients. (But be careful you don’t end up in the annals of QR code fails!)
And it’s been around for a few years, but augmented reality technology is starting to make its way into our daily lives. It’s a way to interact with your surroundings through your smartphone’s camera—the videos in this articleare great examples.

Prepare for the mobile web. 

Oh, to have been in the forefront of this technology a few years ago. It’s no secret that making just one monster app like Angry Birds will let you retire. Two will let your whole family retire. Three popular apps, and you can buy a better family! 
But responsive websites (ones that work just as well on laptops as they do on tablets and on smartphones) are the real future of mobile apps. It will take some training for a print designer but having a creative eye is the key to being a superstar of this technology. And if you aren’t ready to design for the mobile web yourself, justbefriend some developers!
There are many avenues for creatives to follow to stay on the forefront of technology. It takes hard work, dedication, imagination and the passion we all feel by being creative. Catch up or get left behind—the choice is yours.

Tutorial: How to slice a psd in photoshop

Web Font Choice

Web Font Choice {html&css: p. 277~278} 
www.fontex.org
www.fontsquirrel.com
www.openfontlibrary.org
------------------------------------
Google Web Fonts: www.google.com/webfonts
Google Developer: https://developers.google.com/webfonts/docs/getting_started

A Designer's guide to Webfonts:
http://www.fontshop.com/education/pdf/webfonts.pdf
------------------------------------
> Example
Textbook: Chap.12 (p.277)

CSS:
@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/chunkfive.eot');}
  
 h1, h2 {
    font-family: ChunkFiveRegular, Georgia, serif;}
 
HTML:  <h1>Briards</h1>
  <p>The brie is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
  <p>The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep.</p>