Clase Programación WEB
Upcoming SlideShare
Loading in...5
×
 

Clase Programación WEB

on

  • 1,510 views

Clase del máster de Comunicación Digital y Branding. http://digital.ceu.es Programación WEB, Tecnologías de Servidor, Bases de Datos, XML y Web Semántica

Clase del máster de Comunicación Digital y Branding. http://digital.ceu.es Programación WEB, Tecnologías de Servidor, Bases de Datos, XML y Web Semántica

Statistics

Views

Total Views
1,510
Views on SlideShare
1,271
Embed Views
239

Actions

Likes
0
Downloads
24
Comments
0

8 Embeds 239

http://documentalistadigital.blogspot.com 146
http://documentalistadigital.blogspot.com.es 61
http://documentalistadigital.blogspot.mx 16
http://documentalistadigital.blogspot.com.ar 10
http://documentalistadigital.blogspot.it 3
http://www.google.es 1
http://webcache.googleusercontent.com 1
http://documentalistadigital.blogspot.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Clase Programación WEB Clase Programación WEB Presentation Transcript

  • Vicente Ros Comunicación Digital CEU
  • Linked-in: http://www.linkedin.com/in/fernandoleandro Xing: http://www.xing.com/profile/fernando_leandroBaladron Facebook: http://es-la.facebook.com/fernandole Twitter: http://www.twitter.es/documentalista_ Flickr: http://www.flickr.com/documentalistadigital Delicious: http://www.delicious.com/documentalistadigital Youtube: http://www.youtube.com/documntalistadigital Slideshare: http://www.slideshare.net/documentalistadigital Netvibes: http://www.netvibes.com/documentalistadigital #Y este quién es?
  • CLASE 1: Programación WEB http://digital.ceu.es
  • #La Red Social! NO HABLAMOS EN CHINO!! 你好中國,我們並不非常清楚地知道,可我們的興趣,或者我們可以關心你 所以你去拜訪您指望之一的,對我們來說,更多的捐款來自西班牙的世界: 食譜馬鈴薯煎蛋 皮爾的洋蔥和土豆 喜鵲洋蔥成非常小的碎片和地點他們不要魚苗在一個泛用大量石油 同時削減土豆不能過於單薄鋁箔,季節性,並加入到鍋 偶爾炒攪拌,直到金黃色圍繞位 刪除,並讓流失 準備一碗擊敗第蛋 購買的土豆,洋蔥 把小油,鍋和爭取的混合之前
  • Vicente Ros Comunicación Digital CEU Dirección web
    • <h1>ÍNDICE</h1>
    • <h2>Tecnología de Servidor</h2>
    • <h2>Programación</h2>
    • <h2>BD</h2>
    • <h2>XML/RSS</h2>
    • <h2> Web Semántica </h2>
  • <h1>TECNOLOGÍA DE SERVIDOR</h1> Vicente Ros Comunicación Digital CEU “ La Tecnología y no la Ideología es lo que cambiará el mundo” – Aldous Huxley <h1>Tecnología de Servidor</h1>
  • Arquitectura de 3 capas
  • ¿A cuál le doy mi Sí Quiero!? Los Lenguajes de Desarrollo
  • Vale! Dónde estan las Maletas? Los Sistemas de Gestión de Base de Datos
  • Hogar dulce Hogar! Los Servidores de Aplicaciones
  • CMSQue? Eso lo serás tú!
  • Arquitectura de 3 capas
  • ¿Hosting/Housing/Servidor Privado?
    • Hosting: En este tipo de servicio se alojan clientes de varios sitios en un mismo servidor, gracias a la configuración del programa servidor web . Resulta una alternativa muy buena para pequeños y medianos clientes, es un servicio económico debido a la reducción de costos ya que al compartir un servidor con cientos de personas o usuarios el costo se reduce dramáticamente para cada uno, y tiene buen rendimiento. Un solo servidor puede alojar hasta 300 proyectos.
    • Housing: Este servicio consiste básicamente en vender o alquilar un espacio físico de un centro de datos para que el cliente coloque ahí su propio ordenador. La empresa le da la corriente y la conexión a Internet, pero el ordenador servidor lo elige completamente el usuario (hasta el hardware ).
    • Servidor dedicado: se refiere a una forma avanzada de alojamiento web en la cual el cliente alquila o compra un ordenador completo, y por tanto tiene el control completo y la responsabilidad de administrarlo. El cuidado físico de la máquina y de la conectividad a Internet es tarea de la empresa de alojamiento, que suele tenerlo en un centro de datos .
  • Fases Proyecto Informático -Diagrama de Gantt -Definir las Fases, Definir las predecesoras, antecesoras -Herramienta Project
  • Ejemplo Ficha Tarea
      • Especificación de Tarea
    • Número: 3.1.
    • Nombre: Diseño B.D.
    • Descripción: Se diseñara la base de datos, partiendo del modelo entidad-relación propuesto en el análisis y con el objetivo de tener un sistema funcionando sobre DB2.
    • Esfuerzo Estimado: 2 semanas/hombre
    • Entregables: Estructura de implementación de la B.D.
    • …………… : ……………………………
  • <h1>DIAGRAMA DE GANTT</h1> TAREAS Especificar Necesidades Diseño Programas Diseño Base de Datos Realización Esquema Codificación Aplicaciones Pruebas 0 2 4 6 8 10 12 14 16 SEMANAS
  • #Planificación Nombre Proyecto Puntos de Función Lenguaje Esfuerzo en horas Estudio viabilid. Análisis Diseño Codifi-cación Prueba Instala-ción Mant. Inicial WEB Editorial 200 PHP 5.017 4% 12% 12% 22% 22% 8% 20% Vinos S.L 300 JAVA 5.410 5% 15% 15% 20% 10% 10% 25% Juguetera Valenciana 250 ASP.NET 5.930 4% 12% 12% 22% 20% 8% 22, % Periodico Mediterráneo 150 PHP 2.569 5% 15% 15% 22% 8% 10% 25%
  • #Trabajar con programadores Planifica, Planifica, Planifica..Ejecuta y Controla
  • Proyecto Informáticos <pregunta> Contrataría a estas personas? </pregunta>
  • <h1>Proyecto Informáticos</h1> -BETA continuo! ÉXITO -Productos Escalables /Estandarizables -La improvisación la dejamos para el Teatro -Se entiende como “fracaso” un proyecto con demoras significativas, gastos muy superiores al presupuesto, o que no se entregó el valor esperado -No reinventemos la Rueda, genera Código Reusable. -Las Cosas necesitan Ser Probadas! <h1>Práctica Planificación Project</h1>
  • <h1>PROGRAMACIÓN</h1> Vicente Ros Comunicación Digital CEU <h1>Programación</h1> &quot;Cualquier tonto puede escribir código que un ordenador entiende. Los buenos programadores escriben código que los humanos pueden entender. - Martin Fowler  
  • <h1>Programación</h1> PROBLEMA -> ALGORITMO -> PROGRAMA Un algoritmo (del griego y latin, dixit algorithmus y éste a su vez del matemático persa Al Juarismi ) es un conjunto preescrito de instrucciones o reglas bien definidas, ordenadas y finitas que permite realizar una actividad mediante pasos sucesivos que no generen dudas a quien deba realizar dicha actividad
  • <h1>Mi Algoritmo</h1> Algoritmo para hacer un huevo frito: 1.Voy a la cocina. 2.Saco un huevo del refrigerador. 3.Saco una sartén. 4.Pongo un poco de aceite en la sartén. 5.Hecho el huevo a la sartén. 6.Lo frío. 7.Me lo como. Versión Mejorada: 1.Voy a la cocina. 2.Veo si hay huevos en el refrigerador. 3.Si hay, saco un huevo y salto al paso 8 4.Si no hay, voy a comprar. 5.Para comprar, voy a buscar $. 6.Si hay $, saco y voy al paso 8 7.Si no hay $, no se hace el huevo frito. 8.Veo si hay gas. 9.Si hay, prendo la cocina y voy al paso 14. 10.Si no hay, busco dinero para pedir gas. 11.Si no hay dinero, no hago el huevo. 12.Si hay, encargo y salto al paso 14. 13.Espero que llegue el gas. 14.Saco una sartén. 15.Si no hay sartén, no hago el huevo. 16.Etc, etc.
  • <h1>Programación</h1> http://www.flickr.com/photos/ryantron/4453018910/in/photostream/
  • <h1>Ejemplo</h1> Inicio /* Establecemos el inicio del programa */ Letra mensaje=”Hola mundo”; /* A continuación definimos una variable de tipo “Letra”, de nombre “mensaje” y le damos un valor inicial de “Hola mundo”, el mensaje que queremos mostrar. Luego de la sentencia ponemos un punto y coma para indicar el fin de esta, algo que utilizaremos mucho cuando estemos programando en algún lenguaje, ya que eso le indica al entorno de programación que es el fin de la sentencia */ Principal( ) /* Definimos la función “Principal” que es donde irá el cuerpo del programa. Ya adentraremos el tema de las funciones */ mostrar mensaje; /* Utilizamos la sentencia “mostrar” para enviar un mensaje que se despliegue en pantalla y luego la variable que contiene el mensaje, en este caso “mensaje”. Cerramos la sentencia con un punto y coma para indicar que se ejecute la línea */ Fin /* Finalizamos el programa */
  • <h1>Variables</h1> 1.Int: Corresponde a números enteros 2.Float: Corresponde a valores de punto flotante 3.Char: Corresponde a valores de caracteres alfanuméricos (0 a 9 y abecedario). 4.Boolean: Corresponden a valores de tipo lógico. Almacenan sólo 2 posibles valores: true o false. 5.String: Corresponde a una cadena de caracteres
  • Sintaxis lenguajes programación <h1> LOS OPERADORES </h1> La lógica Boleana utiliza los siguientes Operadores : Y, O, y NO. Operador Y (and / && ) asegura que se incluya las condiciones. “ social media” y “marketing online” Operador O (or / || ) Generamos alternativas “ marketing online” or “social media” Operador NO (not / ! ) Que no se dé esa condición No (“socialmedia”)
  • Sintaxis lenguajes programación <h1> LOS OPERADORES (Continuación)</h1> + Suma. - Resta. * Multiplicación. / División. % Módulo de la división (resto). ++ Incremento. – Decremento. < Menor a. > Mayor a. == Igual a. (Se debe usar doble signo ya que el signo simple es para asignar valores). != Distinto de. (<>)
  • Diagrama de Flujo
  • <h1>diagrama de flujo</h1>
  • Iteraciones condicionales múltiples y uso de más de una condición
    • IF (condición_1) THEN
    • BLOQUE DE INSTRUCCIONES 1
    • ELSE
      • IF (condición_2) THEN
      • BLOQUE DE INSTRUCCIONES 2
      • ELSE
      • BLOQUE DE INSTRUCCIONES 3
      • END IF
    • END IF
    • MiEdad = InputBox(&quot;indicame tu edad: &quot;, , 25)
    • if (MiEdad>=18) and (miEdad<=65) then
    • msgbox(&quot;Usted está en edad laboral&quot;)
    • else
    • msgbox (&quot;Usted no esta en edad laboral&quot;)
    • end if
  • Switch: Otra iteración condicional. //Activamos el switch con la variable opción. Switch ( opcion ) { /* En el caso que valga 1 */ case 1: printf(“nHola mundo”); break; /* En el caso que valga 2 */ case 2: printf(“nBuenos dias”); break; /* En el caso que valga 3 */ case 3: break; /* Caso por defecto */ default : printf(“nOpcion no valida”); break; }
  • <h1>Programación</h1> <h3>Los Ciclos o búcles.</h3> Dim variable as integer; variable=500; for (inicialización; Condición ; siguiente iteración) { ACCIONES; }
  • <PHP><ASP> -Ver Chate Sheet
  • Examen Informaticus Programatorum Primero resuelve el problema. Entonces, escribe el código.- John Johnson
  • <h1>Ejemplo SCPF</h1> http://www.scpf.com/
  • En búsqueda de Patrones Vuelo de las abejas!, Simulación Estadística, Random() Forever! http://humanismoyconectividad.wordpress.com/2010/07/30/patrones-naturaleza/ http://www.begues.net/javascript/6650-abeja.html
  • <h1>Repaso</h1> Z Z Z Z ZZZZZZZZZZZzzz
  • <h1>BASE DE DATOS</h1> Vicente Ros Comunicación Digital CEU Base de Datos La Información es Poder …Si se actualiza.- Genis Roca
  • <h1>Diseño de Base de Datos</h1>
    • Conceptos:
      • -Tablas
      • -Registros
      • -Restricción Clave Primaria
      • -Clave Ajena
    Es un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemáticamente para su posterior uso.
  •  
  •  
  • CHOFER CONDUCE VIAJE ¿Qué chofer sale el día 10/12/2010? DNI Apellidos Direccion Telefono 000000001 Perez Lopez Av/. calle 5 910002525 000000002 Martin Perez C/. Lope 15 910002524 COD_VIAJE DNI 1 000000001 3 000000002 2 000000001 COD_VIAJE Fecha Precio DNI_GUIA 1 10/12/2010 150 € 000000003 2 20/12/2010 140 € 000000005 3 24/12/2010 250 € 00000004
  • Diseño de Base de Datos
  • Diseño de Base de Datos -Práctica Diseño de la Base de datos para Twitter/Facebook
  • <h1>XML/RSS</h1> Vicente Ros Comunicación Digital CEU <h1>XML</h1> &quot;Colaboración es multiplicación.&quot; John C. Maxwell ( físico que desarrolló la teoría electromagnética)
  • <XML></XML> XML , siglas en inglés de e X tensible M arkup L anguage (lenguaje de marcas extensible), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C).
  • XML
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>
    • <!DOCTYPE Edit_Mensaje SYSTEM &quot;Edit_Mensaje.dtd&quot;>
    • <Edit_Mensaje> <Mensaje>
    • <Remitente>
      • <Nombre>Nombre del remitente</Nombre>
      • <Mail> Correo del remitente </Mail>
    • </Remitente>
    • <Destinatario>
      • <Nombre>Nombre del destinatario</Nombre>
      • <Mail>Correo del destinatario</Mail>
    • </Destinatario>
    • <Texto>
    • <Asunto> Este es mi documento con una estructura muy …</Asunto>
    • <Parrafo> Este es mi documento con una estructura muy sencilla... </Parrafo>
    • </Texto>
    • </Mensaje> </Edit_Mensaje>
  • XML
    • <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?>
    • <urlset xmlns=&quot; http://www.sitemaps.org/schemas/sitemap/0.9 &quot;
    • xmlns:xsi=&quot; http://www.w3.org/2001/XMLSchema-instance &quot; x
    • si:schemaLocation=&quot; http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd &quot;>
    • <url>
    •   <loc> http://www.uchceu.es/cursos/index.aspx </loc>
    •   <priority> 5 </priority>
    •   <lastmod> 20/10/2009 </lastmod>
    •   <changeFreq> monthly </changeFreq>
    • </url>
    • <url>
    •   <loc> http://www.uchceu.es/eventos/index.aspx </loc>
    •   <priority> 5 </priority>
    •   <lastmod> 29/09/2009 </lastmod>
    •   <changeFreq> monthly </changeFreq>
    • </url>
    • <url>
    •   <loc> http://www.uchceu.es/noticias/index.aspx </loc>
    •   <priority> 5 </priority>
    •   <lastmod> 07/07/2010 </lastmod>
    •   <changeFreq> monthly </changeFreq>
    • </url>
    •   </urlset>
  • <h1>Yo soy tu Padre</h1>
  • <h1>RSS por dentro!<h1> <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <rss version =&quot;2.0&quot; xmlns:blogChannel=&quot;http://www.uch.ceu.es&quot;> <channel> <title>RSS de los Blogs CEU</title> <link>http://www.uch.ceu.es/principal/listablogs.aspx</link> <description>Este RSS sirve para suscribirse a los Blogs CEU</description> <item> <title>Noticia1</title> <link>http://www.uch.ceu.es/principal/docu/noticia.aspx</link> <description>Texto de la descripcion 1.</description> </item> <item> <title>Noticia 2</title> <link>http://www.uch.ceu.es/principal/docu/revistaPrensa.aspx</link> <description>Texto de la descripcion 2. </description> </item> </channel> </rss>
  • <h1>Practica XML!<h1>
  • <h1>Web Semántica</h1> Vicente Ros Comunicación Digital CEU “ Los límites de mi lenguaje son los límites de mi mente.” Ludwig Wittgenstein <h1>Web Semántica</h1>
  • Web Semántica: dando Significado a la web
  • http://dotsub.com/view/8945aae8-9f00-4018-8426-bdd788adcfc6 http://hello.eboy.com/ Ver Video Introducción Web Semántica
  • Me encanta Paris!
  • Y justo cuando usted pensaba que estaba entendiendo la Web 2.0 Por Heidi Dawley Ontologías Polisemia Sinonimia Folksonomias (delicio.us, last.fm, flickr) OWL/ RDF/ Microformatos
  •  
  • <h1>Ontologías<h1> El término ontología en informática hace referencia a la formulación de un exhaustivo y riguroso esquema conceptual dentro de uno o varios dominios dados; con la finalidad de facilitar la comunicación y el intercambio de información entre diferentes sistemas y entidades.
  • #es Segura?
  • <h1>Ejemplo de Ontología</h1>
  • Ej:Ontología para el sw libre
  • Ej:Ontología para la web Semántica http://bvs.sld.cu/revistas/aci/vol13_6_05/aci030605.htm
  • Programar una ontología
  • Casos de Estudio http://www.w3.org/2001/sw/sweo/public/UseCases/
  • es Segura? Try { Catch (ex Exception){ }
  •  
  • <p>Estamos en tiempos de cambios</p> @documentalista_ -Conspiración en la Red Ryan Philip y Tim Robbins http://www.youtube.com/watch?v=I4PyJDiVcPw Presione cualquier tecla para continuar... no, no, no, ESA NO!
  • <h1>Muchas @Gracias</h1> (en Binario: 01001101 01110101 01100011 01101000 01100001 01110011 00100000 01100111 01110010 01100001 01100011 01101001 01100001 01110011 ) @documentalista_
  • <h1>Referencias</h1> -Chuleta con todo en PHP: http://www.emezeta.com/weblog/emezeta-php-card-v0.2.png -Chuleta ASP: http://ult-tex.net/info/asp/asp_cheat_sheet.png -Chuleta SQL : http://mario21ic.files.wordpress.com/2008/08/mysql_cheat_sheet.png -Chuleta JavaScript: http://nomikos.info/wp-content/uploads/2010/06/javascript-cheat-sheet-v1.png -Estimación proyectos web. http://www.upv.es/~jmontesa/eog-ind.html -Red Social Elgg: http://www.magarciaguerra.com/2010/04/como-crear-una-red-social-con-elgg/ -Blog WordPress http://www.magarciaguerra.com/2010/02/crea-una-red-social-de-profesores-para-tu-centro/ -Tecnologías WEB. http://www.slideshare.net/aalbanes/tecnologas-web -OWL. http://swoogle.umbc.edu/ -Standard w3c. http://www.w3c.es/divulgacion/guiasbreves/websemantica -ISOCO http://www.isoco.com/ -Herramienta Ontologías. http://protege.stanford.edu -Dolors Reig. El caparazon. http://www.dreig.eu/caparazon/ -Aprender a programar y no morir en el intento: www.comolohago.cl
  •