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

Lenguajes de Marcado

Introducción a HTML - Principales etiquetas - Uso de CSS - Introducción a HTML5 - Utilizando los nuevos componentes de HTML5 - CSS3
by

Noelia Franco

on 9 May 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Lenguajes de Marcado

Lenguajes de Marcado
Hyper Text Markup Language
Etiquetas
Evolución de HTML
Etiquetas básicas
Encabezados
<p class="foo"> Texto a mostrar </p>
Etiqueta <p></p>
Etiqueta inicio
Contenido
Etiqueta cierre
atributo
valor
Especifica la versión de HTML que se está usando
Descripción global del documento
Contenido del documento
Representan la importancia de los títulos dentro de la página
<h1> Titulo sitio web </h1>
<h2> Titulo de la Pagina </h2>
<h3> Subsección </h3>
<h4> Buscar </h4>
<h3> Buscar </h3>
<h4> Buscar </h4>
<h3> Links</h3>
Atributos
<h1 style="text-align: center;">Website Title</h1>
<body style="background-color: lightblue;">
Hoja de Estilos
Describen el aspecto de un documento HTML
Última especificación de CSS
Sintaxis
CSS tiene un "esquema de caja"
Crear main.css en la carpeta css
body{
background-color: lightblue;
}

/*h1 cambios */
h1{
text-align: center;
font-size: 3em;
font-family: Calibri;
}
Tengo que decirle a la página que CSS usar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Agregando etiquetas</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>Titulo del sitio web</h1>
<h2>Titulo de la pagina</h2>

<h3>Subseccion</h3>
<h3>Buscar</h3>
<h3>Links</h3>
</body>
</html>
Listas
Validar la sintaxis de mi página HTML5
http://validator.w3.org/
Listas ordenadas
Listas desordenadas
Listas de Definiciones
Listas ordenadas
<ol></ol>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li value="30">Item 30</li>
</ol>
Listas desordenadas
<ul></ul>
<ul>
<li type="circle">Usando circulos</li>
<li type="square">Usando cuadrados</li>
<li type="disc">Otros</li>
</ul>
Listas de definiciones
<dl>
<dt>Definición de derivada:</dt>
<dd>"Una derivada es.....(nadie quiere volver a recordar esto XD)"</dd>
</dl>
Definicion de derivada:
"Una derivada es.....(nadie quiere volver a recordar esto XD)"
Tablas
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
</thead>
<tbody>
<tr>
<td>nombre 1</td>
<td>apellido 1</td>
</tr>
<tr>
<td>nombre 2</td>
<td>apellido 2</td>
</tr>
</tbody>
</table>
descripción de las columnas
cuerpo de la tabla
table row: nueva fila de la tabla
table data: nueva celda de la tabla
Sin CSS
Con CSS
ROWSPAN Y COLSPAN
Colspan
unificar horizontal
Rowspan
unificar vertical
Colspan
Rowspan
http://jsfiddle.net/noeliasfranco/LNatb/2/
http://jsfiddle.net/noeliasfranco/4WhsD/1/
Otras etiquetas
<p></p>:
párrafos

<em></em>:
énfasis de texto

<strong></strong>:
texto de mayor importancia

http://jsfiddle.net/noeliasfranco/nHYut/3/
<br>:
salto de línea
&nbsp:
espacio en blanco

URL (Uniform Resource Locator)
http://www.uai.edu.ar/ingreso/estudiar-en-rosario.asp
protocolo
servidor
ruta
URL Absolutas
URL Relativas
http://www.ejemplo.com/ruta1/ruta2/pagina2.html
/ruta1/ruta2/pagina2.html
../css/main.css
Enlaces básicos
<a href=""></a>
<a href="http://www.google.com">Página principal de Google</a>
<a href="css/img/imagen.jpg">Ver imagen</a>
<a href="javascript:;">Enlace vacío</a>
Definir secciones: atributo "name"
<a
name="segunda_seccion"
></a>
<p>Enlace en pagina1.html</p>
<a
href="http://www.ejemplo.com/pagina1.html#segunda_seccion"
>Enlace a la sección 2 de la página 1</a>
<span></span>:
contenedor de porciones de texto

Contenedor <div>
<div></div>
<div id="contenido_principal">
.............
</div>
permite identificar un
elemento de forma única
#contenido_principal
{
background-color: #F7F7F7;
border-radius: 20px;
padding: 2%;
}
CSS por ID
CSS por clase
#nombre_id
{
.........
.........
}
.nombre_clase
{
.........
.........
}
<div id="nombre_id"></div>
<div id="nombre_id" class="datos_alumnos"></div>
<div id="otro_div" class="datos_alumnos"></div>
<table id="alum_data" class="datos_alumnos"></div>
Objetivos de HTML5
•Mejorar la semántica o el markup de los documentos web

•Introducir nuevas etiquetas semánticas

•Introducir nuevas APIs

•Ayudar a crear un diseño web adaptativo o responsive web design

•Promover el uso de otras nuevas tecnologías, como CSS3 y nuevas características de Javascript.
Elementos de HTML4 eliminados en HTML5
•basefont, big, center, font, strike, s, u y tt
•frames, frameset, noframes
•acronym, applet, dir
Nuevos elementos
<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
doctype en HTML5
doctype en HTML4
Nuevos elementos
<video>
Nuevos elementos
<audio>
<audio controls autoplay preload>
<source src="cancion.ogg" type="audio/ogg" />
<source src="cancion.mp3" type="audio/mpeg" />
<source src="cancion.wav" type="audio/wav" />
Tu navegador no soporta esta caracteristica
</audio>
Motores de renderizado
Se encargan de renderizar el código de nuestra página web e implementar el contenido multimedia
WebKit
Gecko
Trident
Presto
Nuevos elementos
<canvas>
Permite dibujar gráficos en 2D
Provee un conjunto de métodos JS para crear y actualizar los gráficos
Permite actualizar imágenes del lado del cliente
Se utiliza en gráficos, animaciones, juegos, etc.
http://jsfiddle.net/noeliasfranco/CSbCL/
Lo que puedo hacer con canvas......
http://www.effectgames.com/demos/canvascycle/
http://www.feedtank.com/labs/html_canvas/
http://hakim.se/experiments/html5/sinuous/01/#
http://www.canvasdemos.com/top-100/
Nuevos elementos
<svg>
http://jsfiddle.net/noeliasfranco/czjfR/
Lo que puedo hacer con SVG.....
http://svg-wow.org/camera/camera.xhtml
SVG o “Scalable Vector Graphics”. SVG es un archivo especifico que nos permite describir gráficos vectorialmente usando XML

Las imágenes vectoriales siempre conservan su calidad, nitidez y aspecto no importa cuanto sea esta escalada.
http://lavadip.com/experiments/jigsaw/
http://raphaeljs.com/analytics.html
http://www.themaninblue.com/experiment/Blobular/
Nueva Semántica
Soporte en navegadores
http://modernizr.com/
Es una librería JavaScript open source creada por el MIT que permite la detección de HTML5 y CSS3
¿Cómo utilizamos la librería Modernizr?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>

<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Crea una variable global
Modernizr,

que contiene un conjunto de propiedades booleanas
if (Modernizr.canvas) {
// puedes usar canvas!
} else {
// este navegador no soporta canvas :(
}
http://caniuse.com/
Can I use.....
Nuevos tipos de inputs
<input type="search">

<input type="number">

<input type="range">

<input type="color">

<input type="tel">

<input type="url">

<input type="email">
<input type="date">

<input type="month">

<input type="week">

<input type="time">

<input type="datetime">

<input type="datetime-local"> f
http://jsfiddle.net/noeliasfranco/q9WSz/4/
placeholder

pattern

autofocus
permite definir una expresión regular para validar los datos
texto mostrado dentro del tag input
que pierde foco al hacer click
permite setear el foco de un input
Nuevas capacidades de CSS3
@font-face
Permite al desarrollador especificar fuentes online para visualizar en sus páginas web
@font-face {
font-family: <un-nombre-e-fuente-remota>;
src: <origen> [,<origen>]*;
[font-weight: <altura>];
[font-style: <estilo>];
}
@font-face ejemplo
http://www.google.com/fonts/
Permite elegir una fuente e incorporarla al CSS
http://jsfiddle.net/noeliasfranco/jB2ve/
Selectores en CSS3
Permiten realizar una selección de elementos en una página HTML

*
selecciona todo

E
selecciona un elemento (E)

E.warning
selecciona un elemento (E) con la clase warning

E#home
selecciona un elemento (E) con la id home

E F
selecciona el elemento F dentro del elemento E

E:not(s)
selecciona los elementos (E) que no contengan s

E > F
selecciona los elementos hijos (F) del primer elemento (E)

E + F
selecciona los elementos E y F hermanos, que están dentro de un mismo bloque

E ~ F
selecciona los elementos F que aparezcan después de E
http://jsfiddle.net/noeliasfranco/jB2ve/3/
Nuevas APIs
Geolocalización
Drag and Drop
Offline Web
Local y Session Storage
Web Workers
y
Web Sockets
http://www.useragentman.com/tests/dragAndDrop/permissionForm.html
Preguntas
Formularios
<form action="" method="">

</form>
action
agente procesador del formulario
method
get:
la información del formulario es agregada a la URI definida en el atributo "action" (por ejemplo, "manejador.php?nombre=name&apellido=last_name").
post:
la información del formulario es agregada al cuerpo del mismo.
<form method="POST" action="respuesta.html">
<label>Nombre</label>
<input name="nombre" placeholder="Escribe aqui" required=true>

<label>Email</label>
<input name="email" type="email" placeholder="Escribe aqui" required=true>

<label>Mensaje</label>
<textarea name="mensaje" placeholder="Escribe aqui" required=true></textarea>

<label>*Cuanto es 2+2? (Anti-spam)</label>
<input name="human" placeholder="Escribe aqui" required=true>

<input id="submit" type="submit" value="Submit">
</form>
Entrada de datos
<input>
<select>
<textarea>
Tag <input>
type="button"
type="checkbox"
type="radio"
type="file"
type="hidden"
type="submit"
type="text"
http://jsfiddle.net/noeliasfranco/VzyaG/12/
Tag <select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
http://jsfiddle.net/noeliasfranco/VzyaG/13/
Tag <textarea>
<textarea rows="4" cols="50">
........................
</textarea>
rows = número de líneas
cols = ancho por defecto
http://jsfiddle.net/noeliasfranco/VzyaG/14/
<img src="" alt=""></img>:
para insertar imágenes

Ejercicios
1- Agregar HTML y CSS necesario para que la página quede con el siguiente formato
Ejercicios
2- Crear el siguiente formulario de contacto
4 maneras de agregar CSS en una página HTML
In-line o en línea
<h2
style="color:red;background:black;"
>
difícil mantenimiento
agregar demasiado código
genera estilos repetidos
Embedded o embebido
<head>
<style media="screen" type="text/css">
Agregar estilos aquí......
</style>
</head>
debe ir en el head de la página
se descarga en cada visita a la página
no genera un nuevo file
Link
<link rel="stylesheet" href="mystyles.css" media="screen" />
cambios en un solo archivo
no se vuelve a descargar
mejora la velocidad de carga
Import
@import "newstyles.css";
permite importar css dentro de otro css
útil para agregar nuevos archivos
Selector:
indica el elemento o elementos HTML a los que se aplica la regla CSS.
Propiedad:
característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.
Valor:
establece el nuevo valor de la característica modificada en el elemento.
Selector universal *
Selecciona todos los elementos de la página
/*Eliminar margen y relleno de todos los elementos*/
* {
margin: 0;
padding: 0;
}
Selector de etiquetas
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector
/*A todas las etiquetas <p> les seteo color de fuente en negro */
p {
color: black;
}
Selectores descendentes
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
HTML
CSS
Selectores de ID y selectores de clases
¿Qué selector soporta mi navegador?
http://www.css3.info/selectors-test/
Colores en CSS
Palabras claves
Hexadecimal
(http://www.colorpicker.com/)
Preguntas
http://jsbin.com/abikej/1/
CSS para texto
font-family
definir el tipo de letra
font-family: Calibri;
font-size
definir tamaño de letra
font-size: 10px;
color
definir color de la letra
color: #684646;
font-style
estilo del texto
font-style: italic;
text-decoration
efectos en el texto
text-decoration: underline;
text-align
cómo el texto está alineado
text-align: center;
text-transform
aplica formatos al texto
text-transform: uppercase;
table{
border: 1px solid gray;
background-color: white;
border-collapse: collapse;

font-family: Calibri;
font-size: 1.5em;

width: 20%;
height: auto;

white-space: nowrap;
}
Aprendimos más CSS!!!!!
background
setear el fondo de un elemento
background-color: black;
border-collapse
formato de bordes de celdas
border-collapse: separate;
border
formato del borde de un tag
border: 1px solid red;
white-space
comportamiento espacios en blanco
white-space: nowrap;
width
ancho de un elemento
width: 300px;
height
alto de un elemento
height: auto;
Blink
CSS3
border-radius
redondear las esquinas de un elemento
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
http://jsbin.com/ilaqow/2/edit
text-shadow
permite agregar sombre a los textos
http://jsbin.com/unoxef/1/edit
box-shadow
permite agregar sombras a elementos que no sean texto
http://jsbin.com/obolob/1/edit
img{
-webkit-box-shadow: 4px 4px 5px #282b1f;
-moz-box-shadow: 4px 4px 5px #282b1f;
box-shadow: 10px 10px 5px #282b1f;
}
opacity
img {opacity: 0.5;}
transform
define cuan opaco será el elemento
permite agregar efectos a los elementos
rotate(-10deg)
scale(1.5)
skew(-10deg, 15deg)
translate(25px, 50px)
<a href="#"/></a>
<a href=""/></a>
agrega una entrada extra al browser history
recarga la página
Permiten crear referencias a secciones de la página
Editor de texto avanzado
http://brackets.io/
Chrome DevTools
Set de herramientas para hacer debug de páginas web
Cómo acceder:
Botón derecho sobre cualquier elemento->Inspeccionar elemento
Ctrl+shift+i
http://jigsaw.w3.org/css-validator/
px vs em
1 em
16 px
100%
12px/16px = 0.75em
Cuantos em son 12 pixeles
Propiedades CSS de la etiqueta <a>
a:link { color : #69bfc8; text-decoration : none;}
a:visited {color : #69bfc8; text-decoration : none;}
a:hover {color : #606060; text-decoration : none;}
Block elements vs Inline elements
Los elementos en bloque empiezan y terminan con una nueva línea. Ejemplo: <h1>, <p>, <ul>, <table>
Los elementos inline se muestran sin comenzar una nueva línea. Ejemplo: <b>, <td>, <a>, <img>
Propiedad display
Especifica el tipo de caja utilizado para una etiqueta HTML
display: value;
Full transcript