Clase Programación WEB

1,870 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,870
On SlideShare
0
From Embeds
0
Number of Embeds
248
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Clase Programación WEB

  1. 1. Vicente Ros Comunicación Digital CEU
  2. 2. 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?
  3. 3. CLASE 1: Programación WEB http://digital.ceu.es
  4. 4. #La Red Social! NO HABLAMOS EN CHINO!! 你好中國,我們並不非常清楚地知道,可我們的興趣,或者我們可以關心你 所以你去拜訪您指望之一的,對我們來說,更多的捐款來自西班牙的世界: 食譜馬鈴薯煎蛋 皮爾的洋蔥和土豆 喜鵲洋蔥成非常小的碎片和地點他們不要魚苗在一個泛用大量石油 同時削減土豆不能過於單薄鋁箔,季節性,並加入到鍋 偶爾炒攪拌,直到金黃色圍繞位 刪除,並讓流失 準備一碗擊敗第蛋 購買的土豆,洋蔥 把小油,鍋和爭取的混合之前
  5. 5. Vicente Ros Comunicación Digital CEU Dirección web <ul><li><h1>ÍNDICE</h1> </li></ul><ul><li><h2>Tecnología de Servidor</h2> </li></ul><ul><li><h2>Programación</h2> </li></ul><ul><li><h2>BD</h2> </li></ul><ul><li><h2>XML/RSS</h2> </li></ul><ul><li><h2> Web Semántica </h2> </li></ul>
  6. 6. <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>
  7. 7. Arquitectura de 3 capas
  8. 8. ¿A cuál le doy mi Sí Quiero!? Los Lenguajes de Desarrollo
  9. 9. Vale! Dónde estan las Maletas? Los Sistemas de Gestión de Base de Datos
  10. 10. Hogar dulce Hogar! Los Servidores de Aplicaciones
  11. 11. CMSQue? Eso lo serás tú!
  12. 12. Arquitectura de 3 capas
  13. 13. ¿Hosting/Housing/Servidor Privado? <ul><li>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. </li></ul><ul><li>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 ). </li></ul><ul><li>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 . </li></ul>
  14. 14. Fases Proyecto Informático -Diagrama de Gantt -Definir las Fases, Definir las predecesoras, antecesoras -Herramienta Project
  15. 15. Ejemplo Ficha Tarea <ul><ul><li>Especificación de Tarea </li></ul></ul><ul><li>Número: 3.1. </li></ul><ul><li>Nombre: Diseño B.D. </li></ul><ul><li>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. </li></ul><ul><li>Esfuerzo Estimado: 2 semanas/hombre </li></ul><ul><li>Entregables: Estructura de implementación de la B.D. </li></ul><ul><li>…………… : …………………………… </li></ul>
  16. 16. <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
  17. 17. #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%
  18. 18. #Trabajar con programadores Planifica, Planifica, Planifica..Ejecuta y Controla
  19. 19. Proyecto Informáticos <pregunta> Contrataría a estas personas? </pregunta>
  20. 20. <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>
  21. 21. <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  
  22. 22. <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
  23. 23. <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.
  24. 24. <h1>Programación</h1> http://www.flickr.com/photos/ryantron/4453018910/in/photostream/
  25. 25. <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 */
  26. 26. <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
  27. 27. 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”)
  28. 28. 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. (<>)
  29. 29. Diagrama de Flujo
  30. 30. <h1>diagrama de flujo</h1>
  31. 31. Iteraciones condicionales múltiples y uso de más de una condición <ul><li>IF (condición_1) THEN </li></ul><ul><li>BLOQUE DE INSTRUCCIONES 1 </li></ul><ul><li>ELSE </li></ul><ul><ul><li>IF (condición_2) THEN </li></ul></ul><ul><ul><li>BLOQUE DE INSTRUCCIONES 2 </li></ul></ul><ul><ul><li>ELSE </li></ul></ul><ul><ul><li>BLOQUE DE INSTRUCCIONES 3 </li></ul></ul><ul><ul><li>END IF </li></ul></ul><ul><li>END IF </li></ul><ul><li>MiEdad = InputBox(&quot;indicame tu edad: &quot;, , 25) </li></ul><ul><li>if (MiEdad>=18) and (miEdad<=65) then </li></ul><ul><li>msgbox(&quot;Usted está en edad laboral&quot;) </li></ul><ul><li>else </li></ul><ul><li>msgbox (&quot;Usted no esta en edad laboral&quot;) </li></ul><ul><li>end if </li></ul>
  32. 32. 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; }
  33. 33. <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; }
  34. 34. <PHP><ASP> -Ver Chate Sheet
  35. 35. Examen Informaticus Programatorum Primero resuelve el problema. Entonces, escribe el código.- John Johnson
  36. 36. <h1>Ejemplo SCPF</h1> http://www.scpf.com/
  37. 37. 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
  38. 38. <h1>Repaso</h1> Z Z Z Z ZZZZZZZZZZZzzz
  39. 39. <h1>BASE DE DATOS</h1> Vicente Ros Comunicación Digital CEU Base de Datos La Información es Poder …Si se actualiza.- Genis Roca
  40. 40. <h1>Diseño de Base de Datos</h1> <ul><li>Conceptos: </li></ul><ul><ul><li>-Tablas </li></ul></ul><ul><ul><li>-Registros </li></ul></ul><ul><ul><li>-Restricción Clave Primaria </li></ul></ul><ul><ul><li>-Clave Ajena </li></ul></ul>Es un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemáticamente para su posterior uso.
  41. 43. 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
  42. 44. Diseño de Base de Datos
  43. 45. Diseño de Base de Datos -Práctica Diseño de la Base de datos para Twitter/Facebook
  44. 46. <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)
  45. 47. <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).
  46. 48. XML <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> </li></ul><ul><li><!DOCTYPE Edit_Mensaje SYSTEM &quot;Edit_Mensaje.dtd&quot;> </li></ul><ul><li><Edit_Mensaje> <Mensaje> </li></ul><ul><li><Remitente> </li></ul><ul><ul><li><Nombre>Nombre del remitente</Nombre> </li></ul></ul><ul><ul><li><Mail> Correo del remitente </Mail> </li></ul></ul><ul><li></Remitente> </li></ul><ul><li><Destinatario> </li></ul><ul><ul><li><Nombre>Nombre del destinatario</Nombre> </li></ul></ul><ul><ul><li><Mail>Correo del destinatario</Mail> </li></ul></ul><ul><li></Destinatario> </li></ul><ul><li><Texto> </li></ul><ul><li><Asunto> Este es mi documento con una estructura muy …</Asunto> </li></ul><ul><li><Parrafo> Este es mi documento con una estructura muy sencilla... </Parrafo> </li></ul><ul><li></Texto> </li></ul><ul><li></Mensaje> </Edit_Mensaje> </li></ul>
  47. 49. XML <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?> </li></ul><ul><li><urlset xmlns=&quot; http://www.sitemaps.org/schemas/sitemap/0.9 &quot; </li></ul><ul><li>xmlns:xsi=&quot; http://www.w3.org/2001/XMLSchema-instance &quot; x </li></ul><ul><li>si:schemaLocation=&quot; http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd &quot;> </li></ul><ul><li><url> </li></ul><ul><li>  <loc> http://www.uchceu.es/cursos/index.aspx </loc> </li></ul><ul><li>  <priority> 5 </priority> </li></ul><ul><li>  <lastmod> 20/10/2009 </lastmod> </li></ul><ul><li>  <changeFreq> monthly </changeFreq> </li></ul><ul><li></url> </li></ul><ul><li><url> </li></ul><ul><li>  <loc> http://www.uchceu.es/eventos/index.aspx </loc> </li></ul><ul><li>  <priority> 5 </priority> </li></ul><ul><li>  <lastmod> 29/09/2009 </lastmod> </li></ul><ul><li>  <changeFreq> monthly </changeFreq> </li></ul><ul><li></url> </li></ul><ul><li><url> </li></ul><ul><li>  <loc> http://www.uchceu.es/noticias/index.aspx </loc> </li></ul><ul><li>  <priority> 5 </priority> </li></ul><ul><li>  <lastmod> 07/07/2010 </lastmod> </li></ul><ul><li>  <changeFreq> monthly </changeFreq> </li></ul><ul><li></url> </li></ul><ul><li>  </urlset> </li></ul>
  48. 50. <h1>Yo soy tu Padre</h1>
  49. 51. <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>
  50. 52. <h1>Practica XML!<h1>
  51. 53. <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>
  52. 54. Web Semántica: dando Significado a la web
  53. 55. http://dotsub.com/view/8945aae8-9f00-4018-8426-bdd788adcfc6 http://hello.eboy.com/ Ver Video Introducción Web Semántica
  54. 56. Me encanta Paris!
  55. 57. 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
  56. 59. <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.
  57. 60. #es Segura?
  58. 61. <h1>Ejemplo de Ontología</h1>
  59. 62. Ej:Ontología para el sw libre
  60. 63. Ej:Ontología para la web Semántica http://bvs.sld.cu/revistas/aci/vol13_6_05/aci030605.htm
  61. 64. Programar una ontología
  62. 65. Casos de Estudio http://www.w3.org/2001/sw/sweo/public/UseCases/
  63. 66. es Segura? Try { Catch (ex Exception){ }
  64. 68. <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!
  65. 69. <h1>Muchas @Gracias</h1> (en Binario: 01001101 01110101 01100011 01101000 01100001 01110011 00100000 01100111 01110010 01100001 01100011 01101001 01100001 01110011 ) @documentalista_
  66. 70. <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

×