Diferencia entre revisiones de «Usuario:ManuelRomero/micursos/DWES/Tema1/Aplicaciones Web»
De WikiEducator
| Línea 37: | Línea 37: | ||
*Una Aplicación Web, funcionalmente puede hacer lo mismo que una aplicación de escritorio | *Una Aplicación Web, funcionalmente puede hacer lo mismo que una aplicación de escritorio | ||
*La Aplicación Web, la puedo ejecutar desde cualquier ubicación. | *La Aplicación Web, la puedo ejecutar desde cualquier ubicación. | ||
| − | [[Imagen:distribucionAplicacionesWeb.png|center| | + | [[Imagen:distribucionAplicacionesWeb.png|center|250px]] |
</div> | </div> | ||
| Línea 79: | Línea 79: | ||
<div class="slide"> | <div class="slide"> | ||
<!--3--> | <!--3--> | ||
| + | ===Conceptos a tener claros para desarrollo web=== | ||
| + | #Framework | ||
| + | #Gestores de contenidos | ||
| + | #Plataforma de desarrollo | ||
| + | #Tecnología | ||
| + | #Arquitectura Web | ||
| + | ===Organizando conceptos=== | ||
| + | ;Seleccionando lenguajes de programación, Servidor Web, Gestor de Bases de datos | ||
| + | Arquitectura | ||
| + | Plataforma de desarrollo | ||
| + | Tecnología | ||
| + | ===Herramientas para desarrollar=== | ||
| + | #Framework | ||
| + | #Gestoir de contenidos CSM | ||
| + | http://www.web-and-development.com/a-framework-or-a-cms-what-is-better-to-choose/ | ||
| + | ===Seleccionando herramientas=== | ||
| + | #http://lapastillaroja.net/2013/10/como-seleccionar-plataforma-tecnologica/ | ||
==Gestores de contenidos == | ==Gestores de contenidos == | ||
*Para generar aplicaciones web, existen herramientas llamadas gestores de contenidos | *Para generar aplicaciones web, existen herramientas llamadas gestores de contenidos | ||
| Línea 86: | Línea 103: | ||
#Una parte externa o front-end, que es el conjunto de páginas que ven los usuarios. | #Una parte externa o front-end, que es el conjunto de páginas que ven los usuarios. | ||
#Una parte interna o back-end, que es otro conjunto de páginas dinámicas | #Una parte interna o back-end, que es otro conjunto de páginas dinámicas | ||
| − | + | ##Normalmente son las que usan las personas que producen el contenido | |
| − | + | ##También sirven para administrar la aplicación web permitiendo a usuarios con permisos acceder a contenidos. | |
==Back-end y front-end de una aplicación web== | ==Back-end y front-end de una aplicación web== | ||
*Una aplicación web normalmente se divide en dos partes | *Una aplicación web normalmente se divide en dos partes | ||
| − | #un front-end, que es la parte pública que ven los usuarios externos; (La página html) | + | #un '''''front-end''''', que es la parte pública que ven los usuarios externos; (La página html) |
| − | #un back-end, que es la parte privada que usan los administradores de la aplicación. (Los programa en servidor, bd,...) | + | #un '''''back-end''''', que es la parte privada que usan los administradores de la aplicación. (Los programa en servidor, bd,...) |
===Programación en el servidor y en cliente=== | ===Programación en el servidor y en cliente=== | ||
*Ya hemos dejado hablado un poco de estas dos tecnologías | *Ya hemos dejado hablado un poco de estas dos tecnologías | ||
| Línea 114: | Línea 131: | ||
*Esta tecnología nos posibilita realizar programas en los que el código JavaScript accede al servidor | *Esta tecnología nos posibilita realizar programas en los que el código JavaScript accede al servidor | ||
*se puede comunicar y obtener información con la que, por ejemplo, modificar la página web actual. | *se puede comunicar y obtener información con la que, por ejemplo, modificar la página web actual. | ||
| + | *Es importante tener en cuenta que esta comunicación es asíncrona (no sabemos exactamente cuando se va a producir la comunicación) | ||
{{Punto clave| '''''Ajax''''' permite sin salir de una página modificar su contenido en base a la información que se almacena en un servidor de Internet}} | {{Punto clave| '''''Ajax''''' permite sin salir de una página modificar su contenido en base a la información que se almacena en un servidor de Internet}} | ||
| Línea 119: | Línea 137: | ||
| − | + | ==Tecnologías y Arquitectura web == | |
| − | + | ||
| − | + | ||
| − | ==Tecnologías y | + | |
*https://developer.mozilla.org/es/docs/Web | *https://developer.mozilla.org/es/docs/Web | ||
*http://blog.differential.com/14-technologies-every-web-developer-should-be-able-to-explain/ | *http://blog.differential.com/14-technologies-every-web-developer-should-be-able-to-explain/ | ||
*https://en.wikipedia.org/wiki/Web_development | *https://en.wikipedia.org/wiki/Web_development | ||
| + | *Nosotros de momento usaremos la arquitectura de tipo LAMP (Linux Apache Mysql Php) | ||
| + | *Existen otras arquitecturas para desarrollar. Consiste en hacer convinacinoes de SO. Serivdor Web, Gestor de Bases de Datos, Lenguaje de programacion para el desarrollo). | ||
| + | {{Actividad|Localiza al menos 2 Arquitecturas diferentes}} | ||
===Tecnologías para programación web del lado del servidor=== | ===Tecnologías para programación web del lado del servidor=== | ||
*Cuando programas una aplicación, utilizas un lenguaje de programación. | *Cuando programas una aplicación, utilizas un lenguaje de programación. | ||
| Línea 134: | Línea 152: | ||
| − | ===Los componentes de una aplicación web=== | + | ===Los componentes de una aplicación web en el servidor=== |
| − | + | ||
| − | + | ||
| − | + | ||
*1.-'''''Un servidor web''''' para recibir las peticiones de los clientes web | *1.-'''''Un servidor web''''' para recibir las peticiones de los clientes web | ||
**Suelen ser los navegadores. Reciben la página que solicitan | **Suelen ser los navegadores. Reciben la página que solicitan | ||
| Línea 161: | Línea 176: | ||
#'''''capa intermedia''''' : donde deberás programar la funcionalidad de tu aplicación. | #'''''capa intermedia''''' : donde deberás programar la funcionalidad de tu aplicación. | ||
#'''''capa cliente:''''' que es donde programarás todo lo relacionado con el interface de usuario, esto es, la parte visible de la aplicación con la que interactuará el usuario. | #'''''capa cliente:''''' que es donde programarás todo lo relacionado con el interface de usuario, esto es, la parte visible de la aplicación con la que interactuará el usuario. | ||
| − | * | + | *Dentro de la arquitectura de la aplicacion podemos ver tambíen arquitectura MVC (nivel de tres capas), o arquitectura de modelo Vista - Aplicacion o modelo de dos capas. |
| + | *Este tema lo estudiaremos posteriormente. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{{Recursos de la Web| | {{Recursos de la Web| | ||
*Qué es una aplicación web en [http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web wikipedia] | *Qué es una aplicación web en [http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web wikipedia] | ||
*Qué es un desarrollo web en http://es.wikipedia.org/wiki/Desarrollo_web wikipedia] | *Qué es un desarrollo web en http://es.wikipedia.org/wiki/Desarrollo_web wikipedia] | ||
| − | * | + | *Que es una URL vs diferencia con URI http://www.hispamedios.com/articles/id34-url-y-uri URI] |
}} | }} | ||
| − | + | ===Instalación de herramientas=== | |
| + | *Las herramientas que vamos a necesitar para desarrollar son las siguietnes | ||
| + | ;Netbeans como EDI de desarrollo. Alternativamente se puede usar | ||
==Instalar java== | ==Instalar java== | ||
*Primero debemos ver si tenemos instalado java | *Primero debemos ver si tenemos instalado java | ||
Revisión de 10:04 28 sep 2015
ContenidoAplicaciones Web
 Conceptos a tener claros para desarrollo web
Organizando conceptos
Arquitectura Plataforma de desarrollo Tecnología Herramientas para desarrollar
http://www.web-and-development.com/a-framework-or-a-cms-what-is-better-to-choose/ Seleccionando herramientasGestores de contenidos
Back-end y front-end de una aplicación web
Programación en el servidor y en cliente
Tecnologías y Arquitectura web
Tecnologías para programación web del lado del servidor
Los componentes de una aplicación web en el servidor
Para ello tendrá módulos encargados de la ejecución del código y cómo se debe comunicar con él.
La arquitectura de la aplicación
cada servidor se puede encargar de ejecutar una parte de la aplicación.
Instalación de herramientas
Instalar java
java -version
sudo apt-get install icedtea-7-plugin openjdk-7-jre
sudo apt-get install openjdk-7-jdk
# java -version java version "1.7.0_65" OpenJDK Runtime Environment (IcedTea 2.5.2) (7u65-2.5.2-3~14.04) OpenJDK 64-Bit Server VM (build 24.65-b04, mixed mode) Instalar netbeanshttp://niconsystem.wordpress.com/2014/04/17/instalar-netbeans-8-0-en-ubuntu-14-04/ http://ubuntuhandbook.org/index.php/2014/03/install-netbeans-ide-8-0-in-ubuntu-14-0413-1012-04/
# uname -a
chmod +x jdk-8u20-nb-8_0_1-linux-x64.sh ./jdk-8u20-nb-8_0_1-linux-x64.sh
Ubuntu restricted extras[editar código] Una instalación limpia de Ubuntu no permite ver Flash, QuickTime, WMV, aplicaciones Java, etc. Ubuntu Restricted Extras es un paquete que incluye todo el software que por razones de patentes y conflictos con la legislación de ciertos países, Canonical, la empresa madre de Ubuntu, no puede incluir por defecto en la distribución. sudo apt-get install ubuntu-restricted-extras Montando nuestra arquitectura Instalar Apache php y MySql
http://www.howtoforge.com/installing-apache2-with-php5-and-mysql-support-on-ubuntu-12.04-lts-lamp
mysql -u root -p '''insertamos la password''' show databases: use my_baseDatos; SELECT database();
apt-get install apache2
sudo /etc/init.d/apache2 stop|start Ahora debemos instalar php5 y el módulo correspondiente para apahce Idioma no válido. Necesita especificar un idioma como esto: <source lang="html4strict">...</source> lenguajes soportados para sintaxis remarcada: 4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic apt-get install php5 libapache2-mod-php5 </sh> *Debemos restaurar el servicio para que los cambios tengan efecto en el servidor web <source lang=bash> /etc/init.d/apache2 restart
Instalar xdebug
https://netbeans.org/kb/docs/php/configure-php-environment-ubuntu.html#xdebug-package sudo apt-get install php5-dev php-pear sudo pecl install xdebug
sudo vim /etc/php5/apache2/php.ini .
zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so xdebug.remote_enable=on <source> |} </div> |
