Difference between revisions of "Template:Sidebar"

From Sinfronteras
Jump to: navigation, search
Line 1: Line 1:
−
<accesscontrol>
+
{{#tag:html|
−
Autoconfirmed users
+
  <style>
−
</accesscontrol>
+
  /* MediaWiki page configurations */
−
{{#css:
+
  #content { margin: -1px 0px 0px 180px; }
 +
  #left-navigation { margin-left:180px }
 +
  <!-- #p-namespaces { margin-left: 124px !important; } -->
 +
  #footer { margin: 0 0 0 180px }
 +
  #bodyContent { z-index: 10 }
 +
  .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
 +
 
 +
  #menuToggle ul {
 +
      margin-top:    20px !important;
 +
      margin-bottom: 35px !important;
 +
  }
 +
  #menuToggle li {
 +
      font: 14px / 22.4px sans-serif;
 +
      margin-top:    0px  ;
 +
      margin-bottom:  15px ;
 +
  }
 +
  #menuToggle ul .first-li  {
 +
      margin-top: -20px  !important;
 +
  }
 +
  first-li
 +
  #menuToggle li span { }
 +
  #menuToggle a, li {
 +
      font: 14px / 22.4px sans-serif;
 +
  }
 +
 
 
   .base-li-1 {
 
   .base-li-1 {
−
       margin-bottom: 12px;
+
       margin-bottom: -5px !important;
 +
  }
 +
  .desplaza {
 +
      margin-top: -13px !important;
 +
      padding-right: 30px !important;
 +
  }
 +
  div#toc.toc {
 +
      font-size: 12pt;
 +
      margin-top: -4.5pt;
 +
      background: rgba(255, 255, 255, 1);
 +
      margin-right: 12pt;
 +
  }
 +
  .tocUl {
 +
      overflow-y: scroll  !important;
 +
      overflow-x: scroll  !important;
 +
      max-height: calc(100vh - 150px);
 +
      width: 350px !important;
 +
      padding-bottom: 30px !important;
 +
      white-space: nowrap !important;
 +
  }
 +
  .tocUl a {
 +
      padding-right: 25px !important;
 +
  }
 +
  .tochidden {
 +
      height: 4pt !important;
 +
  }
 +
  .titulo1-text {
 +
      font-size: 18px !important;
 +
  }
 +
  .titulo2-text {
 +
      font: 700 14px / 22.4px sans-serif !important;
 +
  }
 +
  .titulo1-text-marco {
 +
      padding-left: 10px !important;
 +
      padding-right: 40px !important;
 +
  }
 +
  .titulo1-marco-oneline {
 +
      padding-right: 0px !important;
 +
      padding-left: 0px !important;
 +
      margin-right: -5px !important;
 +
      margin-left: 0px !important;
 +
      min-height: 35pt !important;
 +
      margin-top:-30pt !important;
 +
  }
 +
  .titulo1-marco-twolines {
 +
      padding-right: 0px !important;
 +
      padding-left: 0px !important;
 +
      margin-right: -5px !important;
 +
      margin-left: 0px !important;
 +
      min-height: 50pt !important;
 +
      margin-top:-47pt !important;
 +
  }
 +
  .titulo1-marco-color {
 +
      background: #9595ab !important;
 +
  }
 +
  .titulo1-color {
 +
      color: white !important;
 +
  }
 +
  .marco1-ext {
 +
      width: 100% !important;
 +
      padding: 0px 0px 0px 0px !important;
 +
      background: #e3e3e8 !important;
 +
  }
 +
  .marco1-int {
 +
      background: #e3e3e8 !important;
 +
  }
 +
  .marco1-ext .mw-editsection {
 +
      display: none !important;
 +
  }
 +
  .divline1 {
 +
      padding: 0;
 +
      border: 0;
 +
      display: block;
 +
      margin-top: -7px !important;
 +
      margin-bottom: 30px !important;
 +
      margin-right: 0px !important;
 +
      margin-left: 2px  !important;
 +
      background-color: white;
 +
      height:1.2pt
 +
  }
 +
 
 +
 
 +
  /* Sidebar (Pure CSS) */
 +
  body {
 +
 
 +
  }
 +
  #menuToggle {
 +
      display: block;
 +
      position: relative;
 +
      top: -145px;
 +
      margin-left: -205px;
 +
      padding-left: 10px;
 +
      -webkit-user-select: none;
 +
      user-select: none;
 +
  }
 +
  #menuToggle a {
 +
      text-decoration: none;
 +
      color: #232323;
 +
      transition: color 0.3s ease;
 +
  }
 +
  #menuToggle a:hover { color: tomato; }
 +
  #menuToggle input {
 +
      display: block;
 +
      width: 40px;
 +
      height: 32px;
 +
      position: absolute;
 +
      top: -7px;
 +
      left: -5px;
 +
      cursor: pointer;
 +
      opacity: 0; /* hide this */
 +
      z-index: 12; /* and place it over the hamburger */
 +
      -webkit-touch-callout: none;
 +
  }
 +
  /* Just a quick hamburger */
 +
  #menuToggle .hamb {
 +
      display: block;
 +
      width: 33px;
 +
      height: 6px;
 +
      margin-bottom: 4px;
 +
      position: relative;
 +
      background: #999191;
 +
      border-radius: 3px;
 +
      z-index: 11;
 +
      transform-origin: 4px 0px;
 +
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 +
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 +
                  opacity 0.55s ease;
 +
  }
 +
  #menuToggle span:first-child {
 +
      transform-origin: 0% 0%;
 +
  }
 +
  #menuToggle span:nth-last-child(2) {
 +
      transform-origin: 0% 100%;
 +
  }
 +
  /* Transform all the slices of hamburger into a crossmark */
 +
  #menuToggle input:checked ~ span {
 +
      opacity: 1;
 +
      transform: rotate(45deg) translate(-2px, -1px);
 +
      background: #837e7e;
 +
  }
 +
  /* But let's hide the middle one */
 +
  #menuToggle input:checked ~ span:nth-last-child(3) {
 +
      opacity: 0;
 +
      transform: rotate(0deg) scale(0.2, 0.2);
 +
  }
 +
  /* Ohyeah and the last one should go the other direction */
 +
  #menuToggle input:checked ~ span:nth-last-child(2) {
 +
      transform: rotate(-45deg) translate(0, -1px);
 +
  }
 +
 
 +
  /* Make this absolute positioned at the top left of the screen */
 +
  #menu {
 +
      position: absolute;
 +
      width: 300px;
 +
      margin: -55px 0 0 -10px;
 +
      padding: 50px 0px 30px 0px;
 +
      background: #ededed;
 +
      list-style-type: none;
 +
      -webkit-font-smoothing: antialiased;
 +
      /* to stop flickering of text in safari */
 +
      transform-origin: 0% 0%;
 +
      <!-- transform: translate(-100%, 0); -->
 +
      display: none;
 +
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 +
  }
 +
  #menu li {
 +
      padding: 10px 0 0 0;
 +
      font-size: 22px;
 
   }
 
   }
−
}}
+
  /* And let's slide it in from the left */
 +
  #menuToggle input:checked ~ #menu {
 +
      <!-- transform: none; -->
 +
      display: block;
 +
  }
 +
 
  
−
<section begin=base />
+
  /* Tab Menu */
−
<div class="marco1-ext" style="padding: 0px 20px 20px 20px; margin-right: 0px; margin-left: 0px; background-color: #ededf2; width:67%; min-height:50px">
+
  .button{
−
<div class="marco1-int" style="padding: 0px; margin-right: 0px; margin-left: 0px; background-color: #ededf2;">
+
      font-size: 14px;
−
<div class="titulo1-text-marco">
+
      color: inherit;
−
<span class="titulo1-text titulo1-color" style="font: 800 21px / 27.3px 'Linux Libertine', Georgia, Times, serif; color:#B8860B; font-weight: bold">Base</span>
+
      background-color :inherit;
−
</div>
+
      padding: 8px 0px 8px 0px;  
−
<div class="titulo1-marco-oneline titulo1-marco-color" style="padding-right: 0px; margin-right: -20px; margin-left: -20px; background-color: #E6E6FA; min-height:40pt; margin-top:-37pt"> </div>
+
      border: none;
−
<div style="margin-top: -32px;" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
+
      outline: 0;
−
<br />
+
      cursor: pointer;
 +
  }
 +
  .bottom-selected { background-color: #f44336 !important }
 +
  .area {
 +
      color: black;
 +
      padding: 5px 0px 5000px 3px;
 +
      border: 0px solid #ccc !important;
 +
  }
 +
  .izquierda {float:  left;   width:100px; text-align: center;}
 +
  .derecha  {float:  right;  width:100px; text-align: center;}
 +
  .centro    {margin: 0 auto; width:100px; text-align: center;}
 +
 
 +
  </style>
 +
 
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
−
<div style="margin-top: 20px">
+
  <script>
−
<ul style="font-size: 13pt">
+
  function openCity(evt, cityName) {
−
<li class="base-li-1"> <html> <a href="Mis páginas"> <span style="color:#B8860B; font-size:13pt; letter-spacing: 0.3px;"><span style="margin-right: 3px">Mis</span> páginas</span> </a> </html> </li>
+
      var i, x, tablinks;
 +
      x = document.getElementsByClassName("city");
 +
      for (i = 0; i < x.length; i++) {
 +
          x[i].style.display = "none";
 +
      }
 +
      tablinks = document.getElementsByClassName("tablink");
 +
      for (i = 0; i < x.length; i++) {
 +
          tablinks[i].className = tablinks[i].className.replace(" bottom-selected", "");
 +
      }
 +
      document.getElementById(cityName).style.display = "block";
 +
      evt.currentTarget.className += " bottom-selected";
 +
  }
 +
  </script>
 +
 
 +
  <nav id="MySidebar" role="navigation" style="position: fixed;" class="oculto">
 +
      <div id="menuToggle">
 +
          <!--
 +
          A fake / hidden checkbox is used as click reciever,
 +
          so you can use the :checked selector on it.
 +
          -->
 +
          <input id="inputButton" type="checkbox" onclick="myFunction()"/>
 +
         
 +
          <!--
 +
          Some spans to act as a hamburger.
 +
          -->
 +
         
 +
          <span class="hamb"></span>
 +
          <span class="hamb"></span>
 +
          <span class="hamb"></span>
 +
         
 +
          <!--
 +
          Too bad the menu has to be inside of the button
 +
          but hey, it's pure CSS magic.
 +
          -->
 +
          <div id="menu">
 +
             
 +
              <!--Tap Menu -->
 +
              <div style="padding: 10px 0px 0px 0px;">
 +
                  <div style="color:#fff !important; background-color: #000 !important">
 +
                      <button class="button izquierda  tablink bottom-selected" onclick="openCity(event,'PE')"    > PE    </button>
 +
                      <button class="button centro  tablink"                    onclick="openCity(event,'Tools')" > Tools  </button>
 +
                      <button class="button derecha tablink"                    onclick="openCity(event,'Others')"> Others </button>
 +
                  </div>
 +
                 
 +
                  <div id="PE" class="area city">
 +
                    <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
 +
                    <!-- {{#lst:Mis páginas|Carrera1}} -->
 +
                    <div style="margin-bottom: 20px;  margin-top:10px" > {{#lst:Mis páginas|base}}</div>
 +
                    <div style="margin-bottom: 42px;  margin-top: 2px" > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 +
                    <div style="margin-bottom: 50px; margin-top: 2px" > {{#lst:Mis páginas|social_sciences0}}</div>
 +
                    <div style="margin-bottom: 30px;  margin-top: 2px" > {{#lst:Mis páginas|musica0}}</div>
 +
                    <div style="margin-bottom: 150px; margin-top:-5px" > {{#lst:Mis páginas|Carrera0}}</div>
 +
                    </div>
 +
                  </div>
 +
                 
 +
                  <div id="Tools"  class="area city" style="display:none">
 +
                      <div>Tools</div>
 +
                      <p> Tools is the capital of France.</p>
 +
                  </div>
 +
                 
 +
                  <div id="Others"  class="area city" style="display:none">
 +
                      <div>Others</div>
 +
                      <p> Others is the capital of Japan.</p>
 +
                  </div>
 +
              </div>
 +
             
 +
              <!-- <a href="#"><li>Home</li></a>
 +
              <a href="#"><li>About</li></a>
 +
              <a href="#"><li>Info</li></a>
 +
              <a href="#"><li>Contact</li></a>
 +
              <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> -->
 +
             
 +
          </div>
 +
      </div>
 +
  </nav>
  
−
<li class="base-li-1"> <html> <a href="Página base"> <span style="color:#B8860B; font-size:13pt;">Página base</span> </a> </html> </li>
+
  <script>
 +
      function myFunction() {
 +
          var checkBox = document.getElementById("inputButton");
 +
          if (checkBox.checked == true){
 +
              $('#content').css('margin-left', '300px')
 +
              $('#left-navigation').css({'cssText':'margin-left:300px'})
 +
              $('#menuToggle').css('margin-left', '-325px')
 +
              $('#footer').css('margin-left', '308px')
 +
          } else {
 +
              $('#content').css('margin-left', '180px')
 +
              $('#left-navigation').css({'cssText':'margin-left:180px'})
 +
              $('#menuToggle').css('margin-left', '-205px')
 +
              $('#footer').css('margin-left', '180px')
 +
          }
 +
      }
  
−
<li class="base-li-1"> <html> <a href="/view/Template:Sidebar"> <span style="color:#B8860B; font-size:13pt; letter-spacing: 0.8px;">Sidebar</span> </a> </html> </li>
+
      function checkUser(){
 +
          if ( document.getElementById('pt-userpage') != null ) {
 +
              if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
 +
                  $('.oculto').css('display','block')
 +
                  $('.link-hidden').css('pointer-events','auto')
 +
                  // $('body').css('background','red');
 +
              }else{
 +
                  // $('body').css('background','blue');   
 +
              }
 +
          }else{
 +
              // $('body').css('background','blue');
 +
              // $('#hideThis').show();
 +
          }
 +
      }
 +
     
 +
      // Shortkey: https://www.techiedelight.com/create-keyboard-shortcuts-with-javascript-jquery-hotkeys-mousetrap-library/
 +
      // For some reason, in MediaWiki pages, the && operator is not being interpreted by the web browser
 +
      // as such in «keydown» functions. The web browser is reading «&amp;», instead of «&&» which generates a systax error.
 +
      // To work around this problem I just broke the function using «2» if statements:
  
−
<li class="base-li-1"> <html> <a href="Timeline"> <span style="color:#B8860B; font-size:13pt;">Timeline</span> </a> </html> </li>
+
      // $(document).keydown(function(event) {
 +
      //  if ( (event.ctrlKey) && (event.which === 88) ) {
 +
      //    alert('Alt + X pressed!')
 +
      //    e.preventDefault()
 +
      //   }
 +
      // });
  
−
<li class="base-li-1"> <html> <a href="Desktop"> <span style="color:#B8860B; font-size:13pt;">Desktop</span> </a> </html> </li>
+
      $(document).keydown(function(event) {
 +
        if ( event.ctrlKey ) {
 +
          if ( event.which === 66 )  { // Check key codes here: https://css-tricks.com/snippets/javascript/javascript-keycodes/
 +
            // alert('Ctrl + B pressed!')
 +
            var checkBox = document.getElementById("inputButton");
 +
            if (checkBox.checked == true){
 +
              checkBox.checked = false
 +
            }else{
 +
              checkBox.checked = true
 +
            }
 +
            myFunction()
 +
            e.preventDefault()
 +
          }
 +
        }
 +
      });
  
−
<li class="base-li-1"> <html> <a href="CV"> <span style="color:#B8860B; font-size:13pt;">CV</span> </a> </html> </li>
+
      // Esta es otra forma de hacerlo
−
</ul>
+
      // document.addEventListener("keydown", function(event) {
 +
      //  if (event.ctrlKey && event.code === "KeyB") {
 +
      //    alert('Alt + X pressed!');
 +
      //     event.preventDefault();
 +
      //   }
 +
      // });
  
−
</div>
+
      // function moveSidebarToBody() {
−
</div>
+
      //     document.body.appendChild(document.getElementById('MySidebar'))
−
</div>
+
      // }
−
</div>
 
−
<section end=base />
 
  
−
<section begin=formal_natural_and_applied_sciences0 />
+
      function removeCSS() {
−
<div class="marco1-ext" style="padding: 0px 20px 20px 20px; margin-right: 0px; margin-left: 0px; background-color: #ededf2; width:67%; min-height:50px">
+
        $('#menuToggle li').css({'margin-bottom':'','margin-top':''})
−
<div class="marco1-int" style="padding: 0px; margin-right: 0px; margin-left: 0px ;background-color: #ededf2;">
+
      }
−
<div class="titulo1-text-marco">
 
−
<div><html><a href="/view/Formal Natural and Applied sciences"> <span class="titulo1-text" style="font: 700 21px / 27.3px 'Linux Libertine', Georgia, Times, serif; color:white; font-weight: bold">Formal, Natural/Pure and Applied sciences</span> </a></html></div>
 
−
</div>
 
−
<div class="titulo1-marco-twolines" style="padding-right: 0px; margin-right: -20px; margin-left: -20px; background-color: #4081de; min-height:40pt; margin-top:-32pt"> </div>
 
−
<section begin=formal_natural_and_applied_sciences />
 
−
<div style="margin-top: -37px;" class="mw-collapsible" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<br /> <br />
 
−
<section begin=formal_natural_and_applied_sciences1 />
 
−
<div class="mw-collapsible mw-collapsed collapse-item" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul>
 
−
<li>
 
−
<div style="text-align:left;"> <html> <a href="My projects portfolio"> <p class="titulo2-text desplaza" style="color:#0000ff; font-weight: bold; margin-top:-5pt">My projects portfolio</p> </a> </html> </div>
 
−
</li>
 
−
</ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=it />
 
−
<section begin=portfolio />
 
−
<ul style="padding-left:23px; margin-top:-10pt">
 
−
<section begin=portfolio_data_science /> <div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-"> <li class="first-li"> <html> <a href="Developing a Web Dashboard for analyzing Amazon's Laptop sales data"> <p class="desplaza">Developing a Web Dashboard for analyzing Amazon's Laptop sales data</p> </a> </html> </li>
 
−
<div class="mw-collapsible-content">
 
−
<li style="margin-bottom: 10px; margin-top: 10px; margin-left: 20px"> Try the App at http://dashboard.sinfronteras.ws </li>
 
−
<li style="margin-bottom: 10px; margin-top: 10px; margin-left: 20px"> Github repository: https://github.com/adeloaleman/AmazonLaptopsDashboard </li>
 
−
<li style="margin-bottom: 30px; margin-left: 20px"> A demo video is available at https://www.youtube.com/watch?v=WrvEoA9DD4g </li>
 
−
</div>
 
−
</div>
 
  
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
+
      function collapseAll() {
−
<li style="margin-bottom: 10px; margin-top: 30px;"> <html> <a href="Supervised Machine Learning for Fake News Detection"> <p class="desplaza">Supervised Machine Learning for Fake News Detection</p> </a> </html> </li>
+
          $(".mw-collapsible").addClass("mw-collapsed");
−
<div class="mw-collapsible-content">
+
      }
−
<li style="margin-bottom: 10px; margin-top: 10px; margin-left: 20px"> {{#lst:Supervised_Machine_Learning_for_Fake_News_Detection|fake_news_result1}} </li>
 
−
<li style="margin-bottom: 30px; margin-left: 20px"> {{#lst:Supervised_Machine_Learning_for_Fake_News_Detection|fake_news_result2}}. </li>
 
−
</div>
 
−
</div>
 
  
−
<li style="margin-bottom: 10px; margin-top: 30px;"> <html> <a href="Social Media Sentiment Analysis using Twitter Data"> <p class="desplaza">Social Media Sentiment Analysis using Twitter Data</p> </a> </html> </li> <section end=portfolio_data_science />
+
      $(document).ready( function() {
−
 
+
          $('#totalItems, #enteredItems').keyup(function(){
−
<section begin=portfolio_programming  /> <div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
+
              checkUser()
−
<li style="margin-bottom: 10px; margin-top: 30px;"> <html> <a href="Java Desktop App - Zoo Management System"> <p class="desplaza">Java Desktop App - Zoo Management System</p> </a> </html> </li>
+
              collapseAll()
−
<div class="mw-collapsible-content">
+
              removeCSS()
−
In this project, we have created a GUI Java (Swing) Application for a Zoo Management System.
+
              // moveSidebarToBody()
−
<li style="margin-bottom: 10px; margin-left: 20px"> You can try the application by downloading the Java Jar file from this link: http://wiki.sinfronteras.ws/images/2/27/ZooManagementSystem.jar </li>
+
          });  
−
<li style="margin-bottom: 5px; margin-left: 20px"> Github repository: https://github.com/adeloaleman/JavaDesktopApp-ZooManagementSystem </li>
+
          checkUser()
−
</div>
+
          collapseAll()
−
</div>
+
          removeCSS()
−
 
+
          // moveSidebarToBody()
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
+
      });
−
<li style="margin-bottom: 10px; margin-top: 30px"> <html> <a href="Java Desktop App - Stock Market Simulator"> <p class="desplaza">Java Desktop App - Stock Market Simulator</p> </a> </html> </li>
+
  </script>
−
<div class="mw-collapsible-content">
+
}}
−
In this project, we have created a GUI Java (Swing) Application that simulates a trading day of a simplified model of a stock market.
 
−
<li style="margin-bottom: 10px; margin-left: 20px"> You can try the application by downloading the Java Jar file from this link: http://wiki.sinfronteras.ws/images/0/00/SMSimulator.jar </li>
 
−
<li style="margin-bottom: 5px; margin-left: 20px"> Github repository: https://github.com/adeloaleman/JavaDesktopApp-StockMarketSimulator </li>
 
−
</div>
 
−
</div>
 
−
 
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<li style="margin-bottom: 10px; margin-top: 30px;"> <html> <a href="Web App - Clone of Twitter"> <p class="desplaza">Web App - Clone of Twitter</p> </a> </html> </li>
 
−
<div class="mw-collapsible-content">
 
−
<li style="margin-bottom: 10px; margin-left: 20px"> Visit the Web App at http://62.171.143.243 </li>
 
−
<li style="margin-bottom: 5px; margin-left: 20px"> Github repository: https://github.com/adeloaleman/WebApp-CloneOfTwitter </li>
 
−
<li style="margin-bottom: 5px; margin-left: 20px"> This Application was developed using: </li>
 
−
<li style="margin-bottom: 5px; margin-left: 40px"> '''Back-end:''' Node.js (Express) (TypeScript) </li>
 
−
<li style="margin-bottom: 30px; margin-left: 40px"> '''Front-end:''' React (TypeScript) </li>
 
−
</div>
 
−
</div>
 
−
 
 
−
<li style="margin-bottom: 30px; margin-top: 30px"> <html> <a href="Web App - Library Management System"> <p class="desplaza">Web App - Library Management System</p> </a> </html> </li> <section end=portfolio_programming  />
 
−
 
 
−
<section begin=portfolio_others  /> <li style="margin-bottom: 30px;"> <html> <a href="Automatic backup in the cloud using shell scripting"> <p class="desplaza">Automatic backup in the cloud using shell scripting</p> </a> </html> </li>
 
−
 
 
−
<li style="margin-bottom: 30px;"> <html> <a href="Modelado_sísmico"> <p class="desplaza">Seismic Wave Propagation Modelling</p> </a> </html> </li>
 
−
<!-- <li style="margin-bottom: 30px;"><html> <a href="Seismic Wave Propagation Modelling"> Seismic Wave Propagation Modelling </a> </html> </li> -->
 
−
<section end=portfolio_others  />
 
−
</ul>  
 
−
</div>
 
−
</div>
 
−
<section end=portfolio />
 
−
 
 
−
 
 
−
<div class="divline1" style="padding: 0; border: 0; display: block; margin-top:-10px; margin-right: -20px; margin-left: -20px; background-color: white; height:1.3pt"> </div>
 
  
  
−
<div class="mw-collapsible" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul>
 
−
<li style="margin-bottom: -10px">
 
−
<div style="text-align:left;"> <html> <a href="Computer Science and IT"> <p class="titulo2-text desplaza" style="color:#0000ff; font-weight: bold; margin-top:-5pt">Computer Science and IT</p> </a> </html> </div>
 
−
</li>
 
−
</ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=it />
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:23px;"><li class="first-li"> <div style="text-align:left"> <html> <a href="Programming and Software Development"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Programming and Software Development</p> </a> </html> </div> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=programming />
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> '''Some of the languages I have worked with:''' </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=languages />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Python"> Python </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Python for Data Science"> Python for Data Science </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Dash - Plotly"> Dash - Plotly </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Scrapy"> Scrapy </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Manim"> Manim </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="JavaScript"> JavaScript </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="React"> React </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Node.js - Express.js"> Node.js - Express.js </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Web Development#HTML"> HTML </a> </html>  &  <html> <a href="Web Development#CSS"> CSS </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Java"> Java </a> </html> </li></ul> 
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Java GUI Programming"> Java GUI Programming </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="MySQL"> SQL </a> </html> </li></ul> 
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Shell Scripting"> Shell Scripting </a> </html> </li></ul> 
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="R"> R </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Web Development#PHP"> PHP </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="C"> C </a> </html> </li></ul> 
 
−
<section end=languages />
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<section begin=programming1 />
 
−
<ul style="padding-left:45px;"><li> '''<html> <a href="Multi-Paradigm Programming and Scripting"> Multi-Paradigm Programming and Scripting </a> </html>''' </li></ul>
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> '''<html> <a href="Object-Oriented Concepts and Constructs"> Object-Oriented Concepts and Constructs </a> </html>''' </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=objectOriented />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#SOLID Principles"> SOLID Principles </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Class vs Object vs Instance"> Class vs Object vs Instance </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Methods"> Methods </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Variables"> Variables </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Modifiers"> Modifiers </a> </html> </li></ul> 
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Four fundamental OOP concepts"> Four fundamental OOP concepts </a> </html> </li></ul> 
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Encapsulation"> Encapsulation </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Inheritance"> Inheritance </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Polymorphism"> Polymorphism </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Abstraction"> Abstraction </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Nested classes"> Nested classes </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Upcasting - Downcasting"> Upcasting - Downcasting </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Errors and Exceptions"> Errors and Exceptions </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Passing Object References"> Passing Object References </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Connecting to a MySQL database using Java"> Connecting to a MySQL database using Java </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Threads"> Threads </a> </html> </li></ul> 
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Object-Oriented Concepts and Constructs#Serialization"> Serialization </a> </html> </li></ul> 
 
−
 
−
</div>
 
−
</div>
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:67px;"><li> '''<html> <a href="Object Orientation with Design Patterns"> Object Orientation with Design Patterns </a> </html>''' </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object Orientation with Design Patterns#Creational Patterns"> Creational Patterns </a> </html> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Singleton Pattern"> Singleton Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Factory Pattern"> Factory Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Abstract Factory Pattern"> Abstract Factory Pattern </a> </html>  </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Builder Pattern"> Builder Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Prototype Pattern"> Prototype Pattern </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object Orientation with Design Patterns#Structural Patterns"> Structural Patterns </a> </html> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Adapter Pattern"> Adapter Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Facade Pattern"> Facade Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Proxy pattern"> Proxy pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Decorator Pattern"> Decorator Pattern </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object Orientation with Design Patterns#Behavioural Patterns"> Behavioural Patterns </a> </html> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Chain of Responsibility Pattern"> Chain of Responsibility Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Command Pattern"> Command Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Iterator Pattern"> Iterator Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Observer Pattern"> Observer Pattern </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Mediator Pattern"> Mediator Pattern </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object Orientation with Design Patterns#Data Access Patterns"> Data Access Patterns </a> </html> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Object Orientation with Design Patterns#Data Access Object Pattern"> Data Access Object Pattern </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Object Orientation with Design Patterns#Model-View-Controller MVC"> Model-View-Controller MVC </a> </html> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
</div>
 
−
</div>
 
−
<section end=objectOriented />
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> '''<html> <a href="Data Structures & Algorithms"> Data Structures & Algorithms </a> </html>''' </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=algorithms />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#Analysis of algorithms"> Analysis of algorithms </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#The Stack Data Structure"> The Stack Data Structure </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#The Queue Data Structure"> The Queue Data Structure </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#The Array Data Structure"> The Array Data Structure </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#The List Data Structure"> The List Data Structure </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#The Linked List Data Structure"> The Linked List Data Structure </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#The Tree Data Structure"> The Tree Data Structure </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#Recursion vs Iteration"> Recursion vs Iteration </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Structures & Algorithms#Bubble and Insertion Sort"> Bubble and Insertion Sort </a> </html> </li></ul>
 
−
<section end=algorithms />
 
−
</div>
 
−
</div>
 
−
<section end=programming1 />
 
−
 
−
<section begin=web />
 
−
<div class="mw-collapsible  mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> '''<html> <a href="Web Development"> Web Development </a> </html>''' </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=web0 />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Web Development#HTML"> HTML </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Web Development#CSS"> CSS </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="JavaScript"> JavaScript </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:89px;"><li> <html> <a href="React"> React </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Node.js - Express.js"> Node.js - Express.js </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Dash - Plotly"> Dash - Plotly </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Web Development#PHP"> PHP </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Ruby on Rails"> Ruby on Rails </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Web server"> Web server </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Web mapping"> Web mapping </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="HTML presentation with Reveal.js"> HTML presentation with Reveal.js </a> </html> </li></ul>
 
−
<section end=web0 />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Excelentes diseños de WebSites"> Excelentes diseños de WebSites </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
<section end=web />
 
−
 
−
<section begin=mobile />
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> '''<html> <a href="Mobile Development"> Mobile Development </a> </html>''' </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=mobile0 />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Mobile Development#Native vs Hybrid Frameworks"> Native vs Hybrid Frameworks </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Cordova - PhoneGap"> Cordova - PhoneGap </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Ionic and Capacitor"> Ionic and Capacitor </a> </html> </li></ul>
 
−
<section end=mobile0 />
 
−
</div>
 
−
</div>
 
−
<section end=mobile />
 
−
 
−
<section begin=systemAnalysis />
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Systems Analysis & Design1"> Systems Analysis & Design </a> </html> </li></ul>
 
−
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Universal design"> Universal design </a> </html> </li></ul>
 
−
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="GitHub"> GitHub </a> </html> </li></ul>
 
−
<section end=systemAnalysis />
 
−
</div>
 
−
</div>
 
−
<section end=programming />
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:23px;"><li> <div style="text-align:left"><html> <a href="Data Science"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Data Science</p> </a> </html> </div> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=datascience />
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Descriptive Data Analysis"> Descriptive Data Analysis </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Correlation & Simple and Multiple Regression"> Correlation & Simple and Multiple Regression </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Naive Bayes"> Naive Bayes </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Decision Trees"> Decision Trees </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#K-Nearest Neighbour"> K-Nearest Neighbour </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Boosting"> Boosting </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Perceptrons - Neural Networks and Support Vector Machines"> Perceptrons - Neural Networks and Support Vector Machines </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Association Rules - Market Basket Analysis"> Association Rules - Market Basket Analysis </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Clustering"> Clustering </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Time Series Analysis"> Time Series Analysis </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Data Science#Model Evaluation"> Model Evaluation </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Text Analytics"> Text Analytics </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Text Analytics#Information Retrieval"> Information Retrieval </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Text Analytics#Natural Language Processing"> Natural Language Processing </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Python for Data Science"> Python for Data Science </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="NumPy and Pandas"> NumPy and Pandas </a> </html> </li></ul>
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Data Visualization with Python"> Data Visualization with Python </a> </html> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Data Visualization with Python#Pandas Built-in Data Visualization"> Pandas Built-in Data Visualization </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Data Visualization with Python#Data Visualization with Matplotlib"> Matplotlib </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Data Visualization with Python#Data visualization with Seaborn"> Seaborn </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Data Visualization with Python#Plotly and Cufflinks Data Visualization"> Plotly and Cufflinks </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Data Visualization with Python#Word cloud"> Word cloud </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Text Analytics in Python"> Text Analytics in Python </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Dash - Plotly"> Dash - Plotly </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Scrapy"> Scrapy </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="R"> R </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> <html> <a href="R tutorial"> R tutorial </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="RapidMiner"> RapidMiner </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Python for Data Science#Jupyter"> Jupyter </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Mathematics and Statistics for Data Science"> Mathematics and Statistics for Data Science </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:45px;"><li> <html> <a href="Big Data Integration"> Big Data Integration </a> </html> </li></ul>
 
−
<section end=datascience />
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:23px;"><li> <div style="text-align:left"><html> <a style="pointer-events: none;" href="Other qualifications in IT"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Other qualifications in IT</p> </a> </html> </div> </li></ul>
 
−
<div class="mw-collapsible-content"> <section begin=otherinterests />
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"><html> <a href="Databases"> <p style="color:black; font-weight: bold; margin-top:-5pt">Databases</p> </a> </html> </div> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=databases />
 
−
<ul>
 
−
<ul style="padding-left:67px;"><li> '''<html> <a href="Database design"> Database design </a> </html>''' </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Database design#Conceptual design"> Conceptual design </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Database design#Entity relationship modelling"> Entity relationship modelling </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Database design#The Enhanced Entity-Relation Model"> The Enhanced Entity-Relation Model </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Database design#Logical design"> Logical design </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Database design#Relational Model"> Relational Model </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="Database design#Normalisation"> Normalisation </a> </html> </li></ul>
 
−
</ul>
 
−
 
−
<ul style="padding-left:67px;"><li> '''RDBMS''' </li></ul>
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:89px;"><li> <html> <a href="MySQL"> MySQL </a> </html> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Backup and Restore MySQL/MariaDB Databases"> Backup and Restore MySQL/MariaDB Databases </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Import a CSV file into a MySQL database"> Import a CSV file into a MySQL database </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Reset the MySQL/MariaDB Password"> Reset the MySQL/MariaDB Password </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Databases Authentication and Authorization"> Authentication and Authorization </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#SQL Practice Lab 1"> SQL Practice Labs </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Stored Procedures"> Stored Procedures </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Stored Functions"> Stored Functions </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Triggers"> Triggers </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Events"> Events </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Cursors"> Cursors </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Transactions"> Transactions </a> </html> </li></ul>
 
−
<ul style="padding-left:112px;"><li> <html> <a href="MySQL#Exception Handling"> Exception Handling </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="PostgreSQL"> PostgreSQL </a> </html> </li></ul>
 
−
 
−
<ul style="padding-left:67px;"><li> '''GUI DB administration tools''' </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="MySQL#MySQL Workbench"> MySQL Workbench </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="MySQL#PhpMyAdmin"> PhpMyAdmin </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="PostgreSQL#Connecting to Postgres from SQLectron"> SQLectron </a> </html> </li></ul>
 
−
<section end=databases />
 
−
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<div style="" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"><html> <a href="Cloud Computing"> <p style="color:black; font-weight: bold; margin-top:-5pt">Cloud Computing</p> </a> </html> </div> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=cloud />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="AWS"> AWS </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Google Cloud"> Google Cloud </a> </html> </li></ul>
 
−
<section end=cloud />
 
−
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"><html> <a href="Operating Systems"> <p style="color:black; font-weight: bold; margin-top:-5pt">Operating Systems</p> </a> </html> </div> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=os />
 
−
<ul style="padding-left:67px;"><li> '''<html> <a href="Linux"> Linux </a> </html>''' </li></ul>
 
−
<section begin=linux />
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Shell Scripting"> Shell Scripting </a> </html> </li></ul>
 
−
<ul style="padding-left:89px;"><li> <html> <a href="Study points for the RHCSA exam"> Study points for the RHCSA exam </a> </html> </li></ul>
 
−
<section end=linux />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Windows"> Windows </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Android"> Android </a> </html> </li></ul>
 
−
<section end=os />
 
−
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"><html> <a href="Networking"> <p style="color:black; font-weight: bold; margin-top:-5pt">Networking</p> </a> </html> </div> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<section begin=networking />
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Network Simulation using PacketTracer"> Network Simulation using PacketTracer </a> </html> </li></ul>
 
−
<section end=networking />
 
−
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<section begin=virtualization />
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"><html> <a href="Virtualization"> <p style="color:black; font-weight: bold; margin-top:-5pt">Virtualization</p> </a> </html> </div> </li></ul>
 
−
<section end=virtualization />
 
−
 
−
 
−
<section end=otherinterests /> <div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"><p style="color:black; font-weight: bold; margin-top:-5pt">Other IT pages</p></div> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Google"> Google </a> </html> </li></ul>
 
−
<ul style="padding-left:67px;"><li> <html> <a href="Mi computadora"> Mi computadora </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<ul style="padding-left:23px;"><li> <div style="text-align:left"><html> <a style="" href="Some important concepts"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Some important concepts</p> </a> </html> </div> </li></ul>
 
−
</div>
 
−
</div>
 
−
<section end=it />
 
−
 
−
 
−
<div class="divline1" style="padding: 0; border: 0; display: block; margin-right: -20px; margin-left: -20px; background-color: white; height:1.3pt"> </div>
 
−
 
−
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul>
 
−
<li style="margin-bottom: -10px">
 
−
<div style="text-align:left;"> <html> <a style="pointer-events: none;" href="Physics and Mathematics"> <p class="titulo2-text desplaza" style="color:#0000ff; font-weight: bold; margin-top:-5pt">Physics and Mathematics</p> </a> </html> </div>
 
−
</li>
 
−
</ul>
 
−
 
−
 
−
<div class="mw-collapsible-content">
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style="padding-left:23px;"><li class="first-li"> <div style="text-align:left"> <html> <a href="Physics"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Physics</p> </a> </html> </div> </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:45px;"><li class="first-li"> <div style="text-align:left"> <html> <a href="https://www.youtube.com/watch?v=M22MEShcyx8"> <p class="desplaza" style="color: #0645AD; margin-top:-5pt">https://www.youtube.com/watch?v=M22MEShcyx8</p> </a> </html> </div> </li></ul>
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"> <html> <a href="https://www.youtube.com/watch?v=tfSMcDqnh00&t=2061s"> <p class="desplaza" style="color: #0645AD; margin-top:-5pt">https://www.youtube.com/watch?v=tfSMcDqnh00&t=2061s</p> </a> </html> </div> </li></ul>
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"> <html> <a href="https://www.youtube.com/watch?v=NrjFE_Rd2OQ&t=81s"> <p class="desplaza" style="color: #0645AD; margin-top:-5pt">https://www.youtube.com/watch?v=NrjFE_Rd2OQ&t=81s</p> </a> </html> </div> </li></ul>
 
−
<ul style="padding-left:45px;"><li> <div style="text-align:left"> <html> <a href="https://www.youtube.com/watch?v=e5_V78SWGF0"> <p class="desplaza" style="color: #0645AD; margin-top:-5pt">https://www.youtube.com/watch?v=e5_V78SWGF0</p> </a> </html> </div> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
−
 
−
<ul style="padding-left:23px;"><li style="margin-bottom: 30px"> <div style="text-align:left"> <html> <a href="Mathematics"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Mathematics</p> </a> </html> </div> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="divline1" style="padding: 0; border: 0; display: block; margin-right: -20px; margin-left: -20px; background-color: white; height:1.3pt"> </div>
 
−
 
−
 
−
<section begin=geo />
 
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul>
 
−
<li style="margin-bottom: -55px">
 
−
<div style="text-align:left;"> <html> <a href="Geophysics"> <p class="titulo2-text desplaza" style="color:#0000ff; font-weight: bold; margin-top:-5pt">Geophysics</p> </a> </html> </div>
 
−
</li>
 
−
</ul>
 
−
 
−
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:23px;"><li class="first-li"> <div style="text-align:left"> <html> <a href="Modelado sísmico"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Modelado sísmico</p> </a> </html> </div> </li></ul>
 
−
 
−
<ul style="padding-left:23px;"><li> <div style="text-align:left"> <html> <a href="Procesamiento sísmico"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Procesamiento sísmico</p> </a> </html> </div> </li></ul>
 
−
 
−
<ul style="padding-left:23px;"><li> <div style="text-align:left"> <html> <a href="Seismic imaging"> <p class="desplaza" style="color:#A52A2A; font-weight: bold; margin-top:-5pt">Seismic imaging</p> </a> </html> </div> </li></ul>
 
−
</div>
 
−
<section end=formal_natural_and_applied_sciences1 />
 
−
</div>
 
−
<section end=geo /> <section end=formal_natural_and_applied_sciences />
 
−
</div>
 
 
<br />
 
<br />
−
</div>
+
<div class="mw-collapsible mw-collapsed" style="width:340px; display: none !important">
−
</div>
+
'''Previous version without <nowiki><html></nowiki> tag:'''
−
<section end=formal_natural_and_applied_sciences0 />
+
<div class="mw-collapsible-content" style="width: 900pt !important">
 +
<syntaxhighlight lang="html">
 +
{{#css:
 +
#mw-panel { visibility: collapse !important; }
 +
#p-namespaces { visibility: collapse !important; }
 +
#content { max-width: 1200pt !important; margin-left: auto !important; margin-right: auto !important; }
 +
#mw-panel { visibility: collapse !important; }
 +
#mw-page-base { visibility: collapse !important; }
 +
#ca-head-base { display: none !important; }
 +
#ca-nstab-main { display: none !important; }
 +
#ca-talk { display: none !important; }
 +
#ca-view { display: none !important; }
 +
#ca-viewsource { display: none !important; }
 +
#ca-edit { display: none !important; }
 +
#ca-ve-edit { display: none !important; }
 +
#ca-history { display: none !important; }
 +
#ca-unwatch { display: none !important; }
 +
#ca-watch { display: none !important; }
 +
#p-cactions { display: none !important; }
 +
#pt-userpage { display: none !important; }
 +
#pt-mytalk { display: none !important; }
 +
#pt-preferences { display: none !important; }
 +
#pt-watchlist { display: none !important; }
 +
#pt-mycontris { display: none !important; }
 +
#pt-logout { display: none !important; }
 +
#pt-anonuserpage { display: none !important; }
 +
#pt-anontalk { display: none !important; }
 +
#pt-createaccount { display: none !important; }
 +
#pt-login { display: none !important; }
 +
#footer-info-copyright { display: none !important; }
 +
#footer-places-privacy { display: none !important; }
 +
#footer-places-about { display: none !important; }
 +
#footer-places-disclaimer { display: none !important; }
 +
#p-tb { display: none !important; }
 +
body {
 +
  background:    #ededf2;
 +
  padding-left:  35pt !important;
 +
  padding-right: 35pt !important;
 +
}
 +
#mw-head {
 +
  z-index: -1;
 +
}
 +
.mediawiki {
 +
  padding-left:  40pt !important;
 +
  padding-right: 30pt !important;
 +
}
 +
#content {
 +
  border-top: 1px solid rgba(184, 134, 11, 0.5) !important;    <!-- This means the page contains hidden text #B8860B -->
 +
  border:    1px solid rgba(184, 134, 11, 0.5);                <!-- rgba(56, 139, 253, 0.4); -->
 +
} 
 +
#right-navigation {
 +
  visibility: collapse;
 +
}
 +
#p-search {
 +
  visibility: visible;
 +
}
 +
#simpleSearch {
 +
  <!-- border: 0.1px solid rgba(166, 44, 32, 0.5); -->
 +
} 
 +
#footer {
 +
  padding-left: 10pt;
 +
  margin-left:  auto  !important;
 +
  margin-right: auto  !important;
 +
  max-width:    1100pt;
 +
}
 +
#footer-info {
 +
  margin-left: 0pt;
 +
}
 +
div#toc.toc {
 +
  font-size: 12pt;
 +
  margin-top: -4.5pt;
 +
  background: rgba(255, 255, 255, 0.85);
 +
  border: 0.1px solid rgba(166, 44, 32, 0.5);
  
−
<section begin=social_sciences0 />
+
  max-width: 200pt;
−
<div class="marco1-ext" style="padding: 0px 20px 20px 20px; margin-right: 0px; margin-left: 0px; background-color: #ededf2; width:67%; min-height:50px">
+
  margin-right: 12pt;
−
<div class="marco1-int" style="padding: 0px; margin-right: 0px; margin-left: 0px; background-color: #ededf2;">
+
}
−
<div class="titulo1-text-marco">
+
.toc ul {
−
<div><html><a href="/view/Social sciences and Humanities"> <span class="titulo1-text" style="font: 700 21px / 27.3px 'Linux Libertine', Georgia, Times, serif; color:white; font-weight: bold">Social sciences and Humanities</span> </a></html></div>
+
  overflow-y: scroll  !important;
−
</div>
+
  max-height: 500pt; <!-- max-height: 100vh; -->
−
<div class="titulo1-marco-twolines" style="padding-right: 0px; margin-right: -20px; margin-left: -20px; background-color: #4081de; min-height:40pt; margin-top:-32pt"> </div>
+
}
−
<section begin=social_sciences />
+
.tocUl {
−
<div style="margin-top: -37px;" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
+
  overflow-y: scroll  !important;
−
<br />
+
  max-height: 500pt; <!-- max-height: 100vh; -->
−
<div style="margin-top: 20px;">
+
}
−
<ul style=""><li> <html> <a href="Computational Modeling of Social and Political Systems"> Computational Modeling of Social and Political Systems </a> </html> </li></ul>
+
.tochidden {
−
<ul style=""><li> <html> <a href="Filosofía"> Filosofía </a> </html> </li></ul>
+
  height: 4pt !important;
−
<ul style=""><li> <html> <a href="Historia"> Historia </a> </html> </li></ul>
+
}
−
<section begin=historia />
+
.rcorners {
−
<ul style="padding-left:23px;"><li> <html> <a href="La Révolution Cubana"> La Révolution Cubana </a> </html> </li></ul>
+
  border-radius: 3px;
−
<ul style="padding-left:23px;"><li> <html> <a href="La Revolución Rusa"> La Revolución Rusa </a> </html> </li></ul>
+
  padding: 2px;
−
<ul style="padding-left:23px;"><li> <html> <a href="Independencia de Venezuela"> Independencia de Venezuela </a> </html> </li></ul>
+
  border: 1.5px solid #B8860B;
−
<ul style="padding-left:23px;"><li> <html> <a href="La Révolution Française"> La Révolution Française </a> </html> </li></ul>
+
}
−
<ul style="padding-left:23px;"><li> <html> <a href="Cristianismo"> Cristianismo </a> </html> </li></ul>
+
.under {
−
<ul style="padding-left:23px;"><li> <html> <a href="Judaísmo"> Judaísmo </a> </html> </li></ul>
+
  margin-right: 10px;
−
<ul style="padding-left:23px;"><li> <html> <a href="Origin and evolution of Homo sapiens"> Origin and evolution of Homo sapiens </a> </html> </li></ul>
+
  <!-- display:inline-block;
−
<ul style="padding-left:23px;"><li> <html> <a href="The big bang theory"> The big bang theory </a> </html> </li></ul>
+
  border-bottom:1px solid #A62C20;
−
<section end=historia />
+
  padding-bottom:-5px !important; -->
−
<ul style=""><li> <html> <a href="Lideres"> Lideres </a> </html> </li></ul>
+
}
−
<section begin=lideres />
+
.title {
−
<ul style="padding-left:23px;"><li> <html> <a href="Discursos"> Discursos </a> </html> </li></ul>
+
  <!-- margin-top: 5px; -->
−
<ul style="padding-left:23px;"><li> <html> <a href="Marx"> Marx </a> </html> </li></ul>
+
  margin-left: -10px !important;
−
<ul style="padding-left:23px;"><li> <html> <a href="Che"> Che </a> </html> </li></ul>
+
  margin-right: -5px !important;
−
<ul style="padding-left:23px;"><li> <html> <a href="Fidel"> Fidel </a> </html> </li></ul>
+
  font-weight: normal;
−
<ul style="padding-left:23px;"><li> <html> <a href="Chávez"> Chávez </a> </html> </li></ul>
+
  font-family: 'Zapf Dingbats';
−
<ul style="padding-left:23px;"><li> <html> <a href="Ali"> Ali </a> </html> </li></ul>
+
  font-size: 40px;
−
<ul style="padding-left:23px;"><li> <html> <a href="Silvio"> Silvio </a> </html> </li></ul>
+
  font-family: 'Linux Libertine','Georgia','Times',serif;  
−
<ul style="padding-left:23px;"><li> <html> <a href="Facundo"> Facundo </a> </html> </li></ul>
+
  background: red; <!-- #8c94ab -->
−
<ul style="padding-left:23px;"><li> <html> <a href="Rubén"> Rubén </a> </html> </li></ul>
+
  color: white;  
−
<ul style="padding-left:23px;"><li> <html> <a href="Mohamed Ali"> Mohamed Ali </a> </html> </li></ul>
+
  height: 70pt;
−
<ul style=""><li> <html> <a href="Debates"> Debates </a> </html> </li></ul>
+
  line-height: 70pt;
−
<ul style=""><li> <html> <a href="Tesis"> Tesis </a> </html> </li></ul>
+
  text-aligh: center; 
−
<section end=lideres />
+
  <!-- background: rgba(0, 0, 0, 0) linear-gradient(90deg, #007bff, rgb(0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box; margin-left:-10px; -->  
−
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
+
  <!-- linear-gradient(90deg, rgb(31, 112, 193), rgb(0, 0, 0)) --> <!-- #0074D9 -->
−
<ul style=""><li> <html> <a href="Idiomas"> Idiomas </a> </html> </li></ul>
+
}
−
<div class="mw-collapsible-content">
+
.cover {
−
<ul style="padding-left:23px;"><li> <html> <a href="Español"> Español </a> </html> </li></ul>
+
  object-fit: cover;
−
<ul style="padding-left:23px;"><li> <html> <a href="English"> English </a> </html> </li></ul>
+
  width: 100%;
−
<ul style="padding-left:23px;"><li> <html> <a href="Français"> Français </a> </html> </li></ul>
+
  height: 250px;  
−
</div>
+
  margin-bottom: 2000px;
−
</div>
+
  margin-top: -20px;
−
<section end=Idiomas />
+
}
−
<ul style=""><li> <html> <a href="Archivo"> Archivo </a> </html> </li></ul>
+
.icon {
−
<ul style=""><li> <html> <a href="Frases"> Frases </a> </html> </li></ul>
+
  color: #2d2e27;
−
<ul style=""><li> <html> <a href="Constitución de la República Bolivariana de Venezuela"> Constitución de la República Bolivariana de Venezuela </a> </html> </li></ul>
+
}
−
</div>
+
.texticon {
−
</div>
+
  color: #2d2e27; <!-- #f0f2e4 -->
−
<section end=social_sciences />
+
  font-size: 20px !important;
−
<br />
+
}
−
</div>
+
.textlink {
−
</div>
+
  color: #0854a6 !important; <!-- #f0f2e4 #007bff -->
−
<section end=social_sciences0 />
+
  font-size: 20px !important;
 +
}
 +
.container {
 +
  width: 150px;
 +
  height: 150px;
 +
  position: relative;
 +
  margin: 0px;
 +
}
 +
.box {
 +
  z-index: 10;
 +
  width: 100%;
 +
  height: 100%;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
.overlay {
 +
  z-index: 1;
 +
  margin-left: -5px;
 +
  margin-top: -23px;
 +
}
 +
.titulo1-text {
 +
  font-size: 18px !important;
 +
}
 +
.titulo1-text-marco {
 +
  padding-left: 10px !important;
 +
}
 +
.titulo1-marco-oneline {
 +
  padding-right: 0px !important;
 +
  padding-left: 0px !important;
 +
  margin-right: -5px !important;
 +
  margin-left: 0px !important;
 +
  min-height: 35pt !important;
 +
  margin-top:-32pt !important;
 +
} 
 +
.titulo1-marco-twolines {
 +
  padding-right: 0px !important;
 +
  padding-left: 0px !important;
 +
  margin-right: -5px !important;
 +
  margin-left: 0px !important;
 +
  min-height: 50pt !important;
 +
  margin-top:-47pt !important;
 +
}
 +
.marco1-ext {
 +
  width: 100% !important;
 +
  padding: 0px 0px 0px 0px !important;
 +
  background: #e3e3e8 !important;
 +
}
 +
.marco1-int {
 +
  background: #e3e3e8 !important;
 +
}
 +
.marco1-ext .mw-editsection {
 +
  display: none !important;
 +
}
 +
.divline1 {
 +
  padding: 0;
 +
  border: 0;
 +
  display: block;
 +
  margin-top:-10px;
 +
  margin-right: 0px !important;
 +
  margin-left: 2px  !important;
 +
  background-color: white;
 +
  height:1.2pt
 +
}
  
−
<section begin=musica0 />
+
.toggleNode { <!-- visibility: hidden --> }
−
<div class="marco1-ext" style="padding: 0px 20px 20px 20px; margin-right: 0px; margin-left: 0px; background-color: #ededf2; width:67%; min-height:50px">
+
}}
−
<div class="marco1-int" style="padding: 0px; margin-right: 0px; margin-left: 0px; background-color: #ededf2;">
+
<!-- some colors I have tried and liked: #dcd8ed  #3182f5  #D8BFD8  #E6E6FA  rgb(79.998779%,79.998779%,100%)-->
−
<div class="titulo1-text-marco">
+
<div class="container" style="position: fixed; height: 0px; width: 250px; margin-left: -70px; margin-top: -132px; z-index: 200; background: red !important; background-color: red !important"> <!-- oculto -->
−
<html><a href="/view/Música"> <span class="titulo1-text" style="font: 700 21px / 27.3px 'Linux Libertine', Georgia, Times, serif; color:white; font-weight: bold">Música</span> </a></html>
+
<div class="box mw-customtoggle-myToggle1" style="cursor:pointer; color:blue; width:0px; z-index: 100">[+/-]</div>
−
</div>
+
<div style="border-top:-50px;" class="box overlay mw-collapsible" id="mw-customcollapsible-myToggle1">
−
<div class="titulo1-marco-oneline" style="padding-right: 0px; margin-right: -20px; margin-left: -20px; background-color: #4081de; min-height:40pt; margin-top:-37pt"> </div>
+
<div style="border-top:-50px;" style="background: transparent; border: 0px solid blue; padding:0px" class="toccolours mw-collapsible-content">
−
<section begin=musica />
+
<!--  
−
<div style="margin-top: -32px;" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
+
<div style="border-top:-50px; background: #E6E6FA; min-height:50px; line-height: 50px; text-align: left; padding-left: 35px; font-size: 20px; font-family: 'Linux Libertine','Georgia','Times',serif;">
−
<br />
+
'''''[[Carrera|<span style="color:#B8860B; font-weight: bold;">Carrera</span>]]'''''
−
<div style="margin-top: 20px;">
 
−
<ul style=""><li> <html> <a href="Salsa"> Salsa </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Composición"> Composición </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Bajo"> Bajo </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Guitarra"> Guitarra </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Canciones"> Canciones </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Videos"> Videos </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
<section end=musica />
 
−
<br />
 
−
</div>
 
−
</div>
 
−
<section end=musica0 />
 
−
 
 
−
<section begin=Carrera0 />
 
−
<div class="marco1-ext" style="padding: 0px 20px 20px 20px; margin-right: 0px; margin-left: 0px; background-color: #ededf2; width:67%; min-height:50px">
 
−
<div class="marco1-int" style="padding: 0px; margin-right: 0px; margin-left: 0px; background-color: #ededf2;">
 
−
<div class="titulo1-text-marco">
 
−
<html><a href="/view/Carrera"> <span class="titulo1-text titulo1-color" style="font: 700 21px / 27.3px 'Linux Libertine', Georgia, Times, serif; color:#B8860B; font-weight: bold">Carrera</span> </a></html>
 
−
</div>
 
−
<div class="titulo1-marco-oneline titulo1-marco-color" style="padding-right: 0px; margin-right: -20px; margin-left: -20px; background-color: #E6E6FA; min-height:40pt; margin-top:-37pt"> </div>
 
−
<section begin=Carrera />
 
−
<div style="margin-top: -32px;" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<br />
 
−
<section begin=Carrera1 />
 
−
<div style="margin-top: 20px; margin-bottom: 12px" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style=""><li> '''<html> <a href="CV"> CV </a> </html>''' </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:23px;"><li> <html> <a href="CV - Skills and Qualifications"> CV - Skills and Qualifications </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="CV - Skills and Qualifications_1"> CV - Skills and Qualifications_1 </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="CV - Work experience"> CV - Work experience </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="CV - Education"> CV - Education </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="CV - Courses"> CV - Courses </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="CV - Publications"> CV - Publications </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="CV - Languages"> CV - Languages </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="CV - Interests"> CV - Interests </a> </html> </li></ul>
 
−
</div>
 
−
</div>
 
−
 
 
−
<div style="margin-bottom: 12px" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<ul style=""><li> '''<html> <a href="Job search"> Job search </a> </html>''' </li></ul>
 
−
<div class="mw-collapsible-content">
 
−
<ul style="padding-left:23px;"><li> <html> <a href="Entrevista"> Entrevista </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="Job application email"> Job application email </a> </html> </li></ul>
 
−
<ul style="padding-left:23px;"><li> <html> <a href="Coverletter"> Coverletter </a> </html> </li></ul>
 
−
</div>
 
 
</div>
 
</div>
−
 
+
-->
−
<ul style=""><li> '''<html> <a href="Mis proyectos"> Mis proyectos </a> </html>''' </li></ul>
+
<div style="height: 50px; width:100%; background: #e3e3e8">
−
<section end=Carrera1 />
 
 
</div>
 
</div>
−
<section end=Carrera />
+
<!-- <div style="overflow-y: scroll; height: 100vh !important; background: #f7f7f8; margin-top:0px; padding:0.1px 20px 20px 20px;"> -->
−
<br />
+
<div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
 +
<!-- {{#lst:Mis páginas|Carrera1}} -->
 +
<div style="margin-bottom: 42px; margin-top:2px"> {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 +
<div style="margin-bottom: 50px"> {{#lst:Mis páginas|social_sciences0}}</div>
 +
<div style="margin-bottom: 30px"> {{#lst:Mis páginas|musica0}}</div>
 +
<div style="margin-bottom: 150px">{{#lst:Mis páginas|Carrera0}}</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<section end=Carrera0 />
 
−
 
−
<div style="padding: 0px 20px 20px 20px; margin-right: 0px; margin-left: 0px; background-color: #ededf2; width:67%; min-height:50px">
 
−
<div style="padding: 0px; margin-right: 0px; margin-left: 0px; background-color: #ededf2;">
 
−
 
−
==<span style="color:#B8860B; font-weight: bold">Otras Páginas</span>==
 
−
<div style="padding-right: 0px; margin-right: -20px; margin-left: -20px; background-color: #E6E6FA; min-height:40pt; margin-top:-35pt"> </div>
 
−
<div style="margin-top: -35px;" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
 
−
<br />
 
−
<div style="margin-top: 20px;">
 
−
<ul style=""><li> <html> <a href="Sitios web"> Sitios web </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Venezuela"> Venezuela </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Flamenco"> Flamenco </a> </html> </li></ul>
 
−
 
−
: <span style="color:#BDB76B">──────────────────</span>
 
−
 
−
<ul style=""><li> <html> <a href="Sinfronteras"> Sinfronteras </a> </html> </li></ul>
 
−
 
−
<ul style=""><li> <html> <a href="Help MediaWiki"> Help MediaWiki </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Página de pruebas"> Página de pruebas </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Página de pruebas 2"> Página de pruebas 2 </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Página de pruebas 3"> Página de pruebas 3 </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Página de pruebas 4"> Página de pruebas 4 </a> </html> </li></ul>
 
−
<ul style=""><li> <html> <a href="Transclusion"> Transclusion </a> </html> </li></ul>
 
−
 
 
</div>
 
</div>
 
</div>
 
</div>
−
<br />
+
</syntaxhighlight>
 
</div>
 
</div>
 
</div>
 
</div>

Revision as of 18:08, 9 March 2021



Previous version without <html> tag: 

{{#css:
#mw-panel { visibility: collapse !important; }
#p-namespaces { visibility: collapse !important; } 
#content { max-width: 1200pt !important; margin-left: auto !important; margin-right: auto !important; }
#mw-panel { visibility: collapse !important; }
#mw-page-base { visibility: collapse !important; }
#ca-head-base { display: none !important; }
#ca-nstab-main { display: none !important; }
#ca-talk { display: none !important; }
#ca-view { display: none !important; }
#ca-viewsource { display: none !important; }
#ca-edit { display: none !important; }
#ca-ve-edit { display: none !important; }
#ca-history { display: none !important; }
#ca-unwatch { display: none !important; }
#ca-watch { display: none !important; }
#p-cactions { display: none !important; }
#pt-userpage { display: none !important; }
#pt-mytalk { display: none !important; }
#pt-preferences { display: none !important; }
#pt-watchlist { display: none !important; }
#pt-mycontris { display: none !important; }
#pt-logout { display: none !important; }
#pt-anonuserpage { display: none !important; }
#pt-anontalk { display: none !important; }
#pt-createaccount { display: none !important; }
#pt-login { display: none !important; }
#footer-info-copyright { display: none !important; }
#footer-places-privacy { display: none !important; }
#footer-places-about { display: none !important; }
#footer-places-disclaimer { display: none !important; }
#p-tb { display: none !important; }
body { 
  background:    #ededf2; 
  padding-left:  35pt !important; 
  padding-right: 35pt !important; 
}
#mw-head {
  z-index: -1;
}
.mediawiki { 
  padding-left:  40pt !important; 
  padding-right: 30pt !important; 
}
#content {
  border-top: 1px solid rgba(184, 134, 11, 0.5) !important;     <!-- This means the page contains hidden text #B8860B -->
  border:     1px solid rgba(184, 134, 11, 0.5);                <!-- rgba(56, 139, 253, 0.4); -->
}  
#right-navigation {
  visibility: collapse;
}
#p-search {
  visibility: visible;
}
#simpleSearch {
  <!-- border: 0.1px solid rgba(166, 44, 32, 0.5); -->
}  
#footer {
  padding-left: 10pt;
  margin-left:  auto  !important;
  margin-right: auto  !important;
  max-width:    1100pt;
}
#footer-info {
  margin-left: 0pt;
}
div#toc.toc {
  font-size: 12pt;
  margin-top: -4.5pt;
  background: rgba(255, 255, 255, 0.85);
  border: 0.1px solid rgba(166, 44, 32, 0.5);

  max-width: 200pt;
  margin-right: 12pt;
}
.toc ul {
  overflow-y: scroll  !important;
  max-height: 500pt;  <!-- max-height: 100vh; -->
}
.tocUl {
  overflow-y: scroll  !important;
  max-height: 500pt;  <!-- max-height: 100vh; -->
}
.tochidden {
  height: 4pt !important;
}
.rcorners {
  border-radius: 3px;
  padding: 2px;
  border: 1.5px solid #B8860B;
}
.under {
  margin-right: 10px;
  <!-- display:inline-block;
  border-bottom:1px solid #A62C20;
  padding-bottom:-5px !important; -->
}
.title { 
  <!-- margin-top: 5px; -->
  margin-left: -10px !important;
  margin-right: -5px !important;
  font-weight: normal; 
  font-family: 'Zapf Dingbats'; 
  font-size: 40px; 
  font-family: 'Linux Libertine','Georgia','Times',serif; 
  background: red; <!-- #8c94ab -->
  color: white; 
  height: 70pt; 
  line-height: 70pt; 
  text-aligh: center;   
  <!-- background: rgba(0, 0, 0, 0) linear-gradient(90deg, #007bff, rgb(0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box; margin-left:-10px; -->   
  <!-- linear-gradient(90deg, rgb(31, 112, 193), rgb(0, 0, 0)) -->  <!-- #0074D9 -->
}
.cover {
  object-fit: cover; 
  width: 100%; 
  height: 250px; 
  margin-bottom: 2000px;
  margin-top: -20px;
}
.icon {
  color: #2d2e27;
}
.texticon {
  color: #2d2e27;  <!-- #f0f2e4 -->
  font-size: 20px !important;
}
.textlink {
  color: #0854a6 !important;  <!-- #f0f2e4 #007bff -->
  font-size: 20px !important;
}
.container {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 0px;
}
.box {
  z-index: 10;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.overlay {
  z-index: 1;
  margin-left: -5px;
  margin-top: -23px;
}
.titulo1-text {
  font-size: 18px !important;
}
.titulo1-text-marco {
  padding-left: 10px !important;
}
.titulo1-marco-oneline {
  padding-right: 0px !important;
  padding-left: 0px !important;
  margin-right: -5px !important;
  margin-left: 0px !important;
  min-height: 35pt !important;
  margin-top:-32pt !important;
}  
.titulo1-marco-twolines {
  padding-right: 0px !important;
  padding-left: 0px !important;
  margin-right: -5px !important;
  margin-left: 0px !important;
  min-height: 50pt !important;
  margin-top:-47pt !important;
}
.marco1-ext {
  width: 100% !important;
  padding: 0px 0px 0px 0px !important;
  background: #e3e3e8 !important;
}
.marco1-int {
  background: #e3e3e8 !important;
}
.marco1-ext .mw-editsection {
  display: none !important;
}
.divline1 {
  padding: 0; 
  border: 0; 
  display: block; 
  margin-top:-10px; 
  margin-right: 0px !important; 
  margin-left: 2px  !important; 
  background-color: white; 
  height:1.2pt
}

.toggleNode { <!-- visibility: hidden --> }
}}
<!-- some colors I have tried and liked: #dcd8ed  #3182f5  #D8BFD8  #E6E6FA  rgb(79.998779%,79.998779%,100%)-->
<div class="container" style="position: fixed; height: 0px; width: 250px; margin-left: -70px; margin-top: -132px; z-index: 200; background: red !important; background-color: red !important"> <!-- oculto -->
<div class="box mw-customtoggle-myToggle1" style="cursor:pointer; color:blue; width:0px;  z-index: 100">[+/-]</div>
<div style="border-top:-50px;" class="box overlay mw-collapsible" id="mw-customcollapsible-myToggle1">
<div style="border-top:-50px;" style="background: transparent; border: 0px solid blue; padding:0px" class="toccolours mw-collapsible-content">
<!-- 
<div style="border-top:-50px; background: #E6E6FA; min-height:50px; line-height: 50px; text-align: left; padding-left: 35px; font-size: 20px; font-family: 'Linux Libertine','Georgia','Times',serif;">
'''''[[Carrera|<span style="color:#B8860B; font-weight: bold;">Carrera</span>]]'''''
</div>
-->
<div style="height: 50px; width:100%; background: #e3e3e8">
</div>
<!-- <div style="overflow-y: scroll; height: 100vh !important; background: #f7f7f8; margin-top:0px; padding:0.1px 20px 20px 20px;"> -->
<div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
<!-- {{#lst:Mis páginas|Carrera1}} -->
<div style="margin-bottom: 42px; margin-top:2px"> {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
<div style="margin-bottom: 50px"> {{#lst:Mis páginas|social_sciences0}}</div>
<div style="margin-bottom: 30px"> {{#lst:Mis páginas|musica0}}</div>
<div style="margin-bottom: 150px">{{#lst:Mis páginas|Carrera0}}</div>
</div>
</div>
</div>
</div>
Retrieved from "http://wiki.sinfronteras.ws/index.php?title=Template:Sidebar&oldid=21254"