Scribd
Cargar
154 vistas49 páginas

S11 - HTML-CSS-JavaScript PDF

Este documento presenta una introducción al desarrollo de aplicaciones para dispositivos móviles utilizando HTML. Explica conceptos básicos de HTML como su estructura, etiquetas y atributos comunes. También cubre temas como formularios, caracteres especiales y la importancia de nombrar elementos.

Cargado por

Javier Zuñiga
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
154 vistas49 páginas

S11 - HTML-CSS-JavaScript PDF

Este documento presenta una introducción al desarrollo de aplicaciones para dispositivos móviles utilizando HTML. Explica conceptos básicos de HTML como su estructura, etiquetas y atributos comunes. También cubre temas como formularios, caracteres especiales y la importancia de nombrar elementos.

Cargado por

Javier Zuñiga
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 49

DESARROLLO

DE APLICACIONES PARA DISPOSITIVOS MOVILES


M.Sc (c). Jaime Caicedo Guerrero [email protected]

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML
Lenguaje de marcado predominante en la construccin de pginas Web. Describe la estructura y el contenido de la pgina Web. Lenguaje basado en eBquetas. El contenido es estructurado en Elementos usando eFquetas (tags) con informacin extra proporcionada por atributos.

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML: Evolucin
HTML 4.0.1 HTML 4.0

HTML 3.2

HTML 5.0

HTML 2.0

XHTML

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML
Estructura

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Estructura bsica de un documento HTML


<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN h]p://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> 1 <html xmlns=h]p://www.w3.org/1999/xhtml xml:lang=en> <head> <Ftle></Ftle> 2 </head> <body> 3 1 Declaracin </body> 2 Encabezado </html>
3 Cuerpo

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML: Algunas reglas bsicas


Uso de letras minsculas para los tags <a href=hVp://www.mipagina.com/>Mi pagina</a>

Apertura y cierre de eBquetas <p> </p> Valores de atributos entre comillas Elementos anidados apropiadamente
<p>Ir a mi pagina <a href=hVp://www.mipagina.com/>Mi pagina</a></p>

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML: Algunas eFquetas comunes


Prrafo: <p> </p> Introduce una lnea en blanco entre bloques de datos Headings <h1> hasta <h6> EnfaBza el texto

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML: Algunas eFquetas comunes


Tablas: <table></table> Organizacin de informacin de forma tabular table width="100%" height="100%" border="1 tr tdPrimera celda/td tdSegunda celda/td /tr tr tdTercera celda/td tdCuarta celda/td /tr /table

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML: Algunas eFquetas comunes


One side tags
br: Inserta lneas en blanco en el cdigo <hr>: Inserta una lnea horizontal en la pgina
hr align="right" color="black" size="3" width="50%"

img: Especica la localizacin de una imagen pimg src="photograph.jpg"/p meta: Informacin relevante para los motores de bsqueda

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML: Algunas eFquetas comunes


Hipervnculos: <a></a> Enlaces a otros recursos dentro o fuera del documento actual
<a href=mipagina.html#PER">Datos personales</a> <a name=PER"></a> EBqueta de desBno

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML: Algunas eFquetas comunes


Comentarios
Pueden ser mulFlnea. El navegador no interpreta los comentarios como cdigo ejecutable. !-- Texto del comentario --

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

HTML: Caracteres especiales


Relacionado con el conjunto de caracteres Es ms seguro susBtuir el caracter especial por su cdigo respecBvo. Ej:
&aacute; &eacute; &iacute; &oacute; &uacute; &nFlde; &auml; &iquest; &quot; &amp; " &

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Formularios
Proporciona un mecanismo para que los usuarios puedan interactuar con el siBo Web. Propsito: Recopilar informacin directamente de los usuarios.

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Formularios
Dos tags esenciales: <form> <input type=> <input type=> </form>

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Input types
Tipo BuVon Checkbox File Hidden Image Descripcin Botn personalizado sin una funcin denida en HTML. Puede ser usado para lanzar acciones JavaScript. Cajas de chequeo. Puede exisBr seleccin simultnea. Caja de texto especializada para ingreso de rutas de archivos. Campos ocultos para el usuario. Su informacin se transmite con el formulario. Una alternaBva grca para los botones de envo del formulario.

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Input types
Tipo Password Radio Reset Submit Text Descripcin Oculta los caracteres visibles en la caja de texto. No realiza funciones de cifrado. Opciones de seleccin. A diferencia de checkbox, no puede exisBr seleccin simultnea. Retorna la informacin del formulario a sus valores iniciales. Botn para envo de la informacin del formulario. Caja de texto para capturar informacin de usuario.

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Nombrado de elementos
Es importante asignar un nombre a cada elemento del formulario, ya que ste se empareja con el valor respecBvo cuando se enva el formulario. Ej: <input type="text" name=age>

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Cajas de texto
315 Tamao Valor por defecto

<INPUT type="text" size=10" name=tel" value=315" maxlength=10>


Nombre Tamao mximo

<INPUT type="text" size=10" name=tel" value=315" readonly> disabled>


Parmetros de slo lectura

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Labels
p First Name: input type="text" name="rstname" size="20" maxlength="50" /p p Last Name: input type="text" name="lastname" size="20" maxlength="50" /p p label for="rstname"First Name: /label input type="text" name="rstname" size="20" maxlength="50" /p p label for="lastname"Last Name: /label input type="text" name="lastname" size="20" maxlength="50" /p

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Envo del formulario


Mtodo de envo HTTP

get <form acFon="acBon.php" method=post>

<form acFon="acBon.php" method=post enctype="mulFpart/form-data">


Si se incluye un File Input

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Capas
Propsito: Facilitar el layout o posicionamiento de los elementos dentro de la pgina Web.

<div> : Dene secciones de bloque. Agrupa


elementos de disBnto Bpo. denicin de esBlo.

<span>: Agrupa pequeas secciones de texto para

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Capas
<div> <span> <span> <div> <div>

<div>

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

CSS
Brinda a los diseadores de pginas Web la posibilidad de controlar la apariencia de los Websites Permite separar el contenido de la presentacin Especicacin de esBlos para todo el Website, por pgina o tag.

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

CSS
Ventajas Reduce el tamao de los archivos HTML. Reduce el Bempo de descarga en la red. Separacin adecuada de contenido y presentacin.

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

CSS
Porqu CSS?
EsFlo CSS Externa Prioridad ms baja

EsFlo Pgina Web

EsFlo Nivel Elemento Prioridad ms alta

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

El atributo Style
La forma ms simple de adicionar esBlo a un elemento individual dentro del documento HTML es a travs del atributo style. <h1 style="color: magenta>Bienvenidos</h1>

Sintaxis: propiedad:valor; propiedad:valor

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Controles de esFlo embebidos


Control sobre la presentacin de la pgina y no sobre un elemento en parBcular.
head style h1 { color: magenta } /style /head
Propiedad CSS

Selector

Aplica para todos los tags <h1> dentro de la pgina

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Enlace a hojas de esFlo externas


Los esBlos son denidos en un archivo externo (.css).
pagina.html site_sheet.css

head link rel="stylesheet" href="site_sheet.css" type="text/css" link rel="stylesheet" href="site_sheet.css" type="text/css" /head
Enlace a ms de una hoja de esBlo

h1 { font-size: 1in; margin-lew: .5in } h2 { font-size: .75in; margin-lew: .5in } h3 { font-size: .5in; margin-lew: .5in }
Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Establecer esFlos a grupos de elementos


Class: Balance entre el poder de asignacin de esBlo a travs de selectores y la asignacin manual a travs de HTML. head
style .clase1 {font-family: Arial, HelveBca, sans-serif; font-size: 16px} .clase2 {color: #FFCC00} /style /head Declaracin del esBlo de la clase

Declaracin del atributo class dentro del Elemento

p class=clase1"Ejemplo de clase 1p p class=clase2"Ejemplo de clase 2/p

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Establecer esFlos a elementos especcos


Id: Control de esBlo a nivel de elemento.
head style #personal {color: #00FF00} /style /head

Asignacin del id al Elemento p id=personal"Ejemplo de asignacin de id</p

Declaracin del esBlo del elemento con el id personal

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Originalmente conocido como LiveScript (NetScape) Lenguaje de ScripBng basado en objetos Tradicionalmente embebido en pginas Web Creacin de aplicaciones Web dinmicas a travs del uso de eventos

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Declaracin de variables
var answer var answer = 42

Palabra clave no requerida


textEntry = window.document.orderNow.visitorName.value;

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Palabras reservadas

JavaScript

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Operadores

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Comentarios
// de lnea (hasta el nal de la lnea /* */ MulBlnea

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Eventos Se generan a parFr de una accin del usuario Manejadores de eventos parFculares: On + nombre del evento Ej: OnClick, OnUnload <body onLoad="alert(Hola!)" onUnload="alert(Hasta luego!)>
Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Statements
Instrucciones que informan al navegador lo que debe hacer. Ej: document.write(Este texto se adiciona a la pgina."); alert(Esta es una ventana de alerta."); Existen tres formas de introducir statements: Como atributos de un elemento HTML Como instrucciones en el contenido del tag <script> Como parte de una funcin en el contenido del tag <script>

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Statements Uso del tag <script>
<script language=JavaScript> document.write(Primera linea.<br/>); document.write(Segunda linea.<br/>); document.write(El valor actual es" + window.document.formOne.rstName.value); </script>

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Funciones
Conjunto de statements que se ejecutan de forma secuencial <script> funcFon func%onName(){ rstStatement; secondStatement; thirdStatement; } </script>

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

JavaScript
Estructuras de control
if else switch case for () .

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

AJAX Asynchronous JavaScript And XML


JavaScript y XML asncrono Tcnica de desarrollo Web para crear aplicaciones interacBvas Ejecucin del lado del cliente Comunicaciones con el servidor en segundo plano (asncrono) Aumenta la interacBvidad, velocidad y usabilidad

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

AJAX
Combinacin de tres tecnologas existentes:
XHTML (HTML) y Hojas de esBlo (presentacin) Document Object Model (DOM): scripBng con lenguajes como JavaScript o JScript para interactuar con la informacin presentada XMLHVpRequest: intercambio de datos asncronos con el Servidor Web.

XML como formato preferencial (HTML, Texto plano, JSON, EBML, etc.) No es una tecnologa, trmino que engloba a un grupo de tecnologas que trabajan juntas

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

AJAX
Cmo funciona la Web tradicionalmente?

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

AJAX

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Prctica: HTML+CSS+JavaScript

Prctica Test.html, CSSTest.css

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Jaime Caicacedo Guerrero [email protected] Of. 405 ext. 2127

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

Gracias!
Jaime Caicacedo Guerrero [email protected] Of. 405 ext. 2127

Mag. Francisco Mar-nez, Mag(c) Jaime Caicedo

También podría gustarte