Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Design Fundamentals

Web Design Fundamentals

Web Design Fundamentals, a one-day seminar at the Philippine Center for Creative Imaging. These slides won't make sense outside the context of the seminar and are meant as a visual reminder, reviewer, or guide for those who attended.

Datu Arellano

August 12, 2012
Tweet

More Decks by Datu Arellano

Other Decks in Education

Transcript

  1. why why do I need a website? why is web

    design a bit difficult to learn? why do I need to learn coding?
  2. what what do all websites have in common? what are

    websites made of? what are the good practices in web design? what tools do I use to design and develop a website? what are the fundamental differences between designing for print and designing for the web?
  3. when how long does it take to design and develop

    a web site? how long will it take me to learn web design and development?
  4. how how do I design and build a website from

    scratch? how much does it cost to design and build a site? how much does it cost to maintain a site?
  5. Bitmap Vector pixel-dependent pixel-independent image is mapped into a grid

    image is defined mathematically difficult to scale scalable
  6. GRAPHIC EDITORS Adobe Photoshop Mac / PC Adobe Illustrator Mac

    / PC GIMP Mac / PC /Linux Inkscape Mac / PC /Linux $ $ FREE! FREE!
  7. Dreamweaver Mac / PC FTP CLIENTS Cyberduck Mac Transmit Mac

    FileZilla Mac / PC / Linux FireFTP Firefox Add-on $ FREE! $ FREE! FREE!
  8. Others Adobe Flash Mac / PC WD Toolbar Firebug Firefox

    Add-ons $ FREE! LiveReload Mac / PC $
  9. I.A. I.P. COURSE Contact send message see address find location

    on map Map Form Contact Details Course Title Course Description read title + description look at sample photos be convinced to register click on Register Now button Prerequisites must be prominent Registration Form fill up fields send form - validation - user gets a "Thank You" email Course Meta read meta info click through to INSTRUCTOR profile click through to REG. INFO/FAQs Lightbox: - instructor profile - Reg info / FAQs Main Header navigate Nav Courses Gallery Services FAQs About Contact Logo Link back to PCCI Main click through to pcci.com.ph Social Media Widgets see buttons click on buttons - Reg Now button => if ani-scrollable on mobile, do it
  10. I.A. I.P. COURSE Contact send message see address d location

    on map Map Form Contact Details Course Title Course Description read title + description look at sample photos be convinced to register click on Register Now button Prerequisites must be prominent Registration Form fill up fields send form - validation - user gets a "Thank You" email Course Meta read meta info click through to INSTRUCTOR profile click through to REG. INFO/FAQs Lightbox: - instructor profile - Reg info / FAQs Social Media Widgets see buttons click on buttons - Reg Now button => if ani-scrollable on mobile, do it
  11. I.A. I.P. GALLERY Contact send message see address find location

    on map Map Form Contact Details Main Header navigate Nav Courses Gallery Services FAQs About Contact Logo Link back to PCCI Main click through to pcci.com.ph At The Lobby scan/read INFO ABOUT EXHIBIT see a grid of thumbnails click on a thumbnail browse through collection of images - min. 6, max. 12 images - small thumbnails - big pics - captions/credits text Exhibit Title Artist Name Blurb Dates Student Work see a grid of thumbnails click on a thumbnail browse through collection of images - min. 6, max. 12 images - small thumbnails - big pics - captions/credits text jQuey Plug-ins - Masonry - Lightbox
  12. I.A. I.P. GALLERY ontact d message e address cation on

    map m tact Details At The Lobby scan/read INFO ABOUT EXHIBIT see a grid of thumbnails click on a thumbnail browse through collection of images - min. 6, max. 12 images - small thumbnails - big pics - captions/credits text Exhibit Title Artist Name Blurb Dates Student Work see a grid of thumbnails click on a thumbnail browse through collection of images - min. 6, max. 12 images - small thumbnails - big pics - captions/credits text jQuey Plug-ins - Masonry - Lightbox
  13. JavaScript function toggleMenuClick(e) { var event = new Event(e); var

    menuId = event.target.parentNode.parentNode.id; toggleMenu(menuId.substring(2)); }
  14. foreach ($charsetList as $charset) { echo “<option value=\”” . $charset

    . “\””; if ($collationList[$infoRow[‘Collation’]] == $charset) ! {echo ‘ selected=”selected”’;}! ! ! echo “>” . $charset . “</option>”; } PHP
  15. <% Set oConn = Server.CreateObject(“ADODB.Connection”) oConn.Open “DRIVER={Microsoft Access Driver (*.mdb)};

    DBQ=” & Server.MapPath(“DB.mdb”) Set rsUsers = Server.CreateObject(“ADODB.Recordset”) rsUsers.Open “SELECT * FROM Users”, oConn %> ASP
  16. class com.example.Greeter extends MovieClip { public function Greeter() {} public

    function onLoad() :Void { var txtHello:TextField = this.createTextField ("txtHello", 0, 0, 0, 100, 100); txtHello.text = "Hello, world"; } } ActionScript
  17. SQL SELECT Book.title, count(*) AS Authors FROM Book JOIN Book_author

    ON Book.isbn = Book_author.isbn GROUP BY Book.title;
  18. HTML + CSS + Javascript = Static / Dynamic HTML

    + CSS + Javascript + PHP + SQL = Dynamic HTML + CSS = Static