Curso J2EE

lo primero que tenemos que hacer es trabajar con un entorno que nos permita editar programas dentro de java enterprise lo primero que os voy a decir es que un entorno no es más que un entorno un entorno no es más que un conjunto de herramientas que facilitan nuestro trabajo pero un entorno no es esencial no es obligatorio para aprender a programar ni en java quien ya va enterprise ni en cualquier en cualquier lenguaje prácticamente un editor de textos plano podría ser un pequeño entorno de trabajo pero que no sería demasiado cómodo por eso lo que hacemos es usar una cosa que se llama un y de un y de un id es un integrated développement développement environnment un entorno de desarrollo integrado un conjunto de herramientas que facilitan la gestión de nuestros proyectos la escritura de código y la detección de errores entre otras muchas cosas el ide preferido para trabajar con java enterprise es eclipse supongo que ya lo tenéis descargado pero si no lo encontraréis dentro de la siguiente dirección voy a ir a internet voy a sacar un navegador y dentro de eclipse punto o hereje voy a encontrar que si pulso dentro del botón de out loud’ tendré por una parte un eclipse para allá va o para java y un eclipse para java enterprise edition con lo cual para trabajar con java enterprise con java enterprise vamos a descargar este eclipse fijaos que además tenemos versiones alternativas de éste y de para programar en c o c + + o para programar en php no pasa nada porque en definitiva java c hace más más php son lenguajes que todos derivándose por tanto son lenguajes bastante parecidos entre sí en primer lugar lo que hago es descargar o bien la versión para 32 o bien la versión para 64 bits evidentemente esto depende de vuestro sistema operativo y depende de que vayáis a hacer con el entorno es decir si tenéis windows 64 bits mi recomendación es que descargar la versión de 64 y si tenéis windows de 32 bits no podéis elegir porque únicamente podéis descargar la versión de 32 si en nuestro caso accedéis con windows únicamente aparecerán aquí las las versiones para windows como en mi caso estoy accediendo desde linux simplemente aparecen las dos versiones correspondiente y una pregunta de la cual mucha gente desconoce la respuesta es cuál es la diferencia entre una aplicación para 64 bits y una aplicación para 32 bits la diferencia es que la aplicación para 64 bits puede albergar mucho más de 2 gb de ram por aplicación mientras que la aplicación de 32 bits tiene la limitación de que únicamente puede albergar un máximo de 2 gb de ram por cada instancia de la aplicación que se está ejecutando yo a partir de aquí digo lo siguiente mi recomendación siempre que podáis descargado la aplicación de 64 bits eso es un nivel teórico a un nivel práctico si la aplicación que desarrollamos gasta más de 2 gigas de ram tenemos un problema por tanto descargar la aplicación de 64 bits siempre va a ser una opción pero nuestro objetivo como programadores siempre va a ser gastar los mínimos recursos posibles especialmente cuando estamos hablando de un servidor cuando estamos hablando de un servidor estamos hablando de una aplicación que es accedida que es atacada por múltiples usuarios el que una instancia de la aplicación llegue a ocupar 2 gb es preocupante pero que tiene usuarios estén arrancando dos gigas del servidor no es que sea preocupante es que es inviable por tanto descargado cualquiera de las dos aplicaciones pero que sepáis que nuestro objetivo siempre va a ser usar la menor cantidad de recursos posibles quiere decir esto que está prohibido hacer una aplicación de dos gigabytes de ram no pero tiene que estar justificado tiene que haber realmente un motivo para que nuestra aplicación llegue a usar tanta memoria instalar eclipse o descargar y ejecutar eclipse es evidentemente el primero de los requisitos pero no hace falta decir porque si ya sabéis programar en java probablemente ya lo sabéis que un prerrequisito incluso anterior es tener instalada la máquina virtual de java por tanto asumo que tenemos ya este requisito pero si no tuviéramos recordamos que tenemos que tener java instalado en el sistema y una vez más supongo que ya lo sabéis pero no está de más repasarlo hay dos versiones de la máquina virtual de java está el java standard edition j s que es una versión de la bien juventudes socialistas de españa vamos a poner java qué es una versión de la máquina virtual para ejecutar programas pero nosotros no necesitamos esa nosotros necesitamos el jd acá el jd acá que es el java development kit que es el kit de desarrollo de java una versión de java con la cual no solo puedes ejecutar programas sino desde luego puedes compilar programas puedes hacer programas así que antes incluso de tener instalado el eclipse tenemos que tener instalado el sistema el jb acá ya sea para windows ya sea para mac ya sea para linux o para cualquier otra plataforma pero hay un prerrequisito más y este seguro que no lo tenéis que es conseguir que el sistema sea un servidor porque si nosotros lo que vamos a hacer al final es desarrollar aplicaciones de servidor tenemos que implementar nuestras aplicaciones en un servidor esto es técnicamente la última parte del temario y es una parte en la que instalar un servidor pues es una tarea mínimamente ardua es una tarea agradable no ciertamente no por tanto lo que voy a hacer ahora para que podamos empezar trabajando con aplicaciones es descargar un pequeño programa que convierte a nuestro equipo en un servidor de aplicaciones instalar bien e instalado un servidor incluso vosotros mismos me lo diréis no es tarea fácil hacerlo bien no es tarea fácil puede llevar horas si no días sino semanas pero yo no quiero eso ahora yo lo que quiero es hacer algo con lo que con el menor esfuerzo posible instale convierta mi ordenador en un servidor mínimamente funcional de aplicaciones el entorno que usamos todos los que nos dedicamos a esto es una aplicación llamada amp camps con 2 p s x mpp es un pack de aplicaciones que convierte a nuestro ordenador en un servidor tiene varias aplicaciones donde entre ellas vamos a encontrar esto que veis aquí apache mysql un sistema de bases de datos de datos también propiedad de oracle con un funcionamiento parecido a la propia base de datos oracle + php + pearl y ahí no lo pone pero os lo digo yo sam también lleva un servidor de aplicaciones llamado tomcat para poder ejecutar aplicaciones en java enterprise por eso lo que nos va a interesar de este sistema de servidor es por una parte tener un servidor de mysql y por otra parte desde luego tener el servidor tomcat para poder ejecutar nuestras aplicaciones así que lo que quiero a continuación es que simplemente descarguemos el sistema si estáis en windows lo descargar es para windows si en un momento dado estáis en linux para linux y si no en mac hacer clic y empezar a descargar lo comprobaréis que la descarga se ocupa unos ciento y pico megas 120 a 130 con lo cual pues ya a partir de ahí es lo que tardé en descargarse yo en mi caso no me lo voy a descargar porque estoy en linux y en linux funciona diferente la instalación de servidores por tanto si estáis en windows simplemente descargarlo e instalarlo para continuar vamos a crear nuestra primera aplicación para eso lo que hacemos es arrancar eclipse y vamos a ver qué tipo de aplicaciones podemos crear lo primero que nos va a preguntar eclipse es con qué carpeta con qué workspace quiero trabajar hasta ahora probablemente habéis trabajado con un workspace situado en la carpeta de documentos es decir con el workspace que venía por defecto cuando habéis arrancado eclipse al final no trabajaremos así lo que haremos al final es especificar la carpeta donde esté la publicación de proyectos en el servidor concreto en este caso de este equipo pero eso de momento no va a hacer falta vale por tanto de momento vamos a pulsar ok aceptar el workspace que tengáis por defecto más adelante ya lo cambiaremos os voy a decir que si estáis tardando en descargar el samp no es urgente no es necesario para esta primera prueba que voy a hacer ahora porque una de las ventajas que tiene eclipse para llama enterprise es que lleva ya un pequeño servidor instalado llaman enterprise preview vamos a verlo ahora por tanto para esta primera prueba voy a usar java enterprise preview y ahora a continuación lo que haremos es ahora a continuación más adelante trabajaremos con el servidor real que es tomcat que es el servidor bueno en mi caso además como tengo tomcat arrancado dejadme que lo pare y así mi servidor tomcat no machacar al al servidor java enterprise muy bueno en este caso lo que voy a hacer es lo siguiente voy a eliminar este proyecto que dice ir para comprobar que el que el entorno funciona correctamente voy a delito y ahora si estoy trabajando dentro de la enterprise quizás tengáis el entorno ya con proyectos de java da igual simplemente voy a ir a file voy a ir a new y voy a crear una dinámica web project voy a crear un proyecto de web dinámica así que pinchó aquí en la dinámica web project vamos a verlo y en principio en primer lugar lo que voy a hacer es darle un nombre a este proyecto para crear un nombre para este proyecto en principio voy a poner primera prueba tras lo cual empezamos a configurarlo una vez que tenemos el nombre del proyecto lo que voy a hacer va a ser simplemente aquí en target no sé si quizás tenéis algo o no mirad si tenéis java enterprise run time no pasa nada aunque no tengáis nada simplemente aceptarlo como viene porque más adelante cuando realicemos la primera ejecución ahí podemos crear un servidor virtual simplemente le doy un nombre ya sabéis que en java es recomendable no tener espacios como mucho guiones bajos pero desde luego intentando tener espacios por tanto yo suelo usar la nomenclatura cam el case es decir todas las palabras juntas y la mayúscula de la primera palabra perdona la letra de la primera palabra o la primera letra de la palabra en mayúsculas bien pulso finish con lo cual creo vamos a verlo aquí bueno tengo aquí un mensaje de error que es por un archivo que he eliminado tengo aquí un proyecto vacío llamado primera prueba en este proyecto llamado primera prueba veremos como tenemos varias carpetas las típicas carpetas con librerías con recursos con las compilaciones ya que veréis que java enterprise es un lenguaje muy particular porque hace aplicaciones web que se compilan lo cual tiene ventajas y desventajas y tenéis una carpeta llamada web content así que justo encima de la palabra web content voy a hacer clic con botón derecho para crear un nuevo archivo dentro de web content voy a hacer clic con el botón derecho para crear un nuevo archivo así que vuestro menú puede cambiar puede variar un poco con respecto al mío si estáis en windows pero básicamente todos tienen lo mismo ahora veréis yo puedo crear un nuevo proyecto pero evidentemente no quiero crear un nuevo proyecto dentro del proyecto o bien puedo crear un archivo un archivo genérico vacío y haber ello más adelante qué contenido le doy o bien una carpeta más adelante cuando cuando el proyecto se complique no necesitaremos o bien un archivo para volcar un sql lo usaremos pero de momento no o bien voy a crear un archivo html o bien voy a crear un archivo jsp además tengo otros tipos de archivo si voy a poder sale una lista donde puedo crear archivos por ejemplo de java archivos por ejemplo de javascript archivos por ejemplo para web y en definitiva muchos tipos de archivo pero ahora de momento lo que quiero es pulsar new jsp file lo que quiero es pinchar el crear un nuevo archivo y crear un nuevo archivo jsp un jsp al final es un archivo en java server page que es una página en java y es un archivo muy particular es muy conveniente para trabajar y para hacer vistas ya que nos permite combinar html y java de una manera muy conveniente por tanto voy a crear un archivo jsp file y como lo voy a llamar pues en principio a los archivos podemos ponerles el nombre que queramos pero el primer archivo de un proyecto siempre se tiene que llamar por una razón que os explicaré más adelante index con la extensión que sea en este caso index punto jsp más adelante explicaré la razón de por qué esto es así y en qué entornos puede no ser así y cómo cambiarlo así que creó un archivo finish y de la misma manera que cuando creamos un archivo de java ya aparece una plantilla aparece el void main aparece el método principal cuando creamos un archivo jsp aparece una plantilla pero una plantilla de que pues una plantilla de un archivo html si os fijáis hay aquí una serie de etiquetas que no son jsp no son java sino que son html bien para daros la bienvenida por tanto veis que ahora luego os desglosó que etiqueta son estas porque eso va la primera parte de este temario pero veis que tenéis una etiqueta en la que pone body y una etiqueta del cierre que cierra el body la etiqueta de cierre es la que tiene la barra la etiqueta de apertura es la que no tiene la barra si os fijáis que la plantilla os ha puesto quita esto os ha puesto un espacio en blanco así que aquí voy a poner simplemente hola mundo y una vez que he puesto hola mundo simplemente lo que quiero ahora es ejecutar el programa lo que quiero ahora es un programa muy sencillo de hecho es un sitio web lo que quiero es comprobar cómo se vería esto yo os podéis imaginar que pulso control s le doy a guardar voy a pulsar la tecla de play y al pulsar la tecla de play es donde depende en qué entorno estéis os lanzará directamente la web o bien nos preguntará por un servidor en mi caso como creo que ya tengo un servidor mira aquí está en mi caso me dice choose and existen server porque ya tengo un servidor corriendo dentro de esta máquina en vuestro caso es posible que tengáis que manualmente definir un servidor ahora me pasó pero de momento voy a decir en mi caso yushan existing server le digo finish y si todo ha ido bien y no genera errores que todo puede ser ya te digo yo vamos a verlo y me dice hola mundo esto es lo que debería ocurrir en nuestra primera prueba de aplicación java enterprise este proyecto de introducción acaba de la siguiente manera por una parte lo que hemos hecho es darle a play ejecutamos un servidor si queréis en el momento en el que vemos que ya está funcionando el llamante enterprise preview lo que hacemos es all we just this server cuando ejecuta este proyecto y así nos ahorramos esa ventana de selección del servidor bien pues lo que tenemos aquí realmente es contenido estático lo que tenemos aquí realmente es contenido html puro y duro’ lo interesante para acabar este ejercicio es hacer lo siguiente voy a poner una etiqueta donde lo que hago es poner menor qué porcentaje y porcentaje mayor que es decir la etiqueta de apertura para jsp es menor que porcentaje y la etiqueta de cierre es porcentaje mayor que y ahora como si estuviera escribiendo en la consola hago system punto a punto print line y digo este es un mensaje generado dinámicamente es decir ya no es un mensaje escrito estéticamente con html sino que es un mensaje escrito dinámicamente con java enterprise en este caso con jsp si todo va bien ahora vuelvo a recargar la página recordar que siempre tengo que control s guardar los cambios me voy a recargar y me dice bueno en este caso me está diciendo este es un mensaje generado dinámicamente tenemos una página jsp que lo que hace simplemente es lanzar un vamos a darle aquí lanzar un mensaje de este es un mensaje generado dinámicamente como veis si podéis verlo aquí en la línea de comando podréis comprobar cómo aparece el mensaje lo que vamos a hacer ahora es derivar lo directamente en el contenido html empezamos por tanto con la primera parte donde vamos a hablar vamos a estar hablando de la estructura de una aplicación web a través evidentemente de html yo suelo poner el ejemplo de que crear una aplicación web es como crear un ser humano donde html es el esqueleto css es la piel javascript son los músculos y digamos que java enterprise es algo así como el cerebro entonces que tiene si tienes un cerebro suelto pues poner el cerebro en el aire y el cerebro de hacer plot sk el suelo el cerebro lo haces de una estructura sobre la cual situarse vale por tanto lo primero que tenemos que hacer es crear el esqueleto que nos pasaría a los seres humanos si no tuviéramos esqueleto pues que nos quedaríamos como goma es agradable de ver el esqueleto no es agradable de ver pero lo necesitamos por tanto para empezar creando cualquier aplicación web primero tenemos que tener una estructura en formato html por eso vamos a no cerrar pero sí plegar este primer proyecto que nos ha servido para poner un poco en funcionamiento java enterprise ya continuación vamos a crear un nuevo proyecto así que me voy a ir a file me voy a ir a new y voy a crear un dynamics web project técnicamente para esta parte del temario podríamos hacerlo trabajando con un estático web project pero bueno le ponemos de dinámicas y en cualquier momento si surge la ocasión siempre le podemos meter un poquito de jsp la cuestión es que un proyecto estático es un proyecto que se basa en html css y en javascript y que no acepta nada del lado del servidor mientras que un proyecto dinámico acepta html css javascript más el lenguaje del servidor que queráis más base de datos por eso como en ambos casos tenemos html tenemos el para crear html css y javascript vamos a siempre dinámico a menos que ya en un momento dado alguna razón concreta para solo estático pincho dinámico y en project name voy a poner estructura pincho finish no cambio ningún parámetro más yo creo que ahora igual ya os aparecerá en target room time el tema previo porque ya lo tenéis y ahora simplemente pinchamos finish tras lo cual al pinchar finish voy a cerrar la conexión al pinchar finish va a ocurrir lo siguiente atención vamos a ir a web content y web content dentro de ese proyecto está vacío como que está vacío si antes he creado un archivo cuidado he creado un archivo en el proyecto anterior no en este vale por tanto la carpeta web content del proyecto de estructura está vacía por tanto voy a hacer clic con el botón derecho y voy a crear un new file voy a crear un nuevo archivo en este caso como vamos a aprender el html en esta primera parte si queréis no hace falta que creemos un archivo jsp aunque ya habéis visto que cuando hemos creado un jsp venid a una plantilla html sino que vamos a crear directamente un archivo html hago clic me dice cuál es el nombre de este archivo recordemos que cuando no sabemos qué poner por defecto ponemos index y pulsamos fines voy a cerrar el proyecto el archivo index.jsp del proyecto anterior y observo que aparece esto en la pantalla aparece la clásica estructura de un sitio web en html una cosa que os voy a decir una cosa que no me gusta de ‘eclipse’ es que cuando aparece la plantilla html la plantilla no va a sangrado y yo como prácticamente cualquier profesor siempre decimos que cuanto más sangre es el código mejor el código no va a funcionar mejor hay lenguajes de programación en los que el sangrado tiene una componente funcional si no sangras no funciona ninguno de los que vamos a ver en esta formación tiene esa característica todo es sangrado visual pero aún así sangrar el código para que en un momento dado tanto vosotros como yo podamos encontrar fácilmente los errores cuando surjan porque surgirán así que en este caso tengo una plantilla html que tiene las siguientes características en primer lugar tengo una etiqueta llamada doctor la etiqueta doc type tipo de documento me dice que voy a trabajar con un documento html curiosamente aunque no lo parezca cuando pone docta y para html quiere decir html 5 no hay que poner el 5 pero compro en html se entiende que es html 5 a partir de aquí el lenguaje html es un lenguaje basado en etiquetas etiquetas que en la gran mayoría de los casos se abren y se fía cómo saber cuándo se abre y cuando se cierra pues siempre vais a tener una etiqueta que no tiene una barra y esa etiqueta es la etiqueta de apertura y más adelante os vais a encontrar otra etiqueta que es la misma pero con la etiqueta con la barra eso quiere decir que es la etiqueta de cierre por tanto encuentro una etiqueta html de apertura encuentro una etiqueta html del cierre y eso quiere decir que todo lo que hay desde aquí aquí está contenido dentro de esa etiqueta es un lenguaje basado en etiquetas y trabaja como veréis jerárquicamente dentro del html encontramos un gel y encontramos un body encontramos una cabeza y encontramos un cuerpo la etiqueta head se abre y la etiqueta head se cierra la etiqueta body se abre y la etiqueta body se cierra mi recomendación es que selecciones todo lo que hay dentro de la etiqueta html que selecciones tanto el head como el body y pulsáis una vez la tecla de tabulación la tecla que está justo arriba de bloqueo mayúsculas para sangrar crear una tabulación y hacer que todo el código esté un poco situado a la derecha ahora vamos a ver que la etiqueta body está vacía no hay nada dentro de la etiqueta body pero la etiqueta head contiene dos etiquetas una etiqueta llamada meta que en este caso es una meta de información nos dice que este archivo está codificado con ute f8 para luego veremos qué es eso y nos dice que esta etiqueta tiene un título es un título que se abre y se cierra por eso lo que voy a hacer es seleccionar las dos etiquetas que están dentro de help y voy a pulsar otra vez la tecla de tabulación para establecer un sangrado para que esa pareja de etiquetas se quede sangrada con respecto a la etiqueta g esto no va a hacer que la página web funcione mejor va a funcionar exactamente igual de bien si quieres cargar incluso un pelín más lento porque al haber introducido tabulaciones quieres que no es un carácter que se tiene que transmitir a través de la red pero es mucho mejor que trabajéis así de cara a en un momento dado poder detectar dónde está un posible error html es el lenguaje de marcado más permisivo que os vais a encontrar y por eso veréis que funciona sin sangrado funciona con sangrado y encontramos también que la etiqueta título funciona abriendo la etiqueta y cerrando la etiqueta dentro de la misma línea así como la etiqueta head se ha abierto aquí y se ha cerrado aquí la etiqueta title se abre aquí y se cierra aquí y qué pasa no pasa nada cualquiera de las formas de trabajar es correcta también si queréis podríamos hacer lo siguiente selecciona el contenido de title title es el título de la página lo bajo no sangró ya que estamos y a continuación la etiqueta de cierre la bajo y la de sangre es decir le quito sangría y como veréis ahora queda clarísimo que la etiqueta title se abre aquí se cierra aquí y que este es su contenido no todas las etiquetas tienen por qué cerrarse como ya os he dicho entre un 90 y un 95 por ciento de ellas se cierran pero por ejemplo encontrareis la etiqueta meta que no se cierra y en estos casos es perfectamente normal con lo cual tenemos básicamente la misma estructura los mismos componentes que teníamos cuando hemos abierto el archivo pero los tenemos de una manera bastante más clara y bastante más legible a continuación voy a explicar un poco la estructura de etiquetas que tenéis en la pantalla la etiqueta html realmente no necesita presentación simplemente dice que todo lo que vais a encontrar contenido dentro de esta etiqueta va a ser contenido que finalmente se va a transformar en html la etiqueta html como hemos dicho contiene el head y contiene el body así que dentro de un poco de la comparativa con un ser humano el head es la cabeza el body es el cuerpo ahora la diferencia entre las dos es muy clara todo aquello que esté dentro del gel va a ir al navegador pero no para que lo vea el ser humano sino para que lo vea el propio navegador es información que no tiene porqué ver el ser humano pero que afecta a cómo se va a ver la página todo aquello que esté en el body es información que realmente se va a ver en el sitio web que realmente se va a ver en la aplicación web entonces ahora mismo que tenemos tenemos una etiqueta llamada title y esta etiqueta nos da un título así que voy a poner algo así como mi blog y por supuesto guardo y a continuación le voy a abrir y fijaos que pulso finish y damos cuenta que al previsualizar miradme todos aquí arriba aparece mi blog esto que tenéis aquí arriba correspondería a la pestaña del navegador cuando abramos la aplicación dentro de un navegador pero no se ve aquí abajo no se ve en el propio cuerpo de la página web vale por tanto todas aquellas etiquetas que tengamos en el gel proporcionan información el meta charset ni siquiera se ve en ninguna parte pero es muy importante mirar y ahora digo esto es una n y esto es un acento acento lo he puesto en la vãa y evidentemente pero para forzarlo así que yo era guardó y recargo y como tengo la etiqueta tf8 aparece correctamente la ñ y aparece correctamente el acento pero qué pasa si quito esta etiqueta dejadme que la corte corto guardo recargo bueno en este caso creo que tendría que parar el servidor vamos a verlo y creo también que este ordenador está ya en ute efe vamos a verlo sí vale en algunos ordenadores os puede pasar que al quitar la etiqueta ute f8 depende de la codificación que tenga por defecto el acento os aparezca incorrectamente os aparezca con un carácter extraño y en la ñ ocurra lo mismo vale por tanto la etiqueta me tachar 7 ene efe 8 es necesaria para que nos aseguremos de que los acentos y de que las señas y las cerillas y cualquier otro carácter específico de la zona del occidente europeo se vean correctamente esta estructura que tenéis en la pantalla es la estructura mínima y básica para crear cualquier sitio web mi recomendación es que os la aprendáis de memoria porque prácticamente cualquier aplicación en el lado del servidor que creéis tendrá que tener esta estructura ahora fijaos voy a escribir voy a empezar escribiendo dentro del body y dentro del body dentro del cuerpo vamos a crear una serie de etiquetas estructurales vamos a crear un poco el esqueleto de esta web por tanto dentro de body voy a escribir lo siguiente voy a escribir una etiqueta llamada diva la etiqueta diva se abre y se cierra os daréis cuenta de que una de las ayudas que nos da eclipse es que cuando escribo la etiqueta de apertura automáticamente se me escribe la etiqueta de cierre no es algo que particularmente me guste pero es así vive es una crono mo un acrónimo de división estoy haciendo simplemente una división dentro del sitio web ahora este ejercicio va a tener tres secciones va a tener una cabecera va a tener un cuerpo principal y va a tener abajo un pie de página es decir como a día de hoy es el 95% de los sitios webs que hay en el mercado para ello html5 propone e incluye una serie de nuevas etiquetas específicas para estos fines por tanto la primera etiqueta que voy a poner es una etiqueta llamada g ver que ver no confundir con head no es lo mismo suena parecido pero no es lo mismo a continuación bajo deje ver voy a crear una etiqueta main como eclipse todavía no reconoce la etiqueta main igual tenéis que escribirla manualmente la etiqueta main no forma parte del estándar html5 sino que es una propuesta para html 5.1 por eso eclipse de momento no la coge automáticamente pero existe y por último pongo una etiqueta llamada footer llamada pie de página así que aquí dentro del heather pondré el contenido de la cabecera aquí dentro de maine pondré el contenido principal y aquí dentro de footer pondré el pie de página vamos a ver fijémonos que al poner main me aparece un mensaje de advertencia que no es un error sino que es una advertencia y me dice que no un tag es decir etiqueta desconocida pero es una advertencia no es un error en este caso lo que ocurre es que esta versión de eclipse todavía no está actualizada a las últimas propuestas de html5 por tanto quién tiene razón eclipse o yo bueno evidentemente yo verdad pero no es por yo porque tenga razón porque lo diga yo sino tiene que haber una autoridad superior a mí que es la que diga qué es lo que vale y qué es lo que no vale en html esa autoridad es la w3c es un organismo que se encarga de establecer cuáles son las reglas de html entre otros lenguajes así que qué es lo que vamos a hacer pues a continuación vamos a ir a ese organismo y vamos a ver qué vía online tiene un validador que me permite meter código y que es a esa entidad esa autoridad que es la que marca las reglas médicas y lo que estoy escribiendo está bien o no está bien en cualquier momento no solo en este ejercicio sino en cualquier momento en el que quieras saber si el código html css que has escrito está bien o no vamos a buscar un sitio web llamado w3c valley dator si queréis lo hago yo por el tema de la velocidad de la red y aparece una dirección web llamada valley dator punto w 3 punto o hereje insisto que w 3 punto hereje es el organismo que decide cómo es html yo puedo validar un sitio web mediante una uvi pero este código que tengo no está situado todavía en internet por tanto no me vale la validación por por enlace a continuación puede también validar subiendo un archivo pero es que tengo pereza por subir yo el archivo así que la tercera opción es validar por entrada directa es decir coge tu código pégalo aquí y yo te digo si está bien o no así que voy a hacer esta tercera vía voy a copiar todo el código lo voy a pegar dentro de este cuadro y pulsó el botón check al pulsar el botón check lo que hace es evidentemente este organismo tiene todas las reglas de html lo que hace es validar mi código contra las reglas de html las últimas que hayan y por tanto me dice en este caso de color verde que mi documento ha sido correctamente chequeado como html5 o si tuviera algún error aparecería de color rojo y lo más importante es que aquí abajo me diría que errores tendría en este caso tengo cero errores y dos warnings y por tanto no me dice los errores que tengo porque de momento no tengo ya tendré pero me dice eso si los warnings simplemente me dice que estoy usando html5 donde html5 es experimental html5 se considera todavía experimental el estándar tenía que haber sido cerrado en abril de 2014 pero por alguna razón sigue abierto vale por tanto es normal que diga que de momento es experimental pero claro no lo voy a hacer en html 4 sería retroceder mucho en el tiempo y por último dice bueno como has usado direct input no puedo validar si tu archivo está puesto en ute f8 no ya a nivel de etiquetas sino a nivel de guardar el archivo por tanto dice que lo asume como no me ha subido un archivo asumo que tu archivo está bien así que en definitiva de vez en cuando va a ser bueno que no ya que escribáis el código como yo os lo diga que también sino que de vez en cuando cojáis ese código y lo validase contra este validador para comprobar que todo lo que estamos haciendo es correcto qué importancia tiene esto bueno tiene una importancia relativa html es un lenguaje como os decía muy relajado muy permisivo pero es tan relajado y permisivo que puedes estar haciendo las cosas mal y no darte cuenta porque el navegador las acepta y se las traga es decir qué pasa en java cuando escribes algo mal que te das cuenta por qué porque el programa no funciona si te extender líneas de código y te falta un punto y coma el programa no funciona detectar cuando algo está mal en java es muy fácil porque entre que no funciona y que te lo dice en la línea lo puede detectar enseguida en html no está tan claro cuando algo está bien o algo está mal por eso el eclipse no tiene el sistema de validación lo vamos a encontrar frecuentemente dentro de esta página bien de momento por tanto contamos con la tranquilidad de que todo el código al menos de momento está bien y ahora después de todo esto que hemos escrito quiero ver qué aspecto tiene esto porque he escrito un div escrito un header escrito un main y egipto footer como se ve esto en el navegador pues le doy a play y observo que prácticamente nada de lo que he escrito se ve en la pantalla y es normal y está bien no es que hayáis hecho nada mal es decir recordad lo que os decía antes lo que estamos haciendo es el esqueleto el esqueleto tú lo ves en una persona no pero aunque no lo ves es importante porque mantiene en pie a la persona por tanto es importante que aunque no veáis nada espectacular en la pantalla cuando vayamos a css ya veréis algo más espectacular el que entendáis que de momento lo estáis haciendo bien continuamos en este caso con el contenido tanto del header como del main como del frutero vamos a empezar trabajando en el header que es la cabecera y para eso voy a enseñaros algunas etiquetas de rotulación la primera de ellas la etiqueta h1 las etiquetas h van del 1 al 6 y el h viene de heading de titular por tanto el h1 es el titular de mayor importancia el h2 es menos importante que el h1 el h3 es menos importante que el h2 y así así que vamos a ponerle un título a esta página web y digo el blog de josé vicente algo que más adelante podamos convertir de estático a dinámico usando ya van der price no pongáis el blog dejo suficiente poner cada uno el blog de lo que sea es que hay cursos donde luego me paso por ahí la gente ha puesto el blog con suficiente y dio a ver cada uno llega al suyo puedo poner un h 2 y dentro de h2 voy a poner un subtítulo el que queráis pues cada uno un poco una definición pues que hacéis un programador y formador y diseñador en valencia españa cada uno que ponga el título que quiera y si ahora guardo y recargo comprobaremos lo siguiente mirad pone el blog de jose vicente y como lo he puesto con h1 con titular aparece mucho más grande mucho más marcado que el texto original si yo he puesto h 2 el título os podéis ver que tiene menos tamaño que el título h1 pero tiene más tamaño que el texto principal y ni se os ocurra preguntarme es que lo quiero más grande más pequeño quiere otra tipografía quiero otro color porque no os lo voy a resolver ahora porque eso no es html eso es css y por tanto a partir de ahora vais a tener que diferenciar bastante mentalmente lo que es la estructura de lo que es el estilo vamos a explicar html me gustan unas cuantas horas trabajando con html y vamos a ver estructura no estilo tener paciencia porque al cabo de esa primera parte del temario nos meteremos dentro de efe ss y ahí sí que veremos cómo cambiar el color cambiar el fondo cambiar el tamaño cambiar el tipo y cambiar cualquier propiedad vale pero siempre que se dispensan de una propiedad visual no toca todavía veremos ya dentro de la cabecera del header un título h1 y un título h 2 así que vamos a poner unas cuantas etiquetas más otra de las etiquetas nuevas de html5 es la etiqueta de navegación menú de navegación así que la etiqueta es muy sencilla es la etiqueta nava la etiqueta nadal que se abre y se cierra dejadme que me haga un poco de sitio para ver mejor el código y la etiqueta puede contener cualquier cosa pero se recomienda que contenga una lista no ordenada vamos por tanto aprender a trabajar con listas dentro de html lo que quiero hacer es un menú de navegación pero paradójicamente voy a hacer algo que nosotros pensaréis que es lo menos parecido posible o menos de la negación confiad en mí voy a hacer algo que va a aparecer feísimo pero cuando trabajemos con css lo queremos es convertir eso a un menú de navegación con botones y con lo que sea por tanto dentro de html hay dos tipos de lista la lista ordenada y la lista no ordenada para trabajar con una lista no ordenada simplemente escribimos la etiqueta l la etiqueta l que quiere decir un orden & list lista no ordenada la etiqueta google se abre y se cierra no una vez que tenemos una lista no ordenada 11 ordered list tenemos que poner dentro etiquetas de lista tenemos que poner dentro etiquetas link con el decimos qué tipo de lista vamos a hacer con con li especificamos los elementos de la lista así que voy a poner algo como por ejemplo inicio voy a poner algo como por ejemplo no sé noticias algo como por ejemplo quién soy y por último la clásica sección de contacto guardo recargo y por aquí lo tengo o bien en la vista diseño o bien ejecutando el servidor simplemente veremos que aparece ya lo sé lo menos parecido a un medio de la negación aparece una lista no ordenada se llama no ordenada porque los marcadores son bullets anónimos no son puntos perdón no son letras ni números las listas ordenadas se hacen exactamente igual que las listas no ordenadas pero simplemente cambiando la etiqueta l por la etiqueta o l por tanto si cambio l por l simplemente voy a encontrar que la lista pasa de ser no ordenada a ser ordenada por eso si sabes un tipo de lista ya sabes la otra en este caso no importaría qué tipo de lista vamos a dejar simplemente vamos a dejar la original la no ordenada la que se basa en puntos esto más adelante nos dará igual porque lo que haremos es quitar los puntos y convertirlo a un menú de navegación basado en botones hemos hecho un menú de navegación pero realmente no nos permite navegar a ninguna parte el centro dentro de la web encuentro que la verdad es que yo pueda pinchar en noticias pueda pinchar en quién soy puede pinchar en contacto pero no puedo pinchar ahora mismo ninguna parte por eso vamos a ver una etiqueta que es de una importancia capital dentro de html que es la etiqueta del hipervínculo el ancla el hipervínculo es una etiqueta que me permite navegar de un archivo a otro simplemente haciendo clic en un híper enlace de hecho en html la h y la t es de hipertexto el propio lenguaje que indica que su objetivo es enlazar diferentes páginas mediante hipertexto por tanto voy a hacer lo siguiente dentro de inicio voy a intercalar una etiqueta y que va a tener la siguiente forma es una etiqueta que tiene un parámetro de etiqueta llamado h ref la etiqueta se abre y se cierra y dentro del h ref tengo que poner la dirección a la cual quiero ir bueno en este caso estoy trabajando con el menú de inicio y estoy en la página de inicio así que técnicamente es en la fei lleva a sí mismo por tanto voy a poner index.hr ml la fórmula es la siguiente pongo a espacio por supuesto h ref igual y comillas y pongo la dirección a la cual quiero llegar en este caso estoy gastando o malgastando cinco líneas para hacer algo que realmente es un elemento de enlace así que o bien podéis escribir de esta manera sangrada o bien pulsando la tecla suprimir lo que puedo hacer es poner todo este contenido dentro de la misma línea es más difícil de leer porque fijaos que tengo que entender que tengo un link tengo una tengo un contenido y tengo un cierre de ahí tengo un cierre de link es decir en cuanto a la lectura de código es algo más difícil pero también es cierto que es más conveniente voy a copiar y pegar porque voy a copiar y pegar mucho dentro de esta formación y dentro de cualquier formación de programación y voy a hacer lo siguiente atención noticias me llevará a una página que todavía no existe llamada noticias html quién soy me llevará a una página que todavía no existe llamada quien soy html atención en el nombre del menú podéis poner lo que queráis pero en el nombre de la página web no allí no podéis poner espacios no debéis poner mayúsculas debe ir todo seguido y todo minúsculas y luego aquí dentro podéis poner lo que queráis y en contacto voy a redirigir a contacto punto html tengo ya aportando el menú de navegación y lo que voy a hacer ahora es probarlo guardo recargo creo que ahora el menú está estilizado con una cosa que se llama estilo por defecto el estilo por defecto es algo que no nos tiene que preocupar en absoluto y es el que indica que el título se ve así de grande que el título 2 se vea un poco más pequeño que el hiperenlace se vea de color azul y se vea subrayado eso ocurre así por una cosa llamada estilos por defecto de navegador cuando tú no has especificado en estilo el navegador le por un estilo no me preocupa porque cuando lleguemos a css ya pondremos nuestro propio estilo lo que quiero ver ahora es simplemente que le doy a noticias hago clic en noticias y que me dice un error porque me dice que quiero ir a noticias html la pregunta es existe noticias de tm l no existe así que qué voy a hacer a continuación crear estas páginas fijémonos que tengo un proyecto llamado estructura que tiene una única página llamada index.html pues ahora voy a volver a hacer clic con el botón derecho dentro de web content y voy a hacer mirad lo siguiente una página llamada noticias html html otra página llamada quién soy punto html y otra página por último llamada contacto punto html las páginas las tenéis aquí listadas en esta parte del proyecto son al final cuatro páginas index la principal noticias quién soy y contacto y ahora comprobamos que si recargo el proyecto atención noticias ya no me da error me lleva a una página que está vacía pero ya no da un error index me lleva vamos a verlo me lleva a contacto me lleva a quien soy y me lleva también a inicio tengo por tanto una mínima navegación creada dentro de este archivo ahora que tengo una estructura mínima dentro de la cabecera no es una cabecera espectacular pero por lo menos ya es una cabecera funcional es una cabecera que tiene pues simplemente el nombre tiene el subtítulo tiene el menú de navegación y tiene contenido principal y pie de página pero voy a observar una cosa y es que si yo me voy a noticias en noticias no aparece nada porque no aparece nada pues porque noticias tengo la plantilla en blanco de nuevo es decir noticias no hereda todo el código que tenía dentro de index html por eso para asegurarme de que al menos hasta el punto en el que he llegado ahora mismo noticias html quién soy punto html y contacto html tenga todo lo mismo voy a hacer lo siguiente me voy a index html selecciono todo y lo copio si queréis o bien me voy al menú editar y dentro de editar tengo la opción de ese lector o bien como esta es una operación muy frecuente habréis visto más de una vez que control a es la tecla rápida para selector para seleccionarlo todo así que pulso control y a continuación un pulso control ce porque lo que quiero es copiar control c y a continuación dentro de noticias cuidado muy importante borro el contenido y control v pego el contenido no lo habéis visto pues lo vuelvo a repetir me voy a quien soy y borró el contenido y control v pego el contenido y si no lo habéis visto me voy a contacto mira mira por aquí ahí me voy a contacto borró todo lo que tengo en contacto y pego el contenido lo que quiero es que por supuesto al finalizar guardáis todos los archivos es que los cuatro archivos de este mini proyecto tengan exactamente el mismo código que tiene el archivo original lo que voy a hacer ahora es muy sencillo simplemente aquí dentro de index html donde pone pondré el contenido principal voy a decir esta es la página de inicio estoy en index.html y estoy dentro de la etiqueta main dentro de la etiqueta principal ahora me voy a noticias html y dentro de noticias punto html voy a poner esta es la página de noticias ahora estoy en noticias html y en noticias html pongo otra cosa repito me voy a otra página en este caso a quién soy punto html y dentro de quién soy punto html pongo algo como esta es la página de quién soy o aquí pondré información sobre mí o lo que sea y por último me voy a contacto repito por cuarta vez y pongo esta es la página de contacto lo que he hecho por tanto es personalizar un poco el contenido principal de cada una de las cuatro páginas es decir la cabecera se va a quedar igual en las cuatro páginas y así debe ser pero el contenido principal es lo que va a variar por tanto ahora sí me voy a index html y ejecutó el proyecto me dice esta es la página de inicio si me voy a noticias me dice esta es la página de noticias si me voy a quién soy me dice esta es la página de quién soy y si me voy a contacto dice esta es la página de contacto es decir tengo cuatro páginas dentro de este proyecto daos cuenta aquí arriba en la url como estoy navegando y dentro de estas cuatro páginas del proyecto lo que consigo es tener cuatro direcciones diferentes a las que ir digamos que si previamente habéis visto java swing es un poco como paneles es un poco como el mostrar un panel y ocultar los demás la cuestión es que en html en lugar de mostrar e ocultar lo que hace es navegar hasta un archivo o hasta otro archivo html es muy importante que os acostumbréis a que cada vez que hacéis un cambio le deis a control ese la manera de saber atención mirad esta es la página de quién soy y ahora pongo hola damos cuenta que esa página de quién soy ahora tiene un asterisco es de un asterisco quiere decir que no he guardado la última versión no estoy viendo la última versión por eso puede ocurrir fíjate que pone o la ejecutó el proyecto y cuando en este caso me reconoce que no lo guardado y cuando me voy a quién soy ahora me lo va a reconocer porque mira no dice esta es la página de quién soy pero no pone quién soy o la que simplemente lo que tengo que hacer es asegurarme que cuando voy a cada página pulso control s para guardar aún así si éste no fuera el problema también podría ser un problema del servidor porque recordaba lo que os comentado antes que el servidor de vez en cuando se queda pillado y aunque tú hagas cambios no refresca los cambios y demuestra la última compilación solución paramos el servidor volvemos a arrancar y ahí sí si has hecho lo de guardar archivos y por otra parte para el servidor en principio debería aparecer correctamente las modificaciones que hayáis hecho voy a empezar trabajando un poco dentro de la página de noticias voy a crear noticias de momento de manera estática ahora estamos trabajando con html con lo cual vamos a hacer un proyecto estático evidentemente cuando acabemos la parte de html css de javascript y nos vayamos a haven del price las rutinas no serán estáticas sino que propendan de una base de datos pero hoy de momento son estáticas así que voy a quitar o voy a pulsar enter dentro de la página de noticias y mirar lo que voy a hacer digo esta es la página de noticias y ahora pongo esta es otra línea y una cosa muy importante que debéis entender es que si yo ahora ejecutó esta página veréis que esta es la página de noticias esta es otra línea aunque yo he puesto el código en otra línea dentro de html no reconoce que hay otra línea porque simplemente siempre que quiera hacer un retorno de carro tengo que poner una etiqueta llamada br bar return el barri torno es como un retorno de carro en las máquinas escribir antiguas ahora si me permite que esta segunda línea esta es otra línea este en la parte de abajo y no a continuación por tanto siempre que queráis escribir un retorno de carro siempre que queráis que el cursor baje tenéis que poner br ahora voy a poner lo siguiente dentro de html5 una de las nuevas etiquetas es la etiqueta arctic el arctic él es una etiqueta para escribir artículos así que en este caso si voy a crear un blog un blog tiene artículos la etiqueta ártica el no es solo para artículos de un blog tienes un blog tienes artículos tienes una tienda online tienes artículos no es el mismo tipo de artículo para la etiqueta artículos sirve perfectamente así que dentro de arctic el artículo se abre artículo se cierra voy a poner h3 y dentro de h3 fijaos que si tengo h1 tengo dos y ahora pongo tres pues pongo noticia empieza el curso de java enterprise esto es un titular ahora pongo un texto de parágrafo un texto de palabra fo es un texto plano es un texto normal es un texto que no es un título en la sesión de hoy empezamos el curso de java enterprise con la parte de html estática y tengo por tanto un primer artículo un primer artículo que tiene un título h3 y que tiene un texto de parágrafo bueno bueno así que ejecutó el proyecto y compruebo ahora voy ahora pongo el código como aparece el título y aparece el texto como texto normal voy a empezar a introducir multimedia o múltiples medios visuales y auditivos dentro de esta página los elementos multimedia dentro de un sitio web fundamentalmente son imágenes vídeo y audio así que lo primero que voy a hacer es lo más sencillo es introducir una imagen la etiqueta para introducir imágenes es muy sencilla es de las más sencillas se abre y no se cierra lo difícil es el vínculo a las imágenes así que hago lo siguiente voy a crear una etiqueta img img es la etiqueta para crear imágenes pero claro la etiqueta img por sí misma no hace nada necesita un parámetro llamado src para decir qué imagen voy a cargar src igual comillas comillas y ahora dentro de las comillas pondremos la ruta a la imagen este es el problema realmente donde está la ruta de las imágenes así que para trabajar con imágenes lo primero que necesito es traer imágenes o vídeo o audio a mi proyecto pero cuidado tengo ya cuatro elementos html en mi proyecto y ahora empiezo a meter imágenes y vídeos y tal lo que voy a tener es al final una carpeta llena de archivos una carpeta desordenada y no quiero tener un proyecto desordenado por tanto dentro de web content voy a hacer clic con el botón derecho voy a pulsar new y en este caso en lugar de crear un archivo voy a crear un folder voy a crear una carpeta todos los contenidos multimedia que voy a utilizar los voy agruparlos voy a ordenar dentro de un folder dentro de una carpeta así que pincho folder me dice cuál es el folder name o cuál es el nombre de la carpeta el nombre es el que queráis yo os recomiendo que pongamos de momento multimedia pongo el nombre multimedia pulso finish y compruebo como ahora dentro de web content después de meta y antes de web guión y no tengo una carpeta llamada multimedia ahora esa carpeta está preparada para recibir las imágenes que voy a usar y ahora me voy a internet para ello me abro un navegador web busco una imagen por ejemplo en google imágenes entonces busca por ejemplo j2ee quiero el logotipo de jam under price sabréis que cuando buscas algo en google hay una pestaña en la que pone imágenes y aquí aparecen múltiples imágenes voy a poner java enterprise logo y por tanto ahora dentro de momento veréis como aparecen imágenes que coinciden con mi búsqueda por ejemplo voy a conseguir esta imagen atención hago clic en la imagen le digo que quiero ver la imagen y ahora clic con el botón derecho guardar imagen como y me la guardo la cuestión es dónde la guardo eso es lo delicado bien tenéis que localizar en qué carpeta tenéis puesto vuestro workspace en qué carpeta estáis generando los proyectos y por tanto ahora mirad me voy a hacer lo siguiente le doy a guardar la imagen como me voy en mi caso al sistema de archivos iunics me voy a parar me voy al live mi caso insisto en vuestro caso creo que estaba en el disco duro ce algo como proyectos java o algo así en mi caso me voy a tocar 7 me voy a web apps y me voy a root y me voy a la estructura y dentro de estructura observo que hay una carpeta llamada multimedia es decir tienes que encontrar la ruta de acceso a ese proyecto y esa carpeta y ahora dentro de esa carpeta lo que hago es pulsar sobre guardar hemos hecho un cambio atención verdad hemos hecho un cambio con respecto a la estructura del proyecto y ha sido un cambio externo qué quiere decir esto desde fuera de ‘eclipse’ he creado un archivo dentro de la carpeta multimedia y eso quiere decir que ahora multimedia parece que esté vacío si yo despliegue multimedia veréis que no se puede desplegar esto es muy normal porque he hecho una modificación desde fuera de ‘eclipse’ clip que no tiene por qué haberse enterado cuando eso ocurre que lo haréis muy frecuentemente lo que haremos es pulsar botón derecho en web content y le diremos refresh refresh es escanea esa carpeta y date cuenta que ha habido un cambio y por tanto veréis que sólo en ese momento cuando hacemos refresh aparece esa imagen si ya aparece esa imagen puedo hacer lo siguiente cómo se llama la carpeta donde está situada esa imagen se llama multimedia a continuación pongo una barra para separar el nombre del archivo del nombre de la carpeta y por último pongo el nombre del archivo cuidado y aquí vais a fallar tienes que poner el nombre del archivo exactamente letra por letra como se llama el archivo entonces j2ee guión bajo logo punto png y si todo ha ido correctamente cuando ahora pulso play encontraré que tengo un artículo que tiene un título que tiene un texto y que tiene insertada una imagen

Deja una respuesta

Tu dirección de correo electrónico no será publicada.