Files
delphistudio-website/public/formacion/cursos/angular.html
Alessio Molinaro a6f764245d First Commit
Setup repo and website
2024-11-21 09:29:25 +01:00

453 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- logo -->
<link rel="apple-touch-icon" sizes="57x57" href="/img/logo.ico/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/img/logo.ico/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/logo.ico/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/logo.ico/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/logo.ico/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/logo.ico/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/logo.ico/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/logo.ico/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/logo.ico/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/img/logo.ico/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/logo.ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/img/logo.ico/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/logo.ico/favicon-16x16.png">
<link rel="manifest" href="/img/logo.ico/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/logo.ico">
<meta name="theme-color" content="#ffffff">
<!-- logo fine -->
<title>Angular</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
<!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="/font-awesome-4.5.0/css/font-awesome.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="/slick/slick-theme.css" />
<link rel="stylesheet" href="/css/tooplate-style.css">
<link rel="stylesheet" href="../formacion.css">
<!-- tooplate style -->
<script>
var renderPage = true;
if (navigator.userAgent.indexOf('MSIE') !== -1
|| navigator.appVersion.indexOf('Trident/') > 0) {
/* Microsoft Internet Explorer detected in. */
alert("Please view this in a modern browser such as Chrome or Microsoft Edge.");
renderPage = false;
}
</script>
</head>
<body>
<!-- Loader -->
<div style="z-index:999999999" id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<div class="container">
<section class="tm-section-head" id="top">
<header id="header" class="text-center tm-text-gray">
<div>
<a href="#top"><img class="logo" src="/img/logo-trasparent.png"></a>
</div>
<h1>Angular</h1>
<h6 class="subtitle"></h6>
<div id="navigation-bar"></div>
</header>
</section>
<section class="tm-section-5" id="tm-section-5">
<div class="row">
<div class="col-ds-2 col-tb-12 col-mb-12 col-lg-12">
<div class="media media-center ml-padding">
<p class="mb-0" id="tm-section-4">
<br><b>Duración</b>: 3 días | <b>Precio</b>: 900 €
</p>
</div>
<div class="media media-center ml-padding">
<div class="media-body tm-box-5">
<h2>
Requisitos previos:
</h2>
<p class="mb-0" id=tm-section-4>
Javascript, OOP, conceptos básicos de HTML, conceptos básicos de CSS<br>
</p>
</div><br>
</div>
<div class="media media-center ml-padding">
<div class="media-body tm-box-5">
<h2>
Cursos relacionados:
</h2>
<p class="mb-0" id=tm-section-4>
<ul>
<li>
<a href="dmvcFramework.html">
DelphiMVCFramework
</a>
</li>
<li>
<a href="backendDelphi.html">
BackEnd Delphi
</a>
</li>
<li>
<a href="PHP.html">
BackEnd PHP
</a>
</li>
</ul>
</p>
</div><br>
</div>
<div class="media media-center ml-padding">
<div class="media-body tm-box-5">
<h2>
Descripción:
</h2>
<p class="mb-0" id=tm-section-4>
Un curso intensivo de desarrollo de tres días con Angular y Typescript, para conocer
todas las noticias y
los potenciales del nuevo framework de Google. Es absolutamente recomendable tener una
PC/notebook personal
con usted para utilizarlo durante los ejercicios.
</p>
</div><br>
</div>
<div class="media media-center ml-padding">
<div class="media-body tm-box-5">
<h2>
Contenido:
</h2>
<p class="mb-0" id=tm-section-4>
<i>Cada día se organiza con lecciones teóricas en la clasificación de los temas y
ejercicios guiados diseñados
específicamente, que tienen como objetivo de llevar a cada desarrollador hacia el
dominio del instrumento.
El curso está configurado de tal modo para ser una inmersión completa e intensiva
de tres días de desarrollo con Angular
y Typescript, para conocer todas las novedades y el potencial del nuevo framework
de Google.
</i>
<ul>
<li>Introducción a Angular</li>
<li>Principales novedades introducidas y diferencias con la versión anterior.</li>
<li>El lenguaje TypeScript</li>
<li>Arquitectura de una aplicación angular.</li>
<li>Programación reactiva</li>
<li>Sintaxis de los templates</li>
<li>Componentes</li>
<li>Property binding</li>
<li>Eventos</li>
<li>Inyección de dependencia</li>
<li>Directivas y Componentes</li>
<li>Propiedades de entrada y salida</li>
<li>Ciclo de vida de los componentes</li>
<li>Providers</li>
<li>Host</li>
<li>ngIf, ngFor y ngSwitch</li>
<li>Templates</li>
<li>Estilos</li>
<li>Servicios</li>
<li>Forms y validación</li>
<li>Pipes and built-in pipes</li>
<li>Routing</li>
<li>Navegación y parámetros</li>
<li>Componentes anidados</li>
<li>Async routes y HTTP</li>
<li>Sistema de detección de cambios</li>
<li>Web workers</li>
<li>Server-side Rendering</li>
<li>Migración de una aplicación de AngularJS a Angular</li>
<ul>
</p>
</div><br>
</div>
</div>
</div>
</section>
<hr>
<section class="tm-section-6" id="tm-section-6">
<div class="row">
<div class="col-lg-7 col-md-7 col-xs-12">
<div class="contact_message">
<form action="https://formspree.io/f/mqkwvjlz" method="post" class="contact-form">
<div class="row mb-2">
<div class="form-group col-xl-6">
<input type="text" id="contact_name" name="contact_name" class="form-control"
placeholder="Nombre" required />
</div>
<div class="form-group col-xl-6 pl-xl-1">
<input type="email" id="contact_email" name="contact_email" class="form-control"
placeholder="Correo electrónico" required />
</div>
</div>
<div class="form-group">
<textarea id="contact_message" name="contact_message" class="form-control" rows="6"
placeholder="Escribe aquí tu mensaje." required></textarea>
</div>
<button type="submit" class="btn tm-btn-submit float-right btn-big">Enviar</button>
</form>
</div>
</div>
<div class="col-lg-5 col-md-5 col-xs-12 tm-contact-right">
<div class="tm-address-box">
<h2 class="mb-4" id="cnt-section">Contacto</h2>
<address>
<a class="no-link" href="https://www.google.it/maps/place/Carrer+del+Bon+Rec%C3%A9s,+3,+46035+Val%C3%A8ncia/@39.4904327,-0.3945009,17z/data=!3m1!4b1!4m5!3m4!1s0xd6045f498529177:0xd843de0e6d749068!8m2!3d39.4904327!4d-0.3923122"
target="_blank">
<i class="fa fa-map-marker" aria-hidden="true" style="margin-left: 0.1em"></i></a>
<a class="no-link" href="https://www.google.it/maps/place/Carrer+del+Bon+Rec%C3%A9s,+3,+46035+Val%C3%A8ncia/@39.4904327,-0.3945009,17z/data=!3m1!4b1!4m5!3m4!1s0xd6045f498529177:0xd843de0e6d749068!8m2!3d39.4904327!4d-0.3923122"
target="_blank">
Carrer del Bon Recés, 3</a>
<br>46015 Valencia
<br>España
<br>Teléfono: +34 960130674
</address>
</div>
</div>
</div>
</section>
<footer class="mt-5">
<p class="text-center">Copyright © 2021 DELPHI STUDIO <a href="http://www.delphistudio.es/politica-de-privacidad/" target="_blank" rel="noopener noreferrer">AVISO LEGAL Y POLÍTICA DE PRIVACIDAD</a></p>
</footer>
</div>
<!-- load JS files -->
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/popper.min.js"></script>
<!-- https://popper.js.org/ -->
<script src="/js/bootstrap.min.js"></script>
<!-- https://getbootstrap.com/ -->
<script type="text/javascript" src="/slick/slick.min.js"></script>
<!-- Slick Carousel -->
<script type="text/javascript">
window.onresize = function () {
calculateMediaQuery();
}
$(document).ready(
calculateMediaQuery()
);
function calculateMediaQuery() {
if (window.matchMedia('(min-width: 1200px)').matches) {
this.mediaQueryInUse = 'desktop';
} else if (window.matchMedia('(min-width: 992px) and (max-width: 1199px)').matches) {
this.mediaQueryInUse = 'desktop';
} else if (window.matchMedia('(min-width: 768px) and (max-width: 991px)').matches) {
this.mediaQueryInUse = 'tablet';
} else {
this.mediaQueryInUse = 'mobile';
}
if (this.mediaQueryInUse != 'mobile') {
document.getElementById("navigation-bar").innerHTML = `
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<!-- Brand -->
<!-- <a class="navbar-brand" href="#">
alt=""></a> -->
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/index.html">Inicio</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Tecnología
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/tecnologia/aplicacionesmoviles.html">Aplicaciones Móviles</a>
<a class="dropdown-item" href="/tecnologia/arduino.html">Arduino</a>
<a class="dropdown-item" href="/tecnologia/bottelegram.html">Bot Telegram</a>
<a class="dropdown-item" href="/tecnologia/delphi.html">Delphi</a>
<a class="dropdown-item" href="/tecnologia/elkstack.html">ELK Stack</a>
<a class="dropdown-item" href="/tecnologia/machinelearning.html">Machine Learning</a>
<a class="dropdown-item" href="/tecnologia/python.html">Python</a>
<a class="dropdown-item" href="/tecnologia/raspberrypi.html">Raspberry Pi</a>
<a class="dropdown-item" href="/tecnologia/restsoap.html">Rest y Soap</a>
<a class="dropdown-item" href="/cs/bpm.html">BPM</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/formacion/formacion.html">Cursos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cnt-section">Contacto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.html#sn-section">Sobre Nosotros</a>
</li>
</ul>
</nav>
`;
} else {
document.getElementById("navigation-bar").innerHTML = `
<i class="fa fa-bars mobile-btn" aria-hidden="true" data-toggle="modal" data-target="#exampleModal2"></i>
<div style="z-index: 100000000;" class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog modal-dialog-slideout modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Menu</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul class="navbar-nav">
<li class="nav-item">
<h5>
<a class="nav-link no-link" href="/index.html" target="_self" >Inicio</a>
</h5>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<h5 class="panel-heading" data-toggle="collapse" data-target="#collapseAvail" data-parent="#accordion" href="#collapseOne"
aria-expanded="true" aria-controls="collapseAvail" role="tab" id="headingOne">
<a data-toggle="collapse" data-target="#collapseAvail" data-parent="#accordion" href="#collapseOne"
aria-expanded="true" aria-controls="collapseAvail" class="d-block no-link">
<i class="panel-heading fa fa-chevron-down pull-right"></i> Tecnología
</a>
</h5>
<div id="collapseAvail" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/aplicacionesmoviles.html">
Aplicaciones Móviles
</a>
</div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/arduino.html">
Arduino
</a>
</div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/bottelegram.html">
Bot Telegram
</a>
</div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/delphi.html">
Delphi
</a>
</div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/elkstack.html">
ELK Stack
</a>
</div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/machinelearning.html">
Machine Learning
</a>
</div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/python.html">
Python
</a>
</div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/raspberrypi.html">
Raspberry Pi
</a>
</div>
<div class="col-xs-12">
<a class="col-xs-12 no-line-link" href="/tecnologia/restsoap.html">
Rest y Soap
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<h5>
<a class="nav-link no-link" href="/formacion/formacion.html" aria-label="Close">Cursos</a>
</h5>
</li>
<h5>
<a class="nav-link no-link" href="#cnt-section" data-dismiss="modal" aria-label="Close">Contacto</a>
</h5>
</li>
<li class="nav-item">
<h5>
<a class="nav-link no-link" href="/index.html#sn-section">Sobre Nosotros</a>
</h5>
</li>
</ul>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>`
}
}
</script>
<!-- <script src="../https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script> -->
<script>
$(document).ready(function () {
if (renderPage) {
$('body').addClass('loaded');
}
// https://css-tricks.com/snippets/jquery/smooth-scrolling/
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top + 1
}, 1000, function () {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
});
</script>
</body>
</html>