Tecnologia WEB I.pptx
76
HTML
-
Upload
deiner-restrepo-duran -
Category
Documents
-
view
28 -
download
0
Transcript of Tecnologia WEB I.pptx
HTML
Estructura General• La estructura general de un documento HTML es la siguiente:• <HTML>
<HEAD>...............elementos de encabezado del archivo.........<TITLE> título de la página </TITLE></HEAD><BODY>................ texto... y otros elementos...........................</BODY></HTML>
• Observe que el documento abre con la etiqueta <HTML> y cierra con la etiqueta </HTML>. Igual pasa con las otras marcas presentes en el documento. Algunas marcas no necesitan una etiqueta de cierre.
• En la marca que abre, se pueden incluir atributos de marca. Por ejemplo las marcas <p> ...</p> indican el inicio y el fin de un párrafo. Un atributo para un párrafo es la manera de alinearlo, por ejemplo a la izquierda; podemos incluir este atributo en la etiqueta que abre, <p align="left"> ... </p>
Estructura HTML
Representación en forma de árbol de la página HTML de ejemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Este es el título de la pagina</title> </head> <body> Entre estas etiquetas va el cuerpo de nuestra pagina. </body> </html>
Estructura
En la imagen vemos un ejemplo de cómo cambiaría un documento escrito en HTML normal a HTML5 con estos elementos
Javascript
¿Qué es JavaScript?• JavaScript es un lenguaje de programación que se utiliza
principalmente para crear páginas web dinámicas.
• Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
• Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
Código<html><head><script type="text/javascript">function displayDate(){document.getElementById("demo").innerHTML=Date();}</script></head><body>
<h1>My First Web Page</h1><p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body></html>• Probar codigo
Ejercicios
• Revisar y estudiar los ejercicios plateados aqui!
CSS
¿Qué es CSS?• Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple
que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura.
¿Para qué sirve?• CSS se utiliza para dar estilo a documentos HTML y XML, separando el
contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.
Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
¿Como funciona CSS?• La sintaxis básica de CSSDigamos que queremos un bonito color rojo como fondo de nuestra página web:Usando HTML podríamos haberlo conseguido así:
<body bgcolor="#FF0000">
Con CSS el mismo resultado puede lograrse así:
body {background-color: #FF0000;}
¿Como se aplica?• Podemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos métodos
se explican a continuación. Te recomendamos que te centres en el tercero, es decir, el externo.
<html> <head> <title>Ejemplo</title> </head> <body style="background-color: #FF0000;"> <p>Esta es una página con fondo rojo</p> </body> </html>
Método 1: En línea (el atributo style)
<html> <head> <title>Ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta es una página con fondo rojo</p> </body> </html>
Método 2: Interno (la etiqueta style)
¿Como se aplica?• El método recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo
de este tutorial usaremos este método en todos nuestros ejemplos.• Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como
cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.
<link rel="stylesheet" type="text/css" href="style/style.css" />
Método 3: Externo (enlace a una hoja de estilo)
<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...
• El truco consiste en crear un vínculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:
• La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta <head> y </head>. De esta manera:
Algunas Etiquetas• 1. COLOR DE TEXTO: color: red;• 2. COLOR DE FONDO: background-color: black;• 3. REPETIR IMAGEN DE FONDO EN FORMA HORIZONTAL: background: url("/images/back.jpg") repeat-x;• 4. REPETIR IMAGEN DE FONDO EN FORMA VERTICAL: background: url("/images/back.jpg") repeat-Y;• 5. NEGRITA font-weight: bold;• 6. CURSIVA font-style: italic;• 7. SUBRAYADO: text-decoration: underline;• 8. PARRAFO EN MAYUSCULAS: text-transform: uppercase;• 9. LETRA CAPITAL O TEXTO TIPO TITULO: 1.text-transform: capitalize;• 10. ELIMINAR SUBRAYADO DE UN ENLACE: a { text-decoration: none; }• 11. @fontface{ familia-fuente; url(url); } Especifca una fuente para ser utilizada dentro del documento. Permite usar una fuente que no se encuentra
localmente.• 12. @import{ url( url ) } Permite importar una hoja de estilo.• 13. { background: trasparent | color || url || repeat || scroll || posición } Especifica el gráfico y/o color, posición y forma de pintado del gráfico que
se ubica detrás del texto y otros elementos del documento.• 14. { background-attachment: scroll | fixed } Define si la imagen de fondo quedará fija mientras se desplaza el contenido del documento o si se
repetirá a todo su largo y ancho.• 15. { background-color: color | transparent } Indica al navegador el color del documento o de un elemento.• 16. { background-image: url | none } Especifica el URL de la imagen de fondo del documento o de un elemento.• 17. { background-position: [ posición ] | largo | {1,2} | [ top | center | bottom ] || [ left | center | right ]}• Indica al navegador la posición inicial de la imagen de fondo dentro del documento.• 18. { background-repeat: repeat | repeat-x | repeat-y | no-repeat } Define si la imagen de fondo se repite y de que manera.• 19. { background-color: color | transparent } Especifica el color de fondo de un elemento.• 20. { border: largo || estilo || color } Especifica uno o varios atributos del tipo de borde que va a ser dibujado alrededor de un elemento o entre
marcos.
Ejemplos
• Revisar y poner en practica los ejemplos planteados aqui!
Servidores
Servidores
Que es un servidor?
• Un servidor es un ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras.
• Los Servidores almacenan información en forma de páginas web y a través del protocolo HTTP lo entregan a petición de los clientes (navegadores web) en formato HTML.
• En redes locales se entiende como el software que configura un PC como servidor para facilitar el acceso a la red y sus recursos.
Tipos de servidores
• Servidores de Aplicaciones (Application Servers)• Servidores de Audio/Video (Audio/Video Servers)• Servidores de Chat (Chat Servers)• Servidores de Fax (Fax Servers)• Servidores FTP (FTP Servers)• Servidores Groupware (Groupware Servers)• Servidores de Correo (Mail Servers)• Servidores de Noticias (News Servers)• Servidores Proxy (Proxy Servers).• Servidores Web (Web Servers)
Aplicación WEB
• En la ingeniería de software se denomina aplicación web a aquellas aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador. En otras palabras, es una aplicación software que se codifica en un lenguaje soportado por los navegadores web en la que se confía la ejecución al navegador.
Ejemplos CRM
Rich Internet Applications
• Las Rich Internet Applications, o RIA (en español "aplicaciones de Internet enriquecidas"), son aplicaciones web que tienen la mayoría de las características de las aplicaciones de escritorio tradicionales. Estas aplicaciones utilizan un navegador web estandarizado para ejecutarse y por medio de complementos o mediante una máquina virtual se agregan las características adicionales. Ejemplos de RIA
Flickr
Software como Servicio• El software como servicio (en inglés
Software as a Service, SaaS) se encuentra en la capa más alta y caracteriza una aplicación completa ofrecida como un servicio, en-demanda, vía multitenencia —que significa una sola instancia del software que corre en la infraestructura del proveedor y sirve a múltiples organizaciones de clientes. El ejemplo de SaaS conocido más ampliamente es Salesforce.com, pero ahora ya hay muchos más, incluyendo las Google Apps que ofrecen servicios básicos de negocio como el e-mail.
Ejemplos de SaaSSalesforce CRM Customer Service & Support
Servicios WEB
• La computación en la nube concepto conocido también bajo los términos informática en la nube, nube de cómputo o nube de conceptos, del inglés Cloud computing, es un paradigma que permite ofrecer servicios de computación a través de Internet.
Ejemplos de NubeSalesforce.com
Servidor de Base de Datos• SGBD libres• PostgreSQL (http://www.postgresql.org
Postgresql) Licencia BSD• Firebird basada en la versión 6 de
InterBase, Initial Developer's PUBLIC LICENSE Version 1.0.
• SQLite (http://www.sqlite.org SQLite) Licencia Dominio Público
• DB2 Express-C (http://www.ibm.com/software/data/db2/express/)
• Apache Derby (http://db.apache.org/derby/)
• MariaDB (http://mariadb.org/)• MySQL (http://dev.mysql.com/)
• SGBD no libres• MySQL: Licencia Dual, depende del uso. No se sabe hasta
cuándo permanecerá así, ya que ha sido comprada por Oracle. Sin embargo, existen 2 versiones: una gratuita que sería equivalente a la edición "express" SQL server de Microsoft Windows, y otra más completa de pago.
• Advantage Database• dBase• FileMaker• Fox Pro• gsBase• IBM DB2: Universal Database (DB2 UDB)• IBM Informix• Interbase de CodeGear, filial de Borland• MAGIC• Microsoft Access• Microsoft SQL Server• NexusDB• Open Access• Oracle• Paradox• PervasiveSQL• Progress (DBMS)
Conectividad entre Servidor y Base de Datos
• Para poder conectar la aplicación web a la base de datos, (en MySQL ) se debe usar una funcion llamada mysql_connect(), a esta funcion se le deben entregar tres parametros.
Ej.$link = mysql_connect(“localhost”,”usuario”,”password”);• Descripción del Ejemplo.- $link = variable que almacenara el resultado que retorne la función.- localhost = nombre del servidor en donde se encuentra nuesta base de datos.- usuario = usuario, previamente registrado en el servidor.- password = password para el usuario registrado en el servidor.• Una ves efectuada la conexion, debe especificar la base de datos a utilizar. Para este fin se utiliza la
funcion mysql_select_db().Ej.$base = “Articulos”;$bd = mysql_select_db($link,$base);• Descripción del Ejemplo:$bd = almacena el valor retornado por la función.$base = almacena el nombre de la base de datos a accesar.Es recomendable crear estas funciones en un solo archivo, y luego llamarlas desde la página php que va a tener acceso a los datos.
Ejemplo/******************* conex.php *****************/<?function conex(){$link = mysql_connect(“localhost”,”user”,”12345″);if (!$link){ echo “se encontro un error al conectar tratar de conectar al servidor!”; echo mysql_error(); exit(); } return $link}function database($base){$bse = mysql_select_db($link,$base);return $bse;}?>/********************conex.php ****************//**************otra.php ***********************/include(“conex.php”);$con = conex();$name=‘ventas;’$bd = database($name);tratamiento de datos……/*************fin de otra.php *****************/
PHP & ASP
Comparación
Comparación
Estructura de un programa
• [directivas del pre-procesador: includes y defines]
• [declaración de variables globales] • [prototipos de funciones] • [declaraciones de clases] • función main • [definiciones de funciones] • [definiciones de clases]
Estructuras
• Variables, Manejo de Constantes.• Estructuras de Control.• Estructuras repetitivas.• Manejo de funciones.• Manejo de Archivos
AJAX
Que es y Como funciona?• AJAX por sus siglas en ingles significa
Asynchronous JavaScript And XML (JavaScript asíncrono y XML) y la importancia de ésta técnica está en que al utilizarla, ésta se ejecuta en el lado del cliente – es decir el navegador Web-, pero por debajo mantiene una comunicación asíncrona con el servidor.
• Con ésta asincronía utilizando XML, cuando se desee hacer algún cambio en el desarrollo Web, no será necesario que la página se recargue nuevamente; lo que en últimas se traduce en aplicaciones mucho más interactivas, rápidas y veloces y eficientes.
• A continuación una gráfica que ilustrará mejor el modelos de aplicación Web básico, comparado con el modelo de “moda” AJAX.
Que es y Como funciona?
• Con AJAX la interacción que tiene el usuario con alguna aplicación se mejora porque no tendrá que saltar de página en página para hacer alguna tarea específica, así como también se mejora que el usuario no se detenga cuando cierta aplicación necesite algo del servidor.
• AJAX se basa en el modelo de aplicación Web asíncrona y se ilustrará mejor con un gráfico:
Que es y Como funciona?
• En la Gráfica Anterior, el motor AJAX permite que la interacción del usuario con la aplicación suceda asincrónicamente (independientemente de la comunicación con el servidor). Así el usuario nunca estará mirando una ventana en blanco del navegador y un icono de reloj de arena esperando a que el servidor haga algo.
• Ésta técnica se hizo popular, gracias a que Google la implementara en su aplicación Web, Google Suggest, pero ésta no se limita ahí, pues la compañía de Sergey Brin y Larry Page ha venido implementando últimamente AJAX en otras aplicaciones Web como Orkut, Gmail, la última versión de Google Groups, y Google Maps.
Que es y Como funciona?• AJAX se basa en la combinación de 4 tecnologías existentes, entre las que
están:• - JavaScript: es un lenguaje interpretado, es decir, que no requiere compilación,
utilizado principalmente en páginas Web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C
• - XML: es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificación y adaptación del SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades.
• - HTML: Es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas Web.
• - CSS: son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).
Que es y Como funciona?
• En conclusión cabe anotar que AJAX no es una tecnología, sino una combinación de varias de
tecnologías y técnicas, y tampoco se le puede confundir con un
lenguaje de programación.
Que es y Como funciona?
• Libro ajax• Descargar el PDF
SQL
Sentencias SQL• ALTER {DATABASE | SCHEMA} [db_name] alter_specification [, alter_specification] ... • alter_specification: [DEFAULT] CHARACTER SET charset_name | [DEFAULT] COLLATE
collation_name
ALTER DATABASE
• ALTER [IGNORE] TABLE tbl_name alter_specification [, alter_specification] ... • alter_specification: ADD [COLUMN] column_definition [FIRST | AFTER col_name ] | ADD
[COLUMN] (column_definition,...) | ADD INDEX [index_name] [index_type] (index_col_name,...) | ADD [CONSTRAINT [symbol]] PRIMARY KEY [index_type] (index_col_name,...) | ADD [CONSTRAINT [symbol]] UNIQUE [index_name] [index_type] (index_col_name,...) | ADD [FULLTEXT|SPATIAL] [index_name] (index_col_name,...) | ADD [CONSTRAINT [symbol]] FOREIGN KEY [index_name] (index_col_name,...) [reference_definition] | ALTER [COLUMN] col_name {SET DEFAULT literal | DROP DEFAULT} | CHANGE [COLUMN] old_col_name column_definition [FIRST|AFTER col_name] | MODIFY [COLUMN] column_definition [FIRST | AFTER col_name] | DROP [COLUMN] col_name | DROP PRIMARY KEY | DROP INDEX index_name | DROP FOREIGN KEY fk_symbol | DISABLE KEYS | ENABLE KEYS | RENAME [TO] new_tbl_name | ORDER BY col_name | CONVERT TO CHARACTER SET charset_name [COLLATE collation_name] | [DEFAULT] CHARACTER SET charset_name [COLLATE collation_name] | DISCARD TABLESPACE | IMPORT TABLESPACE | table_options
ALTER TABLE
Sentencias SQL• CREATE {DATABASE | SCHEMA} [IF NOT EXISTS] db_name [create_specification [,
create_specification] ...] • create_specification: [DEFAULT] CHARACTER SET charset_name | [DEFAULT] COLLATE
collation_name
CREATE DATABASE
• CREATE [UNIQUE|FULLTEXT|SPATIAL] INDEX index_name [USING index_type] ON tbl_name (index_col_name,...)
• index_col_name: col_name [(length)] [ASC | DESC]
CREATE INDEX
• CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name [(create_definition,...)] • [table_options] [select_statement]
CREATE TABLE
Sentencias SQL
• DROP {DATABASE | SCHEMA} [IF EXISTS] db_name DROP DATABASE
• DROP INDEX index_name ON tbl_name DROP INDEX
• DROP [TEMPORARY] TABLE [IF EXISTS] tbl_name [, tbl_name] ... • [RESTRICT | CASCADE]
DROP TABLE
• RENAME TABLE tbl_name TO new_tbl_name [, tbl_name2 TO new_tbl_name2] ...
RENAME TABLE
Librerías gráficas y
multimedia en PHP
Generar PDF con PHP y MySQL• require_once('class.ezpdf.php');• $pdf =& new Cezpdf('a4');• $pdf->selectFont('../fonts/courier.afm');• $pdf->ezSetCmMargins(1,1,1.5,1.5);
Crear el documento PDF
• $conexion = mysql_connect("localhost", "usuario", "clave");• mysql_select_db("demo", $conexion);• $queEmp = "SELECT nombre, direccion, telefono FROM empresa";• $resEmp = mysql_query($queEmp, $conexion) or die(mysql_error());• $totEmp = mysql_num_rows($resEmp);
Obtenemos los registros desde MySQL
• $ixx = 0;• while($datatmp = mysql_fetch_assoc($resEmp)) {• $ixx = $ixx+1;• $data[] = array_merge($datatmp, array
('num'=>$ixx));• }• $titles = array(• 'num'=>'<b>Num</b>',• 'nombre'=>'<b>Empresa</b>',
Creando el array de datos, títulos y opciones • 'direccion'=>'<b>Direccion</b>',• 'telefono'=>'<b>Telefono</b>'• );• $options = array(• 'shadeCol'=>array(0.9,0.9,0.9),• 'xOrientation'=>'center',• 'width'=>500• );
Generar PDF con PHP y MySQL
• $txttit = "<b>BLOG.UNIJIMPE.NET</b>\n";• $txttit.= "Ejemplo de PDF con PHP y MYSQL \n";• $pdf->ezText($txttit, 12);• $pdf->ezTable($data, $titles, '', $options);• $pdf->ezText("\n\n\n", 10);• $pdf->ezText("<b>Fecha:</b> ".date("d/m/Y"), 10);• $pdf->ezText("<b>Hora:</b> ".date("H:i:s")."\n\n", 10);• $pdf->ezStream();
Imprimiendo los Resultados
Reportes con PHP• http://phpreports.sourceforge.net• aplicacion web, parece muy prometedora, hecha con XML
PHPReports
• http://sourceforge.net/projects/php-report/• Compatible con MySQL
PHP Report
• http://sourceforge.net/projects/sylexphp/• Este proyecto contiene herramientas para desarrollar formularios y reportes PHP
con MySQL
Sylex PHP projects
• http://www.fpdf.org/?lang=es• FPDF es una clase escrita en PHP que permite generar documentos
PDF directamente desde PHP, es decir, sin usar la biblioteca PDFlib. La F de FPDF significa Free (gratis y libre): puede usted usarla para cualquier propósito y modificarla a su gusto para satisfacer sus necesidades.
Qué es FPDF
Creación de gráficas en PHP con JpGraph
• Es una librería que incluye una serie de clases -código orientado a objetos- que sirven para crear imágenes con todo tipo de gráficas, dinámicamente desde páginas PHP.
Qué es JpGraph
10 excelentes librerías para gráficos. Ver aquí!
SEGURIDAD Y OPTIMIZACION
Seguridad Php
Nunca debes confiar en que los usuarios te van a mandar los datos que tu esperas. Mucha gente responde a esto con algo
como “Oh, nadie estaría interesado en mi sitio”.
Regla número uno: Nunca, confiar en los usuarios
• if ($password == “my_password”) { • $authorized = 1; • } • if ($authorized == 1) { • echo “Mis cosas importantes “; • }
register_globals
• $authorized = 0; if ($password == “my_password”) { $authorized = 1; }
• if ($authorized == 1) { echo “Lots of important stuff.”; }
Si un servidor tiene “register_globals” encendidos, entonces simplemente agregando”? authorized=1 ” al URL dará a cualquier persona el acceso libre
• Mensajes de error • Un hacker puede utilizarlos para descubrir todas
las clases de información sobre un sitio, desde la estructura del directorio del servidor a la información de la conexión de la base de datos.En PHP para evitar esto puedes utilizar .htaccess o php.ini, fijando “error_reporting” a “0”.
Seguridad Php
Utilicemos un ejemplo común. Muchos sistemas utilizan un código muy parecido a este para comprobar el usuario y la contraseña pudiéndose hacer todas las combinaciones válidas del usuario y de su contraseña, por ejemplo para controlar el acceso a un área de administración:
Regla número dos: Cuidado con SQL
• Parece que no podría hacer mucho daño. Pero digamos por un momento que introduzco el siguiente ”usuario ” en el formulario:
$check = mysql_query(“SELECT Username, Password, UserLevel FROM Users WHERE Username = ‘”.$_POST['username'].”‘ and Password = ‘”.$_POST['password'].”‘”);
• La pregunta que va a ser ejecutada sería esta:
‘O 1=1 #
• La almohadilla (#) le dice a MySQL que todo que le sigue es un comentario y que no debe de hacerle caso. Ejecutará SQL hasta ese punto. Después 1 es igual a 1, SQL devolverá todos los usuarios y contraseñas de la base de datos. Y como la primera combinación del usuario y de contraseña en la mayoría de las bases de datos es la de el administrador, la persona que incorporó simplemente algunos símbolos en un formulario ahora entra como administrador de la Web , con los mismos privilegios que tendría si supiera realmente el usuario y la contraseña.
SELECT Username, Password FROM Users WHERE Username = ” OR 1=1 #’ and Password = ”
Seguridad Php
Solución adecuada:
Regla número dos: Cuidado con SQL
• En vez de usar variables _POST como en la consulta de arriba, ahora utilizamos todos los datos del usuario con la función make_safe, dando por resultado el código siguiente:
function make_safe($variable) { $variable = addslashes(trim($variable)); return $variable; }
• La pregunta que va a ser ejecutada sería esta:
$username = make_safe($_POST['username']); $password = make_safe($_POST['password']); $check = mysql_query(“SELECT Username, Password, UserLevel FROM Users WHERE Username = ‘”.$username.”‘ and Password = ‘”.$password.”‘”);
• Ahora, si un usuario incorporó los datos anteriormente citados, la consulta será la siguiente: “\ ‘O o 1=1 #”
SELECT Username, Password FROM Users WHERE Username = ” OR 1=1 #’ and Password = ”
SELECT Username, Password, UserLevel FROM Users WHERE Username = ‘\’ OR 1=1 #’ and Password = ”
• A menos que tengas un usuario con un nombre muy inusual y una contraseña en blanco, tu atacante no podrá hacer ningún daño en tu sitio Web.
Seguridad Php
Algunos sitios tienen URLs parecidas a esto:
Manipulación de archivos
El archivo “index.php” incluye simplemente el archivo de “contactus.html”, y el sitio parece funcionar. Sin embargo, el usuario puede cambiar muy fácilmente el pedacito de “contactus.html” por cualquier cosa que le apetezca. Por ejemplo, si estás utilizando el mod_auth de Apache para proteger archivos y para guadar tu contraseña en el archivo llamado ” .htpasswd ” (el nombre convencional), si un usuario quisiera visitar esa URL, la respuesta haría salir el nombre de usuario y contraseña:
index.php?page=contactus.html
index.php?page=.htpasswd
• Afortunadamente, otra vez, esto es razonablemente fácil de solucionar. Primero, cerciorate de haber fijado correctamente el “open_basedir” en tu archivo de php.ini, y fijar “allow_url_fopen” a “OFF”.
Seguridad Php
Algunos sitios tienen URLs parecidas a esto:
Previsibilidad
Igual se aplica a los nombres de usuario y a las contraseñas. Si tienes un área de administración, no utilices “admin” como nombre de usuario. Escoge algo mas complicado de averiguar, si pudiera ser ambas con letras y números debido a que muchos hackers utilizan el llamado “ataque del diccionario”, intentando cada palabra de un diccionario como contraseña hasta que encuentran un login que funcione.
http://www.tusitio.com/admin/http://www.tusitio.com/administrator/
• En definitiva, mi consejo es que debes ser totalmente paranoico
SSL
El Cifrado Web (SSL/TLS) ¿Cómo funciona?
• SSL/TLS es una tecnología compleja, pero una vez entendidos los conceptos anteriores comprenderás el funcionamiento de este protocolo de forma general. Usemos un ejemplo con el cual posiblemente estés familiarizado.
Supongamos que intentas acceder al sitio de Facebook de forma segura, es decir, usando “https” en la dirección web. Inmediatamente, aparecerá la página en pantalla y en alguna parte de tu navegador observarás un “candado”, dependiendo del navegador que uses (Imagen 1). Si no viste ningún mensaje de advertencia (generalmente en tonos rojos), el protocolo SSL/TLS ha hecho su trabajo.
El Cifrado Web (SSL/TLS) ¿Cómo funciona?
• SSL/TLS funciona de forma transparente para ti, lo que en realidad ocurre cuando intentas acceder a un sitio seguro se asemeja al siguiente diagrama.
El Cifrado Web (SSL/TLS) Verifica emisor del certificado:
• Hace uso de una lista de Certificados Raíz almacenados en tu computadora y que contienen las llaves públicas de las ACs conocidas y de confianza (Imagen 2). Puedes acceder a esta lista desde las opciones avanzadas de tu navegador web (en este caso usamos Google Chrome).
• Con base a esta lista, el navegador revisa que la AC del certificado sea de confianza, de no serlo, el navegador mostrará una advertencia indicando que el certificado fue emitido por una entidad en la cual no confía.
El Cifrado Web (SSL/TLS) Punto débil de la tecnología SSL/TLS
• Es importante que estés consciente que pese acceder sólo a sitios seguros, la tecnología SSL/TLS no garantiza al 100% que tu información esté segura; considera que, como toda creación humana, tiene fallos. Los atacantes se han vuelto muy hábiles e ingeniosos para burlar estos mecanismos de seguridad.
• Por ello, debes tomar algunas medidas preventivas antes de realizar transacciones en línea que puedan poner en riesgo tu información.
Empleando el certificado falso, el troyano es capaz de descifrar y leer la información que compartas con el banco, posiblemente reenviándola a un atacante para que éste haga mal uso de ella, por ejemplo robando tu identidad.
El Cifrado Web (SSL/TLS) Recomendaciones
• Evita hacer uso de computadoras y redes públicas, sobre todo si vas a utilizar el servicio de banca en línea, realizar cualquier tipo de compra o transferir información valiosa para ti.
• Instala un antivirus y procura mantenerlo actualizado. Al final de este artículo se listan algunas soluciones gratuitas que pueden ayudarte.
• Es importante mantener actualizado tu navegador, ya que si no lo haces, eres más susceptible a ataques. Consulta el sitio web oficial del navegador que elijas y obtén la versión más reciente.
• Cuando utilices HTTPS, verifica la vigencia del certificado, esto lo puedes hacer observando en el periodo de validez del mismo
El Cifrado Web (SSL/TLS) Recomendaciones
El Cifrado Web (SSL/TLS) ¿Cómo instalo mi Certificado para Servidor Web?
• Una vez que te has registrado y se te ha entregado el certificado, recibirás un correo electrónico que te permite descargar el certificado junto con sus certificados inmediatos, todos ellos necesitan ser instalados en tu sitio Web.
El proceso específico de instalación está determinado por tu elección del software para el servidor Web. Es recomendado utilizar el software con el que se construyo este sitio y que te permite la instalación fácil de todo equipo digital como certificados SSL.
NOTA: Para instalar tu certificado, necesitas la clave original privada, que fue creada cuando tú generaste al principio con tu Solicitud de Suscripción para el Certificado (Certificate Signing Request - CSR). Si no puedes encontrar esta clave, o no puedes acceder a ella, entonces no puedes usar el certificado y necesitas uno nuevohttp://help.securepaynet.net/topic/742/article/5346
El Cifrado Web (SSL/TLS) ¿Qué es SSL/TLS?
• SSL (Secure Sockets Layer) traducido al español significa Capa de Conexiones Seguras. Es un protocolo que hace uso de certificados digitales para establecer comunicaciones seguras a través de Internet. Recientemente ha sido sustituido por TLS (Transport Layer Security) el cual está basado en SSL y son totalmente compatibles.
• Te permite confiar información personal a sitios web, ya que tus datos se ocultan a través de métodos criptográficos mientras navegas en sitios seguros.
• Es utilizado ampliamente en bancos, tiendas en línea y cualquier tipo de servicio que requiera el envío de datos personales o contraseñas.
WML
Wireless Markup Language (WML) ¿Qué es WML?
• El Wireless Markup Language es un lenguaje cuyo origen es el XML (eXtensible Markup Language). Este lenguaje se utiliza para construir las páginas que aparecen en las pantallas de los teléfonos móviles y los asistentes personales digitales (PDA) dotados de tecnología WAP. Es una versión reducida del lenguaje HTML que facilita la conexión a Internet de dichos dispositivos y que además permite la visualización de páginas web en dispositivos inalámbricos que incluyan la tecnología WAP.
• WML es un metalenguaje, lo que implica que además de usar etiquetas predefinidas se pueden crear componentes propios y tiene ciertas similitudes con otro lenguaje de etiquetas bastante conocido, el HTML
Wireless Markup Language (WML) Creación de una página WML
• La información en WML se distribuye en forma de barajas (decks) compuestas por cartas (cards), tomándose cada fichero WML como una baraja. Las cartas tienen un nombre para poder referirse a ellas, y permitir la navegación entre ellas dentro de una misma baraja.
• En una página se pueden encontrar diversos elementos como son imágenes, tablas, formularios o tareas.
• Al igual que el HTML se sirve de un lenguaje de script como javascript para dotar de cierto dinamismo a sus documentos, WML dispone del WMLS que es un lenguaje bastante similar al Javascript, pero con alguna diferencia fundamental.
Wireless Markup Language (WML) Creación de una página WML
• Ejemplo de una página WML:• <?xml version="1.0"?>• <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"• "http://www.pagina.com" >• <wml>• <card id="carta1" title="Carta">• <p mode="wrap">Un ejemplo para entrar a página.</p>• </card>• </wml>
• Ejemplo de una página WML:• <wml>• <body bgcolor="CELESTE">• <center><h1>NAVEGACION ENTRE REGISTROS</h1></center><br />• <br />• <br />• • <card id="index" title="index">• <form action="productos.php" method="post">• Ingrese ruc a consultar:• <input type="text" name="valor">• <input type="submit" value="Ingresar">• </form>• </card>• • <body>• </wml>
Wireless Markup Language (WML) Características
• A diferencia del HTML, WML es más estricto, si existe un error en la escritura de las etiquetas presentará un error en vez de mostrar la página; al provenir del XML requiere que las etiquetas como <br /> (que sirven para empezar una nueva línea) finalicen con />, mientras que en HTML puede finalizar en > sin generar error.
• WML permite el uso de variables en sus etiquetas, algo que no es posible en HTML, esta función es útil ya que el valor de las variables se puede mantener entre cartas.
• En WML las imágenes utilizan el formato wbmp, cada imagen wbmp es estática, sin embargo WML permite crear una secuencia de imágenes, de esta manera pueden verse en movimiento, las etiquetas que definen una carta pueden tener un evento activado por un contador (ontimer) el cual saltará a la carta indicada luego de un tiempo definido dentro de la etiqueta así: <timer value="5"/>, de esta manera, si cada carta posee una imagen, se puede crear la sensación de movimiento.
Wireless Markup Language (WML) Características
• WML utiliza tablas simples, algunos atributos existentes en HTML no existen en WML, tampoco existe la posibilidad de crear tablas dentro de tablas.
• Así como HTML utiliza Javascript para crear acciones especiales sobre sus páginas, WML utiliza WMLScript que es muy similar a Javascript pero más simple. Los guiones generados con este lenguaje se deben ubicar en archivos diferentes al archivo WML que los invoca, pues no pueden estar embedidos dentro del código WML.
Ejemplos Documentación
WMLDetección
Wireless Markup Language (WML) Prepara tu sitio para iPhone
• Detectar iPhones e iPods usando Javascript:• if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i))) {• if (document.cookie.indexOf("iphone_redirect=false") == -1) {• window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";• }• }
• Detectar iPhones e iPods usando PHP:• if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {• header('Location: http://yoursite.com/iphone');• exit();• }
Wireless Markup Language (WML) Prepara tu sitio movil
• La función, que lee las cabeceras del navegador para saber con qué dispositivo navega, se llama esMovil(), hay que insertar esta función o la librería que la contiene en la primera línea de nuestro script index.php
• function esMovil(){• return eregi( 'ipod|iphone|ipad|android|opera mini|
blackberry|palm os|windows ce|Bada|Windows Phone|Symbian', $_SERVER['HTTP_USER_AGENT'] );
• }
• Esta función es capaz de detectar si el navegador del visitante pertenece a un dispositivo móvil, ahora simplemente tenemos que añadir un condicional al principio de nuestro fichero index.php para filtrar a los visitantes según el dispositivo que utilizan:
• if( esMovil() AND $_SERVER['REQUEST_URI']=='/'){• header( 'location:/versionmovil/' );• exit();• }
Wireless Markup Language (WML) Prepara tu sitio movil
• Es importante recordar que esta verificación hay que hacerla al comienzo del script, la función header location de PHP no funcionará si ya hemos mostrado algo de código HTML. Recomiendo incluir la función en la primera línea y esta verificación justo a continuación. Este script, detecta los navegadores por defecto de los siguientes dispositivos móviles
(probado a 05/10/2010):
• iPod• iPhone• iPad• Android• Blackberry• Palm OS• Windows móvil• Symbian
Además, es capaz de detectar si el dispositivo está navegando con la versión para móviles de Opera, Opera Mini.
Wireless Markup Language (WML) Prepara tu sitio movil
• 10 herramientas para probar tu sitio Web en dispositivos móviles
ENTRAR
