PowerSchool 7 Deep Dive

spanflockInternet and Web Development

Jun 24, 2012 (5 years and 3 months ago)

409 views

2011 PSUG NATIONAL
Information Exchange
2011 PSUG NATIONAL
Information Exchange
PowerSchool 7
Deep Dive:
Updating Your
Custom Pages
Thursday, July 28, 2011
Customization Migration Guide
Available on PowerSource
with the PowerSchool 7.0
User Manuals
Thursday, July 28, 2011
1
Elements of the New User Interface
HTML, CSS, Javascript
Thursday, July 28, 2011
Elements of the New User Interface

HTML5

CSS

Localization

jQuery
Thursday, July 28, 2011
Elements of the New User Interface

HTML5

CSS

Localization

jQuery

Builds the page structure
Thursday, July 28, 2011
Elements of the New User Interface

HTML5

CSS

Localization

jQuery

Builds the page structure

Applies the styles to the page
Thursday, July 28, 2011
Elements of the New User Interface

HTML5

CSS

Localization

jQuery

Builds the page structure

Applies the styles to the page

Most text rendered by ~[Text:]
codes
Thursday, July 28, 2011
Elements of the New User Interface

HTML5

CSS

Localization

jQuery

Builds the page structure

Applies the styles to the page

Most text rendered by ~[Text:]
codes

JavaScript library controls most
of the interactivity on the page
Thursday, July 28, 2011
HTML 5
Current best practice in web
design uses
HTML
to build the
structure and parts of a page,
CSS
to define styles for those
parts, and
JavaScript
to manage
the behavior of those parts. These
three parts work together to build
interactive pages.
Thursday, July 28, 2011
HTML 5

Pages start with <!DOCTYPE html>

No more <font> or <center>

DOM scripting is emphasized
Thursday, July 28, 2011
Cascading Style Sheets
CSS sets layout, colors, fonts, and images
for PowerSchool.
With
Without
Thursday, July 28, 2011
Localization
Almost all the content on PowerSchool pages is rendered
by text tags. This means that if you have installed a
language toolkit, it can translate all that content. It also
means that users can edit that text in PowerSchool and
not have to edit HTML pages directly.
Thursday, July 28, 2011
JQuery

JavaScript library

CSS compliant

DOM scripting

Cross-browser compatible
jQuery can be used to navigate through the DOM and find parts
of the document and change their id or class. Doing so would
change the CSS that would be attached to the page object. By
using jQuery, a user can invoke a function that would change
the style of an object with a single click, and could make it
change color, or hide, or disappear.
Thursday, July 28, 2011
UI Examples
/admin/ui_examples/home.html
Thursday, July 28, 2011
Benefits of CSS
Thursday, July 28, 2011
Benefits of CSS
Thursday, July 28, 2011
Benefits of CSS
Thursday, July 28, 2011
Benefits of CSS
<!-­‐-­‐  start  of  content  and  bounding  box  -­‐-­‐>
<table  border="0"  cellspacing="0"  cellpadding="0"  align="center">
<tr>
<td  colspan="2"  background="/images/bond_3000_top.gif"  align="right"><img  src="/images/
bound_box_top_right1.gif"  width="15"  height="9"  alt=""  border="0"></td>
<td  width="25"><img  src="/images/bound_box_top_right2.gif"  width="25"  height="9"  alt=""  
border="0"></td>
</tr>
<tr>
<td  width="23"  background="/images/bond_box_left_edge.gif"><img  src="/images/spacer.gif"  
width="23"  height="1"></td>
<td>
<table  border="0"  cellspacing="0"  cellpadding="4">
<tr  class="headerRow">
<td  class="bold">Function</td>
<td  class="bold">Description</td>
</tr>
<!-­‐-­‐  start  of  content  and  bounding  box  -­‐-­‐>
<div  class="box-­‐round">
<table  border="0"  cellspacing="0"  cellpadding="4">
<tr  class="headerRow">
<td  class="bold">Functions</td>
<td  class="bold">Description</td>
</tr>
Thursday, July 28, 2011
2
Migrating Your Pages
Important Things to Know
Thursday, July 28, 2011
Wildcards
Thursday, July 28, 2011
Wildcards

To provide some backwards
compatibility, legacy
PowerSchool wildcards were
kept intact.
Thursday, July 28, 2011
Wildcards

To provide some backwards
compatibility, legacy
PowerSchool wildcards were
kept intact.

New CSS-based wildcards were
developed and used for PowerSchool 7 pages.
Thursday, July 28, 2011
Wildcards

To provide some backwards
compatibility, legacy
PowerSchool wildcards were
kept intact.

New CSS-based wildcards were
developed and used for PowerSchool 7 pages.

These new wildcards mirror the legacy files but
add a suffix to differentiate them: “_css”.
Thursday, July 28, 2011
Wildcards

To provide some backwards
compatibility, legacy
PowerSchool wildcards were
kept intact.

New CSS-based wildcards were
developed and used for PowerSchool 7 pages.

These new wildcards mirror the legacy files but
add a suffix to differentiate them: “_css”.

These wildcards provide the main structural UI
components for PowerSchool pages.
Thursday, July 28, 2011
CSS Includes

There are two new CSS includes that replace the
old
powerschool.css
include:
<link  href="
/images/css/screen.css
"  rel="stylesheet"  
media="screen"
>  
<link  href="
/images/css/print.css
"  rel="stylesheet"  
media="print"
>  

Screen.css governs the browser display page
rendering, and styles everything you see on
PowerSchool pages

Print.css governs printed PowerSchool pages
Thursday, July 28, 2011
Page Title Text

At the top of every PowerSchool page is a title.
The legacy structure was a table with the title
text inside the inner <td> tag.

This complicated structure has been replaced
with an <h1> tag.
<!-­‐-­‐  start  of  title  -­‐-­‐>  
<table  border="0"  cellspacing="0"  cellpadding="4">  
<tr>  
<td  class="header">District  Setup</td>  
</tr>  
</table>  
<br><br>  
<!-­‐-­‐  end  of  title  -­‐-­‐>  
<h1>District  Setup</h1>  
Thursday, July 28, 2011
Rounded Boxes
<!-­‐-­‐  start  of  content  and  bounding  box  -­‐-­‐>
<table  border="0"  cellspacing="0"  cellpadding="0"  align="center">
<tr>
<td  colspan="2"  background="/images/bond_3000_top.gif"  align="right"><img  src="/images/
bound_box_top_right1.gif"  width="15"  height="9"  alt=""  border="0"></td>
<td  width="25"><img  src="/images/bound_box_top_right2.gif"  width="25"  height="9"  alt=""  
border="0"></td>
</tr>
<tr>
<td  width="23"  background="/images/bond_box_left_edge.gif"><img  src="/images/spacer.gif"  
width="23"  height="1"></td>
<td>
<!-­‐-­‐  start  of  content  and  bounding  box  -­‐-­‐>
<div  class=”box-­‐round”>  content  goes  here  </div>
Thursday, July 28, 2011
Buttons

The legacy structure for buttons was an
<input> tag of type=”image”. While this
did provide a means to render the “aqua”
style buttons it did not allow for
customization, or translation of the text
on the button.


The new structure uses either a
<button> tag, or an <a class=”button”>
tag. Screen.css then renders the button
with the system styles.
Thursday, July 28, 2011
<
FONT
>
One of the legacy structures that will not render in
the new framework is the <font> tag.
This tag has
been deprecated in favor of CSS, and modern
browsers will ignore any use of this tag when a
CSS style is in place.
The simple replacement for
this is using the style=”” attribute on tags and
adding any CSS-based styling you require for your
customizations.
Thursday, July 28, 2011
<
FONT
>
One of the legacy structures that will not render in
the new framework is the <font> tag.
This tag has
been deprecated in favor of CSS, and modern
browsers will ignore any use of this tag when a
CSS style is in place.
The simple replacement for
this is using the style=”” attribute on tags and
adding any CSS-based styling you require for your
customizations.
Examples:
<p  style=“font-­‐family:Verdana;”>Fancy!</p>
<span  style=“font-­‐family:Ariel;”  >Fancy  Too!</span>
Thursday, July 28, 2011
3
Strategy for Migrating Pages
Thursday, July 28, 2011
Focus on the Center!
Thursday, July 28, 2011
Focus on the Center!
Thursday, July 28, 2011
Focus on the Center!
Thursday, July 28, 2011
Focus on the Center!
Thursday, July 28, 2011
Focus on the Center!
<!-- start of content and bounding box -->
Thursday, July 28, 2011
“Live” Examples
Thursday, July 28, 2011