DPW2 U1 Ea Jugh

Programación WEB I
Unidad 1. ¿????
Universidad Abierta y a Distancia de

México
Facilitador
Rebeca Eugenia Aguilar Durón.
Grupo: DS-DPW2-1801-B1-001
Asignatura
Programación WEB II
Periodo semestral 2017 bloque 2
Estudiante
Julio Cesar García Hernández.
Matrícula
ES1410902943
Programación WEB I
Unidad 1. ¿????
Evidencia de Aprendizaje
Alojar una página en un sitio web.
Propósito: Aprender a alojar páginas web en servidores web.
Convierte la maquetación de la Actividad 2 en una página web con HTML5 y CSS.
Codigo HTML
<!DOCTYPE html>
<html>
<head>
<link href="styles/custom.css" rel="stylesheet" type="text/css" />
<title>Games Julio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="scripts/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="scripts/icons/general/stylesheets/general_foundicons.css" media="screen"
rel="stylesheet" type="text/css" />
<link href="scripts/icons/social/stylesheets/social_foundicons.css" media="screen" rel="stylesheet"
type="text/css" />
Programación WEB I
Unidad 1. ¿????
<link rel="stylesheet" href="scripts/fontawesome/css/font-awesome.min.css">
<link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="scripts/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="scripts/carousel/style.css" rel="stylesheet" type="text/css" />
<link href="scripts/camera/css/camera.css" rel="stylesheet" type="text/css" />
<link href="scripts/wookmark/css/style.css" rel="stylesheet" type="text/css" />
<link href="scripts/yoxview/yoxview.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divBoxed" class="container">
<div class="transparent-bg" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:
-1;zoom: 1;"></div>
<div class="divPanel notop nobottom">
<div class="row-fluid">
<div class="span12">


<div id="divLogo">
<a href="index.html" id="divSiteTitle">Games Julio</a><br />
<a href="index.html" id="divTagLine">Un lugar donde puedes ser tu</a>
</div>
</div>
</div>
<div class="centered_menu">

<div class="navbar">
<button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-
toggle="collapse" data-target=".nav-collapse">
Navegación <span class="icon-chevron-down icon-white"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav nav-pills ddmenu">
<li class="dropdown active">
<a href="#" class="dropdown-toggle">XBOX <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown">
<a href="index.html" class="dropdown-toggle">Juegos ONE</a>
<a href="index.html" class="dropdown-toggle">Consolas ONE</a>
<a href="index.html" class="dropdown-toggle">Accesorios ONE</a>
<a href="index.html" class="dropdown-toggle">Juegos 360</a>
<a href="index.html" class="dropdown-toggle">Consolas 360</a>
<a href="index.html" class="dropdown-toggle">Accesorios 360</a>
Programación WEB I
Unidad 1. ¿????
</li>
</ul>
</li>
<a href="#" class="dropdown-toggle">Playstation<b class="caret"></b></a>
<a href="" class="dropdown-toggle">Juegos PS4</a>
<a href="#" class="dropdown-toggle">Accesorios PS4</a>
<a href="#" class="dropdown-toggle">Consolas PS4</a>
<a href="#" class="dropdown-toggle">Juegos PS3</a>
<a href="#" class="dropdown-toggle">Accesorios PS3</a>
<a href="#" class="dropdown-toggle">Juegos PSV</a>
<a href="about#" class="dropdown-toggle">Accesorios PSV</a>
</li>
</ul>
</li>

<a href="#" class="dropdown-toggle">Nintendo<b class="caret"></b></a>
<li><a href="#">Switch</a></li>
<li><a href="#">Juegos Switch</a></li>
<li><a href="#">Consolas Switch</a></li>
<li><a href="#">Accesorios Switch</a></li>
<li><a href="#">Juegos Wii U</a></li>
<li><a href="#">Consolas Wii U</a></li>
<li><a href="#">Accesorios Wii U</a></li>
<li><a href="#">Juegos 3DS</a></li>
<li><a href="#">Consolas 3DS</a></li>
<li><a href="#">Accesorios 3DS</a></li>
<li><a href="#">Juegos Wii</a></li>
<li><a href="#">Accesorios Wii</a></li>
<li><a href="#">Amiibo</a></li>
</li>
<li><a href="wide.html">Full Page</a></li>
<li><a href="2-column.html">2 Column</a></li>
<li><a href="3-column.html">3 Column</a></li>
</ul>
</li>
<a href="#" class="dropdown-toggle">Accesorios <b class="caret"></b></a>
Programación WEB I
Unidad 1. ¿????
<li><a href="#">ThinkGeek</a></li>
<li><a href="#">iBlocks</a></li>
<li><a href="#">Disney Infinity</a></li>
<li><a href="#">Gunnar</a></li>
<li><a href="#">LEGO</a></li>
<li><a href="#">Otros</a></li>
</ul>
</li>
<li class="dropdown active"><a href="#">Los más vendidos</a></li>
<li class="dropdown active"><a href="#">Preventa</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="headerSeparator"></div>

<div class="camera_full_width">
<div id="camera_wrap" class="shadow">
<div data-src="slider-images/MRKB_KEYART.jpg" >
<div class="camera_caption fadeFromBottom cap1">Tenemos una gran variedad de
juegos.</div>
</div>
<div data-src="slider-images/maxresdefault.jpg" >
</div>
<div data-src="slider-images/_articulos_-3827258.jpg" >
</div>
<div data-src="slider-images/collage-1024x645.jpg" >
</div>
<div data-src="slider-images/SAO.jpg" >
</div>
</div>
<br style="clear:both"/><div style="margin-bottom:50px"></div>
</div>

<div id="divHeaderText" class="page-content">

<div id="divHeaderLine1">Juegos en Venta</div>
</br>
<div style="text-align: left;">
<ul class="lower_greek">
Programación WEB I
Unidad 1. ¿????
<li>
<b>Consolas y Juegos llenos de aventuras:</b> Encuentra en Games Julio tienda en línea
el videojuego que tanto has deseado. Descubre en nuestro catálogo una amplia variedad de consolas de
videojuegos y juegos de Xbox 360, Xbox One, PlayStation, PS4 y Nintendo Wii.
</li>
<li>
<b>Aprovecha todo el contenido para descargar que te ofrece Xbox 360 en su Play
Store:</b> conéctate a Netflix con las consolas Xbox One y PS4. Juega con las figuras amiibo de Nintendo
que tenemos para ti, y descubre nuevas aventuras y mundos que te ofrecen al conectarlas a tu Wii.
Tenemos todos los juegos de consola que estás buscando.
</li>
<li>
<b>Compra juegos de acción, aventuras, carreras, pelea, deportes y más:</b>A un
excelente precio. Encuentra títulos como: Rainbow, Halo, Call of Duty, FIFA, The Crew, Zelda, Mario
Party Island, entre otros. No olvides que somos la tienda de videojuegos más completa, aquí podrás
encontrar: juegos para wii u, juegos nuevos, juegos para pc (si eres un PC gamer), consolas de nintendo,
Xbox y Play Station.
</li>
</div><br />
</div>
<hr>
<div id="headerSeparator2"></div>
</div>
</div>
</div>
<div class="contentArea">
<div class="divPanel nintendootop page-content">
<div class="span12" id="divMain">
<div div class="row-fluid">
<div class="span4">
<div class="yoxview">
<div class="span4 box">

Programación WEB I
Unidad 1. ¿????
<a href="imagen/CallOFD.jpg"><img src="imagen/CallOFD.jpg" class="img-
polaroid" alt="Call Of Dutty" title="Call Of Dutty" /></a>
</div>
<a href="imagen/DBF1.jpg"><img src="imagen/DBF1.jpg" class="img-polaroid"

alt="Juegs en Venta" title="Estreno Dragon Ball Z Figther " /></a>
</div>
<a href="imagen/Ninjago.png"><img src="imagen/Ninjago.png" class="img-

polaroid" alt="Thumbnail Placeholder" title="Ninjago" /></a>
</div>
<a href="imagen/Thor.jpg"><img src="imagen/Thor.jpg" class="img-polaroid"

alt="Thumbnail Placeholder" title="For Honor" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footerOuterSeparator"></div>
<div id="divFooter" class="footerArea shadow">
<br /><br />
<p class="copyright">
Copyright © 2018 GAmes Julio. All Rights Reserved.
Programación WEB I
Unidad 1. ¿????
</p>
<div class="social_bookmarks">
<a href="#"><div class="icon_twitter"></div></a>
<a href="#"><div class="icon_facebook"></div></a>
<a href="#"><div class="icon_google"></div></a>
<a href="#"><div class="icon_pinterest"></div></a>
</div>
</div>
</div>
</div>
</div>
</div>
<br /><br /><br />
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/default.js" type="text/javascript"></script>
<script src="scripts/carousel/jquery.carouFredSel-6.2.0-packed.js" type="text/javascript"></script>

<script type="text/javascript">$('#list_photos').carouFredSel({ responsive: true, width: '100%', scroll: 2,
items: {width: 320,visible: {min: 2, max: 6}} });</script>
<script src="scripts/camera/scripts/camera.min.js" type="text/javascript"></script>
<script src="scripts/easing/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">function startCamera() {$('#camera_wrap').camera({ fx: 'simpleFade,
mosaicSpiralReverse', time: 2000, loader: 'none', playPause: false, navigation: true, height: '38%',
pagination: true });}$(function(){startCamera()});</script>
<script src="scripts/wookmark/js/jquery.wookmark.js" type="text/javascript"></script>
<script type="text/javascript">$(window).load(function () {var options = {autoResize: true,container: $
('#gridArea'),offset: 10};var handler = $('#tiles li');handler.wookmark(options);$('#tiles li').each(function
() { var imgm = 0; if($(this).find('img').length>0)imgm=parseInt($(this).find('img').not('p
img').css('margin-bottom')); var newHeight = $(this).find('img').height() + imgm + $
(this).find('div').height() + $(this).find('h4').height() + $(this).find('p').not('blockquote p').height() + $
(this).find('iframe').height() + $(this).find('blockquote').height() + 5;if($(this).find('iframe').height())
newHeight = newHeight+15;$(this).css('height', newHeight +
'px');});handler.wookmark(options);handler.wookmark(options);});</script>
<script src="scripts/yoxview/yox.js" type="text/javascript"></script>
<script src="scripts/yoxview/jquery.yoxview-2.21.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function () {$
('.yoxview').yoxview({autoHideInfo:false,renderInfoPin:false,backgroundColor:'#ffffff',backgroundOpacit
y:0.8,infoBackColor:'#000000',infoBackOpacity:1});$('.yoxview a img').hover(function(){$
(this).animate({opacity:0.7},300)},function(){$(this).animate({opacity:1},300)});});</script>
Programación WEB I
Unidad 1. ¿????
Codigo CSS
/***** BASE CSS *****/
/* Site Name */
#divSiteTitle {text-decoration:none;}
#divTagLine {text-decoration:none;}
/* Headline Text */
#divHeaderLine1 {display:inline-block !important}
/* Headings */
h3, h4, h5, h6 {line-height:1.5 !important}
.lead {
text-align:center;
}
.lead h2 {
font-size:33px;line-height:45px; color: rgb(69, 68, 68);
}
.lead h3 {
font-size:17px; color: rgb(69, 68, 68);
}
.lead h3 a {
font-size:inherit !important; color: rgb(69, 68, 68);
}
/* Contact */
Programación WEB I
Unidad 1. ¿????
ul#contact-info .icon {font-size:20px;float:left;line-height:25px;margin-right:10px;}
ul#contact-info .field {font-weight:bold;}
ul#contact-info {list-style:none;}
ul.lower_greek {
list-style-image: url('../imagen/Yellow-pin.png');
margin-left: 45px;
}
/* Grid */
#tiles li {
width:240px !important;
background-color: #ffffff;
border: 1px solid #dedede;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 10px !important;
margin-right:7px;margin-bottom:7px;float:left;
}
#tiles li img {margin-bottom:10px;}
#tiles li div.meta {color:#999;text-transform:uppercase;font-size:10px;margin:0;}
#tiles li h4 {line-height:1.5;margin:0 0 5px 0;}
#tiles li h4 a {line-height:inherit;margin:0;text-decoration:inherit;color:inherit;font-size:inherit;font-
family:inherit;font-weight:inherit;font-style:inherit;}
#tiles li p {font-size:12px;line-height:1.5;margin:0;}
#tiles li a {font-size:12px;}
#tiles li .more_link {font-size:smaller;line-height:2;text-transform:uppercase;letter-spacing:2px;white-

space:nowrap;display:block;margin: 5px 0 0 0;}
#tiles li blockquote {line-height:1.5;margin:0;padding:0;color:#999;border:none;font-size:150%;font-

style:italic;font-family:Georgia, Times, serif;}
#tiles li blockquote small {font-size:11px;font-style:normal;}

Programación WEB I
Unidad 1. ¿????
/* Icons */
[class*="social foundicon-"]:before {font-family: "SocialFoundicons";}
[class*="general foundicon-"]:before {font-family: "GeneralFoundicons";}
/* Menu Side */
.menu_menu_simple ul {margin-top:0px;margin-bottom:0px;}
.menu_menu_simple ul li {margin-top:0px;margin-bottom:0px;}
/* Header Area */
#decorative1 {
margin-top:-2px;padding-top:2px;
margin-left: -20px !important;
margin-right: -20px !important; /* fix bg cover issue */
}
/* Menu Centered */
.centered_menu {text-align:center}
.centered_menu > div {display:inline-block;}
.centered_menu div {text-align:left}
/* Footer elements */
.social_bookmarks a {font-size:smaller !important;text-transform:uppercase;letter-spacing:1px;text-

decoration:none;margin-right:20px;}
.copyright {font-size:smaller;letter-spacing:1px;}
/* Responsive Image */
img {max-width:100%;height:auto;width:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-
box;box-sizing:border-box;}
Programación WEB I
Unidad 1. ¿????
/* Responsive Video from Zurb Foundation. Copyright (c) 2011 ZURB, http://www.zurb.com/ License:
MIT */
.flex-video {position:relative;padding-top:25px;padding-bottom:67.5%;height:0;margin-
bottom:16px;overflow: hidden;}
.flex-video.widescreen {padding-bottom:57.25%;}
.flex-video.vimeo {padding-top:0;}
.flex-video iframe, .flex-video object, .flex-video embed

{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and
(device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and
(device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }
/* Additional */
#divBoxed {position:relative}
.nav-links > a {margin-right:20px;}
.btn-secondary, .btn-secondary:hover {text-shadow:none;}
#divHeaderLine1 a, #divHeaderLine2 a, #divHeaderLine3 a {

font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
font-family: inherit;
text-shadow: inherit;
font-weight: inherit;
font-style: inherit;
}
#divHeaderLine1, #divHeaderLine2, #divHeaderLine3 {

padding-top:3px !important;
padding-bottom:3px !important;
text-align:inherit !important;
}
#decorative2 {/*opacity:0.95;*/
Programación WEB I
Unidad 1. ¿????
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);

-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);
}
.showcase-tabs > li > a {

font-size: 14px;
letter-spacing: 1px;
padding-left: 20px;
padding-right: 20px;
}
.cap1 div, .cap2 div, .cap3 div, .cap4 div, .cap5 div {
margin: 0 -1px;
}
.camera_wrap .camera_pag .camera_pag_ul li {margin:20px 5px 0px !important;

}
.box{
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}
.box i{
font-size: 44px;
color: rgb(69, 68, 68);
}
/* Shout Box */
.shout-box {
margin-bottom:28px;
padding:16px 45px 19px 29px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
overflow:hidden;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 12px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
Programación WEB I
Unidad 1. ¿????
border-left-style: solid;
border-top-color: #E7E8EF;
border-right-color: #E7E8EF;
border-bottom-color: #E7E8EF;
border-left-color: #EBB400;
}
.shout-box .btn-right {
float:right;
margin-top:10px;
margin-bottom:10px;
}
.shout-box h2 {
font: 23px/22px 'Source Sans Pro', sans-serif;
color:#222;
margin-topm:10px;
margin-bottom:10px;
}
.shout-box p {
margin:0;
}
/* Adjustments */
.search.adjust {margin-bottom:15px}
.divPanel {}
.divPanel.notop {padding-top:0px}
.divPanel.nobottom {padding-bottom:0px}
/***** BOOTSTRAP CSS BASE OVERRIDE *****/
.navbar .nav-pills > li > a {text-shadow:none;font-weight:normal;}
.navbar .dropdown-menu li > a {text-shadow:none;font-weight:normal;}
.navbar .nav-pills > li > .dropdown-menu:before {border:none;}
.navbar .nav-pills > li > .dropdown-menu:after {border:none;}
.navbar .nav-pills > .active > a, .navbar .nav-pills > .active > a:hover, .navbar .nav-pills > .active > a:focus
{-webkit-box-shadow: none;box-shadow: none;}
Programación WEB I
Unidad 1. ¿????
.navbar .nav-pills > li > a:hover, .navbar .nav-pills li.dropdown.open.active > .dropdown-toggle {-webkit-
transition: ease-in-out .2s;-moz-transition: ease-in-out .2s;-o-transition: ease-in-out .2s;-ms-transition:
ease-in-out .2s; transition: ease-in-out .2s;}
.navbar .nav-pills .open .dropdown-toggle {background-color:transparent;}
.btn .caret {margin-top: 8px !important;}
body {background-image: url(mirrored_squares.png); background-color: rgb(181, 181, 181);

background-position: inherit inherit; background-repeat: repeat repeat;}
#divBoxed {margin-top: 51px; ;;}
#divLogo{margin-top: 48px; margin-bottom: 0px; text-align: center;}
#divSiteTitle {font-family: Syncopate; font-size: 28px; line-height: 49px; color: rgb(235, 180, 0); text-
shadow: rgba(0, 0, 0, 0.0980392) 0px 3px 5px, rgba(255, 255, 255, 0.298039) 0px -5px 35px; letter-
spacing: 4px; font-weight: normal; font-style: normal; text-transform: uppercase;}
#divTagLine {color: rgb(150, 150, 150); line-height: 25px; text-transform: none; letter-spacing: 4px; font-
size: 16px; padding-left: 2px; padding-right: 2px; background-color: transparent; text-shadow: none;
font-family: Abel; font-weight: normal; font-style: normal;}
.navContainer {}
.navContainer .navMenu {}
.navContainer .navMenu li {}
.navContainer .navMenu li a {}
.navContainer .navMenu li.current {}
.navContainer .navMenu li.current a {}
.camera_caption > div {opacity: 0.85;filter:alpha(opacity=85);}
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands,

.camera_thumbs_cont {opacity: 0.85;filter:alpha(opacity=85) !important;background-color:rgb(240, 240,
240);}
.camera_wrap .camera_pag .camera_pag_ul li, .camera_wrap .camera_pag .camera_pag_ul li,

.camera_wrap .camera_pag .camera_pag_ul li:hover > span {box-shadow: rgba(0, 0, 0, 0.121569) 0px
3px 8px inset; background-color: rgb(230, 230, 230); }
Programación WEB I
Unidad 1. ¿????
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {}
.camera_wrap {display: block; margin-bottom: 15px; height: 391px; border: none; margin-left: 0px;
border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-
bottom-left-radius: 0px; margin-top: 51px; -webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 15px 10px
-10px, rgba(0, 0, 0, 0.298039) 0pt 1px 4px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 15px 10px -10px,
rgba(0, 0, 0, 0.298039) 0pt 1px 4px;}
.cap1 > div {opacity: 0.85;filter:alpha(opacity=85);background-color:rgb(61, 61, 61);}
.cap2 > div {opacity: 0.85;filter:alpha(opacity=85);background-color:rgb(61, 61, 61);}
.cap3 > div {opacity: 0.85;filter:alpha(opacity=85);}
.page-content {line-height: 22px; font-family: 'Maven Pro', sans-serif;}
.page-content a {color: rgb(219, 167, 0); font-family: 'Maven Pro', sans-serif;}
.sidebox {-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;-moz-box-
shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;box-shadow:0 1px 3px rgba(0, 0, 0,
0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;background-color:rgb(250, 250, 250);color:rgb(51, 51, 51);border-
width:1px;border-style:solid;border-color:rgb(255, 255, 255);border-radius:3px;padding:18px;margin-
top:11px; font-family: 'Maven Pro', sans-serif; font-size: 14px;}
.sidebar {padding-top: 8px;;;}
.sidebox-title {line-height: 36px; font-weight: normal; font-style: normal; font-family: 'Open Sans'; color:
rgb(51, 51, 51); font-size: 22px; text-transform: none;}
.sidebox a {color: rgb(219, 167, 0); font-family: 'Maven Pro', sans-serif;}
#divFooter{font-size: 13px; font-family: 'Maven Pro', sans-serif; background-image:

url(bedge_grunge.png); background-repeat: repeat repeat;}
.divPanel {padding: 40px;;;}
#divFooter a {color: rgb(224, 91, 73); font-size: 13px; font-family: 'Maven Pro', sans-serif;}
#divFooter h3 {font-family: 'Source Sans Pro', sans-serif; font-weight: normal; font-style: normal; font-
size: 23px; line-height: 45px; color: rgb(69, 68, 68);}
Programación WEB I
Unidad 1. ¿????
h2 {font-weight: normal; font-style: normal; color: rgb(69, 68, 68); font-family: 'Source Sans Pro', sans-
serif; font-size: 35px; line-height: 50px;}
.transparent-bg {-moz-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px; -webkit-box-shadow: rgba(0, 0,

0, 0.298039) 0px 1px 4px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px; background-color: rgb(255,
255, 255); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;;}
.breadcrumbs {font-size: 14px; line-height: 25px; margin-top: 0px; font-family: 'Maven Pro', sans-serif;}
.breadcrumbs a {color: rgb(219, 167, 0); font-family: 'Maven Pro', sans-serif;}
#divHeaderLine1 {font-family: 'Source Sans Pro', sans-serif; font-size: 40px; line-height: 42px; margin-
top: 0px; text-transform: none; color: rgb(106, 103, 101); letter-spacing: 1px; text-align: center; text-
shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px; background-image: none; opacity: 1; padding: 0px;}
#divHeaderLine2 {font-family: 'Source Sans Pro', sans-serif; font-size: 19px; line-height: 19px; margin-
top: 0px; color: rgb(106, 103, 101); letter-spacing: 1px; text-shadow: rgba(255, 255, 255, 0.6) 1px 1px
1px; text-align: center; background-image: none; opacity: 1; padding: 0px;}
#divHeaderLine3 {margin-top: 15px; line-height: 22px; color: rgb(0, 0, 0); text-align: center; font-family:
'Source Sans Pro', sans-serif;}
.text-center {
text-align:center;
}
a.btn, a.btn-large, a.btn-small, a.btn-mini {color:#333}
a.btn-info, a.btn-success, a.btn-warning, a.btn-danger, a.btn-inverse {color:#ffffff}
.btn-secondary, .btn-secondary:hover, a.btn-secondary, a.btn-secondary:hover {color:#323232;}
.btn-secondary {border:1px solid #dfdfdf;border-bottom:1px solid #afafaf;background-

color:#fafafa;background-repeat: repeat-x;background-image:-webkit-gradient(linear, left top, left
bottom, from(#fafafa), to(#e1e1e1));background-image:-webkit-linear-gradient(top, #fafafa,
#e1e1e1);background-image:-moz-linear-gradient(top, #fafafa, #e1e1e1);background-image:-ms-linear-
gradient(top, #fafafa, #e1e1e1);background-image:-o-linear-gradient(top, #fafafa,
#e1e1e1);background-image:linear-gradient(top, #fafafa, #e1e1e1);filter:
progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#e1e1e1,
GradientType=0);filter: progid:dximagetransform.microsoft.gradient(enabled=false);}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary.active, .btn-secondary.disabled, .btn-

secondary[disabled] {background-color:#dfdfdf;}
.btn-primary, .btn-primary:hover, a.btn-primary, a.btn-primary:hover {color:#ffffff;}

Programación WEB I
Unidad 1. ¿????
.btn-primary {border:1px solid #d1a000;border-bottom:1px solid #a57e00;background-

color:#ebb400;background-repeat: repeat-x;background-image:-webkit-gradient(linear, left top, left
bottom, from(#ebb400), to(#d4a200));background-image:-webkit-linear-gradient(top, #ebb400,
#d4a200);background-image:-moz-linear-gradient(top, #ebb400, #d4a200);background-image:-ms-
linear-gradient(top, #ebb400, #d4a200);background-image:-o-linear-gradient(top, #ebb400,
#d4a200);background-image:linear-gradient(top, #ebb400, #d4a200);filter:
progid:dximagetransform.microsoft.gradient(startColorstr=#ebb400, endColorstr=#d4a200,
GradientType=0);filter: progid:dximagetransform.microsoft.gradient(enabled=false);}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-

primary[disabled] {background-color:#d1a000;}
#divHeaderText {padding: 0px 0px 20px; border-color: rgb(51, 51, 51); text-align: center;;}
#contentInnerSeparator{margin-top: -10px; margin-bottom: 0px; border-top-color: rgb(255, 255, 255);

border-top-width: 0px; border-top-style: solid; height: 0px;}
#footerOuterSeparator{margin-top: 28px; height: 0px; background-color: rgb(255, 255, 255); border-

top-color: rgb(255, 255, 255); border-top-width: 0px; border-top-style: solid;}
#headerSeparator{margin-top: 0px; border-top-color: rgb(51, 51, 51); border-top-width: 0px; border-

top-style: solid;}
h3,.page-content h3 a {font-weight: normal; font-style: normal; font-family: 'Source Sans Pro', sans-serif;
font-size: 28px; line-height: 50px;}
.line-separator{border-top-width: 1px; border-top-style: dotted; margin-top: 21px; margin-bottom:

21px; border-top-color: rgb(195, 195, 195); }
#divVideo{border: 7px solid rgb(255, 255, 255); margin-left: -5px; -webkit-box-shadow: rgba(0, 0, 0,
0.498039) 0px 15px 10px -10px, rgba(0, 0, 0, 0.298039) 0px 1px 4px; box-shadow: rgba(0, 0, 0, 0.498039)
0px 15px 10px -10px, rgba(0, 0, 0, 0.298039) 0px 1px 4px; border-top-left-radius: 0px; border-top-right-
radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; margin-top: 15px; }
.nav .dropdown-toggle .caret {border-top-color:rgb(0, 0, 0);border-bottom-color:rgb(0, 0, 0);}

Programación WEB I
Unidad 1. ¿????
.nav .dropdown-toggle:hover .caret {border-top-color:rgb(0, 0, 0);border-bottom-color:rgb(0, 0, 0);}
.navbar .dropdown-menu, .dropdown-menu {background-color:rgb(255, 255, 255);border-radius:0px;}
.navbar .dropdown-menu li > a, .dropdown-menu li > a, .navbar .nav-pills .open .dropdown-toggle

{color:rgb(69, 68, 68)}
.navbar .dropdown-menu li > a:hover, .navbar .dropdown-menu .active > a, .navbar .dropdown-menu
.active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active >
a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .navbar .nav-pills .open
a.dropdown-toggle:hover {filter:none;color:#ffffff;background-color:#ebb400;background-image:none}
.navbar .nav-pills > li > a {margin-left:2px;margin-right:2px;padding:10px 30px;border-

radius:0px;color:rgb(69, 68, 68);background-color:transparent;border-bottom-width:3px;border-
bottom-style:solid;border-bottom-color:rgb(240, 240, 240)}
.navbar .nav-pills > li > a:hover, .navbar .nav li.dropdown.open.active > .dropdown-toggle, .navbar .nav-
pills > li > a:focus {color:rgb(69, 68, 68);background-color:transparent;border-bottom-width:3px;border-
bottom-style:solid;border-bottom-color:#ebb400}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav li.dropdown.open > .dropdown-
toggle, .navbar .nav li.dropdown.active > .dropdown-toggle {background:none}
.navbar .nav-pills > .active > a, .navbar .nav-pills > .active > a:hover, .navbar .nav-pills li.dropdown.open
> .dropdown-toggle, .navbar .nav-pills li.dropdown.active > .dropdown-toggle {color:rgb(69, 68,
68);background-color:transparent;border-bottom-width:3px;border-bottom-style:solid;border-bottom-
color:#ebb400;}
.navbar .ddmenu {margin-top:43px;margin-bottom:0px}
.navbar .nav-pills li.dropdown > .dropdown-toggle .caret, .navbar .nav-pills li.dropdown.open >
.dropdown-toggle .caret, .navbar .nav-pills li.dropdown.active > .dropdown-toggle .caret, .navbar .nav-
pills li.dropdown.open.active > .dropdown-toggle .caret {border-top-color:rgb(69, 68, 68);border-
bottom-color:rgb(69, 68, 68);}
.navbar .nav-pills li.dropdown > .dropdown-toggle:hover .caret {border-top-color:rgb(69, 68, 68);border-

.navbar .nav-pills li.dropdown.active > .dropdown-toggle .caret {border-top-color:rgb(69, 68, 68);border-

.dropdown-menu .sub-menu {left:100%;position:absolute;top:0;visibility:hidden;margin-top:-1px;}
.dropdown-menu li:hover .sub-menu {visibility:visible;}
.ddmenu.nav-pills li a {font-family: Oxygen, sans-serif; font-size: 15px; line-height: 17px;}

Programación WEB I
Unidad 1. ¿????
.ddmenu .dropdown-menu li a {font-family: 'Open Sans'; line-height: 26px; font-size: 13px;}
.camera_caption {font-size: 14px; font-family: Oxygen, sans-serif; letter-spacing: 1px; line-height: 21px;}
.lead h2 {font-size: 40px; line-height: 60px; color: rgb(69, 68, 68); font-family: 'Source Sans Pro', sans-
serif;}
.lead h3 {font-size: 23px; color: rgb(69, 68, 68); font-family: 'Source Sans Pro', sans-serif;}
.dropdown-menu .sub-menu {left:100%;position:absolute;top:0;visibility:hidden;margin-top:-1px;}

.dropdown-menu li:hover .sub-menu {visibility:visible;}
.navbar .btn-navbar-highlight {display:none;width:100%}
#decorative2 {z-index:100 !important}
@media (max-width: 979px) {

#divLogo {margin-bottom:10px;}
.navbar .btn-navbar-highlight {display:inline;padding:9px 14px;margin-top:15px;}
.navbar {width:100%;}
#divMenuRight {float:none}
.dropdown-menu .sub-menu {left:0%;position:relative;top:0;visibility:visible;margin-

top:3px;display:block}
.dropdown-menu, .sub-menu {border-radius:5px !important;}
.navbar .ddmenu {margin-top: 0px;margin-bottom: 0px;}
/* Fixed Top */
#decorative2 {position:static; height:auto;}
body {padding-top:0px}
@media (max-width: 767px) {

Programación WEB I
Unidad 1. ¿????
#divLogo {margin-top:10px;margin-bottom:10px;}
#divSiteTitle {font-size: 25px;}
#divHeaderText {margin:0px;padding:10px 0px;}
#divHeaderLine1 {margin-top: 0px;}
#divMenuRight {width:100%;margin-top: 0px;padding-top:0px}
.ddmenu, .navbar .ddmenu {margin-top: 0px; margin-bottom: 0px;}
.navbar .btn-navbar-highlight {padding:9px 14px;margin-top:0px;}
.navbar {width:100%;margin-top: 0px;padding-top:0px}
#decorative1, #decorative2, #decorative3 {margin-left:-20px;margin-right:-20px;padding-

left:20px;padding-right:20px;}
/* Fixed Top */
#decorative2 {position:static}
body {padding-top:0px}
#divFooter {margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}
#divBoxed > #divFooter {margin-left:0px;margin-right:0px;padding-left:0px;padding-right:0px;}
body > #footerOuterSeparator, body > #contentOuterSeparator {margin-left:-20px;margin-right:-

20px;}
.headerArea, .topArea {padding:20px !important;}

/*only for templates without divBoxed*/
#camera_wrap {margin-top:20px}
#divVideo {margin-top:20px}
Programación WEB I
Unidad 1. ¿????
.dropdown-menu .sub-menu {left:0%;position:relative;top:0;visibility:visible;margin-

top:3px;display:block}
.dropdown-menu, .sub-menu {border-radius:5px !important;}
.navbar .ddmenu {margin-top: 0px;margin-bottom: 0px;}
}
.box
/* Slider Shadow */
.shadow {
position: relative;
}
.shadow:after {
content: '';
position: absolute;
z-index: -2;
left: 2%;
width: 96%;
height: 60px;
-moz-border-radius: 48%/30px;
-webkit-border-radius: 48%/30px;
border-radius: 48%/30px;
bottom: 24px;
}
.shadow:before {
content: '';
position: absolute;
z-index: -1;
left: 30%;
width: 40%;
height: 60px;
-moz-border-radius: 15%/30px;
-webkit-border-radius: 15%/30px;
border-radius: 15%/30px;
bottom: 44px;
Programación WEB I
Unidad 1. ¿????
}
/* Social Icons */
.social_bookmarks a{ float:left; margin-right:10px;}

.icon_twitter { width:31px; height:30px; background:url('../icons/twitter1.png')}
.icon_twitter:hover {background:url('../icons/twitter2.png')}
.icon_facebook { width:31px; height:30px; background:url('../icons/facebook1.png')}
.icon_facebook:hover {background:url('../icons/facebook2.png')}
.icon_google { width:31px; height:30px; background:url('../icons/google1.png')}
.icon_google:hover {background:url('../icons/google2.png')}
.icon_pinterest { width:31px; height:30px; background:url('../icons/pinterest1.png')}
.icon_pinterest:hover {background:url('../icons/pinterest2.png')}
.icon_flickr { width:24px; height:24px; background:url('../icons/icons_flickr.png')}
.icon_flickr:hover {background:url('../icons/icons_flickr_hover.png')}
Identifica un sitio de alojamiento para tu página web a internet en forma gratuita
Alojagmiento
http://gamesjulio.byethost6.com/index.html
Selecciona un programa de transferencia de archivos FTP.
Fillezilla
Programación WEB I
Unidad 1. ¿????
Comprueba que el nombre de dominio seleccionado no haya sido registrado previamente.
Dominio
Aloja el proyecto de la página web desarrollado en el hospedaje gratuito.

Programación WEB I
Unidad 1. ¿????
Integra la dirección para ir a tu página web alojada

http://gamesjulio.byethost6.com/index.html
Guarda tanto el código fuente de tu página web así como la liga URL para ejecutar tu sitio web con el
nombre DPW2_U1_EA_XXYZ. Sustituye las XX por las dos primeras letras de tu primer nombre, la Y por
tu primer apellido y la Z por tu segundo apellido.
https://gameplanet.com/
https://www.gamershop.com.mx/
https://www.walmart.com.mx/videojuegos

DPW2 U1 Ea Jugh

Cargado por

Copyright:

Formatos disponibles

DPW2 U1 Ea Jugh

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

DPW2 U1 Ea Jugh

Cargado por

Copyright:

Formatos disponibles

Programación WEB I

Universidad Abierta y a Distancia de

Propósito: Aprender a alojar páginas web en servidores web.

Convierte la maquetación de la Actividad 2 en una página web con HTML5 y CSS.

<li class="dropdown active">

<div id="divHeaderText" class="page-content">

<div class="span4 box">

<div class="span4 box">

<a href="imagen/DBF1.jpg"><img src="imagen/DBF1.jpg" class="img-polaroid"

<div class="span4 box">

<a href="imagen/Ninjago.png"><img src="imagen/Ninjago.png" class="img-

<a href="imagen/Thor.jpg"><img src="imagen/Thor.jpg" class="img-polaroid"

<script src="scripts/carousel/jquery.carouFredSel-6.2.0-packed.js" type="text/javascript"></script>

/***** BASE CSS *****/

#divHeaderLine1 {display:inline-block !important}

#divHeaderLine2 {display:inline-block !important}

#divHeaderLine3 {display:inline-block !important}

h3, h4, h5, h6 {line-height:1.5 !important}

ul#contact-info .icon {font-size:20px;float:left;line-height:25px;margin-right:10px;}

ul#contact-info .field {font-weight:bold;}

#tiles li img {margin-bottom:10px;}

#tiles li div.meta {color:#999;text-transform:uppercase;font-size:10px;margin:0;}

#tiles li h4 {line-height:1.5;margin:0 0 5px 0;}

#tiles li .more_link {font-size:smaller;line-height:2;text-transform:uppercase;letter-spacing:2px;white-

#tiles li blockquote {line-height:1.5;margin:0;padding:0;color:#999;border:none;font-size:150%;font-

#tiles li blockquote small {font-size:11px;font-style:normal;}

[class*="social foundicon-"]:before {font-family: "SocialFoundicons";}

[class*="general foundicon-"]:before {font-family: "GeneralFoundicons";}

.centered_menu > div {display:inline-block;}

.centered_menu div {text-align:left}

.social_bookmarks a {font-size:smaller !important;text-transform:uppercase;letter-spacing:1px;text-

.flex-video iframe, .flex-video object, .flex-video embed

.nav-links > a {margin-right:20px;}

.btn-secondary, .btn-secondary:hover {text-shadow:none;}

#divHeaderLine1 a, #divHeaderLine2 a, #divHeaderLine3 a {

#divHeaderLine1, #divHeaderLine2, #divHeaderLine3 {

-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);

.showcase-tabs > li > a {

.camera_wrap .camera_pag .camera_pag_ul li {margin:20px 5px 0px !important;

/***** BOOTSTRAP CSS BASE OVERRIDE *****/

.navbar .nav-pills > li > a {text-shadow:none;font-weight:normal;}

.navbar .dropdown-menu li > a {text-shadow:none;font-weight:normal;}

.navbar .nav-pills > li > .dropdown-menu:before {border:none;}

.navbar .nav-pills > li > .dropdown-menu:after {border:none;}

.navbar .nav-pills .open .dropdown-toggle {background-color:transparent;}

.btn .caret {margin-top: 8px !important;}

body {background-image: url(mirrored_squares.png); background-color: rgb(181, 181, 181);

#divBoxed {margin-top: 51px; ;;}

#divLogo{margin-top: 48px; margin-bottom: 0px; text-align: center;}

.navContainer .navMenu li.current {}

.navContainer .navMenu li.current a {}

.camera_caption > div {opacity: 0.85;filter:alpha(opacity=85);}

.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands,

.camera_wrap .camera_pag .camera_pag_ul li, .camera_wrap .camera_pag .camera_pag_ul li,

.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span {}

.cap1 > div {opacity: 0.85;filter:alpha(opacity=85);background-color:rgb(61, 61, 61);}

.cap2 > div {opacity: 0.85;filter:alpha(opacity=85);background-color:rgb(61, 61, 61);}

.cap3 > div {opacity: 0.85;filter:alpha(opacity=85);}

/* BASE CSS */

/* BOOTSTRAP CSS BASE OVERRIDE */