{"id":92,"date":"2018-01-01T21:37:57","date_gmt":"2018-01-01T21:37:57","guid":{"rendered":"http:\/\/www.fernandezluque.com\/?page_id=92"},"modified":"2018-05-04T12:49:20","modified_gmt":"2018-05-04T12:49:20","slug":"trabajos-web","status":"publish","type":"page","link":"https:\/\/www.fernandezluque.com\/?page_id=92","title":{"rendered":"Webs"},"content":{"rendered":"<p>Desde mis inicios en el mundo de la Programaci\u00f3n, como aporte en mis avances profesionales, he realizado diferentes proyectos sobre variados tipos de lenguajes. Son pruebas de concepto, trabajos de la universidad, trabajos para cursos realizados, etc.<\/p>\n<p>Enumero algunos de ellos, y entre ellos tenemos este trabajo realizado en WordPress.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><em><strong>Invoicing Intranet<\/strong> es el Trabajo de Fin de Carrera, con el que consegu\u00ed un Excelente. Est\u00e1 m\u00e1s centrado en un compleja Arquitectura (<\/em><span style=\"font-family: Verdana, Geneva, sans-serif;\">Modular application, Maven, J2EE, Flex, BlazeDs, Spring, Hibernate, Subclipse)<\/span><em>, que en Funcionalidades (gesti\u00f3n de recaudaci\u00f3n para una flota de Taxis). La utilizaci\u00f3n de Flex, hace que no se pueda visualizar en dispositivos m\u00f3viles, \u00fanicamente se puede hacer correr en Ordenadores de Sobremesa o Port\u00e1tiles.<\/em><\/p>\n<div class=\"sb-image-hover-container\"><div class=\"sb-image-hover-row \"><div  class=\"sb-image-hover-responsive-1   sb-image-animation-7  sb-image-padding-7 \">\n                <div class=\"sb-image-map-7\">\n                    <div class=\"sb-image-map-absulate\">\n                       <div class=\"sb-image-hover oxilab-touchstart  sb-image-hover-7 sb-image-hover-7-9 sb-general-effects-7 sb-left-to-right\"><div class=\"sb-image-img\">\n                             <img src=\"http:\/\/fernandezluque.com\/wp-content\/uploads\/2018\/05\/Project_InvoicingIntranet.png\">\n                         <\/div>\n                         <div class=\"sb-image-info\"  >\n                                <div class=\"sb-image-data\">\n                                    <div class=\"sb-image-title\">Invoicing Intranet<\/div>\n                                    <div class=\"sb-image-desc\">Trabajo de Fin de Carrera, Modular application, Maven, J2EE, Flex, BlazeDs, Spring, Hibernate, Subclipse, Tomcat i MySql. Realizado en 2011.<\/div>\n                                    <a target=\"_blank\" href=\"http:\/\/fernandezluque.com\/war-1\" class=\"sb-image-button\"> Go! <\/a>\n                                <\/div>\n                         <\/div>          <\/div>\n                     <\/div>\n                <\/div>    <style>\n        .sb-image-hover-7-9{\n            position: relative;\n            width: 100%;\n            height: 100%;\n            -webkit-perspective: 900px;\n            -moz-perspective: 900px;\n            perspective: 900px;\n        }\n        .sb-image-hover-7-9 .sb-image-img {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n        }\n        .sb-image-hover-7-9 .sb-image-info {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n            text-align: center;\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n            display: table;\n        }\n        .sb-image-hover-7-9 .sb-image-img {\n            width: 100%;\n            float: left;\n            visibility: visible;\n            opacity: 1;\n            -webkit-transition: all 0.4s ease-out;\n            -moz-transition: all 0.4s ease-out;\n            transition: all 0.4s ease-out;\n            pointer-events: none;\n        }\n        .sb-image-hover-7-9 .sb-image-info {\n            opacity: 0;\n            background-color:rgba(0, 143, 171, 1);\n            visibility: hidden;\n            -webkit-transition: all 0.35s ease-in-out 0.3s;\n            -moz-transition: all 0.35s ease-in-out 0.3s;\n            transition: all 0.35s ease-in-out 0.3s;\n            pointer-events: none;\n\n        }\n        .sb-image-hover-7-9 .sb-image-info .sb-image-data{\n            display: table-cell;\n            vertical-align: middle; text-align: center;        }\n        .sb-image-hover-7-9 .sb-image-info .sb-image-title {\n            color: #FFF;\n        }\n        .sb-image-hover-7-9 .sb-image-info .sb-image-desc {\n            color: #FFF;\n        }\n        .sb-image-hover-7-9 a.sb-image-button{\n            background: #b8258e;\n            color: #FFF;\n            margin: 0 auto;                    }\n        .sb-image-hover-7-9 a.sb-image-button:hover{\n            background: #FFF;\n            color: #b8258e;\n        }\n        .sb-image-hover-7-9:hover .sb-image-img,\n        .sb-image-hover-7-9.oxi-touch .sb-image-img{\n            opacity: 0;\n            pointer-events: none;\n        }\n        .sb-image-hover-7-9:hover .sb-image-info,\n        .sb-image-hover-7-9.oxi-touch .sb-image-info{\n            visibility: visible;\n            opacity: 1;\n            pointer-events: auto;\n\n        }\n        .sb-image-hover-7-9.sb-left-to-right .sb-image-img {\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n        .sb-image-hover-7-9.sb-left-to-right .sb-image-info {\n            -webkit-transform: translateX(-100%);\n            -moz-transform: translateX(-100%);\n            -ms-transform: translateX(-100%);\n            -o-transform: translateX(-100%);\n            transform: translateX(-100%);\n        }\n        .sb-image-hover-7-9.sb-left-to-right:hover .sb-image-img,\n        .sb-image-hover-7-9.sb-left-to-right.oxi-touch .sb-image-img{\n            -webkit-transform: translateY(-100%);\n            -moz-transform: translateY(-100%);\n            -ms-transform: translateY(-100%);\n            -o-transform: translateY(-100%);\n            transform: translateY(-100%);\n        }\n        .sb-image-hover-7-9.sb-left-to-right:hover .sb-image-info,\n        .sb-image-hover-7-9.sb-left-to-right.oxi-touch .sb-image-info{\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n\n        .sb-image-hover-7-9.sb-right-to-left .sb-image-img {\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n        .sb-image-hover-7-9.sb-right-to-left .sb-image-info {\n            -webkit-transform: translateX(100%);\n            -moz-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n            -o-transform: translateX(100%);\n            transform: translateX(100%);\n        }\n        .sb-image-hover-7-9.sb-right-to-left:hover .sb-image-img,\n        .sb-image-hover-7-9.sb-right-to-left.oxi-touch .sb-image-img{\n            -webkit-transform: translateY(100%);\n            -moz-transform: translateY(100%);\n            -ms-transform: translateY(100%);\n            -o-transform: translateY(100%);\n            transform: translateY(100%);\n        }\n        .sb-image-hover-7-9.sb-right-to-left:hover .sb-image-info,\n        .sb-image-hover-7-9.sb-right-to-left.oxi-touch .sb-image-info{\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-7-9.sb-top-to-bottom .sb-image-img {\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-7-9.sb-top-to-bottom .sb-image-info {\n            -webkit-transform: translateY(100%);\n            -moz-transform: translateY(100%);\n            -ms-transform: translateY(100%);\n            -o-transform: translateY(100%);\n            transform: translateY(100%);\n        }\n        .sb-image-hover-7-9.sb-top-to-bottom:hover .sb-image-img,\n        .sb-image-hover-7-9.sb-top-to-bottom.oxi-touch .sb-image-img{\n            -webkit-transform: translateX(-100%);\n            -moz-transform: translateX(-100%);\n            -ms-transform: translateX(-100%);\n            -o-transform: translateX(-100%);\n            transform: translateX(-100%);\n        }\n        .sb-image-hover-7-9.sb-top-to-bottom:hover .sb-image-info,\n        .sb-image-hover-7-9.sb-top-to-bottom.oxi-touch .sb-image-info{\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n\n\n        .sb-image-hover-7-9.sb-bottom-to-top .sb-image-img {\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-7-9.sb-bottom-to-top .sb-image-info {\n            -webkit-transform: translateY(-100%);\n            -moz-transform: translateY(-100%);\n            -ms-transform: translateY(-100%);\n            -o-transform: translateY(-100%);\n            transform: translateY(-100%);\n        }\n        .sb-image-hover-7-9.sb-bottom-to-top:hover .sb-image-img,\n        .sb-image-hover-7-9.sb-bottom-to-top.oxi-touch .sb-image-img{\n            -webkit-transform: translateX(100%);\n            -moz-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n            -o-transform: translateX(100%);\n            transform: translateX(100%);\n        }\n        .sb-image-hover-7-9.sb-bottom-to-top:hover .sb-image-info,\n        .sb-image-hover-7-9.sb-bottom-to-top.oxi-touch .sb-image-info{\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n    <\/style>\n\n    <\/div><\/div> <\/div>    <style>\n        .sb-image-hover-7, \n        .sb-image-hover-7 .sb-image-img, .sb-image-hover-7 a .sb-image-img,\n        .sb-image-hover-7 .sb-image-img:before, .sb-image-hover-7 a .sb-image-img:before,\n        .sb-image-hover-7 .sb-image-img img, .sb-image-hover-7 a .sb-image-img img,\n        .sb-image-hover-7 .sb-image-info, .sb-image-hover-7 a .sb-image-info{\n            border-radius: 5%;\n            -moz-border-radius:  5%;\n            -webkit-border-radius:  5%;\n        }\n        .sb-image-padding-7{\n            padding: 20px;\n        }\n        .sb-image-map-7 {\n            max-width: 1000px;\n            width: 100%;\n            margin: 0 auto;\n            position: relative;\n        }\n        .sb-image-map-7:after {\n            padding-bottom: 50%;\n            content: \"\";\n            display: block;\n        }\n        .sb-image-animation-7 {\n            animation-duration: 2s;\n        }\n        .sb-image-hover-7 .sb-image-info .sb-image-data{\n            padding: 20px; \n        }\n        .sb-image-hover-7 .sb-image-img,\n        .sb-image-hover-7 .sb-image-info{\n            box-shadow: 0 0 0px  0 rgba(0, 148, 126, 0.36);\n        }\n        .sb-image-hover-7 .sb-image-img:before {\n            position: absolute;\n            display: block;\n            content: '';\n            width: 100%;\n            height: 100%;\n            box-shadow: inset 0 0 0 0px rgba(49, 66, 222, 0.2);\n        }\n        .sb-image-hover-7 .sb-image-info .sb-image-title {\n            font-size: 20px;\n            font-weight: 600;\n            padding-bottom: 5px;\n            margin-bottom: 10px;\n            margin-top: 0;\n            line-height: 120%;\n            font-family: \"Open Sans\";\n            display: block;\n            font-style: normal;\n             border-bottom: 1px solid currentColor;        }\n        .sb-image-hover-7 .sb-image-info .sb-image-desc {\n            font-size: 14px;\n            font-weight: 300;\n            margin-bottom: 20px;\n            margin-top: 0;\n            line-height: 120%;\n            width: 100%;\n            float: left;\n            font-family: \"Open Sans\";\n            font-style: normal;\n        }\n\n        .sb-image-hover-7 a.sb-image-button{\n            padding: 10px 10px;\n            -webkit-border-radius: 5px;\n            -moz-border-radius: 5px;\n            border-radius: 5px;\n            font-weight: 300;\n            font-size: 14px;\n            font-family: \"Open Sans\";\n            font-style: normal;\n            text-decoration: none;\n            display:inline-block;\n        }\n            <\/style>\n    \n<p style=\"text-align: center;\"><em><strong>Phone Book<\/strong> es una prueba de concepto sobre Gesti\u00f3n de Datos de una Agenda de Tel\u00e9fonos. Es una aplicaci\u00f3n sencilla con la que obtuve la experiencia necesaria en el tratamiento de proyectos mediante Struts.<\/em><\/p>\n<div class=\"sb-image-hover-container\"><div class=\"sb-image-hover-row \"><div  class=\"sb-image-hover-responsive-1   sb-image-animation-8  sb-image-padding-8 \">\n                <div class=\"sb-image-map-8\">\n                    <div class=\"sb-image-map-absulate\">\n                       <div class=\"sb-image-hover oxilab-touchstart  sb-image-hover-8 sb-image-hover-8-10 sb-general-effects-7 sb-left-to-right\"><div class=\"sb-image-img\">\n                             <img src=\"http:\/\/fernandezluque.com\/wp-content\/uploads\/2018\/05\/Project_PhoneBook.png\">\n                         <\/div>\n                         <div class=\"sb-image-info\"  >\n                                <div class=\"sb-image-data\">\n                                    <div class=\"sb-image-title\">Phone Book<\/div>\n                                    <div class=\"sb-image-desc\">Java, J2EE, Struts, Jsp, Servlets, Html, Javascript, Css, Sql, Xml, Tomcat,... Realizado en 2007.<\/div>\n                                    <a target=\"_blank\" href=\"http:\/\/fernandezluque.com\/PhoneBook\" class=\"sb-image-button\"> Go! <\/a>\n                                <\/div>\n                         <\/div>          <\/div>\n                     <\/div>\n                <\/div>    <style>\n        .sb-image-hover-8-10{\n            position: relative;\n            width: 100%;\n            height: 100%;\n            -webkit-perspective: 900px;\n            -moz-perspective: 900px;\n            perspective: 900px;\n        }\n        .sb-image-hover-8-10 .sb-image-img {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n        }\n        .sb-image-hover-8-10 .sb-image-info {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n            text-align: center;\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n            display: table;\n        }\n        .sb-image-hover-8-10 .sb-image-img {\n            width: 100%;\n            float: left;\n            visibility: visible;\n            opacity: 1;\n            -webkit-transition: all 0.4s ease-out;\n            -moz-transition: all 0.4s ease-out;\n            transition: all 0.4s ease-out;\n            pointer-events: none;\n        }\n        .sb-image-hover-8-10 .sb-image-info {\n            opacity: 0;\n            background-color:rgba(0, 143, 171, 1);\n            visibility: hidden;\n            -webkit-transition: all 0.35s ease-in-out 0.3s;\n            -moz-transition: all 0.35s ease-in-out 0.3s;\n            transition: all 0.35s ease-in-out 0.3s;\n            pointer-events: none;\n\n        }\n        .sb-image-hover-8-10 .sb-image-info .sb-image-data{\n            display: table-cell;\n            vertical-align: middle; text-align: center;        }\n        .sb-image-hover-8-10 .sb-image-info .sb-image-title {\n            color: #FFF;\n        }\n        .sb-image-hover-8-10 .sb-image-info .sb-image-desc {\n            color: #FFF;\n        }\n        .sb-image-hover-8-10 a.sb-image-button{\n            background: #b8258e;\n            color: #FFF;\n            margin: 0 auto;                    }\n        .sb-image-hover-8-10 a.sb-image-button:hover{\n            background: #FFF;\n            color: #b8258e;\n        }\n        .sb-image-hover-8-10:hover .sb-image-img,\n        .sb-image-hover-8-10.oxi-touch .sb-image-img{\n            opacity: 0;\n            pointer-events: none;\n        }\n        .sb-image-hover-8-10:hover .sb-image-info,\n        .sb-image-hover-8-10.oxi-touch .sb-image-info{\n            visibility: visible;\n            opacity: 1;\n            pointer-events: auto;\n\n        }\n        .sb-image-hover-8-10.sb-left-to-right .sb-image-img {\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n        .sb-image-hover-8-10.sb-left-to-right .sb-image-info {\n            -webkit-transform: translateX(-100%);\n            -moz-transform: translateX(-100%);\n            -ms-transform: translateX(-100%);\n            -o-transform: translateX(-100%);\n            transform: translateX(-100%);\n        }\n        .sb-image-hover-8-10.sb-left-to-right:hover .sb-image-img,\n        .sb-image-hover-8-10.sb-left-to-right.oxi-touch .sb-image-img{\n            -webkit-transform: translateY(-100%);\n            -moz-transform: translateY(-100%);\n            -ms-transform: translateY(-100%);\n            -o-transform: translateY(-100%);\n            transform: translateY(-100%);\n        }\n        .sb-image-hover-8-10.sb-left-to-right:hover .sb-image-info,\n        .sb-image-hover-8-10.sb-left-to-right.oxi-touch .sb-image-info{\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n\n        .sb-image-hover-8-10.sb-right-to-left .sb-image-img {\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n        .sb-image-hover-8-10.sb-right-to-left .sb-image-info {\n            -webkit-transform: translateX(100%);\n            -moz-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n            -o-transform: translateX(100%);\n            transform: translateX(100%);\n        }\n        .sb-image-hover-8-10.sb-right-to-left:hover .sb-image-img,\n        .sb-image-hover-8-10.sb-right-to-left.oxi-touch .sb-image-img{\n            -webkit-transform: translateY(100%);\n            -moz-transform: translateY(100%);\n            -ms-transform: translateY(100%);\n            -o-transform: translateY(100%);\n            transform: translateY(100%);\n        }\n        .sb-image-hover-8-10.sb-right-to-left:hover .sb-image-info,\n        .sb-image-hover-8-10.sb-right-to-left.oxi-touch .sb-image-info{\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-8-10.sb-top-to-bottom .sb-image-img {\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-8-10.sb-top-to-bottom .sb-image-info {\n            -webkit-transform: translateY(100%);\n            -moz-transform: translateY(100%);\n            -ms-transform: translateY(100%);\n            -o-transform: translateY(100%);\n            transform: translateY(100%);\n        }\n        .sb-image-hover-8-10.sb-top-to-bottom:hover .sb-image-img,\n        .sb-image-hover-8-10.sb-top-to-bottom.oxi-touch .sb-image-img{\n            -webkit-transform: translateX(-100%);\n            -moz-transform: translateX(-100%);\n            -ms-transform: translateX(-100%);\n            -o-transform: translateX(-100%);\n            transform: translateX(-100%);\n        }\n        .sb-image-hover-8-10.sb-top-to-bottom:hover .sb-image-info,\n        .sb-image-hover-8-10.sb-top-to-bottom.oxi-touch .sb-image-info{\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n\n\n        .sb-image-hover-8-10.sb-bottom-to-top .sb-image-img {\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-8-10.sb-bottom-to-top .sb-image-info {\n            -webkit-transform: translateY(-100%);\n            -moz-transform: translateY(-100%);\n            -ms-transform: translateY(-100%);\n            -o-transform: translateY(-100%);\n            transform: translateY(-100%);\n        }\n        .sb-image-hover-8-10.sb-bottom-to-top:hover .sb-image-img,\n        .sb-image-hover-8-10.sb-bottom-to-top.oxi-touch .sb-image-img{\n            -webkit-transform: translateX(100%);\n            -moz-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n            -o-transform: translateX(100%);\n            transform: translateX(100%);\n        }\n        .sb-image-hover-8-10.sb-bottom-to-top:hover .sb-image-info,\n        .sb-image-hover-8-10.sb-bottom-to-top.oxi-touch .sb-image-info{\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n    <\/style>\n\n    <\/div><\/div> <\/div>    <style>\n        .sb-image-hover-8, \n        .sb-image-hover-8 .sb-image-img, .sb-image-hover-8 a .sb-image-img,\n        .sb-image-hover-8 .sb-image-img:before, .sb-image-hover-8 a .sb-image-img:before,\n        .sb-image-hover-8 .sb-image-img img, .sb-image-hover-8 a .sb-image-img img,\n        .sb-image-hover-8 .sb-image-info, .sb-image-hover-8 a .sb-image-info{\n            border-radius: 5%;\n            -moz-border-radius:  5%;\n            -webkit-border-radius:  5%;\n        }\n        .sb-image-padding-8{\n            padding: 20px;\n        }\n        .sb-image-map-8 {\n            max-width: 530px;\n            width: 100%;\n            margin: 0 auto;\n            position: relative;\n        }\n        .sb-image-map-8:after {\n            padding-bottom: 100%;\n            content: \"\";\n            display: block;\n        }\n        .sb-image-animation-8 {\n            animation-duration: 2s;\n        }\n        .sb-image-hover-8 .sb-image-info .sb-image-data{\n            padding: 20px; \n        }\n        .sb-image-hover-8 .sb-image-img,\n        .sb-image-hover-8 .sb-image-info{\n            box-shadow: 0 0 0px  0 rgba(0, 148, 126, 0.36);\n        }\n        .sb-image-hover-8 .sb-image-img:before {\n            position: absolute;\n            display: block;\n            content: '';\n            width: 100%;\n            height: 100%;\n            box-shadow: inset 0 0 0 0px rgba(49, 66, 222, 0.2);\n        }\n        .sb-image-hover-8 .sb-image-info .sb-image-title {\n            font-size: 20px;\n            font-weight: 600;\n            padding-bottom: 5px;\n            margin-bottom: 10px;\n            margin-top: 0;\n            line-height: 120%;\n            font-family: \"Open Sans\";\n            display: block;\n            font-style: normal;\n             border-bottom: 1px solid currentColor;        }\n        .sb-image-hover-8 .sb-image-info .sb-image-desc {\n            font-size: 14px;\n            font-weight: 300;\n            margin-bottom: 20px;\n            margin-top: 0;\n            line-height: 120%;\n            width: 100%;\n            float: left;\n            font-family: \"Open Sans\";\n            font-style: normal;\n        }\n\n        .sb-image-hover-8 a.sb-image-button{\n            padding: 10px 10px;\n            -webkit-border-radius: 5px;\n            -moz-border-radius: 5px;\n            border-radius: 5px;\n            font-weight: 300;\n            font-size: 14px;\n            font-family: \"Open Sans\";\n            font-style: normal;\n            text-decoration: none;\n            display:inline-block;\n        }\n            <\/style>\n    \n<p style=\"text-align: center;\"><em><strong>Patina a Barcelona<\/strong>, es un trabajo realizado para la UOC, donde mediante de Html y Css, hab\u00eda que cumplir los estandares de\u00a0usabilidad, la accesibilidad. El tema escogido viene dado por mi pasi\u00f3n por los patines en linea.<\/em><\/p>\n<div class=\"sb-image-hover-container\"><div class=\"sb-image-hover-row \"><div  class=\"sb-image-hover-responsive-1   sb-image-animation-9  sb-image-padding-9 \">\n                <div class=\"sb-image-map-9\">\n                    <div class=\"sb-image-map-absulate\">\n                       <div class=\"sb-image-hover oxilab-touchstart  sb-image-hover-9 sb-image-hover-9-11 sb-general-effects-7 sb-left-to-right\"><div class=\"sb-image-img\">\n                             <img src=\"http:\/\/fernandezluque.com\/wp-content\/uploads\/2018\/05\/Project_Patins.png\">\n                         <\/div>\n                         <div class=\"sb-image-info\"  >\n                                <div class=\"sb-image-data\">\n                                    <div class=\"sb-image-title\">Patina a Barcelona<\/div>\n                                    <div class=\"sb-image-desc\">Java, J2EE, Struts, Jsp, Servlets, Html, Javascript, Css, Sql, Xml, Tomcat,... Realizado en 2008.<\/div>\n                                    <a target=\"_blank\" href=\"http:\/\/fernandezluque.com\/Patins\" class=\"sb-image-button\"> Go! <\/a>\n                                <\/div>\n                         <\/div>          <\/div>\n                     <\/div>\n                <\/div>    <style>\n        .sb-image-hover-9-11{\n            position: relative;\n            width: 100%;\n            height: 100%;\n            -webkit-perspective: 900px;\n            -moz-perspective: 900px;\n            perspective: 900px;\n        }\n        .sb-image-hover-9-11 .sb-image-img {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n        }\n        .sb-image-hover-9-11 .sb-image-info {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n            text-align: center;\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n            display: table;\n        }\n        .sb-image-hover-9-11 .sb-image-img {\n            width: 100%;\n            float: left;\n            visibility: visible;\n            opacity: 1;\n            -webkit-transition: all 0.4s ease-out;\n            -moz-transition: all 0.4s ease-out;\n            transition: all 0.4s ease-out;\n            pointer-events: none;\n        }\n        .sb-image-hover-9-11 .sb-image-info {\n            opacity: 0;\n            background-color:rgba(0, 143, 171, 1);\n            visibility: hidden;\n            -webkit-transition: all 0.35s ease-in-out 0.3s;\n            -moz-transition: all 0.35s ease-in-out 0.3s;\n            transition: all 0.35s ease-in-out 0.3s;\n            pointer-events: none;\n\n        }\n        .sb-image-hover-9-11 .sb-image-info .sb-image-data{\n            display: table-cell;\n            vertical-align: middle; text-align: center;        }\n        .sb-image-hover-9-11 .sb-image-info .sb-image-title {\n            color: #FFF;\n        }\n        .sb-image-hover-9-11 .sb-image-info .sb-image-desc {\n            color: #FFF;\n        }\n        .sb-image-hover-9-11 a.sb-image-button{\n            background: #b8258e;\n            color: #FFF;\n            margin: 0 auto;                    }\n        .sb-image-hover-9-11 a.sb-image-button:hover{\n            background: #FFF;\n            color: #b8258e;\n        }\n        .sb-image-hover-9-11:hover .sb-image-img,\n        .sb-image-hover-9-11.oxi-touch .sb-image-img{\n            opacity: 0;\n            pointer-events: none;\n        }\n        .sb-image-hover-9-11:hover .sb-image-info,\n        .sb-image-hover-9-11.oxi-touch .sb-image-info{\n            visibility: visible;\n            opacity: 1;\n            pointer-events: auto;\n\n        }\n        .sb-image-hover-9-11.sb-left-to-right .sb-image-img {\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n        .sb-image-hover-9-11.sb-left-to-right .sb-image-info {\n            -webkit-transform: translateX(-100%);\n            -moz-transform: translateX(-100%);\n            -ms-transform: translateX(-100%);\n            -o-transform: translateX(-100%);\n            transform: translateX(-100%);\n        }\n        .sb-image-hover-9-11.sb-left-to-right:hover .sb-image-img,\n        .sb-image-hover-9-11.sb-left-to-right.oxi-touch .sb-image-img{\n            -webkit-transform: translateY(-100%);\n            -moz-transform: translateY(-100%);\n            -ms-transform: translateY(-100%);\n            -o-transform: translateY(-100%);\n            transform: translateY(-100%);\n        }\n        .sb-image-hover-9-11.sb-left-to-right:hover .sb-image-info,\n        .sb-image-hover-9-11.sb-left-to-right.oxi-touch .sb-image-info{\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n\n        .sb-image-hover-9-11.sb-right-to-left .sb-image-img {\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n        .sb-image-hover-9-11.sb-right-to-left .sb-image-info {\n            -webkit-transform: translateX(100%);\n            -moz-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n            -o-transform: translateX(100%);\n            transform: translateX(100%);\n        }\n        .sb-image-hover-9-11.sb-right-to-left:hover .sb-image-img,\n        .sb-image-hover-9-11.sb-right-to-left.oxi-touch .sb-image-img{\n            -webkit-transform: translateY(100%);\n            -moz-transform: translateY(100%);\n            -ms-transform: translateY(100%);\n            -o-transform: translateY(100%);\n            transform: translateY(100%);\n        }\n        .sb-image-hover-9-11.sb-right-to-left:hover .sb-image-info,\n        .sb-image-hover-9-11.sb-right-to-left.oxi-touch .sb-image-info{\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-9-11.sb-top-to-bottom .sb-image-img {\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-9-11.sb-top-to-bottom .sb-image-info {\n            -webkit-transform: translateY(100%);\n            -moz-transform: translateY(100%);\n            -ms-transform: translateY(100%);\n            -o-transform: translateY(100%);\n            transform: translateY(100%);\n        }\n        .sb-image-hover-9-11.sb-top-to-bottom:hover .sb-image-img,\n        .sb-image-hover-9-11.sb-top-to-bottom.oxi-touch .sb-image-img{\n            -webkit-transform: translateX(-100%);\n            -moz-transform: translateX(-100%);\n            -ms-transform: translateX(-100%);\n            -o-transform: translateX(-100%);\n            transform: translateX(-100%);\n        }\n        .sb-image-hover-9-11.sb-top-to-bottom:hover .sb-image-info,\n        .sb-image-hover-9-11.sb-top-to-bottom.oxi-touch .sb-image-info{\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n\n\n        .sb-image-hover-9-11.sb-bottom-to-top .sb-image-img {\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-9-11.sb-bottom-to-top .sb-image-info {\n            -webkit-transform: translateY(-100%);\n            -moz-transform: translateY(-100%);\n            -ms-transform: translateY(-100%);\n            -o-transform: translateY(-100%);\n            transform: translateY(-100%);\n        }\n        .sb-image-hover-9-11.sb-bottom-to-top:hover .sb-image-img,\n        .sb-image-hover-9-11.sb-bottom-to-top.oxi-touch .sb-image-img{\n            -webkit-transform: translateX(100%);\n            -moz-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n            -o-transform: translateX(100%);\n            transform: translateX(100%);\n        }\n        .sb-image-hover-9-11.sb-bottom-to-top:hover .sb-image-info,\n        .sb-image-hover-9-11.sb-bottom-to-top.oxi-touch .sb-image-info{\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n    <\/style>\n\n    <\/div><\/div> <\/div>    <style>\n        .sb-image-hover-9, \n        .sb-image-hover-9 .sb-image-img, .sb-image-hover-9 a .sb-image-img,\n        .sb-image-hover-9 .sb-image-img:before, .sb-image-hover-9 a .sb-image-img:before,\n        .sb-image-hover-9 .sb-image-img img, .sb-image-hover-9 a .sb-image-img img,\n        .sb-image-hover-9 .sb-image-info, .sb-image-hover-9 a .sb-image-info{\n            border-radius: 5%;\n            -moz-border-radius:  5%;\n            -webkit-border-radius:  5%;\n        }\n        .sb-image-padding-9{\n            padding: 20px;\n        }\n        .sb-image-map-9 {\n            max-width: 560px;\n            width: 100%;\n            margin: 0 auto;\n            position: relative;\n        }\n        .sb-image-map-9:after {\n            padding-bottom: 98.214285714286%;\n            content: \"\";\n            display: block;\n        }\n        .sb-image-animation-9 {\n            animation-duration: 2s;\n        }\n        .sb-image-hover-9 .sb-image-info .sb-image-data{\n            padding: 20px; \n        }\n        .sb-image-hover-9 .sb-image-img,\n        .sb-image-hover-9 .sb-image-info{\n            box-shadow: 0 0 0px  0 rgba(0, 148, 126, 0.36);\n        }\n        .sb-image-hover-9 .sb-image-img:before {\n            position: absolute;\n            display: block;\n            content: '';\n            width: 100%;\n            height: 100%;\n            box-shadow: inset 0 0 0 0px rgba(49, 66, 222, 0.2);\n        }\n        .sb-image-hover-9 .sb-image-info .sb-image-title {\n            font-size: 20px;\n            font-weight: 600;\n            padding-bottom: 5px;\n            margin-bottom: 10px;\n            margin-top: 0;\n            line-height: 120%;\n            font-family: \"Open Sans\";\n            display: block;\n            font-style: normal;\n             border-bottom: 1px solid currentColor;        }\n        .sb-image-hover-9 .sb-image-info .sb-image-desc {\n            font-size: 14px;\n            font-weight: 300;\n            margin-bottom: 20px;\n            margin-top: 0;\n            line-height: 120%;\n            width: 100%;\n            float: left;\n            font-family: \"Open Sans\";\n            font-style: normal;\n        }\n\n        .sb-image-hover-9 a.sb-image-button{\n            padding: 10px 10px;\n            -webkit-border-radius: 5px;\n            -moz-border-radius: 5px;\n            border-radius: 5px;\n            font-weight: 300;\n            font-size: 14px;\n            font-family: \"Open Sans\";\n            font-style: normal;\n            text-decoration: none;\n            display:inline-block;\n        }\n            <\/style>\n    \n<p style=\"text-align: center;\"><em><strong>LukySite<\/strong> es una de mis primeros proyectos web realizados. Era un portal visible donde poder compartir los proyectos que iba desarrollando.<\/em><\/p>\n<div class=\"sb-image-hover-container\"><div class=\"sb-image-hover-row \"><div  class=\"sb-image-hover-responsive-1   sb-image-animation-11  sb-image-padding-11 \">\n                <div class=\"sb-image-map-11\">\n                    <div class=\"sb-image-map-absulate\">\n                       <div class=\"sb-image-hover oxilab-touchstart  sb-image-hover-11 sb-image-hover-11-13 sb-general-effects-6 sb-right-to-left\"><div class=\"sb-image-img\">\n                             <img src=\"http:\/\/fernandezluque.com\/wp-content\/uploads\/2018\/05\/Project_LukySite.png\">\n                         <\/div>\n                         <div class=\"sb-image-info\"  >\n                                <div class=\"sb-image-data\">\n                                    <div class=\"sb-image-title\">LukySite<\/div>\n                                    <div class=\"sb-image-desc\">Html i Css. Realizado en 2007<\/div>\n                                    <a target=\"_blank\" href=\"http:\/\/fernandezluque.com\/LukySite\" class=\"sb-image-button\"> Go! <\/a>\n                                <\/div>\n                         <\/div>          <\/div>\n                     <\/div>\n                <\/div>    <style>\n        .sb-image-hover-11-13{\n            position: relative;\n            width: 100%;\n            height: 100%;\n            -webkit-perspective: 900px;\n            -moz-perspective: 900px;\n            perspective: 900px;\n            -webkit-transform-style: preserve-3d;\n            -moz-transform-style: preserve-3d;\n            -ms-transform-style: preserve-3d;\n            -o-transform-style: preserve-3d;\n            transform-style: preserve-3d;\n        }\n        .sb-image-hover-11-13 .sb-image-img {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n        }\n        .sb-image-hover-11-13 .sb-image-info {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n            text-align: center;\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n            display: table;\n        }\n        .sb-image-hover-11-13 .sb-image-img {\n            width: 100%;\n            float: left;\n            visibility: visible;\n            opacity: 1;\n            -webkit-transition: all 0.4s ease-out;\n            -moz-transition: all 0.4s ease-out;\n            transition: all 0.4s ease-out;\n        }\n        .sb-image-hover-11-13 .sb-image-info {\n            opacity: 0;\n            background-color:rgba(0, 143, 171, 1);\n            visibility: hidden;\n            -webkit-transition: all 0.35s ease-in-out;\n            -moz-transition: all 0.35s ease-in-out;\n            transition: all 0.35s ease-in-out;\n\n        }\n        .sb-image-hover-11-13 .sb-image-info .sb-image-data{\n            display: table-cell;\n            vertical-align: middle; text-align: center;        }\n        .sb-image-hover-11-13 .sb-image-info .sb-image-title {\n            color: #FFF;\n        }\n        .sb-image-hover-11-13 .sb-image-info .sb-image-desc {\n            color: #FFF;\n        }\n        .sb-image-hover-11-13 a.sb-image-button{\n            background: #b8258e;\n            color: #FFF;\n            margin: 0 auto;                    }\n        .sb-image-hover-11-13 a.sb-image-button:hover{\n            background: #FFF;\n            color: #b8258e;\n        }\n        .sb-image-hover-11-13:hover .sb-image-img,\n        .sb-image-hover-11-13.oxi-touch .sb-image-img{\n            opacity: 0;\n        }\n        .sb-image-hover-11-13.sb-left-to-right .sb-image-info {\n            -webkit-transform: rotate3d(0, 1, 0, -180deg);\n            -moz-transform: rotate3d(0, 1, 0, -180deg);\n            -ms-transform: rotate3d(0, 1, 0, -180deg);\n            -o-transform: rotate3d(0, 1, 0, -180deg);\n            transform: rotate3d(0, 1, 0, -180deg);\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n        }\n        .sb-image-hover-11-13.sb-left-to-right:hover .sb-image-info,\n        .sb-image-hover-11-13.sb-left-to-right.oxi-touch .sb-image-info{\n            -webkit-transform: rotate3d(0, 1, 0, 0deg);\n            -moz-transform: rotate3d(0, 1, 0, 0deg);\n            -ms-transform: rotate3d(0, 1, 0, 0deg);\n            -o-transform: rotate3d(0, 1, 0, 0deg);\n            transform: rotate3d(0, 1, 0, 0deg);\n        }\n        .sb-image-hover-11-13.sb-right-to-left .sb-image-info {\n            -webkit-transform: rotate3d(0, 1, 0, 180deg);\n            -moz-transform: rotate3d(0, 1, 0, 180deg);\n            -ms-transform: rotate3d(0, 1, 0, 180deg);\n            -o-transform: rotate3d(0, 1, 0, 180deg);\n            transform: rotate3d(0, 1, 0, 180deg);\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n        }\n        .sb-image-hover-11-13.sb-right-to-left:hover .sb-image-info,\n        .sb-image-hover-11-13.sb-right-to-left.oxi-touch .sb-image-info{\n            -webkit-transform: rotate3d(0, 1, 0, 0deg);\n            -moz-transform: rotate3d(0, 1, 0, 0deg);\n            -ms-transform: rotate3d(0, 1, 0, 0deg);\n            -o-transform: rotate3d(0, 1, 0, 0deg);\n            transform: rotate3d(0, 1, 0, 0deg);\n        }\n        .sb-image-hover-11-13.sb-top-to-bottom .sb-image-info {\n            -webkit-transform: rotate3d(1, 0, 0, 180deg);\n            -moz-transform: rotate3d(1, 0, 0, 180deg);\n            -ms-transform: rotate3d(1, 0, 0, 180deg);\n            -o-transform: rotate3d(1, 0, 0, 180deg);\n            transform: rotate3d(1, 0, 0, 180deg);\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n        }\n        .sb-image-hover-11-13.sb-top-to-bottom:hover .sb-image-info,\n        .sb-image-hover-11-13.sb-top-to-bottom.oxi-touch .sb-image-info{\n            -webkit-transform: rotate3d(1, 0, 0, 0deg);\n            -moz-transform: rotate3d(1, 0, 0, 0deg);\n            -ms-transform: rotate3d(1, 0, 0, 0deg);\n            -o-transform: rotate3d(1, 0, 0, 0deg);\n            transform: rotate3d(1, 0, 0, 0deg);\n        }\n        .sb-image-hover-11-13.sb-bottom-to-top .sb-image-info {\n            -webkit-transform: rotate3d(1, 0, 0, -180deg);\n            -moz-transform: rotate3d(1, 0, 0, -180deg);\n            -ms-transform: rotate3d(1, 0, 0, -180deg);\n            -o-transform: rotate3d(1, 0, 0, -180deg);\n            transform: rotate3d(1, 0, 0, -180deg);\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n        }\n        .sb-image-hover-11-13.sb-bottom-to-top:hover .sb-image-info,\n        .sb-image-hover-11-13.sb-bottom-to-top.oxi-touch .sb-image-info{\n            -webkit-transform: rotate3d(1, 0, 0, 0deg);\n            -moz-transform: rotate3d(1, 0, 0, 0deg);\n            -ms-transform: rotate3d(1, 0, 0, 0deg);\n            -o-transform: rotate3d(1, 0, 0, 0deg);\n            transform: rotate3d(1, 0, 0, 0deg);\n        }\n        .sb-image-hover-11-13:hover .sb-image-info,\n        .sb-image-hover-11-13.oxi-touch .sb-image-info{\n            visibility: visible;\n            opacity: 1;\n\n        }\n\n    <\/style>\n\n    <\/div><\/div> <\/div>    <style>\n        .sb-image-hover-11, \n        .sb-image-hover-11 .sb-image-img, .sb-image-hover-11 a .sb-image-img,\n        .sb-image-hover-11 .sb-image-img:before, .sb-image-hover-11 a .sb-image-img:before,\n        .sb-image-hover-11 .sb-image-img img, .sb-image-hover-11 a .sb-image-img img,\n        .sb-image-hover-11 .sb-image-info, .sb-image-hover-11 a .sb-image-info{\n            border-radius: 5%;\n            -moz-border-radius:  5%;\n            -webkit-border-radius:  5%;\n        }\n        .sb-image-padding-11{\n            padding: 20px;\n        }\n        .sb-image-map-11 {\n            max-width: 400px;\n            width: 100%;\n            margin: 0 auto;\n            position: relative;\n        }\n        .sb-image-map-11:after {\n            padding-bottom: 125%;\n            content: \"\";\n            display: block;\n        }\n        .sb-image-animation-11 {\n            animation-duration: 10s;\n        }\n        .sb-image-hover-11 .sb-image-info .sb-image-data{\n            padding: 20px; \n        }\n        .sb-image-hover-11 .sb-image-img,\n        .sb-image-hover-11 .sb-image-info{\n            box-shadow: 0 0 0px  0 rgba(0, 148, 126, 0.36);\n        }\n        .sb-image-hover-11 .sb-image-img:before {\n            position: absolute;\n            display: block;\n            content: '';\n            width: 100%;\n            height: 100%;\n            box-shadow: inset 0 0 0 0px rgba(49, 66, 222, 0.2);\n        }\n        .sb-image-hover-11 .sb-image-info .sb-image-title {\n            font-size: 20px;\n            font-weight: 600;\n            padding-bottom: 5px;\n            margin-bottom: 10px;\n            margin-top: 0;\n            line-height: 120%;\n            font-family: \"Open Sans\";\n            display: block;\n            font-style: normal;\n             border-bottom: 1px solid currentColor;        }\n        .sb-image-hover-11 .sb-image-info .sb-image-desc {\n            font-size: 14px;\n            font-weight: 300;\n            margin-bottom: 20px;\n            margin-top: 0;\n            line-height: 120%;\n            width: 100%;\n            float: left;\n            font-family: \"Open Sans\";\n            font-style: normal;\n        }\n\n        .sb-image-hover-11 a.sb-image-button{\n            padding: 10px 10px;\n            -webkit-border-radius: 5px;\n            -moz-border-radius: 5px;\n            border-radius: 5px;\n            font-weight: 300;\n            font-size: 14px;\n            font-family: \"Open Sans\";\n            font-style: normal;\n            text-decoration: none;\n            display:inline-block;\n        }\n            <\/style>\n    \n<p style=\"text-align: center;\"><em><strong>LukySite Flash<\/strong>, es la conversi\u00f3n del proyecto anterior a Flash. Igual que Flex, no se puede visualizar en dispositivos m\u00f3viles.<\/em><\/p>\n<div class=\"sb-image-hover-container\"><div class=\"sb-image-hover-row \"><div  class=\"sb-image-hover-responsive-1   sb-image-animation-10  sb-image-padding-10 \">\n                <div class=\"sb-image-map-10\">\n                    <div class=\"sb-image-map-absulate\">\n                       <div class=\"sb-image-hover oxilab-touchstart  sb-image-hover-10 sb-image-hover-10-12 sb-general-effects-7 sb-left-to-right\"><div class=\"sb-image-img\">\n                             <img src=\"http:\/\/fernandezluque.com\/wp-content\/uploads\/2018\/05\/Project_Flash.png\">\n                         <\/div>\n                         <div class=\"sb-image-info\"  >\n                                <div class=\"sb-image-data\">\n                                    <div class=\"sb-image-title\">LukySite Flash<\/div>\n                                    <div class=\"sb-image-desc\">Html y Flash. Realizado en 2008.<\/div>\n                                    <a target=\"_blank\" href=\"http:\/\/fernandezluque.com\/Flash\" class=\"sb-image-button\"> Go! <\/a>\n                                <\/div>\n                         <\/div>          <\/div>\n                     <\/div>\n                <\/div>    <style>\n        .sb-image-hover-10-12{\n            position: relative;\n            width: 100%;\n            height: 100%;\n            -webkit-perspective: 900px;\n            -moz-perspective: 900px;\n            perspective: 900px;\n        }\n        .sb-image-hover-10-12 .sb-image-img {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n        }\n        .sb-image-hover-10-12 .sb-image-info {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 100%;\n            text-align: center;\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n            display: table;\n        }\n        .sb-image-hover-10-12 .sb-image-img {\n            width: 100%;\n            float: left;\n            visibility: visible;\n            opacity: 1;\n            -webkit-transition: all 0.4s ease-out;\n            -moz-transition: all 0.4s ease-out;\n            transition: all 0.4s ease-out;\n            pointer-events: none;\n        }\n        .sb-image-hover-10-12 .sb-image-info {\n            opacity: 0;\n            background-color:rgba(0, 143, 171, 1);\n            visibility: hidden;\n            -webkit-transition: all 0.35s ease-in-out 0.3s;\n            -moz-transition: all 0.35s ease-in-out 0.3s;\n            transition: all 0.35s ease-in-out 0.3s;\n            pointer-events: none;\n\n        }\n        .sb-image-hover-10-12 .sb-image-info .sb-image-data{\n            display: table-cell;\n            vertical-align: middle; text-align: center;        }\n        .sb-image-hover-10-12 .sb-image-info .sb-image-title {\n            color: #FFF;\n        }\n        .sb-image-hover-10-12 .sb-image-info .sb-image-desc {\n            color: #FFF;\n        }\n        .sb-image-hover-10-12 a.sb-image-button{\n            background: #b8258e;\n            color: #FFF;\n            margin: 0 auto;                    }\n        .sb-image-hover-10-12 a.sb-image-button:hover{\n            background: #FFF;\n            color: #b8258e;\n        }\n        .sb-image-hover-10-12:hover .sb-image-img,\n        .sb-image-hover-10-12.oxi-touch .sb-image-img{\n            opacity: 0;\n            pointer-events: none;\n        }\n        .sb-image-hover-10-12:hover .sb-image-info,\n        .sb-image-hover-10-12.oxi-touch .sb-image-info{\n            visibility: visible;\n            opacity: 1;\n            pointer-events: auto;\n\n        }\n        .sb-image-hover-10-12.sb-left-to-right .sb-image-img {\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n        .sb-image-hover-10-12.sb-left-to-right .sb-image-info {\n            -webkit-transform: translateX(-100%);\n            -moz-transform: translateX(-100%);\n            -ms-transform: translateX(-100%);\n            -o-transform: translateX(-100%);\n            transform: translateX(-100%);\n        }\n        .sb-image-hover-10-12.sb-left-to-right:hover .sb-image-img,\n        .sb-image-hover-10-12.sb-left-to-right.oxi-touch .sb-image-img{\n            -webkit-transform: translateY(-100%);\n            -moz-transform: translateY(-100%);\n            -ms-transform: translateY(-100%);\n            -o-transform: translateY(-100%);\n            transform: translateY(-100%);\n        }\n        .sb-image-hover-10-12.sb-left-to-right:hover .sb-image-info,\n        .sb-image-hover-10-12.sb-left-to-right.oxi-touch .sb-image-info{\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n\n        .sb-image-hover-10-12.sb-right-to-left .sb-image-img {\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n        .sb-image-hover-10-12.sb-right-to-left .sb-image-info {\n            -webkit-transform: translateX(100%);\n            -moz-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n            -o-transform: translateX(100%);\n            transform: translateX(100%);\n        }\n        .sb-image-hover-10-12.sb-right-to-left:hover .sb-image-img,\n        .sb-image-hover-10-12.sb-right-to-left.oxi-touch .sb-image-img{\n            -webkit-transform: translateY(100%);\n            -moz-transform: translateY(100%);\n            -ms-transform: translateY(100%);\n            -o-transform: translateY(100%);\n            transform: translateY(100%);\n        }\n        .sb-image-hover-10-12.sb-right-to-left:hover .sb-image-info,\n        .sb-image-hover-10-12.sb-right-to-left.oxi-touch .sb-image-info{\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-10-12.sb-top-to-bottom .sb-image-img {\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-10-12.sb-top-to-bottom .sb-image-info {\n            -webkit-transform: translateY(100%);\n            -moz-transform: translateY(100%);\n            -ms-transform: translateY(100%);\n            -o-transform: translateY(100%);\n            transform: translateY(100%);\n        }\n        .sb-image-hover-10-12.sb-top-to-bottom:hover .sb-image-img,\n        .sb-image-hover-10-12.sb-top-to-bottom.oxi-touch .sb-image-img{\n            -webkit-transform: translateX(-100%);\n            -moz-transform: translateX(-100%);\n            -ms-transform: translateX(-100%);\n            -o-transform: translateX(-100%);\n            transform: translateX(-100%);\n        }\n        .sb-image-hover-10-12.sb-top-to-bottom:hover .sb-image-info,\n        .sb-image-hover-10-12.sb-top-to-bottom.oxi-touch .sb-image-info{\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n\n\n        .sb-image-hover-10-12.sb-bottom-to-top .sb-image-img {\n            -webkit-transform: translateX(0);\n            -moz-transform: translateX(0);\n            -ms-transform: translateX(0);\n            -o-transform: translateX(0);\n            transform: translateX(0);\n        }\n        .sb-image-hover-10-12.sb-bottom-to-top .sb-image-info {\n            -webkit-transform: translateY(-100%);\n            -moz-transform: translateY(-100%);\n            -ms-transform: translateY(-100%);\n            -o-transform: translateY(-100%);\n            transform: translateY(-100%);\n        }\n        .sb-image-hover-10-12.sb-bottom-to-top:hover .sb-image-img,\n        .sb-image-hover-10-12.sb-bottom-to-top.oxi-touch .sb-image-img{\n            -webkit-transform: translateX(100%);\n            -moz-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n            -o-transform: translateX(100%);\n            transform: translateX(100%);\n        }\n        .sb-image-hover-10-12.sb-bottom-to-top:hover .sb-image-info,\n        .sb-image-hover-10-12.sb-bottom-to-top.oxi-touch .sb-image-info{\n            -webkit-transform: translateY(0);\n            -moz-transform: translateY(0);\n            -ms-transform: translateY(0);\n            -o-transform: translateY(0);\n            transform: translateY(0);\n        }\n    <\/style>\n\n    <\/div><\/div> <\/div>    <style>\n        .sb-image-hover-10, \n        .sb-image-hover-10 .sb-image-img, .sb-image-hover-10 a .sb-image-img,\n        .sb-image-hover-10 .sb-image-img:before, .sb-image-hover-10 a .sb-image-img:before,\n        .sb-image-hover-10 .sb-image-img img, .sb-image-hover-10 a .sb-image-img img,\n        .sb-image-hover-10 .sb-image-info, .sb-image-hover-10 a .sb-image-info{\n            border-radius: 5%;\n            -moz-border-radius:  5%;\n            -webkit-border-radius:  5%;\n        }\n        .sb-image-padding-10{\n            padding: 20px;\n        }\n        .sb-image-map-10 {\n            max-width: 430px;\n            width: 100%;\n            margin: 0 auto;\n            position: relative;\n        }\n        .sb-image-map-10:after {\n            padding-bottom: 116.27906976744%;\n            content: \"\";\n            display: block;\n        }\n        .sb-image-animation-10 {\n            animation-duration: 2s;\n        }\n        .sb-image-hover-10 .sb-image-info .sb-image-data{\n            padding: 20px; \n        }\n        .sb-image-hover-10 .sb-image-img,\n        .sb-image-hover-10 .sb-image-info{\n            box-shadow: 0 0 0px  0 rgba(0, 148, 126, 0.36);\n        }\n        .sb-image-hover-10 .sb-image-img:before {\n            position: absolute;\n            display: block;\n            content: '';\n            width: 100%;\n            height: 100%;\n            box-shadow: inset 0 0 0 0px rgba(49, 66, 222, 0.2);\n        }\n        .sb-image-hover-10 .sb-image-info .sb-image-title {\n            font-size: 20px;\n            font-weight: 600;\n            padding-bottom: 5px;\n            margin-bottom: 10px;\n            margin-top: 0;\n            line-height: 120%;\n            font-family: \"Open Sans\";\n            display: block;\n            font-style: normal;\n             border-bottom: 1px solid currentColor;        }\n        .sb-image-hover-10 .sb-image-info .sb-image-desc {\n            font-size: 14px;\n            font-weight: 300;\n            margin-bottom: 20px;\n            margin-top: 0;\n            line-height: 120%;\n            width: 100%;\n            float: left;\n            font-family: \"Open Sans\";\n            font-style: normal;\n        }\n\n        .sb-image-hover-10 a.sb-image-button{\n            padding: 10px 10px;\n            -webkit-border-radius: 5px;\n            -moz-border-radius: 5px;\n            border-radius: 5px;\n            font-weight: 300;\n            font-size: 14px;\n            font-family: \"Open Sans\";\n            font-style: normal;\n            text-decoration: none;\n            display:inline-block;\n        }\n            <\/style>\n    \n<p>&nbsp;<\/p>\n<p>Casi todos estos proyectos precisan de una capa Servidor, donde realmente reside el trabajo m\u00e1s importante. La utilizaci\u00f3n de amplia variedad de lenguajes conocidos y utilizados (Java, Cobol, Android, Flex, Hibernate, Apache Wicket, Swing, Spring, Struts, Widgets, Properties, Jsp, Html, Javascript, Unix, Xml, Xsl, Tld,&#8230;) est\u00e1 plasmada en algunos de estos proyectos.<\/p>\n<p>&nbsp;<\/p>\n<p>!Espero que os gusten\u00a1<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desde mis inicios en el mundo de la Programaci\u00f3n, como aporte en mis avances profesionales, he realizado diferentes proyectos sobre variados tipos de lenguajes. Son pruebas de concepto, trabajos de la universidad, trabajos para cursos realizados, etc. Enumero algunos de ellos, y entre ellos tenemos este trabajo realizado en WordPress. &nbsp; Invoicing Intranet es el [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"spay_email":""},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P9TapY-1u","_links":{"self":[{"href":"https:\/\/www.fernandezluque.com\/index.php?rest_route=\/wp\/v2\/pages\/92"}],"collection":[{"href":"https:\/\/www.fernandezluque.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.fernandezluque.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.fernandezluque.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fernandezluque.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=92"}],"version-history":[{"count":17,"href":"https:\/\/www.fernandezluque.com\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/www.fernandezluque.com\/index.php?rest_route=\/wp\/v2\/pages\/92\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/www.fernandezluque.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}