Monday, November 17, 2014

Set the overflow property to scroll:

http://www.w3schools.com/cssref/pr_pos_overflow.asp

Scroll to top

http://webdesignerwall.com/tutorials/animated-scroll-to-top

DEMO
http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html

Wednesday, November 12, 2014

Portfolio Website: STITCH DESIGN

http://www.stitchdesignco.com/work/view/seed-house-stationers

http://www.stitchdesignco.com

A favicon /ˈfævɪkɒn / (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more[1] small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page.[1][2] A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browsers will then make use of it.[3]

Resource: http://en.wikipedia.org/wiki/Favicon

http://tools.dynamicdrive.com/favicon/#.U1gUqV74Jvc
http://favicon.htmlkit.com/favicon/

Not Working on SAFARI?

1. Generated 16 x 16 .PNG from Photoshop (8 bits per channel RGB - no alpha) named "favicon.png"

2. Changed file extension to .ICO and put it in the same directory of my site that the index.html file is in.

3. Entered in the following code:

Worked in Firefox and Chrome, but not in Safari. Even after clearing chache.

4. Changed the name of the favicon (for example "awsomefavicon.ico") and adjusted the code.

Monday, November 3, 2014

Assignments by 11.05

1. Design full pages of your website
2. Revised Flowchart
3. HTML exercise: 2 pages link, add images, add text, and add slideshow.

SLIDESHOW
http://codepen.io/leemark/pen/DLgbr

Forms: Contact

HTML

</form>

mail.php

<?php

$Name = $_POST['name'];

$Message = $_POST['message'];

$Email = $_POST['email'];

$Body = "From: $Name\nEmail: $Email\nMessage: $Message";

$Recipient = 'admin@myweb.com';

$Subject = 'Your Name';

$Headers = "From: <$Email>";

mail($Recipient,$Subject,$Body,$Headers,"-f $Email") or die('Error!');

header('Location: http://www.myweb.com/contact.html');

Codepen

MENUS

Centered Logo+Menu:
http://codepen.io/wolfcry911/pen/HyLdg

http://codepen.io/svendsen/pen/hHzCo

Simple Transition:
http://codepen.io/rafaelrinaldi/pen/DojpK

Centered Menu:
http://codepen.io/ToJa92/pen/fwdGh

SLIDESHOW
http://codepen.io/leemark/pen/DLgbr

Saturday, November 1, 2014

Web Fonts

Web Font Choice {html&css: p. 277~278}
www.fontex.org
www.fontsquirrel.com
http://www.fontsquirrel.com/tools/webfont-generator
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>
----------

Quick Tip: Instantly Preview Google Fonts in Chrome

videos

Videos\
Typography

\Rating:

Quick Tip: Instantly Preview Google Fonts in Chrome

Jim Bosveld on Oct 26th 2012 with 7 Comments

Tutorial Details

Screencast duration: 2 mins
Difficulty: Beginner
Topic: Typography

View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.

With the release of the Typecast public beta comes the next step in the wonderful evolution of web fonts. One of (if not the) biggest web font service is Google web fonts. With over 500 font families that can be used without cost or limitation it offers a truly remarkable service. Let’s look at a quick way of previewing Google fonts, without having to actually implement them in your projects.

The fonts offered by Typekit, fonts.com, or high end foundries may be of a higher quality in terms of design and practicality, but the barrier for using Google web fonts is much lower. You don’t even need a Google account to sign up.

One problem with using web fonts however, is testing different examples in your own projects. Whereas you can just set a different font stack with regular fonts, a web font requires a snippet of javascript (or an additional stylesheet) to load the assets. This can be a pain if you want to try various different web fonts in quick succession.

Enter the Google Font Previewer by Pamela Fox! A remarkable little Chrome extension that lets you preview all Google web fonts, on any site. All it asks of you is the css selector for the block of text you want to preview.

Watch the Quick Tip

Feel free to download the video or subscribe to Webdesigntuts+ on YouTube..

The extension also lets you set the text size, text-shadow and some other transformations in the preview. It would be great if you could select other web font services as well, just like you can in Typecast, but for now this is a fun and practical little alternative.

Wednesday, October 29, 2014

Assignments by Nov. 3rd.

1. Developing flowchart
2. Revised Computer Sketches: 2 Pages for each x 3 Concepts = total 6 pages of layouts
3. Exercise layout design (class hand-out): Add images into HTML
4. Working on your logo
5. Happy Halloween!

Friday, October 24, 2014

adding (link) JavaScript

EXTRNAL:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script src="js/menu.js">
</script>

</body>
</html>

INTERNAL

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script>

jQuery(document).ready(function($) {
$('a').smoothScroll({
speed: 1000,
easing: 'easeInOutCubic'
});

</script>

</body>
</html>

http://www.w3schools.com/tags/att_script_src.asp

compression for PNG

https://tinypng.com

Thursday, October 23, 2014

Web Design Trends links:

Responsive Web Design— ARCTICAScrolling Over Clicking — OPTIC
Large, Beautiful Background Image & Videos — Crop the Block
Flat Design is Growing Up — 1 / 2 / 3 / 4
Ghost Button — Campus Bubble / Care Center
Bigger Emphasis on Typography — Get Going Today
Card Design — Google Plus
Flat Design is Growing Up (or, The Rise of Material Design?) - Google Design
Interactive Storytelling - the guardian