From 5dff89a69dfb4e1d6d4233739c8a086616b1ca4b Mon Sep 17 00:00:00 2001
From: Juanant98 <juadecha@alum.us.es>
Date: Sun, 7 Mar 2021 14:50:25 +0100
Subject: [PATCH] Mejorada estructura de componentes para aumentar la
 legibilidad. Arreglado error de camelCase en carpeta Componentes

---
 src/App.tsx                            |  20 ++---
 src/Components/backtotop.tsx           |   5 +-
 src/Components/bottomwrap.tsx          |  27 +++---
 src/Components/copyrightwrap.tsx       |   2 +-
 src/Components/footerwrap.tsx          |  20 ++---
 src/Components/jobComponent.tsx        |  23 +++---
 src/Components/mainbottomwrap.tsx      |  23 ++----
 src/Components/navbar.tsx              |  33 ++++----
 src/Components/newsshow.tsx            |  95 +++++++++++----------
 src/Components/setWindowDimensions.tsx |  17 ++--
 src/Components/slideshow.tsx           | 110 ++++++++++++-------------
 src/containers/navbar.tsx              |   2 +-
 12 files changed, 184 insertions(+), 193 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b01d230..a4c2745 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,14 @@
 import NB from './containers/navbar'
-import Slideshow from './Components/slideshow'
-
-import Bottomwrap from './Components/bottomwrap'
-import Newsshow from './Components/newsshow'
-import JobComponent from './Components/jobComponent'
-import useWindowDimensions from './Components/setWindowDimensions'
-import Mainbottomwrap from './Components/mainbottomwrap';
-import Backtotop from './Components/backtotop';
-import Footerwrap from './Components/footerwrap';
-import Copyrightwrap from './Components/copyrightwrap';
+import Slideshow from './components/slideshow'
+
+import Bottomwrap from './components/bottomwrap'
+import Newsshow from './components/newsshow'
+import JobComponent from './components/jobComponent'
+import useWindowDimensions from './components/setWindowDimensions'
+import Mainbottomwrap from './components/mainbottomwrap';
+import Backtotop from './components/backtotop';
+import Footerwrap from './components/footerwrap';
+import Copyrightwrap from './components/copyrightwrap';
 import { Action, createStore } from 'redux'
 import IGlobalState, { initialState} from './state/globalState'
 import { Provider } from 'react-redux'
diff --git a/src/Components/backtotop.tsx b/src/Components/backtotop.tsx
index 9fe072c..e122832 100644
--- a/src/Components/backtotop.tsx
+++ b/src/Components/backtotop.tsx
@@ -1,8 +1,9 @@
 import React, {useState} from 'react';
 
 
-const ScrollArrow = () =>{
+const ScrollButton = () =>{
 
+  //Controlamos con un Hook si debemos mostrar el botón
   const [showScroll, setShowScroll] = useState(false)
 
   const checkScrollTop = () => {
@@ -26,4 +27,4 @@ const ScrollArrow = () =>{
   );
 }
 
-export default ScrollArrow;
\ No newline at end of file
+export default ScrollButton;
\ No newline at end of file
diff --git a/src/Components/bottomwrap.tsx b/src/Components/bottomwrap.tsx
index f950afe..abbe57a 100644
--- a/src/Components/bottomwrap.tsx
+++ b/src/Components/bottomwrap.tsx
@@ -3,11 +3,13 @@ import footer1 from '../Inicio_files/img/cita-secretaria.png'
 import footer2 from '../Inicio_files/img/TFG.png'
 import footer3 from '../Inicio_files/img/etsiiorienta.png'
 import footer4 from '../Inicio_files/img/expon-us250A.png'
+
+
 class Bottomwrap extends React.Component {
     public render () {
     
     return(
-      <div className="container-fluid" id="fav-topwrap">
+    <div className="container-fluid" id="fav-topwrap">
         <div className="title topwrapTitle">
           <h2 className="cardTitleText">Enlaces de Interés</h2>
         </div>
@@ -31,14 +33,12 @@ class Bottomwrap extends React.Component {
     ) }
 }
 
+
 interface IBottomwrapElementProps {
   dsihtml: string,
   classname: string,
   link: string,
   img: string,
-
-
-
 }
 
 interface IBottomwrapElementState {
@@ -46,7 +46,6 @@ interface IBottomwrapElementState {
   classname: string,
   link: string,
   img: string,
-
 }
 
 class BottomwrapElement extends React.Component<IBottomwrapElementProps, IBottomwrapElementState> {
@@ -59,15 +58,15 @@ class BottomwrapElement extends React.Component<IBottomwrapElementProps, IBottom
   public render(){
     return (
     <div className="moduletable">
-    <style type="text/css" dangerouslySetInnerHTML={{__html: this.state.dsihtml}}/>
-    <div id="favpromote" className={this.state.classname}>
-      <div id="favpromote-uploadimage" className="topwrapImgs">
-        <a href={this.state.link} target="_self">
-          <img src={this.state.img} alt=""/>
-        </a>
-      </div>
-    </div>
-  </div>)
+      <style type="text/css" dangerouslySetInnerHTML={{__html: this.state.dsihtml}}/>
+        <div id="favpromote" className={this.state.classname}>
+          <div id="favpromote-uploadimage" className="topwrapImgs">
+            <a href={this.state.link} target="_self">
+              <img src={this.state.img} alt=""/>
+            </a>
+          </div>
+        </div>
+    </div>)
   }
 }
 
diff --git a/src/Components/copyrightwrap.tsx b/src/Components/copyrightwrap.tsx
index 96c027c..d8f86e9 100644
--- a/src/Components/copyrightwrap.tsx
+++ b/src/Components/copyrightwrap.tsx
@@ -4,7 +4,7 @@ class Copyrightwrap extends React.Component {
     public render () {
     
     return(
-      <div className="container-fluid footerCopyright" id="fav-copyrightwrap">
+    <div className="container-fluid footerCopyright" id="fav-copyrightwrap">
       <div className="row-fluid">
           <div id="fav-showcopyright" className="span3">
             <p className="footerText">© 2021
diff --git a/src/Components/footerwrap.tsx b/src/Components/footerwrap.tsx
index 3cace52..6b8802b 100644
--- a/src/Components/footerwrap.tsx
+++ b/src/Components/footerwrap.tsx
@@ -5,7 +5,7 @@ class Footerwrap extends React.Component {
     public render () {
     
     return(
-<div className="container-fluid footer" id="fav-footerwrap">
+    <div className="container-fluid footer" id="fav-footerwrap">
       <div className="row-fluid">
         <div id="fav-footer" className="clearfix">
           <div id="fav-footer1" className="span3">
@@ -24,20 +24,20 @@ class Footerwrap extends React.Component {
                 <a href="https://www.informatica.us.es/index.php/rel-externas" ref="_blank noopener noreferrer"><p className="footerText">Relaciones Externas</p></a>
                 <a href="https://www.informatica.us.es/index.php/servicios" ref="_blank noopener noreferrer"><p className="footerText">Servicios</p></a>
                 <a href="https://www.informatica.us.es/index.php/usuarios" ref="_blank noopener noreferrer"><p className="footerText">Perfiles</p></a>
-                </div>
+              </div>
             </div>
           </div>
           <div id="fav-footer1" className="span4 footerRight">
             <div className="moduletable">
               <div className="custom footerCustom">
-              <p className="footerText">Escuela Técnica Superior de Ingeniería Informática</p>
-              <p className="footerText">Av. Reina Mercedes s/n, 41012 Sevilla</p>
-              <p className="footerText">Contacto: +(34) 954556817</p>
-              <p className="footerText">Encuéntranos en redes sociales:</p>
-              <a href="https://www.facebook.com/pages/Secretar%C3%ADa-ETS-Ingenier%C3%ADa-Inform%C3%A1tica-Univ-Sevilla/196373487061548?ref=ts"><i className="fa fa-facebook-square footerText fa-2x" /> </a> 
-              <a href="https://twitter.com/etsii"><i className="fa fa-twitter-square footerText fa-2x" /> </a> 
-              <a href="https://www.youtube.com/channel/UCic5LtftOI4kAvckx-24gKQ"><i className="fa fa-youtube-square footerText fa-2x" /> </a> 
-                </div>
+                <p className="footerText">Escuela Técnica Superior de Ingeniería Informática</p>
+                <p className="footerText">Av. Reina Mercedes s/n, 41012 Sevilla</p>
+                <p className="footerText">Contacto: +(34) 954556817</p>
+                <p className="footerText">Encuéntranos en redes sociales:</p>
+                <a href="https://www.facebook.com/pages/Secretar%C3%ADa-ETS-Ingenier%C3%ADa-Inform%C3%A1tica-Univ-Sevilla/196373487061548?ref=ts"><i className="fa fa-facebook-square footerText fa-2x" /> </a> 
+                <a href="https://twitter.com/etsii"><i className="fa fa-twitter-square footerText fa-2x" /> </a> 
+                <a href="https://www.youtube.com/channel/UCic5LtftOI4kAvckx-24gKQ"><i className="fa fa-youtube-square footerText fa-2x" /> </a> 
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/Components/jobComponent.tsx b/src/Components/jobComponent.tsx
index a70652f..0d4ca2a 100644
--- a/src/Components/jobComponent.tsx
+++ b/src/Components/jobComponent.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
 import {Jumbotron, Button} from 'react-bootstrap'
 import imgJumbotron from '../Inicio_files/img/jumbotron.jpg'
+
+
 class JobComponent extends React.Component {
     public render () {
-    
     return(
-      <div  id="jumbotron" className="container-fluid jumbotronDiv">
-<Jumbotron style={{backgroundImage: 'url(' + imgJumbotron + ')'}}>
-  <h1 className="jumbotronText">Ofertas de empleo</h1>
-  <p  className="jumbotronText">
-    Con nuestras ferias de prácticas y contactos en empresas, podemos posicionar a nuestros alumnos y egresados en empresas del más alto nivel. ¡No pierdas la oportunidad!
-  </p>
-  <p  className="jumbotronText">
-    <Button variant="primary" href="https://t.me/empleo_etsii">Suscríbete al canal de prácticas de empleo para egresados</Button>
-  </p>
-</Jumbotron>
+    <div  id="jumbotron" className="container-fluid jumbotronDiv">
+      <Jumbotron style={{backgroundImage: 'url(' + imgJumbotron + ')'}}>
+        <h1 className="jumbotronText">Ofertas de empleo</h1>
+        <p  className="jumbotronText">
+        Con nuestras ferias de prácticas y contactos en empresas, podemos posicionar a nuestros alumnos y egresados en empresas del más alto nivel. ¡No pierdas la oportunidad!
+        </p>
+        <p  className="jumbotronText">
+          <Button variant="primary" href="https://t.me/empleo_etsii">Suscríbete al canal de prácticas de empleo para egresados</Button>
+        </p>
+      </Jumbotron>
     </div>
     ) }
 }
diff --git a/src/Components/mainbottomwrap.tsx b/src/Components/mainbottomwrap.tsx
index 51707e4..206394a 100644
--- a/src/Components/mainbottomwrap.tsx
+++ b/src/Components/mainbottomwrap.tsx
@@ -4,7 +4,7 @@ class Mainbottomwrap extends React.Component {
     public render () {
     
     return(
-      <div className="container-fluid" id="fav-mainbottomwrap">
+    <div className="container-fluid" id="fav-mainbottomwrap">
       <div className="row-fluid">
         <div id="fav-mainbottom" className="clearfix">
           <div id="fav-mainbottom1" className=" span3">
@@ -16,12 +16,11 @@ class Mainbottomwrap extends React.Component {
           <div id="fav-mainbottom2" className="span6">
             <div className="moduletable">
               <div id="faveffects" className="row-fluid">
-              <FaveffectsBox title="Buscar" link="https://www.informatica.us.es/index.php/buscar" backgroundColor="#0099FF" border="4px solid #77C9FF" icon="fa fa-search-plus" />
-              <FaveffectsBox title="Noticias" link="https://www.informatica.us.es/index.php/noticias" backgroundColor="#FF6666" border="3px solid #FFCCCC" icon="fa fa-file-text-o" />
-              <FaveffectsBox title="Directorio" link="https://www.informatica.us.es/index.php/directorio" backgroundColor="#65479B" border="3px solid #A48ECB" icon="fa fa-phone" />
-              <FaveffectsBox title="Tablón de Anuncios" link="https://www.informatica.us.es/index.php/practicas-en-empresas/tablon-de-anuncios/otras-ofertas" backgroundColor="#FF7B2D" border="3px solid #FFC6A4" icon="fa fa-tags" />
-              <FaveffectsBox title="Mapa del Sitio" link="https://www.informatica.us.es/index.php/mapa-del-sitio" backgroundColor="#37B1C2" border="4px solid #90D6E0" icon="fa fa-sitemap" />
-
+                <FaveffectsBox title="Buscar" link="https://www.informatica.us.es/index.php/buscar" backgroundColor="#0099FF" border="4px solid #77C9FF" icon="fa fa-search-plus" />
+                <FaveffectsBox title="Noticias" link="https://www.informatica.us.es/index.php/noticias" backgroundColor="#FF6666" border="3px solid #FFCCCC" icon="fa fa-file-text-o" />
+                <FaveffectsBox title="Directorio" link="https://www.informatica.us.es/index.php/directorio" backgroundColor="#65479B" border="3px solid #A48ECB" icon="fa fa-phone" />
+                <FaveffectsBox title="Tablón de Anuncios" link="https://www.informatica.us.es/index.php/practicas-en-empresas/tablon-de-anuncios/otras-ofertas" backgroundColor="#FF7B2D" border="3px solid #FFC6A4" icon="fa fa-tags" />
+                <FaveffectsBox title="Mapa del Sitio" link="https://www.informatica.us.es/index.php/mapa-del-sitio" backgroundColor="#37B1C2" border="4px solid #90D6E0" icon="fa fa-sitemap" />
               </div>
             </div>
           </div>
@@ -37,16 +36,12 @@ class Mainbottomwrap extends React.Component {
     ) }
 }
 
-
 interface IFaveffectsBoxProps {
   title: string ,
   link: string,
   icon: string,
   backgroundColor: string,
   border: string,
-
-
-
 }
 
 interface IFaveffectsBoxState {
@@ -55,7 +50,6 @@ interface IFaveffectsBoxState {
   icon: string,
   backgroundColor: string,
   border: string,
-
 }
 
 
@@ -67,11 +61,10 @@ class FaveffectsBox extends React.Component<IFaveffectsBoxProps, IFaveffectsBoxS
 
   public render () {
     return (
-      <div id="faveffects-box1" className="span2-4">
+    <div id="faveffects-box1" className="span2-4">
       <div id="faveffects-icon1" className="faveffects-effect6" style={{backgroundColor: this.state.backgroundColor, border: this.state.border, WebkitBorderRadius: '50%', MozBorderRadius: '50%', borderRadius: '50%'}}>
         <a href={this.state.link} target="_self">
-          <i className={this.state.icon} style={{color: '#EEEEEE', fontSize: '2em'}}>
-          </i>
+          <i className={this.state.icon} style={{color: '#EEEEEE', fontSize: '2em'}} />
         </a>
       </div>
       <p id="faveffects-title1" style={{fontFamily: 'PT Sans Narrow', fontSize: 18}}>      
diff --git a/src/Components/navbar.tsx b/src/Components/navbar.tsx
index 06f60dd..888aca6 100644
--- a/src/Components/navbar.tsx
+++ b/src/Components/navbar.tsx
@@ -5,7 +5,6 @@ import etsiilogo from '../Inicio_files/img/logotest.png'
 interface INBProps {
 collapsed: boolean
 onButtonClick: (collapsed: boolean) => any;
-
 }
 
 interface INBState {
@@ -24,23 +23,21 @@ class NB extends React.Component<INBProps, INBState> {
     
     return(
       <Navbar className="Opacity" bg="light" expand="lg" sticky="top">
-      <Navbar.Brand href="#home" className="navbarBrand">
-      <img src={etsiilogo} alt="ETSII" className="navbarLogo"/>
-
-
-      </Navbar.Brand>
-      <Navbar.Toggle aria-controls="basic-navbar-nav" />
-      <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
-        <Nav className="justify-content-end navbarLinks">
-        <Nav.Link href="https://www.informatica.us.es/index.php/la-escuela">La Escuela</Nav.Link>
-        <Nav.Link href="https://www.informatica.us.es/index.php/estudios">Estudios</Nav.Link>
-        {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/organizacion-docente">Organización Docente</Nav.Link> : null  }
-        {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/rel-externas">Relaciones Externas</Nav.Link> : null  }
-        {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/servicios">Servicios</Nav.Link> : null  }
-        {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/usuarios">Perfiles</Nav.Link> : null  }
-        <Nav.Link onClick={() => this.props.onButtonClick(!!!this.props.collapsed)}>...</Nav.Link> 
-        <Button variant="outline-primary" size="sm" className="navbarButton">Iniciar Sesión</Button>
-        </Nav>
+        <Navbar.Brand href="#home" className="navbarBrand">
+          <img src={etsiilogo} alt="ETSII" className="navbarLogo"/>
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
+          <Nav className="justify-content-end navbarLinks">
+            <Nav.Link href="https://www.informatica.us.es/index.php/la-escuela">La Escuela</Nav.Link>
+            <Nav.Link href="https://www.informatica.us.es/index.php/estudios">Estudios</Nav.Link>
+            {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/organizacion-docente">Organización Docente</Nav.Link> : null  }
+            {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/rel-externas">Relaciones Externas</Nav.Link> : null  }
+            {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/servicios">Servicios</Nav.Link> : null  }
+            {!!!this.props.collapsed ? <Nav.Link href="https://www.informatica.us.es/index.php/usuarios">Perfiles</Nav.Link> : null  }
+            <Nav.Link onClick={() => this.props.onButtonClick(!!!this.props.collapsed)}>...</Nav.Link> 
+            <Button variant="outline-primary" size="sm" className="navbarButton">Iniciar Sesión</Button>
+          </Nav>
       </Navbar.Collapse>
     </Navbar>
     ) }
diff --git a/src/Components/newsshow.tsx b/src/Components/newsshow.tsx
index 2a411a5..879b55f 100644
--- a/src/Components/newsshow.tsx
+++ b/src/Components/newsshow.tsx
@@ -5,8 +5,8 @@ import Slider from "react-slick";
 
 interface INewsProps {
   width: number,
-
 }
+
 class Newsshow extends React.Component<INewsProps, {}> {
 
   public render () {
@@ -30,40 +30,43 @@ class Newsshow extends React.Component<INewsProps, {}> {
       }
 
     return(
-      <div className="cardDiv">
-        <div className="title cardTitle" >
-          <h2 className="cardTitleText">Últimas Noticias</h2>
-        </div>
-        <div className="cardNewsDiv">
-  <Slider {...settings}>
-      <div>
-      <NewsCard title="Acuerdos Junta de Centro 18-02-2021 " 
-      body="Se ha publicado en la sección La Escuela -> Junta de Centro los acuerdos tomados por la Junta de Centro de la E.T.S. de Ingeniería Informática en sesión del día 18 de febrero de 2021." 
-      img="aaa" 
-      url="https://www.informatica.us.es/index.php/noticias/43-anuncios/2796-acuerdos-junta-de-centro-18-02-2021"/>
+    <div className="cardDiv">
+      <div className="title cardTitle" >
+        <h2 className="cardTitleText">Últimas Noticias</h2>
       </div>
-      <div>
-      <NewsCard title="Programa Movilidad Sicúe 2021-22 " 
-      body="Convocadas 2.217 plazas para intercambio con otras Universidades españolas.
-      
-      En la web y en tu Secretaría, puedes consultar las bases de la convocatoria, plazas y Universidades ofertadas para tu titulación." 
-      img="aaa" 
-      url="https://www.informatica.us.es/index.php/noticias/43-anuncios/2793-programa-movilidad-sicue-2021-22"/>
+      <div className="cardNewsDiv">
+        <Slider {...settings}>
+          <div>
+            <NewsCard title="Acuerdos Junta de Centro 18-02-2021 " 
+              body="Se ha publicado en la sección La Escuela -> Junta de Centro los acuerdos tomados por la Junta de Centro de la E.T.S. de Ingeniería Informática en sesión del día 18 de febrero de 2021." 
+              img="aaa" 
+              url="https://www.informatica.us.es/index.php/noticias/43-anuncios/2796-acuerdos-junta-de-centro-18-02-2021"/>
+          </div>
+          <div>
+            <NewsCard title="Programa Movilidad Sicúe 2021-22 " 
+              body="Convocadas 2.217 plazas para intercambio con otras Universidades españolas.
+              
+              En la web y en tu Secretaría, puedes consultar las bases de la convocatoria, plazas y Universidades ofertadas para tu titulación." 
+              img="aaa" 
+              url="https://www.informatica.us.es/index.php/noticias/43-anuncios/2793-programa-movilidad-sicue-2021-22"/>
+          </div>
+          <div>
+            <NewsCard title="Publicado consulta acceso escalonado Automatrícula 2020-21" 
+              body="Procedimiento consulta calificaciones acceso escalonado Automatrícula 2020-21" 
+              img="aaa" 
+              url="https://www.informatica.us.es/index.php/noticias/43-anuncios/2672-publicado-consulta-acceso-escalonado-automatricula-2020-21"/>
+          </div>
+          <div>
+            <NewsCard title="Acceso remoto a PCs de Laboratorios TIC " 
+              body="Desde el Centro de Cálculo hemos estado trabajando para se puedan realizar las prácticas desde casa. Para ello se ha montado un servicio para conectarse de forma remota a los PCs de los Laboratorios ..."
+              img="aaa" 
+              url="https://www.informatica.us.es/index.php/noticias/43-anuncios/2657-acceso-remoto-a-pcs-de-laboratorios-tic"/>
+          </div>
+        </Slider>
       </div>
-      <div>
-      <NewsCard title="Publicado consulta acceso escalonado Automatrícula 2020-21" 
-      body="Procedimiento consulta calificaciones acceso escalonado Automatrícula 2020-21" 
-      img="aaa" 
-      url="https://www.informatica.us.es/index.php/noticias/43-anuncios/2672-publicado-consulta-acceso-escalonado-automatricula-2020-21"/></div>
-      <div>
-      <NewsCard title="Acceso remoto a PCs de Laboratorios TIC " 
-      body="Desde el Centro de Cálculo hemos estado trabajando para se puedan realizar las prácticas desde casa. Para ello se ha montado un servicio para conectarse de forma remota a los PCs de los Laboratorios ..."
-      img="aaa" 
-      url="https://www.informatica.us.es/index.php/noticias/43-anuncios/2657-acceso-remoto-a-pcs-de-laboratorios-tic"/></div>
-      </Slider>
-</div>
+    </div>
     
-</div>) }
+    ) }
 }
 
 interface INewsCardProps {
@@ -71,9 +74,6 @@ interface INewsCardProps {
   title: string,
   img: string,
   url: string
-
-
-
 }
 
 interface INewsCardState {
@@ -81,7 +81,6 @@ interface INewsCardState {
   title: string,
   img: string,
   url: string
-
 }
 
 class NewsCard extends React.Component<INewsCardProps, INewsCardState> {
@@ -92,19 +91,19 @@ class NewsCard extends React.Component<INewsCardProps, INewsCardState> {
   
   public render() {
     return (
-      <a href={this.state.url}>
+    <a href={this.state.url}>
       <Card className="cardText">
-    <Card.Body>
-      <Card.Title>{this.state.title}</Card.Title>
-      <Card.Text>
-        {this.state.body}
-      </Card.Text>
-    </Card.Body>
-    <Card.Footer>
-      <small className="text-muted">Abrir noticia</small>
-    </Card.Footer>
-  </Card>
-  </a>
+        <Card.Body>
+          <Card.Title>{this.state.title}</Card.Title>
+          <Card.Text>
+            {this.state.body}
+          </Card.Text>
+        </Card.Body>
+        <Card.Footer>
+          <small className="text-muted">Abrir noticia</small>
+        </Card.Footer>
+      </Card>
+    </a>
     );
   }
 }
diff --git a/src/Components/setWindowDimensions.tsx b/src/Components/setWindowDimensions.tsx
index d7f3a20..26e7e3f 100644
--- a/src/Components/setWindowDimensions.tsx
+++ b/src/Components/setWindowDimensions.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 
-function getWindowDimensions() {
+//Con esta función obtenemos las medidas de la web en el navegador
+function getDimensions() {
   const { innerWidth: width, innerHeight: height } = window;
   return {
     width,
@@ -8,17 +9,21 @@ function getWindowDimensions() {
   };
 }
 
-export default function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+function useWindowDimensions() {
+  //Controlamos los cambios con un Hook
+  const [dimensions, setDimensions] = useState(getDimensions());
 
+  //Controlamos los resize con useEffect
   useEffect(() => {
     function handleResize() {
-      setWindowDimensions(getWindowDimensions());
+      setDimensions(getDimensions());
     }
 
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  return windowDimensions;
-}
\ No newline at end of file
+  return dimensions;
+}
+
+export default useWindowDimensions;
\ No newline at end of file
diff --git a/src/Components/slideshow.tsx b/src/Components/slideshow.tsx
index 4925984..79aa43a 100644
--- a/src/Components/slideshow.tsx
+++ b/src/Components/slideshow.tsx
@@ -9,67 +9,63 @@ class Slideshow extends React.Component {
     public render () {
     
     return(
-      <div className="container-fluid" id="fav-slidewrap">
+    <div className="container-fluid" id="fav-slidewrap">
       <div className="row-fluid">
         <div id="fav-slide" className="clearfix">
-      
-      <div id="fav-slide1" className="span12">
-      <Carousel className="slideshow">
-  <Carousel.Item>
-    <img
-      className="d-block w-100"
-      src={img1}
-      alt="Imagen de la ETSII"
-    />
-    <Carousel.Caption>
-      <h3>¡Bienvenido a la ETSII!</h3>
-      <p>Navega por la web para encontrar lo que buscas.</p>
-    </Carousel.Caption>
-  </Carousel.Item>
-  <Carousel.Item>
-    <a href="https://www.informatica.us.es/index.php/estudios" target="_blank noopener noreferrer">
-    <img
-      className="d-block w-100"
-      src={img2}
-      alt="Second slide"
-    />
+          <div id="fav-slide1" className="span12">
+            <Carousel className="slideshow">
+              <Carousel.Item>
+                <img
+                  className="d-block w-100"
+                  src={img1}
+                  alt="Imagen de la ETSII"
+                />
+                <Carousel.Caption>
+                  <h3>¡Bienvenido a la ETSII!</h3>
+                  <p>Navega por la web para encontrar lo que buscas.</p>
+                </Carousel.Caption>
+              </Carousel.Item>
+              <Carousel.Item>
+                <a href="https://www.informatica.us.es/index.php/estudios" target="_blank noopener noreferrer">
+                <img
+                  className="d-block w-100"
+                  src={img2}
+                  alt="Second slide"
+                />
 
-    <Carousel.Caption>
-      <h3>Estudios de Grado y Postgrado</h3>
-    </Carousel.Caption>
-    </a>
-  </Carousel.Item>
-  <Carousel.Item>
-  <a href="#jumbotron">
-    <img
-      className="d-block w-100"
-      src={img3}
-      alt="Third slide"
-    />
+                  <Carousel.Caption>
+                    <h3>Estudios de Grado y Postgrado</h3>
+                  </Carousel.Caption>
+                </a>
+              </Carousel.Item>
+              <Carousel.Item>
+                <a href="#jumbotron">
+                  <img
+                    className="d-block w-100"
+                    src={img3}
+                    alt="Third slide"
+                  />
 
-    <Carousel.Caption>
-      <h3>Ofertas de Empleo</h3>
-    </Carousel.Caption>
-    </a>
-  </Carousel.Item>
-
-  <Carousel.Item>
-    <a href="https://www.us.es" target="_blank noopener noreferrer">
-    <img
-      className="d-block w-100"
-      src={img4}
-      alt="Imagen de la US"
-    />
-
-    <Carousel.Caption>
-      <h3>Conoce la Universidad de Sevilla</h3>
-    </Carousel.Caption>
-    </a>
-  </Carousel.Item>
-</Carousel>
-    </div>
-
-    </div>
+                  <Carousel.Caption>
+                    <h3>Ofertas de Empleo</h3>
+                  </Carousel.Caption>
+                </a>
+              </Carousel.Item>
+              <Carousel.Item>
+                <a href="https://www.us.es" target="_blank noopener noreferrer">
+                  <img
+                    className="d-block w-100"
+                    src={img4}
+                    alt="Imagen de la US"
+                  />
+                  <Carousel.Caption>
+                    <h3>Conoce la Universidad de Sevilla</h3>
+                  </Carousel.Caption>
+                </a>
+              </Carousel.Item>
+            </Carousel>
+          </div>
+        </div>
       </div>
     </div>
     
diff --git a/src/containers/navbar.tsx b/src/containers/navbar.tsx
index 5377abc..80cf67d 100644
--- a/src/containers/navbar.tsx
+++ b/src/containers/navbar.tsx
@@ -1,4 +1,4 @@
-import NB from '../Components/navbar'
+import NB from '../components/navbar'
 import { connect } from 'react-redux'
 import IGlobalState from '../state/globalState'
 import { Dispatch } from 'redux'