Development Training. For Developer. 4 th May, AOT Intranet Web Portal

Size: px
Start display at page:

Download "Development Training. For Developer. 4 th May, AOT Intranet Web Portal"

Transcription

1 Development Training AOT Intranet Web Portal For Developer 4 th May, 2017

2 Agenda Overview Intranet Web Portal Project Development Implementation With SharePoint Designer Tool Branding Master page Page Layouts Programming for Intranet Web Portal SPServices, JQuery for SharePoint REST API CSS & Responsive Customize search result with display template Server side (Ajax) Question & Answer 2

3 Overview Intranet Web Portal Project Development Portal KM hub e-services Team Site AOT Drive AOT Info Personal site CoPs e-meeting e-survey 3

4 Agenda Overview Intranet Web Portal Project Development Implementation With SharePoint Designer Tool Branding Master page Page Layouts Programming for Intranet Web Portal SPServices, JQuery for SharePoint REST API CSS & Responsive Customize search result with display template Server side (Ajax) Question & Answer 4

5 Implementation With SharePoint Designer Tool 5

6 Implementation With SharePoint Designer Tool 6

7 Agenda Overview Intranet Web Portal Project Development Implementation With SharePoint Designer Tool Branding Master page Page Layouts Programming for Intranet Web Portal SPServices, JQuery for SharePoint REST API CSS & Responsive Customize search result with display template Server side (Ajax) Question & Answer 7

8 Branding Master Page Page Layout 8

9 Branding Master Page of system page SharePoint lists Subsites 9

10 Branding For edit the master page, open SharePoint Designer > Master Pages 10

11 Branding For edit the Page Layouts, open SharePoint Designer > Page Layouts 11

12 Agenda Overview Intranet Web Portal Project Development Implementation With SharePoint Designer Tool Branding Master page Page Layouts Programming for Intranet Web Portal SPServices JQuery for SharePoint REST API CSS & Responsive Customize search result with display template Server side (Ajax) Question & Answer 12

13 Programming for Intranet Web Portal JQuery SPServices CSS 13

14 Programming for Intranet Web Portal SPServices URL of SharePoint list Name of SharePoint list Condition for query item $().SPServices({ operation: "GetListItems", async: false, weburl: listname: "HotNewsApproved", CAMLQuery:, CAMLRowLimit: 5, completefunc: function (xdata, Status) { $(xdata.responsexml).spfilternode("z:row").each(function() { var title = ($(this).attr("ows_title")); }); } }); Get attribute of item such as Id, title and any fields of item 14

15 Programming for Intranet Web Portal SPServices CAML Query <Query> <Where> <Eq> </Query> <FieldRef Name='Disabled'/> <Value Type='Boolean'>0</Value> </Eq> </Where> <OrderBy> <FieldRef Name='Order'/> <FieldRef Name='Modified' Ascending='False' /> </OrderBy> 15

16 Programming for Intranet Web Portal SPServices 16

17 Programming for Intranet Web Portal SPServices Tool Query Starmit, Query Helper 17

18 Programming for Intranet Web Portal JQuery for SharePoint $('ul.home-slider').append('<li><img src="/announcement/publishingimages/banner/1.jpg" /></li>' +'<li><img src="/announcement/publishingimages/banner/2.jpg" /></li>' +'<li><img src="/announcement/publishingimages/banner/3.jpg" /></li>' +'<li><img src="/announcement/publishingimages/banner/4.jpg" /></li>'); $(.home-slider ).bxslider({ mode : 'fade', controls : true, auto : true, pause : 5000, //adaptiveheight: true, speed : 1000 }); Slide Banner Append tag html 18

19 Programming for Intranet Web Portal REST API 19

20 Programming for Intranet Web Portal REST API 20

21 Programming for Intranet Web Portal For edit any SPServices and JQuery code, open SharePoint Designer > All files > SiteCollectionDocuments > js > atosscript 21

22 Programming for Intranet Web Portal CSS & Responsive Responsive Web Design is the approach that suggests that design and development should respond to the user s behavior and environment based on screen size, platform and orientation. 22

23 Programming for Intranet Web Portal CSS & Responsive Advantages Disadvantages Flexibility A long loading time Easy marketing Technical Google Recommended User Experience Cost Effective Just One URL 23

24 Programming for Intranet Web Portal CSS & Responsive Mobile First is the idea of designing the smartphone experience first and then working upwards to tablets, desktops, and possibly beyond. 24

25 Programming for Intranet Web Portal CSS & Responsive Flexible Grid Use percentage instead of pixel 25

26 Programming for Intranet Web Portal CSS & Responsive Media Queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation 26

27 Programming for Intranet Web Portal CSS & Responsive Popular Media Queries Large display 1200px and up /* Large desktop (min-width: 1200px) {... } Landscape tablet and desktop such as ipad, Galaxy Tab /* Landscape tablet and desktop (min-width: 980px) and (max-width: 1199px) {... } Phone to Tablets 767px and down such as iphone 5 /* Landscape phone to portrait tablet (max-width: 767px) {... } Phones 480px and down such as iphone 3GS /* Landscape phones and down (max-width: 480px) {... } 27

28 Programming for Intranet Web Portal CSS & Responsive The meta viewport tag gives the browser instructions on how to adjust the dimensions and scaling of the page to the width of the device. 28

29 Programming for Intranet Web Portal CSS & Responsive 29

30 Programming for Intranet Web Portal CSS & Responsive For edit the CSS file, open SharePoint Designer > All files > Style Library > AOTStyle > css 30

31 Agenda Overview Intranet Web Portal Project Development Implementation With SharePoint Designer Tool Branding Master page Page Layouts Programming for Intranet Web Portal SPServices JQuery for SharePoint REST API CSS & Responsive Customize search result with display template Server side (Ajax) Question & Answer 31

32 Customize search result with display template Original VS Custom display template 32

33 Customize search result with display template 33

34 Customize search result with display template 34

35 Customize search result with display template 35

36 Agenda Overview Intranet Web Portal Project Development Implementation With SharePoint Designer Tool Branding Master page Page Layouts Programming for Intranet Web Portal SPServices JQuery for SharePoint REST API CSS & Responsive Customize search result with display template Server side (Ajax) Question & Answer 36

37 How to apply Ajax for runat server Out of the box develop technique 37

38 How to apply Ajax for runat server 38

39 How to apply Ajax for runat server 39

40 Agenda Overview Intranet Web Portal Project Development Implementation With SharePoint Designer Tool Branding Master page Page Layouts Programming for Intranet Web Portal SPServices JQuery for SharePoint REST API CSS & Responsive Customize search result with display template Server side (Ajax) Question & Answer 40

41 41 Q & A Thank You

Responsive Design for Web Applications R.I.T. S. Ludi/R. Kuehl p. 1 R I T. Software Engineering

Responsive Design for Web Applications R.I.T. S. Ludi/R. Kuehl p. 1 R I T. Software Engineering Responsive Design for Web Applications S. Ludi/R. Kuehl p. 1 What is the Problem? S. Ludi/R. Kuehl p. 2 Credit: Matt Griffin What is the Problem? Mobile web access is ubiquitous One interface design does

More information

CIT BY: HEIDI SPACKMAN

CIT BY: HEIDI SPACKMAN CIT230-06 BY: HEIDI SPACKMAN WHAT IS A MEDIA QUERY? A Media Query (Boolean code) written in CSS3 determines the screen display size that needs to be used and adjusts the HTML pages to display correctly

More information

Responsive Web Design. From: Ethan Marcotte - Responsive Web Design 2011

Responsive Web Design. From: Ethan Marcotte - Responsive Web Design 2011 Responsive Web Design From: Ethan Marcotte - Responsive Web Design 2011 Motivation Browser windows have their inconsistencies and imperfections Once web pages are published online, the designs are immediately

More information

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2) Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links

More information

Standard Design Reference

Standard Design Reference Standard Design Reference Version 4 Document ID SDR Revision 4 Effective Date March 2017 Standard ISO 9001-2015 / ISO 27001 Title STANDARD DESIGN REFERENCE Prepared By Alex McCreath / Director Reviewed

More information

All India Council For Research & Training

All India Council For Research & Training WEB DEVELOPMENT & DESIGNING Are you looking for a master program in web that covers everything related to web? Then yes! You have landed up on the right page. Web Master Course is an advanced web designing,

More information

MARKET RESPONSIVE PRESTASHOP THEME USER GUIDE

MARKET RESPONSIVE PRESTASHOP THEME USER GUIDE MARKET RESPONSIVE PRESTASHOP THEME USER GUIDE Version 1.0 Created by: arenathemes Page 1 Contents I. REQUIREMENTS & COMPATIBILITY... 3 II. INSTALLATION... 3 III. CONFIG AFTER INSTALLATION - THEME PACKAGE...

More information

Responsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002

Responsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002 1 of 13 CS1115/CS5002 Web Development 1 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Mobile vs desktop web sites A few organization have two web sites, one

More information

DRESSSHOP RESPONSIVE PRESTASHOP THEME USER GUIDE

DRESSSHOP RESPONSIVE PRESTASHOP THEME USER GUIDE DRESSSHOP RESPONSIVE PRESTASHOP THEME USER GUIDE Version 1.0 Created by: arenathemes Page 1 Contents I. REQUIREMENTS & COMPATIBILITY... 3 II. INSTALLATION... 3 III. CONFIG AFTER INSTALLATION - THEME PACKAGE...

More information

Responsive Web Design and Bootstrap MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University

Responsive Web Design and Bootstrap MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University Responsive Web Design and Bootstrap MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University Exam 3 (FINAL) Date: 12/06/18 four weeks from now! JavaScript, jquery, Bootstrap,

More information

Viewports. Peter-Paul Koch CSS Day, 4 June 2014

Viewports. Peter-Paul Koch   CSS Day, 4 June 2014 Viewports Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk CSS Day, 4 June 2014 or: Why responsive design works Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk CSS Day, 4 June

More information

Designing with CSS3 Effectively & Efficiently. October 2010 Adobe MAX Zoe Mickley

Designing with CSS3 Effectively & Efficiently. October 2010 Adobe MAX Zoe Mickley Designing with CSS3 Effectively & Efficiently October 2010 Adobe MAX Zoe Mickley Gillenwater @zomigi 1 What I do out now out Dec 10 Books Web Flexible Web Design: Creating Liquid and Elastic Layouts with

More information

Basics of Web Technologies

Basics of Web Technologies Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for Web Designing Given below is the brief description for the course you are looking for: Introduction to Web Technologies

More information

AGENDA. :: Add Meta Tag for Viewport (inside of head element): :: Add Script that renders HTML5 elements for older versions of Internet Explorer

AGENDA. :: Add Meta Tag for Viewport (inside of head element): :: Add Script that renders HTML5 elements for older versions of Internet Explorer CLASS :: 14 12.10 2018 3 Hours AGENDA LECTURE :: Responsive Web Design [RWD] DOWNLOAD ASSETS [ CSS ] :: Media Query [rwd.css] ADD HTML META TAG & IE SCRIPT [ HTML ] :: Add Meta Tag for Viewport (inside

More information

WordPress How to Create a Simple Image Slider with the New RoyalSlider

WordPress How to Create a Simple Image Slider with the New RoyalSlider WordPress How to Create a Simple Image Slider with the New RoyalSlider Last update: 2/20/2013 WARNING: DO NOT USE INTERNET EXPLORER you can use Firefox, Chrome, or Safari but the editing screens do not

More information

Developing Web Applications for Smartphones with IBM WebSphere Portlet Factory 7.0

Developing Web Applications for Smartphones with IBM WebSphere Portlet Factory 7.0 Developing Web Applications for Smartphones with IBM WebSphere Portlet Factory 7.0 WebSphere Portlet Factory Development Team 6 September 2010 Copyright International Business Machines Corporation 2010.

More information

Installation & User Guide

Installation & User Guide Copyright 2010-2017 Cotek Systems Inc. All rights reserved. Corporate Headquarters 3722 Pleasantdale Rd Ste 6 Atlanta, GA 30340 USA Sales Support Please be patient while waiting for response. (24/7 Support!)

More information

International Conference KNOWLEDGE-BASED ORGANIZATION Vol. XXIII No RESPONSIVE WEB DESIGN TECHNIQUES. Luminita GIURGIU, Ilie GLIGOREA

International Conference KNOWLEDGE-BASED ORGANIZATION Vol. XXIII No RESPONSIVE WEB DESIGN TECHNIQUES. Luminita GIURGIU, Ilie GLIGOREA International Conference KNOWLEDGE-BASED ORGANIZATION Vol. XXIII No 3 2017 RESPONSIVE WEB DESIGN TECHNIQUES Luminita GIURGIU, Ilie GLIGOREA Nicolae Bălcescu Land Forces Academy, Sibiu, Romania luminita.giurgiu.a@gmail.com,

More information

Responsive Design. Responsive Design Approach. Technique for building webpages

Responsive Design. Responsive Design Approach. Technique for building webpages Responsive Design Responsive Design Technique for building webpages Allows you to present the same content in different ways to different devices Create conditions for applying specific CSS styles Ex:

More information

IBM Forms V8.0 Custom Themes IBM Corporation

IBM Forms V8.0 Custom Themes IBM Corporation IBM Forms V8.0 Custom Themes Agenda 2 Overview Class Names How to Use Best Practice Styling Form Items Test Custom CSS Sample Overview 3 To create custom theme you must be familiar with the basic concept

More information

CS7026 Media Queries. Different Screen Size Different Design

CS7026 Media Queries. Different Screen Size Different Design CS7026 Media Queries Different Screen Size Different Design Introduction Users no longer view web content only on traditional desktop systems, but are increasingly using smartphones, tablets, and other

More information

CSS3: Using media queries to improve the web site experience. November 19, 2011 indieconf Zoe Mickley

CSS3: Using media queries to improve the web site experience. November 19, 2011 indieconf Zoe Mickley CSS3: Using media queries to improve the web site experience November 19, 2011 indieconf Zoe Mickley Gillenwater @zomigi What I do Books Web Stunning CSS3: A Project-based Guide to the Latest in CSS Accessibility

More information

Introduce Bootstrap 3 to develop RESPONSIVE. design application. Copyright 2014 exo Platform

Introduce Bootstrap 3 to develop RESPONSIVE. design application. Copyright 2014 exo Platform Introduce Bootstrap 3 to develop RESPONSIVE design application A presentation by exo UI Team When UI was not a concern Many UI innovation since And some company success to create wonderful design for web

More information

TECHNICAL SPECIFICATIONS DIGITAL Q1-2019

TECHNICAL SPECIFICATIONS DIGITAL Q1-2019 TECHNICAL SPECIFICATIONS DIGITAL Q1-2019 MASS TRANSIT MEDIA T A B L E O F C O N T E N T S 1. Display Advertising 2. Video Advertising 3. Emailing 4. Delivery Info p. 3 p. 7 p. 8 p. 9 2 Display Advertising

More information

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.

The course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments. Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led

More information

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES. INSTALLING FONTS :: Download, Install, & Embed Your Fonts. LECTURE :: Responsive Web Design [RWD]

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES. INSTALLING FONTS :: Download, Install, & Embed Your Fonts. LECTURE :: Responsive Web Design [RWD] CLASS :: 14 05.05 2017 3 Hours AGENDA INSTALLING FONTS :: Download, Install, & Embed Your Fonts LECTURE :: Responsive Web Design [RWD] DOWNLOAD ASSETS [ CSS ] :: Media Query [rwd.css] ADD HTML META TAG

More information

IBM C IBM Cognos Analytics Author V11.

IBM C IBM Cognos Analytics Author V11. IBM C2090-621 IBM Cognos Analytics Author V11 http://killexams.com/exam-detail/c2090-621 QUESTION: 52 A report author would like to reuse a logo across all existing reports. Which object should be used?

More information

Flexible and LEAN Ads

Flexible and LEAN Ads Flexible and LEAN Ads The IAB New Ad Portfolio emphasizes LEAN (Light, Encrypted, AdChoices supported, and Non-invasive) ad experience and flexible size ad specifications. LEAN ad experience for digital

More information

Web Site Design Small Screen Design Responsive Design R.I.T. S. Ludi/R. Kuehl p. 1 R I T. Software Engineering

Web Site Design Small Screen Design Responsive Design R.I.T. S. Ludi/R. Kuehl p. 1 R I T. Software Engineering Web Site Design Small Screen Design Responsive Design S. Ludi/R. Kuehl p. 1 Design Principles and Guidelines User Populations (Shared human ability and behavior) (Problem domains) Computing Paradigms (Platform

More information

SAHARA BIKE1 RESPONSIVE MAGENTO THEME

SAHARA BIKE1 RESPONSIVE MAGENTO THEME SAHARA BIKE1 RESPONSIVE MAGENTO THEME This document is organized as follows: Chater I. Install ma_sahara_bike1 template Chapter II. Features and elements of the template Chapter III. List of extensions

More information

Read the Docs Template Documentation

Read the Docs Template Documentation Read the Docs Template Documentation Release 1.0 Read the Docs Jun 27, 2017 KNOWLEDGE BASE 1 Support 1 2 AdminExtra 3 2.1 Compatibility............................................... 3 2.2 Features..................................................

More information

Responsive Design. Responsive design is it important? But typical is not enough. Some typical screen sizes

Responsive Design. Responsive design is it important? But typical is not enough. Some typical screen sizes Responsive Design Responsive design is it important? For many years, screen sizes were growing Eventually, settled on fixed-width (e.g. 960px) But now with smart phones, tablets, television and many new

More information

Written by Administrator Sunday, 05 October :58 - Last Updated Thursday, 30 October :36

Written by Administrator Sunday, 05 October :58 - Last Updated Thursday, 30 October :36 YJ NS1 is Joomla 1.0 and Joomla 1.5 native module that will allow you to scroll, scrollfade or fade in your existing Joomla news items. Yes existing ones. This means that you do not need any additional

More information

New frontier of responsive & device-friendly web sites

New frontier of responsive & device-friendly web sites New frontier of responsive & device-friendly web sites Dino Esposito JetBrains dino.esposito@jetbrains.com @despos facebook.com/naa4e Responsive Web Design Can I Ask You a Question? Why Do You Do RWD?

More information

20486-Developing ASP.NET MVC 4 Web Applications

20486-Developing ASP.NET MVC 4 Web Applications Course Outline 20486-Developing ASP.NET MVC 4 Web Applications Duration: 5 days (30 hours) Target Audience: This course is intended for professional web developers who use Microsoft Visual Studio in an

More information

Web Designing Course

Web Designing Course Web Designing Course Course Summary: HTML, CSS, JavaScript, jquery, Bootstrap, GIMP Tool Course Duration: Approx. 30 hrs. Pre-requisites: Familiarity with any of the coding languages like C/C++, Java etc.

More information

Here are some links to get you started in learning more about CSS3 media queries and responsive web design:

Here are some links to get you started in learning more about CSS3 media queries and responsive web design: of 8 The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web By: Sheri German In the last installment of the HTML5 CSS Starter Page series, we completed the Stringendo Studios

More information

CREATIVE & TECHNICAL SPECIFICATIONS

CREATIVE & TECHNICAL SPECIFICATIONS CREATIVE & TECHNICAL SPECIFICATIONS CREATIVE SPECIFICATIONS EXPECTED ASSETS LANDSCAPE: 96Ox424px ipad: 768x928px 1O24x672px SAME SIZE FOR INTERSCROLLER SMARTFOOTER MPU INCONTENT INTERSTITIAL 64Ox2OOpx

More information

Designing for diverse devices. Dr. Andres Baravalle

Designing for diverse devices. Dr. Andres Baravalle Designing for diverse devices Dr. Andres Baravalle 1 Outline Web 2.0 Designing for diverse devices 2 Web 2.0 Web 2.0 Web 2.0 is one of neologisms commonly in use in the Web community According to Tim O

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 5. Mobile Web Objectives Create a media query Work with the browser viewport Apply a responsive design Create a pulldown menu with CSS Create a flexbox INFS 2150

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development Objectives INFS 2150 Introduction to Web Development Create a media query Work with the browser viewport Apply a responsive design Create a pulldown menu with CSS Create a flexbox 5. Mobile Web INFS 2150

More information

Developing Microsoft SharePoint Server 2013 Core Solutions

Developing Microsoft SharePoint Server 2013 Core Solutions Developing Microsoft SharePoint Server 2013 Core Solutions Duration: 5 Days Course Code: 20488B About this course In this course, students learn core skills that are common to almost all SharePoint development

More information

TSInfo Technologies (OPC) Pvt Ltd

TSInfo Technologies (OPC) Pvt Ltd ABSTRACT Courses for SharePoint online Office 365 and SharePoint 2016 training SharePoint Training Courses Prepared By Bijay Kumar Sahoo (Microsoft MVP) SharePoint Online Office 365 SharePoint 2016 SharePoint

More information

ASP.NET MVC Training

ASP.NET MVC Training TRELLISSOFT ASP.NET MVC Training About This Course: Audience(s): Developers Technology: Visual Studio Duration: 6 days (48 Hours) Language(s): English Overview In this course, students will learn to develop

More information

CSS: Responsive Design, CSS3 and Fallbacks

CSS: Responsive Design, CSS3 and Fallbacks CSS: Responsive Design, CSS3 and Fallbacks CISC 282 October 4, 2017 What is a Mobile Browser? Browser designed for a not-desktop display Phones/PDAs, tablets, anything handheld Challenges and constraints

More information

BA. (Hons) Graphics Design

BA. (Hons) Graphics Design BA. (Hons) Graphics Design Cohort: BGD/16A/FT Examinations for 2018 / Semester 1 Resit Examinations for BGD/15B/FT MODULE: Advanced Web Design MODULE CODE: WAT3110C Duration: 2 Hours Instructions to Candidates:

More information

Viewports. Peter-Paul Koch DevReach, 13 November 2017

Viewports. Peter-Paul Koch   DevReach, 13 November 2017 Viewports Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk DevReach, 13 November 2017 or: Why responsive design works Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk DevReach,

More information

Write a Touch-friendly HTML5 App. Hongbo Min, Intel Junmin Zhu, Intel Yongsheng Zhu, Intel

Write a Touch-friendly HTML5 App. Hongbo Min, Intel Junmin Zhu, Intel Yongsheng Zhu, Intel Write a Touch-friendly HTML5 App Hongbo Min, Intel Junmin Zhu, Intel Yongsheng Zhu, Intel Agenda Background Touch vs. Mouse Part I: UI Layout Part II: Event Handling Touch in HTML5 Framework Q/A 2 Background

More information

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css CLASS :: 12 05.04 2018 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

INDUSTRY SITES AD SPECIFICATIONS

INDUSTRY SITES AD SPECIFICATIONS INDUSTRY SITES AD SPECIFICATIONS TRUCKSALES / CONSTRUCTIONSALES / FARMMACHINERYSALES 1 HTML5 AD SPECIFICATIONS Hosting Options Rich Media HTML5 ads must be third party served via DoubleClick or Sizmek.

More information

How to deploy for multiple screens

How to deploy for multiple screens How to deploy for multiple screens Ethan Marcotte, a developer in Boston, coined the phrase responsive design to describe a website that adapts to the size of the viewer s screen. A demonstration site

More information

Experience SAP HANA Cloud Portal. Use SAP HANA Cloud Portal to Create Engaging Websites in 5 Simple Steps

Experience SAP HANA Cloud Portal. Use SAP HANA Cloud Portal to Create Engaging Websites in 5 Simple Steps Experience SAP HANA Cloud Portal Use SAP HANA Cloud Portal to Create Engaging Websites in 5 Simple Steps TABLE OF CONTENTS TUTORIAL AGENDA... 3 PREREQUISITES... 3 EXERCISE 1: CREATE AND CONFIGURE A NEW

More information

CSS3, Media Queries, & Responsive Design. May 23, 2012 STC Summit Zoe Mickley

CSS3, Media Queries, & Responsive Design. May 23, 2012 STC Summit Zoe Mickley CSS3, Media Queries, & Responsive Design May 23, 2012 STC Summit Zoe Mickley Gillenwater @zomigi What I do Books Stunning CSS3: A Project-based Guide to the Latest in CSS www.stunningcss3.com Flexible

More information

Building Native Mapping Apps with PhoneGap: Advanced Techniques Andy

Building Native Mapping Apps with PhoneGap: Advanced Techniques Andy Building Native Mapping Apps with PhoneGap: Advanced Techniques Andy Gup @agup Agenda Application life-cycle Working with UI frameworks Security Geolocation Offline Expectations Experience with PhoneGap

More information

Developing Exceptional Mobile and Multi-Channel Applications using IBM Web Experience Factory

Developing Exceptional Mobile and Multi-Channel Applications using IBM Web Experience Factory Developing Exceptional Mobile and Multi-Channel Applications using IBM Web Experience Factory IBM Corporation 2011 Who am I? 2 Agenda Mobile web applications and Web Experience Factory Tour of Web Experience

More information

InstantSearch+ Documentation for WooCommerce

InstantSearch+ Documentation for WooCommerce InstantSearch+ Documentation for WooCommerce Contents Overview... 1 Top Menu... 2 Home...2 Pricing...2 Help & Support...2 Stores...2 Account...4 Dashboard Tabs... 5 Analytics...5 AutoComplete...9 Search

More information

Week 13 Thursday (with Page 5 corrections)

Week 13 Thursday (with Page 5 corrections) Week 13 Thursday (with Page 5 corrections) Quizzes: HTML/CSS and JS available and due before 10 pm next Tuesday, May 1 st. You may do your own web research to answer, but do not ask classmates, friends,

More information

I, J, K. Eclipse, 156

I, J, K. Eclipse, 156 Index A, B Android PhoneGap app, 158 deploying and running, 172 New Eclipse project, 158 Activity dialog, 162 application properties, 160 AVD, 170 configuration, 167 Launcher Icon dialog, 161 PhoneGap

More information

Programming web design MICHAEL BERNSTEIN CS 247

Programming web design MICHAEL BERNSTEIN CS 247 Programming web design MICHAEL BERNSTEIN CS 247 Today: how do I make it?! All designers need a medium. Napkin sketches aren t enough.! This week: core concepts for implementing designs on the web! Grids!

More information

Checkbox 5 - Style Guide

Checkbox 5 - Style Guide Checkbox 5 - Style Guide Survey Styles are style templates that can be applied to surveys and reports. This guide will show you how to create a new Survey Style and apply it (and other appearance configurations)

More information

FRONT END DEVELOPER CAREER BLUEPRINT

FRONT END DEVELOPER CAREER BLUEPRINT FRONT END DEVELOPER CAREER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE!

More information

Mobile Applications 2013/2014

Mobile Applications 2013/2014 Mobile Applications 2013/2014 Mike Taylor Product Manager February 6, 2015 Advanced Development Technology Agenda Devices App Types Test/Deploy Summary Devices Mobile (Feature) Phones Windows version 5/6

More information

Advanced Dreamweaver CS6

Advanced Dreamweaver CS6 Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this

More information

User Manual RESPONSIVE SLIDESHOW. edream MARKET

User Manual RESPONSIVE SLIDESHOW. edream MARKET User Manual RESPONSIVE SLIDESHOW edream MARKET www.edreamag.com support@edreamag.com CONTENTS About extension... 3 Features Highlights... 4 Compatibility... 4 Extension Support and installation service...

More information

Wolf. Responsive Website Designer. Mac Edition User Guide

Wolf. Responsive Website Designer. Mac Edition User Guide Wolf Responsive Website Designer Mac Edition User Guide Version 2.10.3 Table of Contents What is Wolf Website Designer? Editor overview Save and open website Create responsive layout How to create responsive

More information

Developing Microsoft SharePoint Server 2013 Core Solutions

Developing Microsoft SharePoint Server 2013 Core Solutions Developing Microsoft SharePoint Server 2013 Core Solutions 20488B; 5 days, Instructor-led Course Description In this course, students learn core skills that are common to almost all SharePoint development

More information

COURSE OUTLINE MOC 20488: DEVELOPING MICROSOFT SHAREPOINT SERVER 2013 CORE SOLUTIONS

COURSE OUTLINE MOC 20488: DEVELOPING MICROSOFT SHAREPOINT SERVER 2013 CORE SOLUTIONS COURSE OUTLINE MOC 20488: DEVELOPING MICROSOFT SHAREPOINT SERVER 2013 CORE SOLUTIONS MODULE 1: SHAREPOINT AS A DEVELOPER PLATFORM This module examines different approaches that can be used to develop applications

More information

COURSE 20488B: DEVELOPING MICROSOFT SHAREPOINT SERVER 2013 CORE SOLUTIONS

COURSE 20488B: DEVELOPING MICROSOFT SHAREPOINT SERVER 2013 CORE SOLUTIONS Page 1 of 10 ABOUT THIS COURSE In this course, students learn core skills that are common to almost all SharePoint development activities. These include working with the server-side and client-side object

More information

Job Board v3 Remote Template Branding Guide for Web Developers

Job Board v3 Remote Template Branding Guide for Web Developers Job Board v3 Remote Template Branding Guide for Web Developers Still have questions? Please visit our help center at helpme.haleymarketing.com. Here you can search our knowledgebase, view training videos,

More information

Front-End UI: Bootstrap

Front-End UI: Bootstrap Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com

More information

Course 20488A: Developing Microsoft SharePoint Server 2013 Core Solutions

Course 20488A: Developing Microsoft SharePoint Server 2013 Core Solutions Course 20488A: Developing SharePoint Server 2013 Core Solutions Delivery Method: Instructor-led (classroom) Duration: 5 Days Level: 300 COURSE OVERVIEW About this Course In this course, students learn

More information

The World In. Advertising specs

The World In. Advertising specs The World In Advertising specs Format Specifications This is a living document that will evolve as we are presented with new formats, and we ll update it periodically to reflect these changes. All media

More information

SharePoint Designer 2013 Branding & Workflows

SharePoint Designer 2013 Branding & Workflows SharePoint Designer 2013 Branding & Workflows Course No. ISI-1389B 3 Days Instructor-led, Hands-on Introduction This instructor led course is intended for those interested in learning how to customize

More information

CISC 1600 Lecture 1.4 Design, part 2. Topics: Accessibility Responsive web design Example design review

CISC 1600 Lecture 1.4 Design, part 2. Topics: Accessibility Responsive web design Example design review CISC 1600 Lecture 1.4 Design, part 2 Topics: Accessibility Responsive web design Example design review Accessibility Design for users with special needs Might include you at some point You still want/need

More information

User Interfaces for Web Sites and Mobile Devices. System and Networks

User Interfaces for Web Sites and Mobile Devices. System and Networks User Interfaces for Web Sites and Mobile Devices System and Networks Computer Systems and Networks: Device-Aware Interfaces Interfaces must take into account physical constraints of computers and networks:

More information

The Marketer s Guide to. Responsive Design

The  Marketer s Guide to. Responsive Design The Email Marketer s Guide to Responsive Design A new design trend is in town You ve heard of it. You ve seen it in action. But how do you actually do it? You probably have a few questions about responsive

More information

Course 20486B: Developing ASP.NET MVC 4 Web Applications

Course 20486B: Developing ASP.NET MVC 4 Web Applications Course 20486B: Developing ASP.NET MVC 4 Web Applications Overview In this course, students will learn to develop advanced ASP.NET MVC applications using.net Framework 4.5 tools and technologies. The focus

More information

Florida Senate Brand Updated 7/12/2017

Florida Senate Brand Updated 7/12/2017 Florida Senate Brand Updated 7/12/2017 Purpose This document outlines the Senate brand. Senate brand has evolved over the past 4 years since the creation of Senate IT. This document was written for Senate

More information

PHP & PHP++ Curriculum

PHP & PHP++ Curriculum PHP & PHP++ Curriculum CORE PHP How PHP Works The php.ini File Basic PHP Syntax PHP Tags PHP Statements and Whitespace Comments PHP Functions Variables Variable Types Variable Names (Identifiers) Type

More information

Developing ASP.NET MVC 4 Web Applications

Developing ASP.NET MVC 4 Web Applications Developing ASP.NET MVC 4 Web Applications Duration: 5 Days Course Code: 20486B About this course In this course, students will learn to develop advanced ASP.NET MVC applications using.net Framework 4.5

More information

icms 9.0 The industry leading responsive, multi-user, multi-website content management system

icms 9.0 The industry leading responsive, multi-user, multi-website content management system icms 9.0 The industry leading responsive, multi-user, multi-website content management system www.yfactor.com Strategy + Design + Technology www.yfactor.com Do you need a reliable, flexible and easy-to-use

More information

Pop-up. File format/ size: Must provide (.gif or.jpg) still image - max. 75KB for Mobile - max. 400KB for Tablet

Pop-up. File format/ size: Must provide (.gif or.jpg) still image - max. 75KB for Mobile - max. 400KB for Tablet Pop-up Dimensions: Mobile: 640 (W) x 960 (H) pixels Tablet Portrait - 1536 (W) x 2048 (H) pixels [For mytv SUPER only] Tablet Landscape - 2048 (W) x 1536 (H) pixels [For mytv SUPER only] File format/ size:

More information

SharePoint 2013 End User Level II

SharePoint 2013 End User Level II Course 55052A: SharePoint 2013 End User Level II Course Details Course Outline Module 1: Overview A simple introduction module. Understand your course, classroom, classmates, facility and instructor. Module

More information

Center Stage. Desktop Mobile Tablet. General Guidelines

Center Stage. Desktop Mobile Tablet. General Guidelines Center Stage Desktop Mobile Tablet Center Stage is a fully-customized canvas, intelligently embedded into NPR.org content to maximize engagement Center Stage can be built for the NPR homepage, on the NPR

More information

Microsoft SharePoint 2016 Content Management System

Microsoft SharePoint 2016 Content Management System Microsoft SharePoint 2016 Content Management System Website Hands-on Training Office of Communications Before we start Login to pc Make sure you have at least one random picture and one random document

More information

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 14 Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout

More information

Developing ASP.NET MVC 5 Web Applications. Course Outline

Developing ASP.NET MVC 5 Web Applications. Course Outline Developing ASP.NET MVC 5 Web Applications Course Outline Module 1: Exploring ASP.NET MVC 5 The goal of this module is to outline to the students the components of the Microsoft Web Technologies stack,

More information

Newsletter Popup v3.x Configuration for Magento 2

Newsletter Popup v3.x Configuration for Magento 2 Newsletter Popup v3.x Configuration for Magento 2 From Plumrocket Documentation Contents 1. Configuring Newsletter Popup 3.x Extension for Magento 2 2. Managing Newsletter Popups 3. Managing Newsletter

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. Hoarder. 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

More information

Developing Microsoft SharePoint Server 2013 Core Solutions

Developing Microsoft SharePoint Server 2013 Core Solutions Course 20488B: Developing Microsoft SharePoint Server 2013 Core Solutions Page 1 of 8 Developing Microsoft SharePoint Server 2013 Core Solutions Course 20488B: 4 days; Instructor-Led Introduction In this

More information

Developing ASP.NET MVC 5 Web Applications

Developing ASP.NET MVC 5 Web Applications 20486C - Version: 1 23 February 2018 Developing ASP.NET MVC 5 Web Developing ASP.NET MVC 5 Web 20486C - Version: 1 5 days Course Description: In this course, students will learn to develop advanced ASP.NET

More information

Developing Microsoft SharePoint Server 2013 Core Solutions

Developing Microsoft SharePoint Server 2013 Core Solutions Developing Microsoft SharePoint Server 2013 Core Solutions Days/Duration 5 Code M20488 Overview In this course, students learn core skills that are common to almost all SharePoint development activities.

More information

Responsive Web Design Links

Responsive Web Design Links What is Responsive Design and Why Do We Need It? The go to article: http://alistapart.com/article/responsive-web-design Great slide deck on what responsive design is: http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

More information

HTML5 and CSS3 for Web Designers & Developers

HTML5 and CSS3 for Web Designers & Developers HTML5 and CSS3 for Web Designers & Developers Course ISI-1372B - Five Days - Instructor-led - Hands on Introduction This 5 day instructor-led course is a full web development course that integrates HTML5

More information

Developing ASP.NET MVC 5 Web Applications

Developing ASP.NET MVC 5 Web Applications Developing ASP.NET MVC 5 Web Applications Course 20486C; 5 days, Instructor-led Course Description In this course, students will learn to develop advanced ASP.NET MVC applications using.net Framework tools

More information

Responsive Design and Mobile Patterns

Responsive Design and Mobile Patterns Responsive Design and Mobile Patterns Nina Zayakova Product Designer @myninka Liliya Karakoleva UX Designer, Principal @liliya_k Mobile Devices Talking about mobile devices we are not talking about desktop

More information

Comprehensive AngularJS Programming (5 Days)

Comprehensive AngularJS Programming (5 Days) www.peaklearningllc.com S103 Comprehensive AngularJS Programming (5 Days) The AngularJS framework augments applications with the "model-view-controller" pattern which makes applications easier to develop

More information

Chapter 7 BMIS335 Web Design & Development

Chapter 7 BMIS335 Web Design & Development Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating

More information

Center Stage 0.46% 11 SECS 0.30% 0.76% Desktop Mobile Tablet. General Guidelines

Center Stage 0.46% 11 SECS 0.30% 0.76% Desktop Mobile Tablet. General Guidelines Center Stage Desktop Mobile Tablet Center Stage is a fully-customized canvas, intelligently embedded into NPR.org content to maximize engagement Center Stage can be built for the NPR homepage, on the NPR

More information