UNIVERSIDAD DISTRITAL FRANCISCO JOS DE CALDAS

PROYECTO CURRICULAR
TECNOLOGA EN SISTEMATIZACIN DE DATOS E INGENIERA EN TELEMTICA

FACULTAD TECNOLGICA UNIDAD DE EXTENSIN

BOGOT - COLOMBIA

2014

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

MDULO 5 (II):
HERRAMIENTAS DE DESARROLLO
BASADAS EN SOFTWARE LIBRE

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

OBJETIVOS
General
Conocer los lineamientos bsicos que permitan el diseo y el desarrollo de pginas Web.
Especficos
1. Conceptos y manejo de HTML y hojas de estilo CSS.
2. Orientar al estudiante en la utilizacin del lenguaje de desarrollo Web: JavaScript
3. Proporcionar a los estudiantes conceptos y estructuras que les permitan el diseo y
desarrollo Web.
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

COMPETENCIAS
Adquirir destreza en el manejo de HTML.

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

TABLA DE CONTENIDO
Conceptos Bsicos
Diseo y Desarrollo Web

Lenguaje HTML
Uso de Hojas de Estilo CSS
Manejo JavaScript Bsico

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Formularios HTML

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

La etiqueta form
Los formularios estn delimitados con la etiqueta <form> y </form>,
que permite reunir varios elementos de formulario, como botones,
campos de texto, botones de seleccin.
<form method="post" o "get" action="url" ... </form>

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

La etiqueta form
Method: Indica cmo se enviarn las respuestas.
Post: para enviar el valor de los datos al agente de procesamiento almacenndolos
en el cuerpo del formulario
Get: para enviar los datos agregndole la direccin URL separados de la direccin
por medio de un signo de interrogacin.
Action: Indica la direccin a la que se enviar la informacin.
Enctype: Es un atributo opcional que especifica cmo se codifican los datos del
formulario.
<form method="post" o "get" action="url" ... </form>
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

La etiqueta input
Etiqueta input: Se utiliza para crear la mayora de los elementos
interactivos, entre los cuales se pueden nombrar:

Checkbox
hidden
file
image
Password
radio
reset
submit
text
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

La etiqueta input
La etiqueta input contiene los siguientes atributos:
type: Se usa para especificar qu tipo de elemento se representa con la
etiqueta input.
name: Sirve para especificar el nombre del elemento interactivo.
value: Permite especificar un valor predeterminado para un elemento
interactivo.

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Formulario

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

css
Las hojas de estilo en cascada (Cascade Style Sheet) es una tecnologa
para mejorar la apariencia de una pgina Web.
CSS describe como los elementos dispuestos en la pgina son
presentados al usuario.

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Caractersticas CSS
Una caracterstica de CSS es la posibilidad de separar los elementos
formales de los del contenido. De esta forma, con slo una
modificacin en la hoja de estilo es posible cambiar el aspecto de todas
las pginas en las que se aplica un estilo de hoja.

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Reglas CSS
CSS funciona a base de reglas, es decir, se crean declaraciones sobre el
estilo de uno o ms etiquetas.

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Reglas CSS
El selector funciona como enlace entre el documento y el estilo,
especificando los elementos que se van a ver afectados por esa
declaracin.
La declaracin es la parte de la regla que establece cul ser el efecto.
A su vez la declaracin est compuesta por una propiedad: y el valor
que se le asigne.

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Modelo de Caja en CSS

Sirve para agrupar elementos
en contenedores, a los que
luego podremos aplicar estilos
con CSS. Se trata de las capas, o
cajas, que cobrarn una gran
importancia a la hora de realizar
tus diseos.

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Selectores bsicos CSS

Los selectores son como una especie de filtro. Con ellos podemos seleccionar
subconjuntos de elementos en una pgina web y aplicarles idnticas propiedades
para que finalmente tengan el mismo estilo.
Selector universal
Sirve para seleccionar todos los elementos de la pgina. Se representa mediante
un asterisco.

* { margin: 0; }
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Selectores bsicos CSS

*{
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}

Lo que hace esa regla es aplicar a TODOS los elementos de la pgina una
transicin. Cualquier elemento que tenga en ella un cambio de tamao,
posicin, color de fondo, etc., se har poco a poco y no de golpe
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Selector de etiqueta
Selecciona todos los elementos marcados con determinada
etiqueta HTML.
Ejemplo:
div { background: blue; border: 3px solid black;}

Aplica a todos los div un fondo azul y un borde slido de 3px y

color negro
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Selector de clase
Los selectores de clase se integran a una pgina Web utilizando el
atributo class. Puede ser asignado a cada elemento HTML en el
documento que comparte un diseo similar.

Ejemplo:
.libre { color: green; }
Aplica a todos los elementos con una clase libre, una fuente de
color verde
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Selector de ID
El atributo id es como un nombre que identifica al elemento.
Este nombre debe ser nico en todo el documento.
Ejemplo:
#myide { background: blue; }
Aplica al elemento myideun color de fondo azul.
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Estilos
Aplicar estilos a los elementos HTML cambia la forma en que estos son
presentados en pantalla.
Estilos en lnea:
<nombre_etiqueta style="declaraciones CSS">

Estilos embebidos:
Las reglas se deben incluir entre <style> .. </style>

Archivos externos:
La ruta del archivo se debe incluir entre <link> .. </link>
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Estilos en Lnea
Es asignar los estilos dentro de las etiquetas por medio del atributo style.
<!DOCTYPE html>
<html lan="es">
<head>
<meta charset="utf-8" />
<title>Estilos de Linea</title>
</head>
<body>
<h3 style="text-indent:4 cm; background:blue; color:white;">
Texto etiqueta h3 con estilo, el encabezado es blanco con fondo azul y una sangra
de 4 centmetros. </h3>
<h3> Texto etiqueta h3 sin Estilo</h3>
<p style="color:yellow;background:green;font-family:helvetica;text-indent:2cm;">
texto etiqueta p de color amarrillo, fondo verde y una sangra de 2 centmetros</p>
</body>
</html>

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Estilos Embebidos
Inserta los estilos en la cabecera del documento y luego usa referencias para afectar los
elementos HTML correspondientes.
<!DOCTYPE html>
<html lan="es">
<head>
<meta charset="utf-8" />
<title>Estilos Embebidos</title>
<style type="text/css">
h3,h4 {color:brown;font-style:bold;}
p.primera {color:yellow;background:green;font-family:helvetica;text-indent:2cm;}
p.segunda {color:green;background:azul;font-family:arial;font-size: x-large;}
</style>
</head>
<body>
<h3>Texto etiqueta h3 con estilo, color cafe y en negrilla </h3>
<h4> Texto etiqueta h4 con estilo, color cafe y en negrilla </h4>
<p class="primera">Texto etiqueta p de color amarrillo, fondo verde y una sangria de 2 centmetros</p>
<p class="segunda">texto etiqueta p especfica llamada segunda</p>
</body>
</html>

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Archivos Externos
Se utiliza la etiqueta <link>, esta debe ser insertada en la cabecera (head) de la pgina
Web. Y contiene los siguientes atributos:
href: Indica al explorador el nombre y la ruta del archivo con las definiciones de la
hoja de estilo que se va a utilizar. Este archivo debe tener la extensin .css.
type: Identifica el archivo como un archivo de texto con informacin CSS.
rel: Identifica la hoja de estilo.
Su formato es:
<link href="nombrearchivo.css" rel="stylesheet" type="text/css">
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Archivos Externos
p.especial {
color : green;
border: solid red;
}
h1.letra {
color:orange;font-style:italic;
}
h5.texto {
color:blue;font-style:bold;
}
p{
font-family:arial;color:maroon;
}
p.altura{
font-size:20px;
}

Archivo css
(hojaestilo.css)

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Archivos Externos
<!DOCTYPE html>
<html lan="es">
<head>
<meta charset="utf-8" />
<title>Estilos</title>

<link href="hojaestilo.css" rel="stylesheet" type="text/css">

</head>
<body>
<p class="especial">Este prrafo debera tener texto especial verde.</p>
<h1 class="letra"> Este es el estilo de la etiqueta h1</h1>
<h5 class="texto"> Estilo de texto de la etiqueta h5 </h5>
<p>Prrafo con letra arial y color marrn</p>
<p class="altura">
Igual que el prrafo anterior, pero con tamao de 20 pixeles</p>
</body>
</html>
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

Archivo HTML
(estilo_externo.html)

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Ejemplo Hoja con CSS3

body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px 10px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px;
box-shadow: rgb(150,150,150) 5px 5px 10px;
}
#titulo {
font: bold 36px verdana, sans-serif;
text-shadow: rgb(0,0,150) 3px 3px 5px;
}

Archivo css
(hojaestilo2.css)

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Archivos Externos
<!DOCTYPE html>
<html lan="es">
<head>
<meta charset="utf-8" />
<title>Nuevos Estilos CSS3</title>
<link href="hojaestilo2.css" rel="stylesheet" type="text/css">
</head>
<body>
<header id="principal">
<span id="titulo">Estilos CSS Web 2.0</span>
</header>
</body>
</html>

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

Archivo HTML
(nuevos_stilos.html)

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Formulario HTML5 y CSS3

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

Gracias
Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.

 Herramientas de Desarrollo Basadas en Software Libre

Objetivos
Lenguaje HTML
Uso de Hojas de Estilo CSS

INFOGRAFA

CSS Tutorial. (s. f.). Recuperado 20 de marzo de 2014, a partir de http://www.w3schools.com/css/DEFAULT.asp

Selectores CSS. Bsicos | Oloblogger. (s. f.). Recuperado 26 de marzo de 2014, a partir de http://www.oloblogger.com/2013/06/css-selectores-basicos.html
Hernn Aguilera Formas geomtricas con CSS. (s. f.). Recuperado 26 de marzo de 2014, a partir de http://hernanaguilera.com.ve/506/formas-geometricas-con-css/
CSS a fondo. (s. f.). Recuperado 26 de marzo de 2014, a partir de http://www.desarrolloweb.com/css/
Gua Breve de CSS. (s. f.). Recuperado 26 de marzo de 2014, a partir de http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo
Tutoriales|VirtualTec - Diseo y Desarrollo de Paginas web en Rancagua. (s. f.). Recuperado 26 de marzo de 2014, a partir de http://virtualtec.cl/category/tutoriales/
Gauchat Juan (2012). El gran libro de HTML5, CSS3 y Javascript. Barcelona. Marcombo S.A.

Modulo 5 - Ing. Sonia Pinzn Nuez. - No Arcos Muoz.