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

DAI5501 - Intro S1

Diseño de aplicaciones para internet - Introducción semana 1
by

Victoria Orellana

on 11 March 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of DAI5501 - Intro S1

DAI 5501
DISEÑO DE APLICACIONES PARA INTERNET
Victoria Orellana G.
Desarrolladora de Software
v.orellanag@profesor.duoc.cl
Bibligrafía Obligatoria
Título: PHP5: a través de ejemplos.
Autor: Abraham Gutiérrez Rodríguez.
Editorial: AlfaOmega.
Año: 2005.

Título: Diseño de páginas Web interactivas con Javascript y CSS.
Autor: Oros Cabello, Juan Carlos.Editorial: AlfaOmega.
Año: 2004.

Evaluaciones
- 35% Ejecución práctica No.1
Dudas, consultas
Presencial,
en la sede
DIEÑO DE APLICACIONES PARA INTERNET
Diseñar aplicaciones web utilizando tecnologías abiertas acorde a los requerimientos de la organización.

Verificar el funcionamiento de una aplicación Web acorde a los requerimientos del negocio utilizando herramientas propias del entorno de desarrollo con tecnologías abiertas.
¿Qué aprenderemos?
Unidad 1 Creación y validación de interfaz de usuario para un sitio web
Programando del lado del cliente con:
- HTML, HTML5
- CSS, CSS3
- Javascript
- JQuery

Unidad 2 Desarrollo de
Aplicaciones web en el
servidor.
Diseña aplicaciones web del lado del servidor utilizando tecnologías abiertas: PHP y MySQL
Verifica el funcionamiento de una aplicación Web acorde a los requerimientos del negocio utilizando herramientas propias del entorno de desarrollo tecnologías abiertas.
Unidad 3 Verificación y
optimización de un sitio web
Nota final: 60%
+
Examen final: 40%
- 50% Ejecución práctica No.2
- 15% Ejecución práctica No.3
Ejecución práctica que consiste en el desarrollo de un sitio web simple, que deberá ser construido
integrando elementos, estilos y funciones según las evidencias.
Ejecución práctica que contiene un caso complejo (control de usuarios, manejo de 4 o más tablas...) y deben desarrollar una aplicación web en PHP que satisfaga los criterios de evaluación y evidencias.
Ejecución práctica en la que los alumnos reciben un sitio específico y deben evaluarlo desde el punto de vista funcional utilizando las
herramientas aplicadas en clases y entregar la documentación asociada a la evaluación.

Unidad 1
Interfaz de usuario
Unidad 2
Prog. en el servidor
Unidad 3
Verificación
Cronograma del Ramo
Semana 1
Semana 2
Semana 3
Semana 4
Semana 5: 7 de Abril al 12 de Abril PRUEBA 1
Semana 6
Semana 7
Semana 8
Semana 9
Semana 10
Semana 11
Semana 12
Semana 13: 2 de Junio al 7 de Junio
Semana 14
Semana 15
Semana 16
Semana 17: 30 de Junio al 5 de Julio PRUEBA 3
El Examen constará de una entrega de encargo con presentación basado en requerimientos de un caso de negocio, utilizando los criterios de evaluación y evidencias.
Qué es la WEB??
La World Wide Web es una colección de documentos electrónicos que están vinculados entre sí, como una telaraña.
Estos documentos están almacenados en servidores situados en todas partes del mundo.
A estos documentos se les llama páginas web.
Cada página se identifica por una URL,
U
niform
R
esource
L
ocator.
Cuando introducimos una URL en la barra de direcciones de nuestro navegador, este genera una petición a un servidor de dominios (DNS) y este la envía al servidor que aloja dicha página.
El servidor recibe la petición, la procesa y envía el resultado de vuelta a nuestro navegador
DNS
www.google.cl
Y qué es lo que devuelve el servidor?
El servidor devuelve un documento electrónico escrito en un lenguaje de computador llamado HTML (siglas del inglés Hypertext Markup Language, o Lenguaje de Marcación de Hipertexto, en español).
Y cómo se escribe el código HTML?
HTML es un lenguaje de marcas y se escribe en forma de «etiquetas», rodeadas por corchetes angulares <>.
Está compuesto de elementos. Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>).
Ej: <title>HTML</title>
Estructura general de una línea de código en el lenguaje de etiquetas HTML.
Ejemplos de código HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo1</title>
</head>
<body>
<p>ejemplo1</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo1</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>Este es un párrafo</p>
<a href="http://campusvirtual.duoc.cl/">Este es un link</a>
<img src="http://www.duoc.cl/prontus_admision/site/artic/20121112/imag/foto_0000000120121112220337.jpg" alt="Logo DUOC" >
</body>
</html>
Para ordenar los elementos usaremos tablas
<table border="1" style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<table>
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

Ejercicios con tablas
Ya vimos las etiquetas básicas,
revisemos otras que nos permiten
mayores funcionalidades.

Aprenderemos a hacer Formularios

¿Qué formularios conocen?

La etiqueta <form>
<form name="mi_formulario" action="procesa.php" method="get">
...
</form>
Campos de Texto: <input type="text" >
Campos de password: <input type="password">
Campos radio buttons: <input type="radio" value="Si">
Campos checkbox: <input type="checkbox" value="No">
Campo submit (gatilla el envío del formulario):
<input type="submit" >
La etiqueta <input>
Veamos un ejemplo de formulario
<form name="login" action="mailto:micorreo@gmail.com">
<table>
<tr>
<td>Nickname:</td>
<td><input type="text" name="nickname"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" ></td>
</tr>
</table>
</form>
Otros elementos de formulario
Áreas de texto: <textarea> </textarea>
Listas de selección:
<select name="autos">
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Ejercicio: realizar el siguiente formulario.
Qué aprendimos esta semana?
- Qué es la web y cómo funciona
- Lenguaje HTML
- Etiquetas básicas en HTML
- Tablas con HTML
- Tablas anidadas
- Formularios

Excelente manual de HTML:
http://www.w3schools.com/html/default.asp
Estructura general de un documento en HTML.
<!DOCTYPE >
<HTML>
<head>
... configuración
... archivos enlazados
</head>
<body>
... código de la página
</body>
</HTML>
Bootstrap
Bootstrap es una librería que implementa estilos predefinidos e interactúa con javascript por medio de la librería jQuery lo que da una gran versatilidad a una página.

Su principal característica es que nos permite crear un diseño RESPONSIVO
Sistema de grillas de Bootstrap
Utilizaremos la etiqueta <div> </div>
El sistema de grillas de bootstrap considera el espacio dividido en 12 columnas
El sistema de grillas tiene 4 clases:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Ejemplo de código:
Ejercicio:
Utilizar sistema de grillas
de bootstrap para implementar una estructura lo más parecida posible a la imagen.

Full transcript