Inscripciones Abiertas el lunes 31 de Agosto

El lunes 31 de Agosto: Inscripciones abiertas, Diplomado de Programación,  Diseño Digital, Integración Web y Mercadeo  Inscripciones abiertas.

 CLASES PRESENCIALES:

• Mañana  9am a 12m
• Lunes a Viernes de 9am a 12m:  Diplomado de Programación
  
• Lunes a Viernes de 9am a 12m:  Lógica de Programación
  
• Lunes a Viernes de 9am a 12m:  HMTL 5
  
• Lunes a Viernes de 9am a 12m:  Java nivel 1
  
• Tarde 2pm a 5pm
• Lunes a Viernes de 2pm a 5pm:  Diplomado de Diseño Digital
  
• Lunes a Viernes de 2pm a 5pm:  Flash
  
• Lunes a Viernes de 9am a 12m:   Diagramación digital
  
• Lunes a Viernes de 9am a 12m:   SEO posicionamiento en buscadores
  
• Noche 6pm a 9pm
• Lunes a Viernes de 6pm a 9pm:  Android nivel 1
  
• Lunes a Viernes de 6pm a 9pm:  HTML 5
  
• Lunes a Viernes de 6pm a 9pm:  Android nivel 1
  
• Lunes a Viernes de 6pm a 9pm:  Diplomado de Programación

Cursos online CLASES EN VIVO con el profesor abiertos:

Curso de Marketing viral on line 07 de Septiembre 2015

Curso de WordPress 100% online 14 de Septiembre 2015

Curso Especialización en Android 100% on line 14 de Septiembre 2015

Coordinación de Cursos, Diplomados y Maestría

Centro Comercial Chacaíto, nivel Terraza, diagonal al teatro. Local 409. Telf. 0212 9538412 – 04141150705
Blog: http://institutouneweb.blogspot.com/
Facebook: https://www.facebook.com/uneweb
Folleto: http://www.youblisher.com/p/915185-Uneweb/
Twitter: http://twitter.com/desarrollate

Aprende acerca de la organización conceptual de html

En la anterior entrega del curso vimos el código HTML correspondiente a una página web sencilla que constaba de cabecera con el título y mensaje breve, menú, texto con algunas imágenes, formulario de contacto y un pie de página con información sobre los autores o el copyryght. HTML podemos decir que define una organización conceptual: cada elemento está dentro de otro elemento o, en última instancia, dentro de la página web o documento HTML.

La organización conceptual que define HTML para nuestro ejemplo podríamos verla tal y como se refleja en el siguiente esquema.

Esquema 1. Organización conceptual basada en HTML

Dentro de la organización que define HTML podemos señalar algunas cosas que resultan significativas. Por ejemplo, en distintas partes del documento HTML encontramos texto. No obstante, las etiquetas dentro de las que se encuentra el texto informan en algunos casos del significado de dicho texto. Por ejemplo el texto dentro de etiquetas <h1> … </h1> sabemos que corresponde a un título prinicpal. El texto dentro de etiquetas <li> … </li> sabemos que corresponde a un elemento de una lista. El texto dentro de elementos <p> … </p> sabemos que corresponde a un párrafo. Hay ocasiones en que el texto no aparece dentro de etiquetas con un significado explícito. Por ejemplo un texto dentro de <div> … </div> es simplemente el texto dentro de un contenedor o espacio distinto de otros espacios, pero no tenemos más información acerca de su cometido.

Por otra parte en algunas partes aparece texto suelto sin estar delimitado por etiquetas, por ejemplo dentro del formulario aparece texto, sin estar incluido dentro de etiquetas específicas. Sabemos que dicho texto forma parte del formulario, pero nada más.

Otra cuestión que nos puede llamar la atención es que si bien la mayoría de las etiquetas tienen elemento de apertura y cierre (por ejemplo <h1> … </h1>), algunas etiquetas se abren y cierran en un mismo elemento, como <br/>, mientras que otras se incluyen aparentemente como si solo tuvieran apertura, como es el caso de <img …>. Todas estas particularidades de HTML debemos conocerlas.

MODELO DE CAJAS

Ya hemos visto cómo conceptualmente HTML define una organización donde todos los elementos están dentro de un elemento matriz (el elemento body) y a su vez cada elemento puede tener otros elementos dentro de él y así sucesivamente.

A partir del HTML, los navegadores tienen que realizar la interpretación del código y mostrar en pantalla una página web. Ahora bien, a partir de un documento HTML habría distintas formas de presentar la información en pantalla. Por ejemplo, podrían mostrarse los sucesivos elementos de izquierda a derecha, o bien de arriba abajo, o bien de derecha a izquierda… ¿Qué hacen los navegadores? Los navegadores actúan según unas reglas predefinidas aceptadas por todos (o casi todos) según la cual cada elemento HTML se considera que está delimitado por un rectángulo o caja invisible. De ahí que se hable de “modelo de cajas” para la web.

Cada caja puede ser o bien tipo <<block>> que podríamos considerar como “bloque a lo ancho” o bien tipo <<inline>> que podríamos considerar como “elemento dentro de una línea”. Cada caja se coloca dentro de la pantalla de la siguiente manera:

- Una caja debajo de otra, si son elementos block del documento HTML del mismo rango o nivel en la jerarquía. Muchas de las etiquetas HTML se tratan por defecto como elementos block. Por ejemplo los elementos <div> … </div> son elementos block. Igualmente son elementos block los formularios <form> … </form> o las listas <ul> … </ul>.

En el siguiente esquema reflejamos algunos elementos block dentro de nuestro ejemplo.

Si te fijas, las cajas que hemos representado son las divisiones principales dentro de “la caja que lo engloba todo” que es la definida por <body> … </body>.

- Una caja al lado de otra, de izquierda a derecha de acuerdo con el orden con que aparezcan en el documento HTML, si son elementos inline del documento HTML del mismo rango o nivel en la jerarquía. Los elementos se mantienen uno al lado de otro (excepto en el caso de que ya no haya espacio para ubicarlos, en cuyo caso pasan a la siguiente línea). Algunas de las etiquetas HTML se tratan por defecto como elementos inline. Por ejemplo los elementos <img> son elementos inline. Gráficamente en nuestro ejemplo esto se visualiza porque distintos elementos <img> se colocan uno al lado de otro y no uno debajo de otro como harían elementos block, como vemos a continuación.

 

 

- Una caja dentro de otra, siendo la caja interior la de menor rango o jerarquía. Puede haber varias cajas dentro de cada caja, según se defina en el documento HTML. Por ejemplo dentro de la caja div que define la cabecera de nuestra web de ejemplo hay dos cajas, una correspondiente al título principal <h1>… </h1> y otra correspondiente al título segundo <h2> … </h2>.

El siguiente esquema reflejaría el modelo de cajas del documento HTML de forma similar a como lo construye un navegador web como pueda ser Internet Explorer, Google Chrome o Mozilla Firefox, Safari, etc.

En este esquema comprobamos que una página web puede tener gran complejidad en su organización estructural y en su representación con modelo de cajas.

Hemos representado las cajas en general delimitadas con una línea contínua (que en el navegador se vuelve invisible) excepto aquellos elementos de texto que no están delimitados por etiquetas específicas, que constituyen casos especiales que representamos con línea discontínua.

Como veremos a lo largo del curso, CSS nos servirá para aplicar estilos (bordes, fondos, tipos de letra, interlineado, etc.) a todas las cajas de un mismo tipo si lo deseamos, o también a cajas concretas para las que deseemos tener un tratamiento especial.

EJERCICIO

Analiza el siguiente código HTML y crea dos esquemas. Un esquema de organización utilizando llaves como hemos visto anteriormente, y otro esquema que refleje las cajas que intervienen en el documento HTML, siguiendo el ejemplo visto anteriormente.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>  <head> <title>Portal web - aprenderaprogramar.com</title> <meta name="description" content="Portal web aprenderaprogramar.com"> <meta name="keywords" content="aprender, programar, cursos, libros"> <meta charset="utf-8"> </head>  <body>  <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p> <h1>Novedades</h1> <p>Aquí presentamos las novedades del sitio.</p> <h3>Lanzamos el producto X-FASHION</h3> <p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p> <p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p> <h3>Mejoramos el producto T-MOTION</h3> <p>Hemos lanzado una nueva versión del producto T-MOTION</p> <p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p> </body> </html>

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Aprende cómo nos sirve para dotar de aspecto a un documento HTML

Vamos a partir de un código HTML que representa la estructura básica de una página web. En esta estructura la página web queda dividida en: cabecera con el título y mensaje breve, menú, texto con algunas imágenes, formulario de contacto y un pie de página con información sobre los autores o el copyright.

Crea un documento HTML con un editor de texto como Notepad++ con el siguiente contenido:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Código base para el curso CSS --> <html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <meta name="description" content="Portal web aprenderaprogramar.com"> <meta name="keywords" content="aprender, programar, cursos, libros"> </head> <!-- Contenido de la página web --> <body> <!-- Cabecera de la página web --> <div> <h1>Portal web aprenderaprogramar.com</h1> <h2>Didáctica y divulgación de la programación</h2> </div> <!-- Fin de la cabecera de la página web --> <br /> <!-- Contenedor para la parte central --> <div> <!-- menu --> <div> <div>Menú</div> <hr/> <ul> <li><a href="#">Inicio</a></li> <li> <a href="libros.html">Libros de programación</a> </li> <li> <a href="cursos.html">Cursos de programación</a> </li> <li> <a href="humor.html">Humor informático</a> </li> </ul> </div> <!-- fin menu --> <!-- cuerpo --> <div> <!-- Texto con imágenes --> <div> <p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p> <p>Hay que tener claro que <a href="http://www.aprenderaprogramar.com">aprender programación</a> no es tarea de un día ni de una semana: aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo nuestros primeros programas.</p> <p>Puedes seguir uno de <a href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras alternativas como Crimson Editor.</p> <a href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-informaticas&Itemid=179"> <img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> </a> <img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo"> </div> <!-- Fin del texto con imágenes --> <br/> <!-- Formulario de contacto --> <form method="get" action="accion.html"> Si quieres contactar con nosotros envíanos este formulario relleno: <br /><br /> Nombre: <input type="text" name="nombre" /><br /> Apellidos: <input type="text" name="apellidos" /><br /> Dirección: <input type="text" name="direccion" /><br /> Correo electrónico: <input type="text" name="correo" /><br /> Mensaje: <textarea name="mensaje" cols=30 rows=2></textarea><br /><br /> <input type="submit" value="Enviar"> <input type="reset" value="Cancelar"> </form> <!-- Fin del formulario de contacto --> </div> <!-- fin cuerpo --> </div> <!-- fin contenedor para la parte central --> <br /> <br /> <br /> <!-- Pie de página o footer --> <div> <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo apr" title="Logo aprenderaprogramar.com"> Copyright 2006-2038 aprenderaprogramar.com </div> <!-- Fin del pie de página o footer --> </body> <!-- Fin del contenido de la página web --> </html>

El código anterior es HTML y lo usaremos a lo largo del curso para poner diferentes ejemplos, por lo que lo denominaremos "código base del curso". Para seguir este curso debes ser capaz de comprender todo el código HTML que hemos usado, su significado y sintaxis. Si no comprendes el código anterior no continues avanzando, dirígete a la web aprenderaprogramar.com y en la sección cursos busca el “Curso básico del programador web: HTML desde cero” y realízalo. Si no lo haces así no entenderás o no le sacarás todo el partido posible a este curso.

Visualiza el documento HTML en un navegador. Debes obtener un resultado similar a este (si te falla alguna imagen puedes cambiar las rutas y poner otra imagen que tú desees):

En este documento tenemos varios elementos como etiquetas de título h1 y h2, links, listas con elementos dentro de las listas, imágenes, formularios, botones, texto, etc. Todo ello nos va a servir para usar CSS y ver las posibilidades que nos ofrece CSS para dar formato a nuestras páginas web. En este curso nos vamos a centrar en tratar de aprender los aspectos más importantes de CSS y la lógica de CSS. El objetivo será saber hacer un buen diseño de CSS, un buen uso de CSS y comprender lo que hacemos. Por el contrario, no vamos a tratar de aprender o conocer todas las propiedades, posibilidades o instrucciones de CSS ya que si logramos comprender cómo funciona y su lógica, nos bastará con realizar búsquedas en internet para encontrar aquella propiedad o sintaxis que podamos necesitar en un momento dado. “Aprende a pescar, no te conformes con que te den peces”.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Aprende cómo responden los navegadores al uso de JavaScript

Una página web podemos verla como estructura o armazón, más estilos o apariencia, más acciones o respuestas dinámicas. En esta visión HTML es la estructura, CSS los estilos y JavaScript la respuesta dinámica. El código JavaScript se incluye en las páginas web de forma similar a como se hace con el código CSS: puede ir especificado en un apartado específico dentro del código HTML, en línea, o en un archivo externo.

JavaScript puede usarse con muchos fines, pero el más habitual es responder a una acción del usuario. Cuando el usuario hace click sobre un botón o sobre una imagen, por ejemplo, decimos que se ha producido “un evento” (¿Cuál es el evento? Que el usuario ha hecho click sobre el botón o imagen).

Nos interesa ahora ver cómo podemos incluir JavaScript dentro del código de una página web para que el navegador lo interprete y ejecute.

PRIMERA FORMA DE INCLUIR JAVASCRIPT EN WEBS

Crea un archivo HTML con este contenido, guárdalo con un nombre como ejemplo1.html y visualízalo en el navegador (puedes cambiar la ruta de la imagen si lo deseas):

<html> <head> <title>Curso JavaScript - aprenderaprogramar.com</title> <meta charset="utf-8"> </head> <body> <div> <p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p> <img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> <p>Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web. </p> </div> </body> </html>

Podemos hacer click sobre la imagen y no obtendremos respuesta alguna.

Nuestro objetivo ahora es que cuando se pulse sobre la imagen aparezca un mensaje, por ejemplo: “Bienvenido al curso JavaScript de aprenderaprogramar.com”

Ahora vamos a ver la primera forma de introducir JavaScript: hacerlo en línea. Modifica el código y comprueba el resultado de hacer click sobre la imagen después de introducir esta modificación:

<img onclick="alert('Bienvenido al curso JavaScript de aprenderaprogramar.com')" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">

Interpretamos lo que hace este código: le indica al navegador que cuando sobre el elemento img se produzca un click (evento denominado onclick), se muestre un mensaje de alerta al usuario cuyo contenido será “Bienvenido al curso de JavaScript de aprenderaprogramar.com”.

Una vez hacemos click sobre la imagen obtendremos un resultado. ¿Qué resultado? Aquí mostramos algunas posibilidades:

El código onclick="alert('Bienvenido al curso JavaScript de aprenderaprogramar.com')"es código JavaScript, aunque esté dentro de una línea de HTML. El navegador reconoce que se trata de código JavaScript, lo interpreta y se encarga de tener en cuenta ese código y generar las acciones que correspondan.

Si has visualizado la página web en tu navegador y haz hecho click sobre la imagen lo más probable es que te haya aparecido una ventana con un mensaje informativo, pero hemos indicado distintas posibilidades que podrían tener lugar en distintos navegadores o computadores:

Posibilidad 1 (navegador 1): se muestra una ventana informativa con el texto. En este caso no tiene aspa de cierre, ni márgenes ni título.

Posibilidad 2 (navegador 2): se muestra una ventana informativa con el texto. En este caso sí tiene aspa de cierre, márgenes y título.

Posibilidad 3 (navegador 3): al hacer click sobre la imagen no ocurre nada, aunque un mensaje nos avisa de que el navegador no permitió la ejecucion de scripts y nos da opción a permitir el contenido bloqueado.

Posibilidad 4 (navegador 4): al hacer click sobre la imagen no ocurre nada, y no aparece ningún mensaje avisando de nada.

¿Por qué es posible obtener diferentes respuestas ante un código tan simple? (Donde a priori parecería que todos los navegadores deberían mostrar un mismo resultado). Tenemos que indicar distintos motivos:

1) Cada navegador tiene su propia interfaz o apariencia para ciertos elementos. En este ejemplo, el navegador 1 muestra la ventana de mensaje con una apariencia y el navegador 2 con otra. Ambos resultados los podemos considerar “correctos”, la única diferencia está en la apariencia.

2) La ejecución de JavaScript en un navegador está ligada a la configuración de seguridad del navegador y al propio hecho de que JavaScript esté activado o no en el navegador. Hoy en día la mayor parte de los usuarios navegan con una configuración de seguridad estándar y con JavaScript activado, pero algunos usuarios pueden tener configuraciones de seguridad especiales (o incluso JavaScript desactivado). En el navegador 3 el propio navegador alerta que se está impidiendo la ejecución de un script (por su configuración de seguridad). En el navegador 4 posiblemente JavaScript esté desactivado (con lo cual JavaScript no se ejecuta y no podemos observar resultado alguno).

Nos gustaría que al incluir un código obtuviéramos siempre la misma respuesta, pero la realidad es que no siempre se obtiene la misma respuesta. El navegador que utilicemos (Firefox, Internet Explorer, Chrome, Safari, Opera, etc.) puede influir en los resultados que obtengamos. Y también puede influir la configuración de seguridad del navegador (que impida la ejecución de ciertas cosas para evitar que un virus, un hacker, o un programa indeseado pueda generarnos algún perjuicio).

También puede influir el sistema operativo (Windows, Macintosh, Linux…) e incluso qué tipo de dispositivo sea el que estemos usando: un computador “tradicional” (pc o portátil), un smartphone, una tablet, una consola de videojuegos, una smartv, etc.

En este curso vamos a centrarnos en aprender JavaScript básico, aplicable al 99 % de los usuarios, el 99 % de los navegadores y el 99 % de los dispositivos. No obstante, acostúmbrate a que siempre pueden existir pequeñas diferencias entre navegadores o a que en algún dispositivo concreto no se obtengan los resultados deseados. Para este curso consideramos que usaremos un computador “tradicional” (pc o portátil), con un navegador como Firefox, Internet Explorer, Chrome, Opera o Safari, y con la configuración de seguridad habitual (99 % de los usuarios).

No podemos (y no tiene sentido) estar considerando todas las posibles configuraciones de seguridad, todos los posibles dispositivos, todos los posibles navegadores, etc. para tratar de tener una página web que funcione correctamente en el 100 % de los dispositivos. Nos resignamos a que nuestra web funcione correctamente en el 99 %. Si tienes algún problema para visualizar los resultados y ejecutar el código con el que iremos trabajando a lo largo del curso te recomendamos que escribas una consulta en los foros de aprenderaprogramar.com (http://aprenderaprogramar.com/foros) para obtener ayuda.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

JavaScript y html de partida

Para ver cómo JavaScript nos sirve para dotar de procesos y efectos dinámicos a un documento HTML vamos a partir de un código HTML + CSS que representa la estructura y estilos básicos de una página web. En esta estructura la página web queda dividida en: cabecera con el título y mensaje breve, menú, texto con algunas imágenes, formulario de contacto y un pie de página con información sobre los autores o el copyright.

Crea un archivo HTML con un editor de texto como Notepad++ o similar con el siguiente contenido:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!—Código base para el curso de javascript desde cero de aprenderaprogramar.com --> <html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <meta name="description" content="Portal web aprenderaprogramar.com"> <meta name="keywords" content="aprender, programar, cursos, libros"> <link rel="stylesheet" type="text/css" href="estilosA.css"> </head> <!-- Contenido de la página web --> <body> <!-- Cabecera de la página web --> <div id="cabecera"> <h1>Portal web aprenderaprogramar.com</h1> <h2>Didáctica y divulgación de la programación</h2> </div> <!-- Fin de la cabecera de la página web --> <!-- Contenedor para la parte central --> <div id="central"> <!-- menu --> <div id="menu"> <div class="txtPresentaMenu">Menú</div> <hr/> <ul class="itemsMenu"> <li><a href="#">Inicio</a></li> <li> <a href="libros.html">Libros de programación</a> </li> <li> <a href="cursos.html">Cursos de programación</a> </li> <li> <a href="humor.html">Humor informático</a> </li> </ul> </div> <!-- fin menu --> <!-- cuerpo --> <div id="cuerpoCentral"> <!-- Texto con imágenes --> <div class="txtConImg"> <p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p> <p>Hay que tener claro que <a href="http://www.aprenderaprogramar.com">aprender programación</a> no es tarea de un día ni de una semana: aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo nuestros primeros programas.</p> <p>Puedes seguir uno de <a href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras alternativas como Crimson Editor.</p> <a href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-informaticas&Itemid=179"> <img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> </a> <img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo"> </div> <!-- Fin del texto con imágenes --> <!-- Formulario de contacto --> <form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html"> <div class="form-content"> <h2>Formulario de contacto</h2> <p>Si quieres contactar con nosotros envíanos este formulario relleno:</p> <label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" placeholder="Tu nombre..." /></label> <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" placeholder="Tus apellidos..."/></label> <label for="direccion"><span>Dirección:</span> <input id="direccion" type="text" name="direccion" placeholder="Tu dirección..."/></label> <label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" placeholder="Tu email..."/></label> <label for="mensaje"><span>Mensaje:</span> <textarea id="mensaje" name="mensaje" cols=30 rows=2 placeholder="Tu mensaje..."></textarea></label> <label> <input type="submit" value="Enviar"> <input type="reset" value="Cancelar"> </label> </div> </form> <!-- Fin del formulario de contacto --> </div> <!-- fin cuerpo --> </div> <!-- fin contenedor para la parte central --> <!-- Pie de página o footer --> <div id="pieDePagina"> <img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo apr" title="Logo aprenderaprogramar.com"> Copyright 2006-2038 aprenderaprogramar.com </div> <!-- Fin del pie de página o footer --> </body> <!-- Fin del contenido de la página web --> </html>

Crea un archivo CSS (cuyo nombre debe ser estilosA.css) con un editor de texto como Notepad++ o similar con el siguiente contenido:

/* CSS para curso JavaScript aprenderaprogramar.com*/ body {font-family: sans-serif; background-color: yellow; font-size: 14px;} h1 {color: blue;} a {text-decoration: none;} label {color: maroon; display:block; padding:5px;} .itemsMenu{ padding: 3px 0px; border-bottom: 1px solid #778; font: bold 16px Verdana, sans-serif; } .itemsMenu li { list-style: none; display: inline; margin-left:10px;} .itemsMenu li a { padding: 3px 1em; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } .itemsMenu li a:link { color: #448; } .itemsMenu li a:hover {color: #000; background: #AAE; border-color: #227; } .itemsMenu li a#actual { background: #AAE; }

El código anterior es HTML y CSS y lo usaremos a lo largo del curso para poner diferentes ejemplos, por lo que lo denominaremos "código base HTML del curso" o “código base CSS del curso”. Para seguir este curso debes ser capaz de comprender todo el código HTML y CSS que hemos usado, su significado y sintaxis. Si no comprendes el código anterior no continues avanzando, dirígete a la web aprenderaprogramar.com y en la sección cursos busca los cursos “Curso básico del programador web: HTML desde cero” y “Curso básico del programador web: CSS desde cero” y realízalos. Si no lo haces así no entenderás o no le sacarás todo el partido posible a este curso.

Visualiza el documento HTML en un navegador. Debes obtener un resultado similar a este (si te falla alguna imagen puedes cambiar las rutas y poner otra imagen que tú desees):

En este documento tenemos varios elementos como etiquetas de título h1 y h2, links, listas con elementos dentro de las listas, imágenes, formularios, botones, texto, etc. Todo ello nos va a servir para usar JavaScript y ver las posibilidades que nos ofrece JavaScript para crear efectos y procesos dinámicos en nuestras páginas web. En este curso nos vamos a centrar en tratar de aprender los aspectos más importantes de JavaScript y la lógica de JavaScript. El objetivo será saber hacer un buen diseño de código JavaScript, un buen uso de JavaScript y comprender lo que hacemos. Por el contrario, no vamos a tratar de aprender o conocer todas las propiedades, posibilidades o instrucciones de JavaScript ya que si logramos comprender cómo funciona y su lógica, nos bastará con realizar búsquedas en internet para encontrar aquella propiedad o sintaxis que podamos necesitar en un momento dado. “Aprende a pescar, no te conformes con que te den peces”.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Javascript y las aplicaciones web

JavaScript es un lenguaje de programación que permite crear efectos dinámicos y ágiles del lado del cliente. Una de las aplicaciones más ampliamente extendida de JavaScript está en dotar de dinamismo y efectos a las aplicaciones web, dentro de las que destacan los Gestores de Contenidos o CMS (Content Management Systems). Un CMS es software que se instala en el servidor y sirve para publicar contenidos en una página web.

El concepto de aplicación web (programa que se aloja en un servidor remoto o hosting y al que accedemos a través de internet) es muy amplio, de hecho con el paso de los años se ha hecho tan amplio como los programas de ordenador o las actividades que realiza el ser humano. Las aplicaciones web se han popularizado en los últimos años gracias a que buena parte de estas aplicaciones se comenzaron a distribuir y utilizar de forma gratuita, con una comunidad de usuarios y desarrolladores de software en torno a ellas.

Muchas de estas aplicaciones sirven para que personas que no tienen conocimientos de informática gestionen páginas web como tiendas de comercio electrónico, foros, portales de contenidos, periódicos digitales, etc.

Las aplicaciones web se podrían clasificar de varias maneras. De hecho es difícil realizar una clasificación debido a que los campos en que se utilizan las distintas aplicaciones muchas veces se solapan. Vamos a hacer una clasificación común, que es basándonos en el tipo de página web para el que son más habitualmente usados:

CLASIFICACIÓN	EJEMPLOS	DESCRIPCIÓN
Gestores de Contenidos	Joomla, Drupal, OpenCMS, Plone, WordPress, b2evolution, Geeklog, Serendipity, Textpattern, CMS Made Simple, concrete5, Contao, ImpressPages, liveSite, Nucleus, PyroCMS, TYPO3, Chamilo, Moodle, phpMyFAQ, e107, Mahara, Mambo, ocPortal, PHP-Fusion, PHP-Nuke, Tiki Wiki, Xoops, Zikula	Orientados a crear portales web de muy diferentes temáticas, desde un periódico digital hasta una tienda on-line o un blog, página personal, etc.
Foros y libros de visitas	phpBB, SMF, fluxBB, MyBB, Vanilla Forums, XMB Forums, GBook, Lazarus GuestBook,	Pensados para la creación de sistemas de foros donde los usuarios participan intercambiándose mensajes o para libros de visitas
Wikis	MediaWiki, DocuWiki, PmWiki, WikkaWiki, TikiWiki, PikiWiki	Pensados para mantener un sistema de información entre una comunidad de usuarios. Este sistema puede ser generalista como wikipedia o estar especializado en un área o campo de conocimiento concreto.
Tiendas y comercio electrónico	Magento, PrestaShop, CubeCart, OpenCart, osCommerce, TomatoCart, Zen Cart,	Pensadas para crear tiendas electrónicas y galerías de productos destinadas al comercio electrónico.
Utilidades varias	ExtCalendar, phpScheduleit, WebCalendar, phpFreeChat, phpMyChat, DadaMail, PHPList, SiteRecommender, OpenX, OSClass, QuickSell Classifieds, Help Center Live, Hesk, osTicket	Permiten crear calendarios, galerías de imágenes, Chats, Sistemas de envío de correo electrónico, sistemas de anuncios, sistemas de soporte a usuarios

 

MILLONES DE WEBS DISTINTAS

Vamos a centrarnos ahora en lo que permite mostrar una aplicación web a los usuarios. Por ejemplo, para un diario digital diremos que existe una parte denominada BackEnd donde escriben los articulistas y otra parte denominada FrontEnd que es la página web en sí del diario. Aplicaciones web que pueden servir para este propósito son Joomla, Drupal o WordPress.

Tanto en el backEnd de las aplicaciones como en el FrontEnd de estas, se utiliza JavaScript. En el backEnd no se trata tanto de crear efectos visuales atractivos, sino de dotar a la página de administración de agilidad y rapidez. En el FrontEnd el principal objetivo será crear efectos visuales atractivos y hacer que la página funcione de forma correcta y rápida.

Para conseguir webs útiles y rápidas estas herramientas incorporan código JavaScript avanzado mediante el que se realizan distintos procesos o se crean distintos efectos. La aplicación web suele contar con una parte para la gestión de contenidos mientras que otra parte denominada plantilla, template, theme, skin, etc. se encarga de controlar el aspecto.

El template o theme actúa como una piel sobre los contenidos y su principal herramienta es CSS, pero también suele estar controlado por un lenguaje de programación del lado del servidor como PHP y en algunos aspectos por un lenguaje del lado del cliente como JavaScript, además de tener “un esqueleto” de HTML.

Fíjate en estas imágenes, que corresponden a themes o plantillas del gestor de contenidos Drupal.

            

Fíjate en las imágenes, en los menús, en los iconos. Vamos a comentar distintos efectos que se pueden conseguir con JavaScript:

a) Es frecuente que una imagen principal en la cabecera de una página web vaya rotando o alternándose con otras imágenes (a veces con un texto superpuesto). Para hacer esto el usuario no tiene que recargar la página, es un proceso que se puede ejecutar del lado del cliente usando JavaScript.

b) Es frecuente que al pulsar en un menú se vea un efecto de despliegue o desenrollado, a veces con cambios de color, velocidad, despliegue de submenús, etc. Para hacer esto el usuario no tiene que recargar la página, es un proceso que se puede ejecutar del lado del cliente usando JavaScript.

c) Muchas veces hay iconos que permiten activar o desactivar sonidos, cambiar los colores que intervienen en la página web, ser arrastrados y colocados en distintos lugares, etc. Para hacer esto el usuario no tiene que recargar la página, es un proceso que se puede ejecutar del lado del cliente usando JavaScript.

Vemos cómo usando JavaScript se pueden conseguir muy distintos efectos y procesos. Esto ha permitido el éxito de gestores de contenidos como Joomla, Drupal o WordPress, con los que se puede crear desde una página dedicada al comercio electrónico hasta una web de un restaurante o un periódico digital. Gracias a JavaScript estas páginas pueden tener muchos contenidos y ser rápidas a la hora de realizar procesos, desplegar menús, rotar imágenes, etc.

JavaScript interviene en la programación de distintos complementos para las aplicaciones web.

Existen muchos estudios de diseño y programación donde se trabaja en la creación de templates o themes prediseñados. Hay muchos de distribución gratuita, pero la mayoría de los templates o themes de calidad son de pago (cosa lógica, ya que tienen un gran trabajo detrás). Prácticamente todos estos templates usan, entre otros lenguajes, JavaScript.

La mayoría de las aplicaciones web tienen disponibles extensiones (que reciben distintos nombres como módulos, componentes, etc.) que permiten incorporar nuevas funcionalidades. Por ejemplo si queremos incorporar una calculadora a nuestra aplicación web Joomla, Drupal o WordPress posiblemente ya exista un módulo de descarga gratuita o de pago que permita incorporar la calculadora sin tener que programarla partiendo de cero. Estas extensiones usan, entre otros lenguajes, JavaScript.

Hemos querido con esta aproximación al uso de JavaScript en aplicaciones web remarcar la importancia que ha adquirido esta técnica en los desarrollos web. No vamos a entrar de momento en cuestiones relacionadas con aplicaciones web o gestores de contenidos, sino a centrarnos en cuestiones básicas de JavaScript. La realidad en torno a las aplicaciones web es bastante compleja, ya que actualmente se tiende a trabajar con muchos lenguajes, frameworks y herramientas de carácter avanzado. Esto ya supone el uso de herramientas muy específicas, y también suele suponer la participación de distintos especialistas (diseñadores, maquetadores, expertos en CSS, programadores expertos en bases de datos, expertos en programación del lado del servidor, expertos en programación del lado del cliente, etc.) para la creación de las aplicaciones web.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Javascript como marco de la integración web

Ya hemos comentado que JavaScript se integra dentro de los desarrollos web con otros lenguajes como HTML, CSS y generalmente con un lenguaje del lado del servidor como PHP, JSP ó ASP u otros. Hemos dicho también que su uso principal es ejecutarse del lado del cliente (computador del usuario).

En esta entrega del curso vamos a ver cómo se integra JavaScript dentro de los desarrollos web en general y cómo existen posibilidades para usar JavaScript no sólo del lado del cliente.

Si hiciéramos un símil entre una orquesta y un desarrollo web, el director de orquesta sería el lenguaje del lado del cliente (por ejemplo PHP), que actúa como “cerebro” controlador de la página web. CSS sería el encargado de vestuario y maquillaje, es decir, quien controla la apariencia de lo que se presenta al público. HTML sería la estructura: el encargado de cómo se distribuyen las sillas en el escenario, dónde se coloca cada músico y qué instrumento lleva cada músico. Supongamos que para distintas canciones (urls) los músicos cambian de posición (cambia la estructura HTML). JavaScript sería el encargado de efectos especiales, por ejemplo quien mueve las luces y dispara un cañón de confetis en un momento dado, una persona ágil y rápida. Por último tenemos a la base de datos, un encargado de guardar todas las partituras (información) y de ir entregándolas a medida que se lo requieren los músicos u otros encargados.

Esto es sólo un símil, pero nos sirve de introducción para contextualizar el papel habitual de JavaScript dentro de los desarrollos web.

Una orquesta puede tocar sin director (sin lenguaje del lado del servidor), sin encargado de efectos especiales (JavaScript), sin encargado de vestuario y presentación (CSS), pero no sin músicos (HTML). De todas formas, una buena orquesta normalmente tendrá todo el personal (recursos de programación) necesarios para que su puesta en escena sea “brillante”.

Un lenguaje de programación es un lenguaje que se usa para realizar procesos de interés a través de un ordenador o dispositivo electrónico, desde un cálculo para un estudiante o ingeniero, a una compra por internet, pasando por cualquier cosa que se te ocurra. Un lenguaje de programación tiene como características básicas el tener la capacidad para “tomar decisiones” o ejecutar un proceso u otro en función de las circunstancias (por ejemplo dependiendo del botón que pulse el usuario), así como el ser capaz de repetir procesos numerosas veces hasta que se cumpla una condición. JavaScript es un lenguaje que permite cumplir estas funciones, por tanto es un lenguaje de programación, aunque se use junto a otros lenguajes de programación y lenguajes de etiquetas como HTML y CSS. 

JavaScript es un lenguaje que apareció para hacer más fáciles de programar y más fáciles para navegar los desarrollos web. Un desarrollo web comprende múltiples áreas de conocimiento:

 

En la clasificación que hemos hecho, JavaScript estaría englobado dentro del área de programación.

Los desarrollos web tienen dimensiones muy variables. Podemos hablar desde una pequeña página web para una empresa local hasta un gran portal para una empresa de ámbito internacional. En ambos casos podríamos decir que interviene la programación web y el diseño web. Sin embargo, un pequeño desarrollo puede ser llevado a cabo por una sola persona que abarque tanto programación como diseño, mientras que un gran desarrollo requiere de un equipo de trabajo más o menos amplio y con distintos especialistas, ya que en torno a los desarrollos web hay diferentes áreas de conocimiento implicadas (análisis, diseño, programación, sistemas, integración, testing, etc.).

En un gran desarrollo existen personas especializadas en las distintas áreas, de modo que el programador no suele trabajar en el diseño (excepto para hacer algún retoque o cambio, o para solucionar problemas). No obstante, sí resulta conveniente que un programador web tenga los conocimientos suficientes de HTML y CSS ya que le resultarán útiles y necesarios, por un lado para la solución de problemas y por otro para integrar cuestiones donde el diseño y la programación se entremezclan. Por ejemplo, podremos hacer modificaciones rápidas del aspecto de una página web, cambiar un color de fondo o imagen, etc. cuando el usuario pulse un botón, mezclando JavaScript con CSS.

Si miramos a los lenguajes o tecnologías que hay en torno a los desarrollos web podríamos hacer una clasificación que comprende: HTML, CSS, Bases de datos, Servidores, Lenguajes de programación del lado del cliente (p.ej. JavaScript) y Lenguajes de programación del lado del servidor (p.ej. PHP). Aquí nos estamos refiriendo a paradigmas o situaciones más frecuentes. Como comentaremos más adelante, JavaScript también se está usando en algunos casos como lenguaje de programación del lado del servidor.

 

 

 

JavaScript es una tecnología (o lenguaje) aceptada por todos los navegadores y que interviene en prácticamente todo desarrollo web, grande o pequeño. Se encarga de dotar de respuesta rápida y efectos controlados directamente desde el computador del usuario a las páginas web.

Los lenguajes de programación del lado del servidor realizan procesos en el servidor (computador remoto que se encarga de enviar las páginas web a través de internet): podemos citar entre estos lenguajes Java (JSP), ASP.NET, o PHP  entre los principales.

Los lenguajes de programación del lado del cliente realizan procesos en el ordenador personal del usuario (efectos visuales, cálculos, etc.): podemos citar entre estos lenguajes JavaScript, Java (applets), VBScript ó Dart (impulsado por Google), entre los principales. JavaScript es el lenguaje de programación del lado del cliente más utilizado hoy día en los desarrollos web y es aceptado por todos los navegadores.

En cuanto a bases de datos podemos nombrar MySQL, SQLServer y Oracle, entre las principales.

Las tecnologías se combinan entre ellas de muy diversas maneras. Podemos citar algunas combinaciones bastante habituales entre lenguajes de programación y bases de datos: Java + Oracle, ASP.NET + SQLServer, PHP + MySQL. Sea cual sea la combinación utilizada, en un desarrollo web moderno siempre intervendrá HTML, CSS y JavaScript.

En resumen, JavaScript es un lenguaje de programación del lado del cliente cuyos aspectos básicos deben ser conocidos por los programadores web. En la práctica, muchas veces se entremezcla el código de programación del lado del servidor o del lado del cliente con el código HTML y código CSS, de ahí que coloquialmente se hable de “programación web” para referirse a todo este conjunto, aunque formalmente ni HTML ni CSS son lenguajes de programación.

Fíjate que estamos tratando de dejar claro qué es y para qué sirve JavaScript antes de empezar a estudiar este lenguaje porque si tenemos los conceptos claros nos será mucho más sencillo el aprendizaje, ahorraremos tiempo y cometeremos menos errores.

JAVASCRIPT DEL LADO DEL SERVIDOR

Hemos comentado que JavaScript es un lenguaje que aparece en prácticamente todo desarrollo web como lenguaje del lado del cliente. No obstante, hace ya varios años que ha empezado a tener uso en algunos desarrollos web como lenguaje del lado del servidor para permitir desarrollos web completos.

El desarrollo en JavaScript del lado del servidor se hace instalando en el servidor herramientas que permiten el uso de JavaScript del lado del servidor como:

· Node.js: es quizás la herramienta más utilizada dentro de los desarrollos que usan JavaScript del lado del servidor. Node.js es un entorno de programación que incluye numerosas librerías preparadas para ser usadas por parte de los programadores.

· Jaxer

· RingoJS

· EJScript

· AppengineJS

El desarrollo con JavaScript del lado del servidor permite crear desarrollos web completos, pero es una práctica que todavía no está generalizada y en cierta medida se sigue considerando no habitual, o al menos no recomendable para quienes no conozcan JavaScript básico.

Nosotros en este curso no estudiaremos ninguna aplicación de JavaScript del lado del servidor: nos limitaremos a estudiar los fundamentos del JavaScript “tradicional”, JavaScript del lado del cliente. Entendemos que JavaScript del lado del servidor debe ser materia de estudio en cursos más avanzados, cuando ya se tengan unas bases sólidas de JavaScript del lado del cliente y de otras tecnologías relacionadas con los desarrollos web.

 

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información