Arquitetura de Front-end em aplicações de larga escala

Size: px
Start display at page:

Download "Arquitetura de Front-end em aplicações de larga escala"

Transcription

1 Arquitetura de Front-end em aplicações de larga eshiota.com RAILS EDITION

2 Front-end

3 Internet

4 Arquitetura simples Arquitetura complexa

5 Na minha visão, aplicações JavaScript de larga escala são aplicações nãotriviais que requerem um esforço significante de manutenção por parte do desenvolvedor, onde a maior parte do trabalho de manipulação de dados e visualização é atribuída ao navegador. Addy Osmani Developer Programs Google

6 Aplicações com front-end de larga escala são aplicações não-triviais que requerem um esforço significante de manutenção por parte do desenvolvedor, onde organização, modularização, otimização e reutilização de código são cruciais. Eduardo Shiota Yasuda Loves cat videos on Youtube

7 Aplicações de pequena escala

8 style.css templates application.js & jquery / plugins imagens CMS

9

10

11

12

13 Aplicações de Larga escala

14

15

16

17

18

19

20

21

22 HTML, CSS e JavaScript modulares

23 Noção de módulo

24

25

26

27

28 HTML & CSS modular

29

30 <section class="side-block"> <h3>quick links</h3> <ul class="arrowed-list side-list"> <li> <a href="#">your profile</a> </li> <li> <a href="#">mkx settings</a> </li> <li> <a href="#">mih SWAT</a> </li> <li> <a href="#">invite users</a> </li> </ul> </section>

31 <section class="side-block"> <h3>your starred content</h3> <ul class="iconed side-list"> <li class="file-locked"> <a href="#">rubyconf Ruby is cool</a><br /> <small>in group: <a href="#">ruby</a></small> </li> <li class="photo-locked"> <a href="#">rubyconf entrance hall</a><br /> <small>in group: <a href="#">ruby</a></small> </li> <li class="doc"> <a href="#">mongodb</a><br /> <small>in company: <a href="#">mih SWAT</a></small> </li> <li class="forum"> <a href="#">ruby group files...</a><br /> <small>in group: <a href="#">ruby</a></small> </li> </ul> </section>

32 <section class="side-block"> <h3>recommended contacts</h3> <ul class="side-list"> <li class="data-card"> <div class="card-content"> <hgroup> <h4>lorem ipsum</h4> <a href="#">mih SWAT</h5> </hgroup> <p><a href="#">[add as contact]</a></p> </div> <img src="image.jpg" alt="lorem ipsum" /> </li> <li class="data-card"> <div class="card-content"> <hgroup> <h4>lorem ipsum</h4> <h5>technical <a href="#">mih SWAT</h5> </hgroup> <p><a href="#">[add as contact]</a></p> </div> <img src="image.jpg" alt="lorem ipsum" /> </li> </ul> </section>

33 <section class="side-block"> <h3></h3> <ul class="side-list"> <li></li> </ul> </section>

34 /********************************** * patterns/side_list.scss **********************************/.side-list { list-style: none outside; padding: 0; }.side-list li { margin-bottom: 10px; overflow: hidden; } /********************************** * patterns/arrowed_list.scss **********************************/.arrowed-list li { margin-bottom: 0.2em; position: relative; }.arrowed-list li:before { content: "\25B8"; display: inline-block; margin-right: em; }

35 /********************************** * patterns/side_block.scss **********************************/.side-block { margin-bottom: 1.5em; }.side-block h3 { border-bottom: 1px solid #cecece; font-size: 1em; /* 16px / 16px */ margin-bottom: 0.8em; padding-bottom: 0.1em; }

36

37 <section> <h3>recommended contacts</h3> <ul class="side-list small-entity-list"> <li class="data-card"> <div class="card-content"> <hgroup> <h4>lorem ipsum</h4> <a href="#">buscapé</h5> </hgroup> <p><a href="#">[add as contact]</a></p> </div> <img src="image.jpg" alt="lorem ipsum" /> </li> </ul> </section>

38 <article class="data-card group-activity"> <div class="card-content"> <p> <a href="#" class="actor">rafael Dohms</a> joined a group: <a href="#" class="subject">i love Ruby on Rails</a> </p> <p> <date>2 hours ago</date> <a href="#">unlike</a> <a href="#">comment entry</a> </p> </div> <img src="image.jpg" alt="rafael Dohms" /> </article>

39 <article class="data-card"> <div class="card-content"> </div> <img /> </article>

40 /********************************** * patterns/data_card.scss **********************************/.data-card { min-height: 120px; position: relative; } /* Override width and height as needed */.data-card > img { position: absolute; left: 0; top: 0; width: 120px; height: 120px; } /* Override padding-left as needed */.data-card.card-content { padding-left: 140px; }

41 /*************************************** * patterns/small_entity_list.scss * * children extend patterns/data_card ***************************************/.small-entity-list.data-card { min-height: 60px; }.small-entity-list.data-card > img { width: 60px; height: 60px; }.small-entity-list.data-card.card-content { padding-left: 80px; }

42 .button.send-button.large-button.confirm-button

43 .button { border-radius: 5px; font-family: "proxima-nova", sans-serif; height: 2em; line-height: 2em; padding: 1em; color: #fff; text-shadow: 0-1px 0 #000; }.large-button { font-size: 3em; }.confirm-button { background: #ffba00; box-shadow: 0 3px 0 #cd9600; }.send-button { /* styles for icon placement */ }

44 .button.send-button.large-button.confirm-button

45 .button.send-button.small-button.confirm-button

46 Multiple classes + Single responsabilities Short inheritance (3-4 levels max) Portable classes

47 Organizando os módulos

48 /* * application.css example w/ Asset Pipeline * *= require base/reset *= require core/typography *= require core/forms *= require_tree./patterns *= require ui/buttons *= require ui/loader *= require ui/datepicker */

49 application.scss w/ SASS

50 base/_functions.scss

51 core/_typography.scss

52 ui/_loader.scss

53 application-ec ecb7dd2c99d430d7a76e.css

54 Leituras

55 oocss.org

56 smacss.com

57 JavaScript modular

58 JavaScript não é (só) jquery

59 shareform.js sharetypeselector.js sharefield.js newsfeed.js

60 submit get shareform onsuccess shareproxy data init init sharetypeselector sharefield newsfeed trigger("sharetype-changed") trigger("new-post") on("share-type-changed") on("new-post") mediator.js

61 Modules + Tests = OMGBBQW00T

62 /** Loader {Function} placement Function that determines the loader's **/ ns("eden.ui.loader", function (placement) { if (!(this instanceof EDEN.ui.Loader)) { return new EDEN.ui.Loader(placement); } this.frame = 1; this.framesqty = 8; this.stack = []; this.animating = false; this.$loader = $("<div class='loader'><b> </b></div>"); this.$renderer = this.$loader.find("b"); this.placement = placement; this.init(); });

63 /** Animation speed (in frames per 20 **/ EDEN.ui.Loader.prototype.fps = 20; /** Fading 150 **/ EDEN.ui.Loader.prototype.fadeSpeed = 150;

64 /** Inits the loader by inserting it into the DOM. If a placement argument wasn't passed to the constructor, uses a generic init **/ EDEN.ui.Loader.prototype.init = function () { if (!this.placement) { this.placement = function ($loader) { $loader.appendto($("body")); }; } this.placement.call(this, this.$loader); };

65 /** Starts the loader by fading in and starting the animation. If there are multiple processes, stacks the start **/ EDEN.ui.Loader.prototype.start = function () { this.stack.push((new Date()).getTime()); if (this.stack.length === 1) { this._startanimation(); } }; /** Stops the loader by fading out and stoping the animation If there are any processes pending, pops the requests until it can actually stop **/ EDEN.ui.Loader.prototype.stop = function () { this.stack.pop(); if (!this.stack.length) { this._stopanimation(); } };

66 /** Starts the loader **/ EDEN.ui.Loader.prototype._startAnimation = function () { this.animating = true; this._renderanimation(); }; /** Stops the loader **/ EDEN.ui.Loader.prototype._stopAnimation = function () { this.animating = false; };

67 /** Loops the animation, calling itself according to the **/ EDEN.ui.Loader.prototype._renderAnimation = function () { if (!this.animating) { return true; } this._draw(); settimeout(this._renderanimation.bind(this), 1000 / this.fps); }; /** Draws the **/ EDEN.ui.Loader.prototype._draw = function () { this.$renderer.removeclass().addclass("f" + this.frame); this.frame = this.frame + 1 > this.framesqty? 1 : this.frame + 1; }; /** Returns the animation **/ EDEN.ui.Loader.prototype._getAnimationStack = function () { return this.stack; };

68 não achei um logo maior :(

69 it("appends the loader to body as a default", function () { var loader = new Loader(); expect($("body").find(".loader").length).toequal(1); }); it("appends the loader through an argument function", function () { var loader = new Loader(function ($loader) { $("#loader-placeholder").append($loader); }); expect($("#loader-placeholder").find(".loader").length).toequal(1); }); it("stops the animation if stack is empty", function () { loader.start(); loader.stop(); expect($(".loader").data("spinning")).not.tobetruthy(); });

70 it("renders the animation at default speed (20fps)", function () { jasmine.clock.usemock(); spyon(loader, "draw"); loader.start(); jasmine.clock.tick(2000); // The first renderanimation call renders the first frame, and then // starts the frame counting. So it'll always be (fps * seconds) + 1 expect(loader.draw.calls.length).toequal(41); });

71

72

73 jasmincerice + guard-jasmine + PhantomJS + Jenkins = OMGWTFBBQW00TROFL

74 github.com/bradphelan/jasminerice/

75 github.com/netzpirat/guard-jasmine

76 phantomjs.org

77 Jenkins» rake guard:jasmine

78

79 SOLID principles Loose coupling» Portable Testable MV**

80 Organizando os módulos

81 // application.js with Asset Pipeline // //= require jquery //= require jquery_ujs //= require jquery/jquery.inputmask //= require jquery/jquery.validate //= require jquery/jquery.uniform //= require i18n //= require i18n/translations //= require i18n/setlocale //= require_tree shims //= require tools/namespace //= require accounting //= require handlebars beta.6 //= require eden/events //= require eden/dispatcher //= require eden/appmediator //= require_tree./jquery //= require_tree./eden/ui //= require_tree./eden/presenters //= require_tree./eden/validators //= require./eden/forms/submitbutton //= require_tree./eden/forms //= require_tree./eden/components //= require_tree./eden/views //= require_tree./eden/proxies //= require_tree./eden/commands //= require_tree./eden/services //= require_tree./eden/modules //= require eden/app

82 documentcloud.github.com/jammit/

83 requirejs.org

84 //my/shirt.js now has some dependencies, a cart and inventory //module in the same directory as shirt.js define(["./cart", "./inventory"], function(cart, inventory) { //return an object to define the "my/shirt" module. return { color: "blue", size: "large", addtocart: function() { inventory.decrement(this); cart.add(this); } }; } );

85 github.com/jwhitley/requirejs-rails

86 Leituras

87

88 addyosmani.com/largescalejavascript

89 addyosmani.github.com/todomvc/

90 Ferramentas para manter a organização

91 github.com/cowboy/grunt

92 html5boilerplate.com

93 compass-style.org

94 Exemplos com compass

95 Geração de sprites

96 /* Attributes a sprite map to a variable */ $icon-sprite: sprite-map("icon/*.png", $spacing: 16px, $repeat: no-repeat, $layout: vertical);

97 $icon-sprite: sprite-map("icon/*.png", $spacing: 16px, $repeat: no-repeat, $layout: vertical);

98 /* Compass sprite function receives the map variable and image as arguments */ background: sprite($icon-sprite, arrow_dropdown) no-repeat; /* Compiled CSS */ background: url(/assets/icon-s5dab8c2901.png) -40px -158px no-repeat;

99 Inline images - base64

100 /* Generates a base64 image */ background: #f5f3eb inline-image("bg_dots.png") repeat; /* Compiled CSS */ background: #f5f3fb url('data:image/ png;base64,ivborw0kggoaaaansuheugaaaagaaaaqcamaaaacvm5paaaagxrfwh RTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF5+TW//////// 4qZUpQAAAAN0Uk5T// 8A18oNQQAAACBJREFUeNpiYGBgAgMGBkYog4mJXAbILAiDkVxzAAIMAEMOAPMId2O WAAAAAElFTkSuQmCC') repeat;

101 Vendor prefixes

102 .my-gradient { } background-image: -webkit-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0));

103 .my-gradient { } background-image: -webkit-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0));

104 /* Generates vendor-prefixed rules */.my-gradient background-image( linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)) ); } /* Compiled CSS */.my-gradient { } background-image: -webkit-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(right, rgba(0, 0, 0,.5), rgba(0, 0, 0, 0));

105 Resumindo

106 Modules, motherf*cker.

107 Aprenda JavaScript.

108 Use ferramentas e frameworks. <3

109 Se você chegar nesse ponto...

110

111 DOUBLE RAINBOW ALL THE WAY OMG SO INTENSE

112

113 eshiota.com

Web layout guidelines for daughter sites of Scotland s Environment

Web layout guidelines for daughter sites of Scotland s Environment Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment

More information

Web Design with CSS and CSS3. Dr. Jan Stelovsky

Web Design with CSS and CSS3. Dr. Jan Stelovsky Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style

More information

Web Design and Databases WD: Class 7: HTML and CSS Part 3

Web Design and Databases WD: Class 7: HTML and CSS Part 3 Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML

More information

JJY s Joomla 1.5 Template Design Tutorial:

JJY s Joomla 1.5 Template Design Tutorial: JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding

More information

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation

More information

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28 CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

CST 150 Web Design I CSS Review - In-Class Lab

CST 150 Web Design I CSS Review - In-Class Lab CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and

More information

C:\wamp\www\webdok\07bootstrap\bootstrap-3.2.0-dist\css\bootstrap.css 2. juli 2014 13:18

C:\wamp\www\webdok\07bootstrap\bootstrap-3.2.0-dist\css\bootstrap.css 2. juli 2014 13:18 /*! * Bootstrap v3.2.0 (http://getbootstrap.com) * Copyright 2011-2014 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/license) */ /*! normalize.css v3.0.1 MIT License

More information

AEGEE Podio Guidelines

AEGEE Podio Guidelines AEGEE Podio Guidelines EUROPEAN STUDENTS FORUM Contains What is Podio?... 3 Podio vs Facebook... 3 Video Tutorial Podio Basics... 3 Podio for AEGEE-Europe... 3 How to get it?... 3 Getting started... 4

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

Level 1 - Clients and Markup

Level 1 - Clients and Markup Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML

More information

Joomla! template JSN Mico Customization Manual

Joomla! template JSN Mico Customization Manual Joomla! template JSN Mico Customization Manual (for JSN Mico 1.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative Commons

More information

Responsive Web Design: Media Types/Media Queries/Fluid Images

Responsive Web Design: Media Types/Media Queries/Fluid Images HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.

More information

Introduction to Adobe Dreamweaver CC

Introduction to Adobe Dreamweaver CC Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

Coding Standards for Web Development

Coding Standards for Web Development DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as

More information

CSS for Page Layout. Key Concepts

CSS for Page Layout. Key Concepts CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control

More information

Skills for Employment Investment Project (SEIP)

Skills for Employment Investment Project (SEIP) Skills for Employment Investment Project (SEIP) Standards/ Curriculum Format For Web Design Course Duration: Three Months 1 Course Structure and Requirements Course Title: Web Design Course Objectives:

More information

Dashboard Skin Tutorial. For ETS2 HTML5 Mobile Dashboard v3.0.2

Dashboard Skin Tutorial. For ETS2 HTML5 Mobile Dashboard v3.0.2 Dashboard Skin Tutorial For ETS2 HTML5 Mobile Dashboard v3.0.2 Dashboard engine overview Dashboard menu Skin file structure config.json Available telemetry properties dashboard.html dashboard.css Telemetry

More information

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016

More information

Magento Responsive Theme Design

Magento Responsive Theme Design Magento Responsive Theme Design Richard Carter Chapter No. 2 "Making Your Store Responsive" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter

More information

Joomla! template JSN Boot Customization Manual

Joomla! template JSN Boot Customization Manual Joomla! template JSN Boot Customization Manual (for JSN Boot 1.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative Commons

More information

Animated Navigation with CSS & jquery

Animated Navigation with CSS & jquery 1 of 5 7/31/2009 1:44 PM Blog» CSS/XHTML» Animated Navigation with CSS & jquery Animated Navigation with CSS & jquery July 28th, 2009 As I was checking out some flash sites for inspiration, I ran across

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of

More information

Email Creator Coding Guidelines Toolbox

Email Creator Coding Guidelines Toolbox Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for

More information

Further web design: Cascading Style Sheets Practical workbook

Further web design: Cascading Style Sheets Practical workbook Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow

More information

CIS 467/602-01: Data Visualization

CIS 467/602-01: Data Visualization CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful

More information

Mobile Web Site Style Guide

Mobile Web Site Style Guide YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University

More information

Links Getting Started with Widgets, Gadgets and Mobile Apps

Links Getting Started with Widgets, Gadgets and Mobile Apps Widgets, Gadgets, and Mobile Apps for Libraries: Tips, Code Samples, Explanations, and Downloads Michael Sauers Technology Innovation Librarian Nebraska Library Commission msauers@nlc.state.ne.us Jason

More information

GUIDE TO CODE KILLER RESPONSIVE EMAILS

GUIDE TO CODE KILLER RESPONSIVE EMAILS GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention

More information

How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012

How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK

More information

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External

More information

WRITE BETTER HTML BY WRITING BETTER CSS

WRITE BETTER HTML BY WRITING BETTER CSS WRITE BETTER HTML BY WRITING BETTER CSS THE ROYAL WE Chris Coyier @chriscoyier BETTER? 1 Less of it 2 More Semantic 3 More Accessible 4 Futureproof // Speed // Maintainability // SEO // Happy People 123

More information

BEYOND RESPONSIVE. by Marcus Morba (drupal.org/user/710680 = mori) Sunday 24 November 13

BEYOND RESPONSIVE. by Marcus Morba (drupal.org/user/710680 = mori) Sunday 24 November 13 BEYOND RESPONSIVE by Marcus Morba (drupal.org/user/710680 = mori) 1 my first responsive mobile experience was in 2004 2 2 target devices target resolutions: 240 x 320 and 480 x 640 one code base for layout

More information

Responsive Email Design

Responsive Email Design Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive

More information

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS

More information

01/42. Lecture notes. html and css

01/42. Lecture notes. html and css web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps

More information

Email Campaign Guidelines and Best Practices

Email Campaign Guidelines and Best Practices epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead

More information

RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR

RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR RESPONSIVE EMAIL DESIGN According to stats from Litmus, in 2014 at least 53% of emails were opened on a mobile device. That is a huge increase from 2011 when the

More information

Responsive HTML email and Drupal

Responsive HTML email and Drupal Responsive HTML email and Drupal Mobile + Email + Drupal Drew Gorton Drew Gorton Founder gortonstudios.com Responsive HTML email Why? ~19% of email messages are read on smartphones or tablets. Source:

More information

The Essential Guide to HTML Email Design

The Essential Guide to HTML Email Design The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters

More information

8 STEPS TO CODE KILLER RESPONSIVE EMAILS

8 STEPS TO CODE KILLER RESPONSIVE EMAILS 8 STEPS TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 BUILD RESPONSIVE EMAIL STEP BY STEP Steps to create a simple responsive email template. (fluid image, main content, two

More information

Style & Layout in the web: CSS and Bootstrap

Style & Layout in the web: CSS and Bootstrap Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical

More information

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 8

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 8 Web Design for Print Designers With CSS, you can use background images to replace linked text to make creative-looking links. This is the idea behind using sprites as we discussed last week. There are

More information

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified

More information

Klik op deze albums als u de foto s van onze evenementen wil ontdekken.

Klik op deze albums als u de foto s van onze evenementen wil ontdekken. Fotogalerij by Charlotte Dion - mardi, août 04, 2015 http://www.acfbenelux.be/nl/fotogalerij/ Klik op deze albums als u de foto s van onze evenementen wil ontdekken. var lightbox_transition = 'elastic';

More information

Webentwicklung für s iphone

Webentwicklung für s iphone Warum Webseiten für s iphone optimieren Anteil am Weltweiten Smartphone Web-Traffic iphone OS Symbian OS Android RIM OS Windows Mobile OS webos Palm OS Other 11!% 2!% 1!% 3!% 1!% 7!% 50!% 25!% Quelle:

More information

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head

More information

Outline of CSS: Cascading Style Sheets

Outline of CSS: Cascading Style Sheets Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles

More information

CarTrawler AJAX Booking Engine Version: 5.10 Date: 01/10/13. http://www.cartrawler.com

CarTrawler AJAX Booking Engine Version: 5.10 Date: 01/10/13. http://www.cartrawler.com Date: 01/10/13 http://www.cartrawler.com 1. Introduction... 3 1.1. Pre-requisites... 3 1.2. Intended Audience... 3 2. Technical Dependencies... 3 3. Implementation... 3 3.1. Set up the server environment...

More information

HOW Interactive Design Conference 2013

HOW Interactive Design Conference 2013 HOW Interactive Design Conference 2013 Photoshop to HTML Chris Converse Use this QR code to get the mobile schedule for this conference. Get session and speaker info, lunch ideas, and links for getting

More information

ireview Template Manual

ireview Template Manual ireview Template Manual Contents Template Overview... 2 Main features... 2 Template Installation... 3 Installation Steps... 3 Upgrading ireview... 3 Template Parameters... 4 Module Positions... 6 Module

More information

Magic Liquidizer Documentation

Magic Liquidizer Documentation Magic Liquidizer helps many web developers and website owners to instantly make their websites adaptable to mobile screens such as tablets and smartphones. Magic Liquidizer Documentation A complete solution

More information

Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.

Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved. Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism

More information

CHAPTER 10. When you complete this chapter, you will be able to:

CHAPTER 10. When you complete this chapter, you will be able to: Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables

More information

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web

More information

Web Design and Development ACS-1809. Chapter 9. Page Structure

Web Design and Development ACS-1809. Chapter 9. Page Structure Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a

More information

Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:

Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename

More information

jquery Sliding Image Gallery

jquery Sliding Image Gallery jquery Sliding Image Gallery Copyright 2011 FlashBlue Website : http://www.flashdo.com Email: flashblue80@hotmail.com Twitter: http://twitter.com/flashblue80 Directories source - Original source files

More information

ios App Development Using Cordova

ios App Development Using Cordova ios App Development Using Cordova Created by Todd Treece Last updated on 2015-06-29 08:20:06 AM EDT Guide Contents Guide Contents Overview Installing Dependencies Creating a New App index.html index.css

More information

Infinity Connect Web App Customization Guide

Infinity Connect Web App Customization Guide Infinity Connect Web App Customization Guide Contents Introduction 1 Hosting the customized Web App 2 3 More information 5 Introduction The Infinity Connect Web App is included with all Pexip Infinity

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

More information

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D.

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D. Chapter 1 Internet and Web Basics The Internet and the Web Web Standards and Accessibility Information on the Web Web Browsers and Web Servers Internet Protocols Uniform Resource Identifiers and Domain

More information

CREATING RESPONSIVE UI FOR WEB STORE USING CSS

CREATING RESPONSIVE UI FOR WEB STORE USING CSS CREATING RESPONSIVE UI FOR WEB STORE USING CSS Magdalena Wiciak Bachelor s Thesis May 2014 Degree Programme in Information Technology Technology, communication and transport DESCRIPTION Author(s) WICIAK,

More information

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every

More information

USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE

USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE USER S MANUAL JOOMLA! GOVERNMENT WEB TEMPLATE 1 TABLE OF CONTENTS Introduction 3 Parts of the Government Web Template (GWT) 4 Logging In and Getting Started 5 GWT Joomla! Module Map 8 Editing the Top Bar

More information

Responsive Banner Slider Extension By Capacity Web Solutions

Responsive Banner Slider Extension By Capacity Web Solutions CONTENT Introduction 2 Features 2 Installation 3 Configuration Settings 4 Manage Responsive Banner Slider Extension 5 Manage Group Section 5 Manage Slides Section 9 Display Responsive Banner Slider 11

More information

Making Responsive Emails

Making Responsive Emails Making Responsive Emails Who Am I? Justine Jordan Wearer of Many Hats, Litmus @meladorri @litmusapp #CSSsummit litmus.com/lp/csssummit Sample HTML, slides, templates, frameworks, and other goodies. Disclaimer:

More information

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Page - Page 1 of 12 Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Description Responsive Mobile Web Development is more

More information

Advanced Editor User s Guide

Advanced Editor User s Guide Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication

More information

A set-up guide and general information to help you get the most out of your new theme.

A set-up guide and general information to help you get the most out of your new theme. Blox. A set-up guide and general information to help you get the most out of your new theme. This document covers the installation, set up, and use of this theme and provides answers and solutions to common

More information

Web Technology for Marketers

Web Technology for Marketers Web Technology for Marketers Cloud Server Database Is the cloud a mystery? Until recently, we mainly used our computers to run software programs (Microsoft Word, Quicken) installed on our hard drives.

More information

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet

More information

Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20

Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20 Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20 This document includes best practices around responsive web design (RWD) when developing hybrid applications. Details on each checklist

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Introduction Thank you so much for your purchase! We're excited to present you with the most magical popup solution for WordPress! If you have any questions, please email us at

More information

Colgate University Website Content Style Guide

Colgate University Website Content Style Guide University Website Content Style Guide Website Color Palette Maroon #862633 Dark Orange #e7810b Blue #365777 Gray #58595b Light Orange* #e39615 NOTE: No other colors are to be used within colgate.edu.

More information

MCH Strategic Data Best Practices Review

MCH Strategic Data Best Practices Review MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative

More information

Create Your own Company s Design Theme

Create Your own Company s Design Theme Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to

More information

Testking.M70-301.90Q

Testking.M70-301.90Q Testking.M70-301.90Q Number: M70-301 Passing Score: 800 Time Limit: 120 min File Version: 6.0 http://www.gratisexam.com/ M70-301 Magento Front End Developer Certification Exam a) I found your Questions

More information

Blueball Design Dynamic Content 2 Stack Readme Manual v1.0

Blueball Design Dynamic Content 2 Stack Readme Manual v1.0 Blueball Design Dynamic Content 2 Stack Readme Manual v1.0 A unique responsive stack that dynamically populates and updates a content area within the stack using a warehoused external XML flat text file

More information

Positioning Container Elements

Positioning Container Elements Advanced Lesson Group 3 - Element Positioning with CSS Positioning Container Elements The position: style property is used to move block elements to a specific location on the web page. The position style

More information

The Training Floor s. Webmaster s. Bible

The Training Floor s. Webmaster s. Bible The Training Floor s Webmaster s Bible Host... 4 Login for WordPress... 4 Making Mistakes... 4 Email... 4 Retrieving Email... 5 Setting up Email on phones or computer... 5 Editing Pages... 5 Creating Email

More information

TUTORIAL TO COMPASS AND SASS

TUTORIAL TO COMPASS AND SASS COMENIUS UNIVERSITY, BRATISLAVA FACULTY OF MATHEMATICS, PHYSICS AND INFORMATICS TUTORIAL TO COMPASS AND SASS BACHELOR THESIS 2013 Milan Darjanin COMENIUS UNIVERSITY, BRATISLAVA FACULTY OF MATHEMATICS,

More information

How to Properly Compose E-Mail HTML Code : 1

How to Properly Compose E-Mail HTML Code : 1 How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail

More information

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here

More information

Sizmek Formats. IAB Mobile Pull. Build Guide

Sizmek Formats. IAB Mobile Pull. Build Guide Sizmek Formats IAB Mobile Pull Build Guide Table of Contents Overview...3 Supported Platforms... 6 Demos/Downloads... 6 Known Issues... 6 Implementing a IAB Mobile Pull Format...6 Included Template Files...

More information

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML

More information

ITNP43: HTML Lecture 4

ITNP43: HTML Lecture 4 ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style

More information

Base template development guide

Base template development guide Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento

More information

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,

More information

MODERN WEB DESIGN TECHNIQUES

MODERN WEB DESIGN TECHNIQUES Bachelor's thesis Degree programme: Information Technology Bachelor of Engineering 2014 Larisa Deac MODERN WEB DESIGN TECHNIQUES A Practical approach BACHELOR S THESIS ABSTRACT TURKU UNIVERSITY OF APPLIED

More information

WEB DESIGN COURSE CONTENT

WEB DESIGN COURSE CONTENT WEB DESIGN COURSE CONTENT INTRODUCTION OF WEB TECHNOLOGIES Careers in Web Technologies How Websites are working Domain Types and Server About Static and Dynamic Websites Web 2.0 Standards PLANNING A BASIC

More information

Building Responsive Layouts

Building Responsive Layouts Building Responsive Layouts by Zoe Mickley Gillenwater @zomigi August 28, 2012 Responsive Web Design Summit What I do Books Stunning CSS3: A Project-based Guide to the Latest in CSS www.stunningcss3.com

More information