Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Taller de HTML5 y CSS3

Una guía práctica, paso a paso, para la construcción de un sitio web utilizando los nuevos tags existentes en html5 y las maravillas de despliegue presentes en CSS3, incluyendo responsive-design (diseño que se adapta al dispositivo de despliegue)
by

Ricardo Naranjo

on 9 September 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Taller de HTML5 y CSS3

Taller de HTML5 y CSS3
Ricardo Naranjo Faccini
http://www.skinait.com
gerencia@skinait.com
Muchas gracias
<!DOCTYPE html>
<html lang='es-CO'>
<head>

</head>
<body>
<header>

</header>
<nav>

</nav>
<main id='contenedor'>

</main>
<footer>

</footer>
</body>
</html>
La estructura de la página
<head>
<meta charset='utf-8' />
<title>
Consultores en ingenieria ambiental,
biorremediacion, hidrocarburos -
Uribe Torres Consultores
</title>
<link rel='stylesheet' href='css/base.css' />
<script language='javascript'
src='lib/despliegue.js'></script>
</head>

El encabezado html
<header>
<img id='banner-ppal'
src='http://www.uribetorres.com/img/banner1.png' />
<img id='logo-ppal'
src='http://www.uribetorres.com/img/logo.png' />
</header>
Imágenes en el encabezado
<nav>
<a href='index.html' target='_top'>
<div id='boton1' class='bot_navegacion'>
<img class='icon' src='img/home.png' alt='' />
<p class='menutxt'>Inicio</p>
</div>
</a>
<a href='experiencia.html' target='_top'>
<div id='boton2' class='bot_navegacion'>
<img class='icon' src='img/engranaje.png' alt='' />
<p class='menutxt'>Experiencia</p>
</div>
</a>
<a href='contactenos.html' target='_top'>
<div id='boton3' class='bot_navegacion'>
<img class='icon' src='img/email.png' alt='' />
<p class='menutxt'>Contctenos</p>
</div>
</a>
<a href='http://es.wikipedia.org/wiki/Ingenier%C3%ADa_ambiental' target='AUX'>
<div id='boton4' class='bot_navegacion'>
<img class='icon' src='img/carro.png' alt='' />
<p class='menutxt'>Ing. Ambiental</p>
</div>
</a>
</nav>

<nav>
<a href='index.html' target='_top'>
<div id='boton1' class='bot_navegacion'>
<img class='icon' src='img/home.png' />
<p class='menutxt'>Inicio</p>
</div>
</a>
<a href='experiencia.html' target='_top'>
<div id='boton2' class='bot_navegacion'>
<img class='icon' src='img/engranaje.png' />
<p class='menutxt'>Experiencia</p>
</div>
</a>
<a href='contactenos.html' target='_top'>
<div id='boton3' class='bot_navegacion'>
<img class='icon' src='img/email.png' />
<p class='menutxt'>Contctenos</p>
</div>
</a>
<a href='http://es.wikipedia.org/wiki/Ingenier%C3%ADa_ambiental' target='AUX'>
<div id='boton4' class='bot_navegacion'>
<img class='icon' src='img/carro.png' />
<p class='menutxt'>Ing. Ambiental</p>
</div>
</a>
</nav>
El menú de la página con sus imágenes
<main id='contenedor'>
<aside>

</aside>
<article id='contenido'>

</article>
</main>

Estructura del contenedor principal
<aside>
<h2>
Ingeniería Ambiental
</h2>
<div class='texto'>
Proporcionamos soluciones efectivas en:
<ul>
<li>Ingeniería ambiental</li>
<li>Consultoria ambiental</li>
<li>Gestión</li>
<li>Asesoría</li>
<li>Diseño</li>
<li>Construcción</li>
<li>Prestación de servicios ambientales.</li>
</ul>
</div>
Brindamos asistencia en Colombia a todo tipo de empresas y particulares
<div class='destacado'>
Nuestro compromiso es el desarrollo país sin deteriorar el ambiente.
</div>
</aside>

Texto lateral
<article id='contenido'>
<h1>
Uribe Torres, Consultores en Ingeniera Ambiental
</h1>
<p>
Con ms de 10 aos de experiencia de nuestros
profesionales en organizaciones sin nimo de lucro,
universidades y empresas privadas, la empresa se interesa en
desarrollar proyectos ambientales, de aprovechamiento de residuos
slidos y de oportunidades de reciclaje. Nuestra experiencia
y especialidad en manejo de residuos peligrosos, diseo y
desarrollo de estudios ambientales y soluciones de ingeniera
en el campo de la prevencin de contaminacin y
recuperacin de sitios contaminados nos pone a la vanguardia
del tema ambiental en Latinoamrica.
</p>
<p>
Somos expertos en procesos de
<strong>biorremediacin</strong>,
<strong>remediacin qumica</strong> y
<strong>fisicoqumica</strong>
para aguas y suelos comprometidos e impactados (potencialmente
<strong>contaminados</strong>) con sustancias tales como:
<strong>Hidrocarburos</strong>,
Pesticidas, Compuestos orgnicos persistentes (COP), entre
otros.
</p>
<ul>

</ul>
</article>
El contenido de la página
<ul>
<li>
<strong>proyectos ambientales</strong>
</li>
<li>
<strong>aprovechamiento de residuos slidos</strong>
</li>
<li>
<strong>oportunidades de reciclaje</strong>
</li>
<li>
<strong>manejo de residuos peligrosos</strong>
</li>
<li>
<strong>diseo y desarrollo de estudios ambientales</strong>
</li>
<li>
<strong>soluciones de ingeniera: prevencin y recuperacin de sitios
contaminados</strong>
</li>
</ul>

Listado de productos en negrilla
<footer>
<address>
Calle 56 # 14-80 of 201. /
Chapinero; Bogotá, D.C., 111221 /
Colombia
<br />
tel: +57 (1) 249 4174 /
email:
<a href="mailto:info@uribetorres.com">info@uribetorres.com</a>
</address>
<section class='derechos'>
Todos los derechos reservados. Prohibida su reproducción,
total o parcial, sin la autorización escrita de
Uribe Torres Consultores S.A.S.
</section>
<section class='autor'>
<div class='cont_texto'>
Site WWW desarrollado por:
<br />
<a href="http://www.skinait.com/">Skina IT Solutions E.U.</a>
</div>
<div class='cont_imagen'>
<a href="http://www.skinait.com" target="SKINA"
><img src="http://www.skinait.com/img/skina_dev.gif"
alt="Developed by Skina IT Solutions"
title="Developed by Skina IT Solutions"
/></a>
</div>
</section>
</footer>
El pié de página
CSS 3
La página “Pelada”
@font-face {
font-family: externa;
font-style: normal;
font-weight: normal;
src: url('../img/MyriadWebPro-Condensed.ttf');
}
* {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS', tahoma;
}

Preparación inicial de la página
nav {
position: absolute;
top: 0px;
left: 40px;
height: 150px;
width: 550px;
margin: auto;
padding-left: 350px;
vertical-align: top;
}
Ubicación del menú sobre la imagen
nav div.bot_navegacion {
height: 90px;
width: 120px;
margin-right: 10px;
float: left;
vertical-align: top;
}
#boton1 {
background: rgba(0,200,0,.5);
}
#boton2 {
background: rgba(0,100,155,.5);
}
#boton3 {
background: rgba(0,200,0,.5);
}
#boton4 {
background: rgba(0,100,155,.5);
}
Disposición horizontal y coloreado de los botones
nav img.icon {
background: rgba(255,255,255,.3);
margin: auto;
margin-top: 10px;
padding: 5px;
display: block;
}

Organización de las imágenes y encuadrarlas con fondo blanquecino
nav img.icon {
background: rgba(255,255,255,.3);
margin: auto;
margin-top: 10px;
padding: 5px;

border: 1px solid rgba(0,0,0,.3);
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: block;
}

Redondeamos el recuadro hasta volverlo un círculo
nav p.menutxt {
color: black;
opacity: .7;
margin: auto;
display: block;
text-align: center;
font-weight: bold;
font-family: externa, 'Trebuchet MS', tahoma;
}

Texto de los botones
nav div.bot_navegacion {
height: 90px;
width: 120px;
margin-right: 10px;
float: left;
vertical-align: top;

border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
cursor: pointer;
}

Redondear los bordes de los botones y poner la “manito”
#logo-ppal {
display: none;
}
body {
background: url('../img/fondo-izq.png') repeat-y,
url('../img/fondo-der.png') right repeat-y;
margin: auto 60px auto 60px;
}
Esconder el logo, poner márgenes y bordes degradados
h1,h2,h3 {
font-family: externa, 'Trebuchet MS', tahoma;
}
h1 {
font-size: 2.2em;
margin-top: 50px;
margin-bottom: 25px;
text-align: center;
}
h2 {
font-size: 1.6em;
text-align: center;
}
a {
text-decoration: none;
}
p {
margin-top: 10px;
margin-bottom: 10px;
text-align: justify;
}
ul {
margin-left: 25px;
}

Fuentes, márgenes y tamaños
article {
max-width: 900px;
margin: auto;
}
address {
border-top: 3px solid #999999;
margin: 50px auto 20px auto;
text-align: center;
font-size: 1.2em;
font-family: externa, 'Trebuchet MS', tahoma;
}
Organización del contenido y la dirección
section.derechos {
font-size: .7em;
font-family: tahoma;
margin: auto;
}
section.autor {
width: 204px;
border: 3px solid #999999;
padding: 5px 10px 5px 10px;
margin: auto;
margin-bottom: 10px;
margin-top: 40px;
margin-right: 50px;
font-size: .7em;
font-family: tahoma;
vertical-align: middle;
}

Organización de derechos y autor
section.autor div {
display: inline-block;
}
section.autor div.cont_texto {
width: 140px;
text-align: center;
}
section.autor div.cont_imagen {
width: 60px;
}

Organización de la información del autor
section.autor {
width: 204px;

border: 3px solid #999999;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 5px 10px 5px 10px;
margin: auto;
margin-bottom: 10px;
margin-top: 40px;
margin-right: 50px;
font-size: .7em;
font-family: tahoma;
vertical-align: middle;
}

Autor con borde redondeado
aside en un recuadro a la derecha
nav div.bot_navegacion {
height: 90px;
width: 120px;
margin-right: 10px;
float: left;
vertical-align: top;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
cursor: pointer;

transition: height .4s;
-moz-transition: height .4s;
-webkit-transition: height .4s;
}
nav div.bot_navegacion:hover {
height: 100px;
}
nav p.menutxt {
color: black;
opacity: .7;
margin: auto;
display: block;
text-align: center;
font-weight: bold;
transition: padding .4s;
-moz-transition: padding .4s;
-webkit-transition: padding .4s;
font-family: externa, 'Trebuchet MS', tahoma;
}
nav div.bot_navegacion:hover p {
padding-top: 10px;
}
Incremento de tamaño del botón :hover
nav img.icon {
background: rgba(255,255,255,.3);
margin: auto;
margin-top: 10px;
padding: 5px;
border: 1px solid rgba(0,0,0,.3);
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 0px 0px 20px rgba(255,255,255,0);
display: block;
transition: box-shadow .2s;
-moz-transition: box-shadow .2s;
-webkit-transition: box-shadow .2s;
}
nav div.bot_navegacion:hover img {
box-shadow: 0px 0px 0px 0px rgba(255,255,255,.5);
}
Brillo al pasar sobre los botones :hover
nav div.bot_navegacion {
height: 90px;
width: 120px;
margin-top: -20px;
margin-right: 10px;
float: left;
vertical-align: top;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
cursor: pointer;
transition: height .4s;
-moz-transition: height .4s;
-webkit-transition: height .4s;
transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}

Rotar los botones
aside {
background: url('http://www.uribetorres.com/img/fondo_div400x300.png');
width: 360px;
height: 260px;
color: rgba(255,255,255,.7);
float: right;
margin: 0px 0px 15px 15px;
padding: 20px;
font-weight: bold;
}
css/base.css
index.html
@media screen and (max-width: 1000px) {
#logo-ppal {
display: inline;
}
#banner-ppal {
display: none;
}
nav {
position: fixed;
padding-left: 200px;
}
aside {
background: url('http://www.uribetorres.com/img/fondo_div400x300.png');
background-size: 100% 100%;
width: 255px;
height: 180px;
font-size: .8em;
font-family: externa;
}
aside div.texto {
font-family: externa;
}
aside div.destacado {
margin-top: 10px;
text-align: center;
font-family: externa;
}
aside li {
font-family: externa;
font-size: .8em;
}
}

Responsive Design
Responsive Design
¿Que sigue?
Modelo - Vista - Controlador
M: Motor de base de datos
V: HTML5 + CSS3 + Javascript
C: PHP, ASP
<canvas>
Geolocalización
DB
AJAX
Storage
Rich Snipplets
<nav>
<a href='index.html' target='_top'>
<div id='boton1' class='bot_navegacion'>
<img class='icon' src='img/home.png' alt='' />
<p class='menutxt'>Inicio</p>
</div>
</a>
<a href='experiencia.html' target='_top'>
<div id='boton2' class='bot_navegacion'>
<img class='icon' src='img/engranaje.png' alt='' />
<p class='menutxt'>Experiencia</p>
</div>
</a>
<a href='contactenos.html' target='_top'>
<div id='boton3' class='bot_navegacion'>
<img class='icon' src='img/email.png' alt='' />
<p class='menutxt'>Cont&aacute;ctenos</p>
</div>
</a>
<a href='http://es.wikipedia.org/wiki/Ingenier%C3%ADa_ambiental'
target='AUX'>
<div id='boton4' class='bot_navegacion'>
<img class='icon' src='img/carro.png' alt='' />
<p class='menutxt'>Ing. Ambiental</p>
</div>
</a>
</nav>
<img class='icon' src='img/xxx.png' alt='' />
El kit de desarrollo
<div id='boton#' class='bot_navegacion'>
<img class='icon' src='img/xxxxx.png' alt='' />
<p class='menutxt'>********</p>
</div>
Lo que estamos afectando es:
<img class='icon' src='img/xxx.png' alt='' />
<div id='boton#' class='bot_navegacion'>
<img class='icon' src='img/xxxxx.png' alt='' />

<p class='menutxt'>********</p>
</div>
<header>
<img id='banner-ppal'
src='http://www.uribetorres.com/img/banner1.png' />
<img id='logo-ppal'
src='http://www.uribetorres.com/img/logo.png' />
</header>
<section class='derechos'>
Todos los derechos reservados. Prohibida su reproducción,
total o parcial, sin la autorización escrita de
Uribe Torres Consultores S.A.S.
</section>
<section class='autor'>
<div class='cont_texto'>
Site WWW desarrollado por:
<br />
<a href="http://www.skinait.com/">
Skina IT Solutions E.U.
</a>
</div>
<div class='cont_imagen'>
<a href="http://www.skinait.com" target="SKINA"
><img src="http://www.skinait.com/img/skina_dev.gif"
alt="Developed by Skina IT Solutions"
title="Developed by Skina IT Solutions"
/></a>
</div>
</section>
<section class='autor'>
<div class='cont_texto'>
Site WWW desarrollado por:
<br />
<a href="http://www.skinait.com/">
Skina IT Solutions E.U.
</a>
</div>
<div class='cont_imagen'>
<a href="http://www.skinait.com" target="SKINA"
><img src="http://www.skinait.com/img/skina_dev.gif"
alt="Developed by Skina IT Solutions"
title="Developed by Skina IT Solutions"
/></a>
</div>
</section>
<div id='boton#' class='bot_navegacion'>
<img class='icon' src='img/xxxxx.png' alt='' />
<p class='menutxt'>********</p>
</div>
Adicionar al <head> del código HTML
<meta name='viewport'
content='width=device-width, initial-scale=.8, maximum-scale=1.5'>
Full transcript