domingo, 12 de enero de 2014

Conexión a la base de datos 

La conexión a la base de datos en todos los talleres realizados en clases, fueron a través de esta función, dentro del lenguaje php :

<?php
$usuario = 'maestro'; //nombre del usuario de la base de datos
$passwd = '123'; // clave de acceso a la base de datos del usuario
try {
    $conn = new PDO('mysql:host=localhost;dbname=prueba;charset=utf8', $usuario, $passwd); // se crea un nuevo objeto con los datos:/host/nombre base de datos,usuario, clave,
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) { // si no se logo conectar se imprime el error ocurrido
    echo "¡Error!: " . $e->getMessage() . "<br/>";
    die();

}
?>



Se necesita tener la el nombre de la base de datos, la codificación el usuario y la clave de la base de datos a la cual se requiere ingresar.
Las conexiones se establecen creando instancias de la clase base PDO. No importa el controlador que se utilice; siempre se usará el nombre de la clase PDO. El constructor acepta parámetros para especificar el origen de datos (conocido como DSN) y, opcionalmente, el nombre de usuario y la contraseña (si la hubiera).
Si hubieran errores de conexión, se lanzará un objeto PDOException. Se puede capturar la excepción si fuera necesario manejar la condición del error, o se podría optar por dejarla en manos de un gestor de excepciones global de una aplicación configurado mediante set_exception_handler().
Una vez realizada con éxito una conexión a la base de datos, será devuelta una instancia de la clase PDO al script. La conexión permanecerá activa durante el tiempo de vida del objeto PDO. Para cerrar la conexión, es necesario destruir el objeto asegurándose de que todas las referencias a él existentes sean eliminadas (esto se puede hacer asignando NULL a la variable que contiene el objeto). Si no se realiza, PHP cerrará automáticamente la conexión cuando el script finalice.


TAG HTML


Es necesario saber los Tag que deben incluir cualquier documento HTML. Hay algunos Tag que se deben ocupar siempre en todo documento y otros no, dependiendo si se necesitan.


  • MARCAS BÁSICAS

<html></html> Al principio y al final de todo documento.
<head> </head> Cabecera del documento. Dentro del head se ponen las
etiquetas:
<title> </title> indica el título de la página para el navegador.
<meta> permite aportar metainformación al documento, para su mejor
identificación e indexación por los motores de búsqueda. Hay distintos tipos:
<meta name="description" content="Frase descriptiva de los contenidos de la
página">
<meta name="keywords" content="Palabras clave que resuman la temática de
los contenidos de la página”>
<meta name="author" content="Nombre/s del autor/es de la página">
Tras cerrar el head el se pone la etiqueta:
<body> </body> Dentro de esta etiqueta se insertan los contenidos del documento

El cierre de la etiqueta </body> se coloca justo antes del cierre </html>


  • PROPIEDADES DE LA PÁGINA

La etiqueta <body> puede llevar incluida información sobre las propiedades de la
página:
<body bgcolor="#xxyyzz"> define el color de fondo de la página.
<body text="#xxyyzz"> define el color por defecto del texto en la página.
<body link="#xxyyzz"> define el color de los enlaces.
<body vlink="#xxyyzz"> define el color de los enlaces visitados.
<body alink="#xxyyzz"> define el color de los enlaces activos.
<body background="imagen.gif"> establece una imagen para el fondo de la
página.
Todos estos parámetros se pueden agrupar en una única etiqueta <body>:
<body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz"
alink="#xxyyzz">
<!-- comentarios --> Sirve para anotar aclaraciones 'privadas' del autor de la
página. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y

no se muestra en la página.


  • FORMATO DE TEXTOS

<b> </b> negrita (también sirve la etiqueta <strong>… </strong>)
<i> </i> cursiva (también sirve la etiqueta <em>…</em>)
<u> </u> subrayado
<font size=”X”> …… </font> marca el tamaño de los caracteres, donde X es un
valor del 1 a 7, o un valor relativo (+ 1-7).
<font color=”#XXYYZZ”> …… </font> define el color del texto, donde XXYYZZ es
un valor formado por letras y números que indica el color.
<font face=”arial”> …… </font> determina el tipo de la fuente.
La etiqueta <font> puede incluir los tres parámetros (tamaño, fuente y color):

<font size=X color=#XXYYZZ face=fuente escogida> …… </font>


  • CREACIÓN DE LISTAS

Lista no numerada:
<ul> 
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
<li>tercer elemento de la lista</li>
</ul> cierra lista
lista numerada:
<ol>
<li>primer elemento de la lista</li>
<li>segundo elemento de la lista</li>
</ol> cierra lista.
lista de glosario o definición:
<dl>
<dt>término que se va a definir</dt>
<dd>definición del término</dd>

</dl> cierra lista.


  • IMÁGENES

<img src="dirección de la imagen” "> indica la ruta de la imagen.
<img ... border=”X"> establece un borde de X pixels en torno a la imagen.
<img ... height="XX" width="YY"> establece un tamaño de la imagen (altura y
anchura) en pixels.
<img ... alt="texto explicativo"> se muestra un texto al pasar el cursorsobre la
imagen.
<img ... align="bottom"> alineación inferior del texto respecto de la imagen.
<img ... align="middle"> alineación del texto en el medio de la imagen.
<img ... align="top"> alineación superior del texto respecto de la imagen.
<img ... align="left"> alineación izquierda de la imagen en el párrafo.
<img ... align="right"> alineación derecha de la imagen en el párrafo.
<img ... hspace=X> espacio horizontal entre la imagen y el texto.
<img ... vspace=y> espacio vertical entre la imagen y el texto.



  • TABLAS: útiles para componer la página y para presentar datos tabulares.

<table>……</table> Define dónde comienza y termina la tabla
<table width="XX%"> Determina la anchura de la tabla. Puede darse en píxeles
(no lleva el símbolo %), o en porcentaje de la página.
<table height="XX> Determina la altura de la tabla en píxeles.
<table border="X"> Establece el grosor en píxeles del borde de la tabla
<table cellspacing="X"> Define el espacio en píxeles entre las celdas
<table cellpadding="X"> Define el espacio en píxeles entre el borde y el texto
<tr>……<tr> determina cada una de las filas de la tabla

<td>……</td> determina cada una de las columnas dentro de las filas


Entre otros tag que dependiendo de lo que se necesiten se ocuparan.

fuentes: Documento pdf: tagshtml.pdf



JavaScript


JavaScript es un lenguaje de programación interpretado. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). 
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Javay JavaScript no están relacionados y tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. 

Entonces podemos decir que JavaScript sirve principalmente para mejorar la gestión de la interfaz cliente/servidor. Un scriptJavaScript insertado en un documento HTML permite reconocer y tratar localmente, es decir, en el cliente, los eventos generados por el usuario. Estos eventos pueden ser el recorrido del propio documento HTML o la gestión de un formulario.

Ejemplo: 
Cuando la página HTML es un formulario que permite acceder a un directorio telefónico, se puede insertar un script que verifique la validez de los parámetros proporcionados por el usuario. Esta prueba se efectúa localmente y no necesita un acceso a la red.
Por otro lado, también se podrá utilizar JavaScript para efectuar varias operaciones a la vez; por ejemplo, acompañar el acceso a un documento HTML de la visualización de un vídeo o la ejecución de un applet de Java etc.

Todo código en JavaScript debe estar contenido dentro de los tag <script</script>
para que pueda ser interpretado.


En siguiente código es una función creada como prueba para el proyecto realizado en el ramo.
Se ocupa AJAX ademas. 
Ejemplo función :
function envio(){
      
      var hr=new XMLHttpRequest(); // se crea una variable para el uso de ajax
      var url="pregunta.php"; //nombre del archivo al cual sera enviado el ajax
      var nom=document.getElementById("x0").value;//obtiene el valor del campo x0
      var edad=document.getElementById("x1").value;//obtiene el valor del campo x0
      
      var vars="nom="+nom+"&edad="+edad; // se concatenan los parámetros a enviar
      hr.open("POST",url,true);//se determina el método de envió, ademas de la url
      hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

      hr.onreadystatechange=function(){
        if(hr.readyState==4 && hr.status==200){
        document.getElementById("bd").innerHTML=hr.responseText;
        //si se creado con éxito la variable hr y se ha tenido una respuesta de parte de php, se determina en donde se incrustara lo recibido de php.
                 }
      }
      hr.send(vars); // se envía la petición.
      

    }
lo que realiza la función es enviar 2 parámetros al archivo pregunta.php; estos parámetros son capturados con el nombre del elemento "var nom = document.getElementById("x0") .value;"; En este caso los parámetros son capturados de dos input.text. En el archivo .php se procesan estos datos, y con estos mismos se hace una consulta a la base de datos ocupada, el cual retorna la información que se le solicita. Esta información se presenta en un formato html, y se devuelve al div "bd" el cual se determino en la función envio();


Fuentes: http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=590:ique-es-y-para-que-sirve-javascript-embeber-javascript-en-html-ejercicio-ejemplo-basico-cu00731b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

http://www.4rsoluciones.com/para-que-se-utiliza-javascript/

CSS3


Las hojas de estilo en cascada (CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación de una pagina web, es decir el aspecto y el formato de un documento escrito en lenguaje de marcas. 
Su aplicación más común es dar estilo a páginas WEB escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML.




La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".

Para dar formato a un documento HTML, puede emplearse CSS mediante CSS introducido por el autor del HTML:




  • Un estilo en línea (online) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. 
  • Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por la etiqueta <style>. De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.
  • Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.

En el proyecto final que estamos realizando, se ocupa CSS3 para darle el formato a la pagina ya sea en bordes, la posición de los elementos, fondo, transparencia, en general para la todo lo que tenga que ver con la presentación del sitio. 







AJAX




AJAX es una técnica de desarrollo web para crear aplicaciones interactivas, es decir,  es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones o paginas web. Estas aplicaciones incrustadas en las paginas web, se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. 
Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales.
En un taller de clases, se ocupo esta técnica, en la cual se presentaron 3 formas de realización. La primera mediante la carga de un contenido desde un archivo txt, el cual tenia una estructura de un párrafo; la segunda   mediante la carga de un contenido con estructura xml; y la tercera mediante la consulta a la base de datos que se estaba ocupando en aquel taller, en la cual se cargaba un archivo PHP, el cual hacia de intermediario entre la forma ocupada por ajax y la base de datos, esta forma devolvía un archivo PHP con una estructura html, el cual era una tabla y esta se incrustaba en algún div designado. 

Navegadores que permiten AJAX
  • Navegadores basados en Gecko como Mozilla, Mozilla Firefox, SeaMonkey, Camino, K-Meleon, IceWeasel, Flock, Epiphany, Galeon y Netscape versión 7.1 y superiores
  • Navegadores basados en WebKit como Google Chrome de Google o Safari de Apple.
  • Microsoft Internet Explorer para Windows versión 5.0 y superiores, y los navegadores basados en él
  • Navegadores con el API KHTML versión 3.2 y superiores implementado, incluyendo Konqueror versión 3.2 y superiores y el Web Browser for S60 de Nokia tercera generación y posteriores
  • Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y superiores.





jQuery


jQuery fue creada inicialmente por John Resig.
Es una biblioteca de JavaScript, que permite simplificar la manera de interactuar con los documentos HTML, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.  jQuery es la biblioteca de JavaScript más utilizada. Esta biblioteca es software libre y de código abierto, permitiendo su uso en proyectos libres y privativos. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

En el proyecto que estamos desarrollando en el curso, se ocupa esta biblioteca, para dar algunos efectos visuales, como por ejemplo listas despegables, foto-slide, entre otros. Ademas ocupamos jQuery junto a ajax, para traspasar datos a php, ya que debemos tratar con imágenes (tipos FILE). 


En los siguientes 2 enlaces podrán ver algunos efectos visuales que se pueden crear utilizando las funciones de la librería de jQuery.

Adobe Dreamweaver



Dreamweaver es la herramienta que utilice para la realización de todos los talleres hechos en clases. Esta herramienta que está destinada a la construcción, diseño y edición de sitios, videos y aplicaciones Web. Pude apreciar que la herramienta tiene 3 vistas principales:
* vista del 
código

* vista del código/diseño (pantalla dividida)
* vista del diseño

Dreamweaver fue creado inicialmente por Macromedia y actualmente esta siendo producido por la compañia Adobe Systems.  Es el programa más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium.
Dreamweaver puede instalado y en consecuencia ejecutado en las plataformas de windows y mac de manera idéntica. 
La herramienta soporta lenguajes como CSS y XHTML ademas es compatible con varios lenguajes antiguos: HTML 2.0, HTML 3.2, las versiones antiguas de JavaScript y mucho más. Proporciona un mejor soporte para PHP. También permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASPASP.NETColdFusionJSP(JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.

A pesar de que la herramienta soporte a PHP, no cuenta con un servidor para poder ejecutar este tipo de archivos, pero se podría hacer esto, integrando a Dreamweaver un servidor previamente instalado en la computadora.

http://www.slideshare.net/teresaaAlvarez/dreamweaver-7985603
http://hidalgo26.angelfire.com/wever.html