Videos
No edit summary
Tags: Reverted 2017 source edit
No edit summary
Tag: 2017 source edit
 
(43 intermediate revisions by 2 users not shown)
Line 56: Line 56:
                 font-size: 18px;
                 font-size: 18px;
             }
             }
            .mwWidgetContinueWatching svg {
    width: 40px;
    height: 18px;
}
         }
         }
.youtube-video-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;
}
.mdrivenText {
                font-size: 25px;
            }
.youtube-video-row > iframe {
    flex: 1;
    min-width: 300px;
    max-width: 360px;
    border-radius: 15px;
    overflow: hidden;
    height: 203px;
}
@media (max-width: 768px) {
    .youtube-video-row > iframe {
        flex-basis: 100%;
        max-width: 100%;
        height: auto;
    }
}
@media (max-width: 768px) {
    .heading {
        font-size: 1.75em;
    }
}
</style>
</style>


Line 68: Line 110:
     <div class="mdrivenContainer" style="height: auto;">
     <div class="mdrivenContainer" style="height: auto;">
         <div style="margin: 5px; word-wrap: break-word; text-align: center;">
         <div style="margin: 5px; word-wrap: break-word; text-align: center;">
             <span class="mdrivenText" style="font-size: 25px; font-family: Inter, sans-serif; font-weight: 600; color: black;">Check out the official MDriven YouTube here: </span>
             <span class="mdrivenText" style="font-weight: 600; color: black;">Check out the official MDriven YouTube here: </span>
             <a class="mdrivenText" style="color: #0060A8;" href="www.youtube.com/@MDrivenOfficial">www.youtube.com/@MDrivenOfficial</a>
             <a class="mdrivenText" style="color: #0060A8;" href="https://www.youtube.com/@MDrivenOfficial">www.youtube.com/@MDrivenOfficial</a>
         </div>
         </div>
     </div>
     </div>
</html>
</html>
{{#widget:Videos}}
{{#widget:Videos|heading=MOCKOTYPE|link=https://www.youtube.com/playlist?list=PLVF9iJ0UDk7dS-D35BVAytletlXIIUlu8}}
 
<!DOCTYPE html>
<html>
<html>
<head>
    <style>
      .video {
            display: flex;
            flex-direction: row-reverse; /* Navigation on the right */
            max-width: 100%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: 20px;
        }


.video__wrapper {
<div class="youtube-video-row">
            flex-grow: 1; /* Video takes remaining space */
</html>
            position: relative;
{{#widget:Youtube|link=https://www.youtube.com/embed/2l5LJGpwEzU?si=v3K0wtIftcLc_-iD}}
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
{{#widget:Youtube|link=https://www.youtube.com/embed/DjFnAA2tIgc?si=_toZ_Kusot0xRkw3}}
            height: 0;
{{#widget:Youtube|link=https://www.youtube.com/embed/fOfNSFtVqdY?si=tGmmdM-1LkIbJFTe}}
        }
</div>


.video__wrapper iframe {
{{#widget:Videos|heading=MDRIVEN DESIGNER OVERVIEW|link=https://www.youtube.com/playlist?list=PLVF9iJ0UDk7e6UEnABWQMGNEwT_SNhg2Q}}
            position: absolute;
<html>
            top: 0;
<div class="youtube-video-row">
            left: 0;
</html>
            width: 100%;
{{#widget:Youtube|link=https://www.youtube.com/embed/RxBhb0K6ibo?si=52SxvSy_cVjdAnzX}}
            height: 100%;
{{#widget:Youtube|link=https://www.youtube.com/embed/KQerwRGgmE4?si=TZtVPL9a0tvydNZk}}
            border-radius: 8px;
{{#widget:Youtube|link=https://www.youtube.com/embed/it0ZD7gtjnE?si=_FCvRL-nbyvu98v5}}
        }
</div>


.video__navigation {
{{#widget:Videos|heading=MDRIVEN TURNKEY|link=https://www.youtube.com/playlist?list=PLVF9iJ0UDk7ddLL-WARYjJwy4jAZkjCze}}
            flex-basis: 300px; /* Width of the navigation panel */
<html>
            padding: 10px;
<div class="youtube-video-row">
            background: #f7f7f7;
</html>
            font-family: Arial, sans-serif;
{{#widget:Youtube|link=https://www.youtube.com/embed/JmL77B4SU7M?si=QRLBaOCHPlejh6Dn}}
            line-height: 1.5;
{{#widget:Youtube|link=https://www.youtube.com/embed/Ca6ShDvSjxc?si=A0HSDSrO8piqKDjL}}
            font-size: 14px;
{{#widget:Youtube|link=https://www.youtube.com/embed/uz_8q4a_p78?si=2_UPP4jUcCKqXeXc}}
            overflow-y: auto;
</div>
            border-left: 1px solid #ccc;
            list-style: none;
            padding-left: 0;
        }


.navigation-item {
{{#widget:Videos|heading=MDRIVEN SERVER|link=https://www.youtube.com/playlist?list=PLVF9iJ0UDk7cq1diFC71rtY48HFitH7mI}}
            cursor: pointer;
<html>
            color: #0066cc;
<div class="youtube-video-row">
            padding: 8px;
</html>
            border-radius: 4px;
{{#widget:Youtube|link=https://www.youtube.com/embed/1fJnvsbMWpQ?si=8xYwPp1-k42vwo4d}}
            transition: background-color 0.3s, color 0.3s;
{{#widget:Youtube|link=https://www.youtube.com/embed/mc66E3bZYe8?si=kOw-DajrsP55dGG0}}
            display: block;
{{#widget:Youtube|link=https://www.youtube.com/embed/0RaL2L81cZw?si=FM4rpJ_NwkeYGlzW}}
        }
</div>


.navigation-item:hover {
{{#widget:Videos|heading=MDRIVEN FRAMEWORK|link=https://www.youtube.com/playlist?list=PLVF9iJ0UDk7fEDFpt4aqQrmK9rBrOfi08}}
            background-color: #e6f0ff;
<html>
            color: #004499;
<div class="youtube-video-row">
        }
 
@media (max-width: 768px) {
            .video {
                flex-direction: column;
            }
 
.video__wrapper {
                padding-bottom: 56.25%;
            }
 
.video__navigation {
                flex-basis: auto;
                border-left: none;
                border-top: 1px solid #ccc;
                padding-top: 15px;
                order: 2; /* Navigation moves below the video */
            }
        }
    </style>
</head>
<body>
    <div class="video">
        <div class="video__wrapper">
            <iframe id="videoFrame" src="https://www.youtube.com/embed/RxBhb0K6ibo?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="video__navigation">
            <span data-video="RxBhb0K6ibo" data-start="35" tabindex="0"> <strong> MDriven designer installation</strong> </span>
 
<strong> Interface Overview :</strong>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="148" tabindex="0"> Setting New Diagram </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="290" tabindex="0"> Add a category </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="396" tabindex="0"> Add a class </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="613" tabindex="0"> Processes </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="767" tabindex="0"> StateMachine diagram</span>
 
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="996" tabindex="0">TagExtensions </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1173" tabindex="0">Attributes</span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1260" tabindex="0"> Association</span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1359" tabindex="0"> FeaturePickForm </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1448" tabindex="0">Setting the color </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1534" tabindex="0">What to show on the diagram? </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1612" tabindex="0"> Delete/Hide from view </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1890" tabindex="0"> Filtering the repository tree</span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1982" tabindex="0"> Reintroduce/Introduce associations </span>
 
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2073" tabindex="0"> Anchor points and square line option </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2200" tabindex="0"> Additional options: DimDefaults </span>
 
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2321" tabindex="0"> “modlr” file and "ecomdl" file </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2501" tabindex="0"> Association tool </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2697" tabindex="0"> PluralSuffix property </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2936" tabindex="0"> Generalization/specialization mode</span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3203" tabindex="0"> Reference window  </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3300" tabindex="0"> Index model and report errors </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3340" tabindex="0"> Default String Representation  </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3486" tabindex="0"> <strong> “Enterprise Architect Information" window : </strong> </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="613" tabindex="0"> Processes </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3498" tabindex="0"> More on processes </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3508" tabindex="0"> Information </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3580" tabindex="0"> Actors </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3684" tabindex="0"> Applications </span>
    <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3714" tabindex="0"> Infrastructure </span>
        </div>
    </div>
 
<script>
        document.querySelectorAll('.navigation-item').forEach(item => {
            item.addEventListener('click', function() {
                var videoSrc = 'https://www.youtube.com/embed/' + this.getAttribute('data-video') + '?start=' + this.getAttribute('data-start') + '&autoplay=1';
                document.getElementById('videoFrame').src = videoSrc;
            });
        });
    </script>
</body>
</html>
</html>
{{#widget:Youtube|link=https://www.youtube.com/embed/nuNktUpn-cg?si=ZLJL4B9cIRXk0lGG}}
{{#widget:Youtube|link=https://www.youtube.com/embed/F5s-st3RCLI?si=iwPpzzkYWX0qUVsx}}
{{#widget:Youtube|link=https://www.youtube.com/embed/xxVmsm0Ntmo?si=nbC0AyFmT4gjHR0c}}
</div>

Latest revision as of 05:13, 29 May 2024

Training
EXPLORE MDriven through Video
INTRODUCING THE MDRIVEN VIDEO EXPERIENCE
Watch videos tailored to simplify everything you need to know about MDriven.
Check out the official MDriven YouTube here: www.youtube.com/@MDrivenOfficial

MOCKOTYPE Continue watching

MDRIVEN DESIGNER OVERVIEW Continue watching

MDRIVEN TURNKEY Continue watching

MDRIVEN SERVER Continue watching

MDRIVEN FRAMEWORK Continue watching

Retrieved from "https://newwikicopy.mdriven.net/index.php?title=Training:Videos&oldid=18786"

© MDRIVEN . All Rights Reserved

Glossary API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved