<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#1faf71">
    <link rel='shortcut icon' href='images/index/icono_h2.png' type='image/vnd.microsoft.icon'>
    <title>ITTEC | Tecnología Inteligente</title>

    <meta id="meta_description" name="description" />
    <meta name="abstract" content="Tecnología Inteligente" />
    <meta id="meta_keywords" name="keywords" />
    <link id="meta_img" rel="image_src"/>
    <link id="meta_canonical" rel="canonical"/>

    <!-- Para twitter -->
    <meta property="og:site_name" content="ITTEC" />
    <meta property="og:type" content="article" />
    <meta id="og_title" property="og:title"/>
    <meta id="og_url" property="og:url"/>
    <meta id="og_description" property="og:description" />
    <meta id="og_img" property="og:image"/>
    
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@ittec" />
    <meta name="twitter:creator" content="@ittec" />
    <meta id="twitter_url" name="twitter:url" />
    <meta id="twitter_title" name="twitter:title"/>
    <meta id="twitter_description" name="twitter:description"/>
    <meta id="twitter_img" name="twitter:image" />
    <meta name="twitter:image:width" content="560"/>
    <meta name="twitter:image:height" content="281"/>
    <meta id="twitter_alt" name="twitter:image:alt"/>

    <!-- slick -->
    <link rel="stylesheet" type="text/css" href="css/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="css/slick/slick-theme.css" />
    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- style this page -->
    <link href="css/style-blog.css" rel="stylesheet">
    <link href="css/lang-selector.css" rel="stylesheet">
    <!-- Para animaciones -->
    <link href="css/animations.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <!-- Para la transición -->
    <script src="lib/jquery.js"></script>
    <script src="lib/jquery.bgswitcher.js"></script>
    <!-- Skeleton Loader -->
    <link rel="stylesheet" href="css/placeholder-loading.min.css">
</head>

<body>
    <header id="header-vuejs">
        <?php  include 'header2.html' ?>
    </header>
    <!-- Skeleton-loader -->
    <div class="container-fluid skeleton-loading">
        <!-- Header -->
        <div class="row skeleton-header">
            <div class="hd-skeleton-logo pulse" style="width: 18rem;">
                <div class="card-body img-hd">
                    <div class="ph-picture" style="height: 75px;"></div>
                </div>
            </div>
            <div class="hd-skeleton-card pulse">
                <div class="card-body">
                    <div class="ph-row">
                        <div class="ph-col-10 big"></div>
                    </div>
                </div>
            </div>
            <div class="hd-skeleton-card pulse">
                <div class="card-body">
                    <div class="ph-row">
                        <div class="ph-col-10 big"></div>
                    </div>
                </div>
            </div>
            <div class="hd-skeleton-card pulse">
                <div class="card-body">
                    <div class="ph-row">
                        <div class="ph-col-10 big"></div>
                    </div>
                </div>
            </div>
            <div class="hd-skeleton-search pulse">
                <div class="card-body">
                    <div class="ph-row">
                        <div class="ph-picture" style="height: 41px;"></div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
    <div class="container skeleton-loading">
            <div class="ph-row pulse">
                <div class="ph-col-4 empty"></div>
                <div class="ph-col-4 big"></div>
                <div class="ph-col-2 empty"></div>
            </div>
            <div class="row">
                <div class="container col-6 skeleton-video pulse">
                    <div class="ph-picture video-sk" style="height:300px;"></div>
                    <div class="ph-row">
                        <div class="ph-col-2 "></div>
                        <div class="ph-col-2 empty"></div>
                        <div class="ph-col-8 "></div>
                    </div>
                </div>
            </div>
            <div class="ph-row pulse">
                <div class="ph-col-12 empty"></div>
                <div class="ph-col-12"></div>
                <div class="ph-col-10"></div>
                <div class="ph-col-8"></div>
                <div class="ph-col-10"></div>
                <div class="ph-col-12"></div>
            </div>
            <div class="ph-row pulse">
                <div class="ph-col-12 empty"></div>
                <div class="ph-col-12"></div>
                <div class="ph-col-10"></div>
                <div class="ph-col-8"></div>
                <div class="ph-col-10"></div>
                <div class="ph-col-12"></div>
            </div>
            <div class="ph-row pulse">
                <div class="ph-col-12 empty"></div>
                <div class="ph-col-2 empty"></div>
                <div class="ph-col-8 big"></div>
            </div>

            <div class="container skeleton-loading">
                <div class="row">
                    <div class="col container pulse">
                        <div class="ph-row">
                            <div class="ph-col-6 big"></div>
                            <div class="ph-col-6 empty"></div>
                            <div class="ph-col-6 big"></div>
                            <div class="ph-col-6 empty"></div>
                        </div>
                        <div class="ph-row">
                            <div class="ph-col-8"></div>
                            <div class="ph-col-10"></div>
                            <div class="ph-col-12"></div>
                            <div class="ph-col-10"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-12 big empty"></div>
                        </div>
                        <div class="ph-row">
                            <div class="ph-col-8"></div>
                            <div class="ph-col-10"></div>
                            <div class="ph-col-12"></div>
                            <div class="ph-col-10"></div>
                            <div class="ph-col-8"></div>
                        </div>
                    </div>
                    <div class="container col skeleton-video pulse">
                        <div class="ph-picture video-sk" style="height:300px;"></div>
                    </div>
                </div>
            </div>
    </div>
    <div class="skeleton-loading d-flex flex-row justify-content-center alig-items-center">
            <div class="row">
                <div class="pulse skeleton-loading" style="width: 18rem;">
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-10 big"></div>
                            <div class="ph-col-10"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-10"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-12"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-6"></div>
                        </div>
                    </div>
                </div>
                <div class="pulse skeleton-loading" style="width: 18rem;">
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-10 big"></div>
                            <div class="ph-col-2 empty big"></div>
                            <div class="ph-col-6"></div>
                            <div class="ph-col-4 empty"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-10"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-10"></div>
                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-4"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-12"></div>
                        </div>
                    </div>
                </div>
                <div class="pulse skeleton-loading" style="width: 18rem;">
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-10 big"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-picture ph-col-2 big"></div>
                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-picture ph-col-2 big"></div>
                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-10 big"></div>
                            <div class="ph-col-12 empty"></div>
                            <div class="ph-col-12"></div>
                        </div>
                    </div>
                </div>
                <div class="pulse skeleton-loading" style="width: 18rem;">
                    <div class="card-body">
                        <div class="ph-picture img-sk"></div>
                    </div>
                </div>            
            </div>
    </div>
    <!-- Fin Skeleton-Loader -->
    <div id="content-principal" class="section-blog">
        <section id="publicaciones-blog">
            <main role="main">
                <div class="banner">
                    <img class="img-fluid" src="images/blog/banner.png" alt="Blog ITTEC">
                    <div class="container txt-banner">
                        <h2 class="title-blog">{{title}}</h2>
                        <span class="span-blog">Innovación | Tendencias | Tecnología</span>
                        <span class="span-blog-2">Estrategía | Cumplimiento Fiscal</span>
                    </div>
                </div>
            </main>
            <div class="languajes" id="idioma">
                <div class="lang-menu">
                    <div id="select" class="selected-lang">
                    </div>
                    <ul id="opciones">
                        <li>
                            <a href="#" @click="cambiarIdioma('es');guardarIdioma('es')" class="es">{{ $t("message.esp") }}</a>
                        </li>
                        <li >
                            <a href="#"  @click="cambiarIdioma('en');guardarIdioma('en')" class="en">{{ $t("message.eng") }}</a>
                        </li>                    
                    </ul> 
                </div>
            </div>
            <div class="container mt-5">
                <div class="row">
                    <div class="col-md-10">
                        <div class="row">
                            <div class="col-md-12">
                                <article class="blog-post-wrapper container">
                                    <b-button variant="outline-green" class="mb-3" @click="regresar();">
                                        <b-icon icon="arrow-left-circle-fill" @click="regresar();"></b-icon>{{txtregresar}}
                                    </b-button>
                                    <div class="row">            
                                        <div class="col-md-12 row">
                                            <div class="col-md-6">
                                                <div class="card-header">
                                                    <img class="img-fluid" :src="articulo.imagen" :alt="articulo.altImagen">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="card-body-p container">
                                                    <h4 class="title-article">{{articulo.titulo}}</h4>
                                                    <span class="data-article">{{articulo.autor}} | {{articulo.fecha}}</span>
                                                    <div class="info-article pt-1" v-html="articulo.contenido">

                                                    </div>
                                                </div>
                                                <!-- <div class="text-right">
                                                    <a href="javascript: void(0)" @click="compartirFacebook()">
                                                        <img src="iconos/facebook.png" alt="Facebook" width="30px">
                                                    </a>    
                                                    <a href="javascript: void(0)" @click="compartirTwitter()">
                                                        <img src="iconos/twitter.png" alt="Twitter" width="30px">
                                                    </a>
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                    <!-- Últimas publicaciones -->
                    <div class="col-md-2">
                        <div class="container gray-container mt-2 p-1 mb-3">
                            <h5 class="p-2">{{txtPubRecie}}</h5>
                            <articulos-recientes v-for="publicacion in filtrolatestPub" :key="publicacion.id" v-bind:publicacion="publicacion"></articulos-recientes>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <footer id="footer-vuejs">
        <?php include 'footer.html' ?>
    </footer>
    <div>
        <?php include 'modal-boletin.html' ?>
    </div>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <!-- Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- Bootstap Vue -->
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
    <!-- Bootstap Vue Icons -->
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
    <!-- Vue i18n -->
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
    <!-- Instancias de vue -->
    <!-- <script src="js/articulo-vue.js"></script> -->
    <script src="js/blog-vue.js"></script>
    <script src="lang/footer-vue.js"></script>
    <script src="lang/header-vue.js"></script> 
    <script src="js/boletin-vue.js"></script> 
    <script>
        
        $(window).load(function(){ $('header,#content-principal,#bloque,#bloque1,footer').css('display','block'); $('.skeleton-loading').css('display','none'); $('.lista-menu #optB').addClass('active');}); $("#optA").mouseout(function(){ $(this).removeClass('active');}); $("#optC").mouseout(function(){ $(this).removeClass('active');}); $("#submenu-construye").mouseenter(function(){ $("#optB").addClass('active');}); $(".submenu-conoce").mouseenter(function(){ $("#optA").addClass('active');}); $('#content-principal').mouseenter(function(){ $('.submenu-conoce').hide('slow'); $('.submenu-construye').hide('slow'); $("#optA").removeClass('active');})

    </script>
</body>
</html>