Skip to content

Commit 1aaff7c

Browse files
hmillersarahhmillersarah
committed
add courses to TM page
1 parent c191d62 commit 1aaff7c

2 files changed

Lines changed: 65 additions & 138 deletions

File tree

‎ims-tm.html‎

Lines changed: 59 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -229,142 +229,67 @@ <h3>Ways to connect</h3>
229229
<!-- =========================== Upskill with IMS TM =========================== -->
230230
<section class="white-bg card-section">
231231
<div class="card-section-header"><h2>Upskill with IMS Transaction Manager</h2></div>
232-
<div class="card-section-header"><h3>The basics</h3></div>
233-
234-
<!-- IMS Fundamentals -->
235-
<course-card
236-
id="ims-fundamentals"
237-
name="IMS Fundamentals"
238-
desc="Learn about the main components of IBM IMS: IMS Database Manager (IMS DB),
239-
IMS Transaction Manager (IMS TM), and common system services for IMS DB and
240-
IMS TM. Learn how these components work and interact with applications, how
241-
IMS databases differ from each other and differ from relational databases
242-
message types, security, maintenance, troubleshooting, and more."
243-
imgsrc="wp-content/course-badges/badge_ims_fundamentals.png"
244-
link="https://learn.ibm.com/course/view.php?id=8829"
245-
>
246-
</course-card>
247-
</section>
232+
<section>
233+
<h3>The basics</h3>
234+
<!-- Introducing IBM IMS -->
235+
<course-card
236+
name="Introducing IBM Information Management System (IMS)"
237+
desc="This video gives a quick overview of IBM Information Management System (IMS), including IMS TM,
238+
IMS DB, and IMS application processing."
239+
imgsrc="wp-content/tm/tm-intro-ims-video-cover.png"
240+
link="https://mediacenter.ibm.com/media/Introducing+IBM+Information+Management+System+%28IMS%29/1_jy8lv5f5"
241+
linktext="Watch the video →"
242+
>
243+
</course-card>
248244

249-
<!-- =========================== Hone your skills =========================== -->
250-
<section class="zs-gray-section ibm-background-white-core hs-section">
251-
<div class="pure-u-1"><h2>Upskill with IMS Transaction Manager</h2></div>
252-
<div class="pure-g">
253-
<div class="pure-u-22-24">
254-
<h4>The basics</h4>
255-
<!-- Introducing IBM Information Management System (IMS) -->
256-
<div class="course-card">
257-
<div class="pure-u-1">
258-
<div class="pure-u-1 pure-u-md-6-24">
259-
<img src="wp-content/tm/tm-intro-ims-video-cover.png" alt="IMS Fundamentals badge">
260-
</div>
261-
<div class="pure-u-1 pure-u-md-18-24 course-desc">
262-
<h3>Introducing IBM Information Management System (IMS)</h3>
263-
<p>
264-
This video gives a quick overview of IBM Information Management System (IMS), including IMS TM, IMS DB, and IMS application processing.
265-
</p>
266-
<div class="pure-u-1 pure-u-md-1">
267-
<a aria-label="Watch the video introducing IBM IMS" target="_blank" rel="noopener noreferrer"
268-
href="https://mediacenter.ibm.com/media/Introducing+IBM+Information+Management+System+%28IMS%29/1_jy8lv5f5">
269-
Watch the video →
270-
</a>
271-
</div>
272-
</div>
273-
</div>
274-
</div>
275-
<!-- IMS Fundamentals -->
276-
<div class="course-card">
277-
<div class="pure-u-1">
278-
<div class="pure-u-1 pure-u-md-6-24">
279-
<img src="wp-content/course-badges/badge_ims_fundamentals.png" alt="IMS Fundamentals badge">
280-
</div>
281-
<div class="pure-u-1 pure-u-md-18-24 course-desc">
282-
<h3>IMS Fundamentals</h3>
283-
<p>
284-
Take a deeper dive into the main components of IMS, including IMS TM, IMS DB, and common system services, in this comprehensive course.
285-
</p>
286-
<div class="pure-u-1 pure-u-md-1">
287-
<a aria-label="Learn more about IMS Fundamentals" rel="noopener noreferrer"
288-
href="https://imsdev.github.io/ims-education.html#ims-fundamentals">
289-
Learn more
290-
</a>
291-
</div>
292-
</div>
293-
</div>
294-
</div>
295-
</div>
296-
<div class="pure-u-22-24">
297-
<h4>Intermediate and advanced training</h4>
298-
<!-- IMS System Programming in a DBCTL Environment -->
299-
<div class="course-card">
300-
<div class="pure-u-1">
301-
<div class="pure-u-1 pure-u-md-6-24">
302-
<img src="wp-content/course-badges/badge_ims_dbctl.png" alt="IMS DBCTL badge">
303-
</div>
304-
<div class="pure-u-1 pure-u-md-18-24 course-desc">
305-
<h3>IMS System Programming in a DBCTL Environment</h3>
306-
<p>Learn about the IMS database control (DBCTL) environment, which provides access between CICS and
307-
IMS-managed databases.
308-
</p>
309-
<div class="pure-u-1 pure-u-md-1">
310-
<a aria-label="Learn more about IMS System Programming in a DBCTL Environment"
311-
rel="noopener noreferrer"
312-
href="https://imsdev.github.io/ims-education.html#ims-dbctl">
313-
Learn more
314-
</a>
315-
</div>
316-
</div>
317-
</div>
318-
</div>
319-
<!-- TM Performance Analysis -->
320-
<div class="course-card">
321-
<div class="pure-u-1">
322-
<div class="pure-u-1 pure-u-md-6-24">
323-
<img src="wp-content/course-badges/badge_ims_tm_tuning.png" alt="IMS TM Performance Analysis badge">
324-
</div>
325-
<div class="pure-u-1 pure-u-md-18-24 course-desc">
326-
<h3>IMS TM Performance Analysis</h3>
327-
<p>
328-
Learn how to use and adjust IMS TM and z/OS
329-
components, commands, processes, parameters, and more to ensure that the
330-
IMS TM system is running as efficiently as possible.
331-
</p>
332-
<div class="pure-u-1 pure-u-md-1">
333-
<a aria-label="Learn more about IMS TM Performance Analysis"
334-
rel="noopener noreferrer"
335-
href="https://imsdev.github.io/ims-education.html#ims-tm-performance">
336-
Learn more
337-
</a>
338-
</div>
339-
</div>
340-
</div>
341-
</div>
342-
<!-- TM Application Programming -->
343-
<div class="course-card">
344-
<div class="pure-u-1">
345-
<div class="pure-u-1 pure-u-md-6-24">
346-
<img src="wp-content/course-badges/badge_tm_app_prog.png" alt="IMS TM Application Programming badge">
347-
</div>
348-
<div class="pure-u-1 pure-u-md-18-24 course-desc">
349-
<h3>IMS TM Application Programming</h3>
350-
<p>
351-
Learn how to write application programs (mainly in COBOL and PL/I) that use Data Language One (DL/I) to process
352-
terminal input and output messages in an IMS TM system.
353-
</p>
354-
<div class="pure-u-1 pure-u-md-1">
355-
<a aria-label="Learn more about IMS TM Application Programming"
356-
rel="noopener noreferrer"
357-
href="https://imsdev.github.io/ims-education.html#ims-tm-prog">
358-
Learn more
359-
</a>
360-
</div>
361-
</div>
362-
</div>
363-
</div>
364-
</div>
365-
</div>
245+
<!-- IMS Fundamentals -->
246+
<course-card
247+
name="IMS Fundamentals"
248+
desc="Take a deeper dive into the main components of IMS, including IMS TM, IMS DB, and common system services,
249+
in this comprehensive course."
250+
imgsrc="wp-content/course-badges/badge_ims_fundamentals.png"
251+
link="https://imsdev.github.io/ims-education.html#ims-fundamentals"
252+
linktext="Learn more"
253+
>
254+
</course-card>
255+
</section>
256+
<section>
257+
<h3>Intermediate and advanced training</h3>
258+
<!-- IMS System Programming -->
259+
<course-card
260+
name="IMS System Programming in a DBCTL Environment"
261+
desc="Learn about the IMS database control (DBCTL) environment, which provides access between CICS and
262+
IMS-managed databases."
263+
imgsrc="wp-content/course-badges/badge_ims_dbctl.png"
264+
link="https://imsdev.github.io/ims-education.html#ims-dbctl"
265+
linktext="Learn more"
266+
>
267+
</course-card>
268+
269+
<!-- IMS TM Performance Analysis -->
270+
<course-card
271+
name="IMS TM Performance Analysis"
272+
desc="Learn how to use and adjust IMS TM and z/OS components, commands, processes, parameters, and more
273+
to ensure that the IMS TM system is running as efficiently as possible."
274+
imgsrc="wp-content/course-badges/badge_ims_tm_tuning.png"
275+
link="https://imsdev.github.io/ims-education.html#ims-tm-performance"
276+
linktext="Learn more"
277+
>
278+
</course-card>
279+
280+
<!-- IMS TM Application Programming -->
281+
<course-card
282+
name="IMS TM Application Programming"
283+
desc="Learn how to write application programs in COBOL and PL/I that use Data Language One (DL/I)
284+
to process terminal input and output messages in an IMS TM system."
285+
imgsrc="wp-content/course-badges/badge_tm_app_prog.png"
286+
link="https://imsdev.github.io/ims-education.html#ims-tm-prog"
287+
linktext="Learn more"
288+
>
289+
</course-card>
290+
</section>
366291
</section>
367-
292+
368293
<!-- =========================== IMS blogs =========================== -->
369294
<section class="zs-gray-section ibm-background-white-core blog-black-bg">
370295
<div class="zs-section blog-section">

‎web-components/course-card/course-card.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function createComponent(html) {
4444
// Set alt text
4545
selector.setAttribute('alt', `${name} badge`);
4646
// Change styling for self-paced course card
47-
if (selfpaced != 'true') {
47+
if (selfpaced == 'false') {
4848
const courseCard = shadow.querySelector('.course-card');
4949
courseCard.style.alignItems = 'flex-start';
5050
}
@@ -83,7 +83,7 @@ function createComponent(html) {
8383
const link = shadow.querySelector(cssSelector);
8484
if (url != "") {
8585
link.href = url;
86-
link.setAttribute('aria-label', `Learn more about ${name}`);
86+
link.setAttribute('aria-label', `${linkText} about ${name}`);
8787
link.textContent = linkText;
8888
} else {
8989
const hideSelector = cssSelector + "-g";
@@ -117,6 +117,7 @@ function createComponent(html) {
117117
this.end = "";
118118
this.hours = "";
119119
this.link = "";
120+
this.linktext = 'Learn more →'
120121
this.registerlink = "";
121122
}
122123

@@ -125,7 +126,8 @@ function createComponent(html) {
125126
* @returns {Array} An array of property names.
126127
*/
127128
static get observedAttributes() {
128-
return ['name', 'session', 'desc', 'imgsrc', 'selfpaced', 'level', 'cost', 'badge', 'time', 'start', 'end', 'hours', 'link', 'registerlink'];
129+
return ['name', 'session', 'desc', 'imgsrc', 'selfpaced', 'level', 'cost', 'badge', 'time', 'start',
130+
'end', 'hours', 'link', 'linktext', 'registerlink'];
129131
}
130132
// Course Card Options
131133
// - id
@@ -196,7 +198,7 @@ function createComponent(html) {
196198
// Set course hours
197199
setContent('.course-hours', this.hours, shadow);
198200
// Set course link
199-
setLink('.course-link', this.link, this.name, 'Learn more →', shadow);
201+
setLink('.course-link', this.link, this.name, this.linktext, shadow);
200202
// Set register link
201203
setLink('.register-link', this.registerlink, this.name, 'Register →', shadow);
202204
}

0 commit comments

Comments
 (0)