PAGINASPAGINASWEBWEB

VER INTRO

PAGINASPAGINASWEBWEB

Ing. David DonosoIng. David DonosoGerente de DesarrolloGerente de Desarrollo

Silver Hands ResearchSilver Hands Researchddonoso@shresearch.netddonoso@shresearch.net

¿Qué vamos a cubrir?¿Qué vamos a cubrir?

Día 1 – Día 1 – ConceptosConceptos y y DefinicionesDefiniciones Base Base

Día 2 – Programando con HTML y PHPDía 2 – Programando con HTML y PHP

Día 3 – Ejercicios PracticosDía 3 – Ejercicios Practicos

Día 4 – Frames y MacrosDía 4 – Frames y Macros

Día 5 – Día 5 – ServidoresServidores Web y Upload Web y Upload

Día 6 – Apache y PHPDía 6 – Apache y PHP

Día 7 – Consejos y UtilitariosDía 7 – Consejos y Utilitarios

Ronda de Ronda de PreguntasPreguntas y y EvaluaciónEvaluación

Objetivo EducacionalObjetivo Educacional

El presente curso, pretende demostrar distintos El presente curso, pretende demostrar distintos

puntos de vista, que deben considerarse al puntos de vista, que deben considerarse al

momento de diseñar una pagina web. momento de diseñar una pagina web.

El punto de vista de un diseñador, orientado El punto de vista de un diseñador, orientado

hacia las animaciones, colores, técnicas de hacia las animaciones, colores, técnicas de

disediseño y aplicaciones graficas.ño y aplicaciones graficas.

El punto de vista de un programador, orientado El punto de vista de un programador, orientado

hacia la funcionalidad y navegabilidad de una hacia la funcionalidad y navegabilidad de una

pagina web.pagina web.

Día 1Día 1 Conceptos y Definiciones BásicasConceptos y Definiciones Básicas

InternetInternet DominiosDominios HostingHosting ServidoresServidores Paginas Web Estáticas y DinámicasPaginas Web Estáticas y Dinámicas HTMLHTML PHPPHP CMSCMS XMLXML APACHE / MYSQL / PHPAPACHE / MYSQL / PHP SHAREPOINTSHAREPOINT

Conceptos BásicosConceptos Básicos Internet es el legado del sistema de protección de Internet es el legado del sistema de protección de

los Estados Unidos para mantener sus los Estados Unidos para mantener sus computadoras militares conectadas en caso de un computadoras militares conectadas en caso de un ataque militar y la destrucción de uno o varios de ataque militar y la destrucción de uno o varios de los nodos de su red de computadoras. los nodos de su red de computadoras.

En la actualidad es una enorme red que conecta En la actualidad es una enorme red que conecta redes y computadoras distribuidas por todo el redes y computadoras distribuidas por todo el mundo, permitiéndonos comunicarnos y buscar y mundo, permitiéndonos comunicarnos y buscar y transferir información sin grandes requerimientos transferir información sin grandes requerimientos tecnológicos ni económicos relativos para el tecnológicos ni económicos relativos para el individuo.individuo.

DominiosDominiosUn Un dominio de Internetdominio de Internet es un nombre es un nombre

base que agrupa a un conjunto de base que agrupa a un conjunto de equipos o dispositivos y que permite equipos o dispositivos y que permite proporcionar nombres de equipo más proporcionar nombres de equipo más fácilmente recordables en lugar de una fácilmente recordables en lugar de una dirección IP numérica. dirección IP numérica.

DominiosDominios

(.org) dominios de primer nivel para organizaciones (.org) dominios de primer nivel para organizaciones (.edu) dominios de primer nivel educativos (.edu) dominios de primer nivel educativos (.info) dominio nivel superior previsto para las (.info) dominio nivel superior previsto para las

páginas web informativas páginas web informativas (.net) dominio de nivel superior previsto para las (.net) dominio de nivel superior previsto para las

páginas de servicios web páginas de servicios web (.com) dominio de nivel superior comerciales (.com) dominio de nivel superior comerciales (.mil) dominio de Internet genérico para el (.mil) dominio de Internet genérico para el

Departamento de Defensa de los Estados Unidos Departamento de Defensa de los Estados Unidos

Disponibilidad de un dominio

HostingHostingHosting es una palabra del Ingles que Hosting es una palabra del Ingles que

quiere decir dar hospedar o alojar. quiere decir dar hospedar o alojar. Aplicado al Internet, significa poner una Aplicado al Internet, significa poner una pagina web en un servidor de Internet pagina web en un servidor de Internet para que ella pueda ser vista en para que ella pueda ser vista en cualquier lugar del mundo entero con cualquier lugar del mundo entero con acceso al Internet.acceso al Internet.

ESPACIO EN DISCOESPACIO EN DISCO

TRAFICO DE SITIOTRAFICO DE SITIO

Paginas Web - DefiniciónPaginas Web - Definición Una Una página webpágina web es una fuente de información adaptada es una fuente de información adaptada

para la World Wide Web (WWW) y accesible mediante un para la World Wide Web (WWW) y accesible mediante un navegador de Internet. Esta información se presenta navegador de Internet. Esta información se presenta generalmente en formato HTML y puede contener generalmente en formato HTML y puede contener hiperenlaces a otras páginas web, constituyendo la hiperenlaces a otras páginas web, constituyendo la redred enlazada de la World Wide Web.enlazada de la World Wide Web.

Las páginas web pueden ser cargadas de un ordenador o Las páginas web pueden ser cargadas de un ordenador o computador local o remoto, llamado Servidor Web, el cual computador local o remoto, llamado Servidor Web, el cual servira de HOST. El servidor web puede restringir las servira de HOST. El servidor web puede restringir las páginas a una red privada, por ejemplo, una intranet, o puede páginas a una red privada, por ejemplo, una intranet, o puede publicar las páginas en el World Wide Web. Las páginas web publicar las páginas en el World Wide Web. Las páginas web son solicitadas y transferidas de los servidores usando el son solicitadas y transferidas de los servidores usando el Protocolo de Transferencia de Hypertexto (HTTP - Hypertext Protocolo de Transferencia de Hypertexto (HTTP - Hypertext Transfer Protocol). La acción del Servidor HOST de guardar Transfer Protocol). La acción del Servidor HOST de guardar la página web, se denomina "HOSTING".la página web, se denomina "HOSTING".

Paginas Web Paginas Web Estáticas v.s. DinámicasEstáticas v.s. Dinámicas

Las páginas web pueden consistir en archivos de texto Las páginas web pueden consistir en archivos de texto estático, o se pueden leer una serie de archivos con estático, o se pueden leer una serie de archivos con código que instruya al servidor cómo construir el HTML código que instruya al servidor cómo construir el HTML para cada página que es solicitada, a esto se le conoce para cada página que es solicitada, a esto se le conoce como Página Web Dinámica.como Página Web Dinámica.

Las páginas web dinámicas son aquellas que pueden Las páginas web dinámicas son aquellas que pueden acceder a bases de datos para extraer información que acceder a bases de datos para extraer información que pueda ser presentada al visitante dependiendo de pueda ser presentada al visitante dependiendo de ciertos criterios. Ejemplo de esto son páginas que tienen ciertos criterios. Ejemplo de esto son páginas que tienen sistemas de administración de contenido o CMS. Estos sistemas de administración de contenido o CMS. Estos sistemas permiten cambiar el contenido de la página sistemas permiten cambiar el contenido de la página web sin tener que utilizar un programa de ftp para subir web sin tener que utilizar un programa de ftp para subir los cambios.los cambios.

NavegadoresNavegadoresUn Navegador Web puede tener una Interfaz de Un Navegador Web puede tener una Interfaz de

Usuario Gráfica (GUI - Graphical User Interface), Usuario Gráfica (GUI - Graphical User Interface), como Internet Explorer, Netscape Navigator, Mozilla como Internet Explorer, Netscape Navigator, Mozilla Firefox, etc. El más popular es el Internet Explorer de Firefox, etc. El más popular es el Internet Explorer de Microsoft.Microsoft.

Los usuarios con navegadores gráficos pueden Los usuarios con navegadores gráficos pueden deshabilitar la visualización de imágenes y otros deshabilitar la visualización de imágenes y otros contenidos multimedia, para ahorrar tiempo, ancho de contenidos multimedia, para ahorrar tiempo, ancho de banda o simplemente para simplificar su navegación. banda o simplemente para simplificar su navegación.

También se puede descartar la información de También se puede descartar la información de fuentes, tamaños, estilos y esquemas de colores de fuentes, tamaños, estilos y esquemas de colores de las páginas web y aplicar sus propias CSS las páginas web y aplicar sus propias CSS estilizándola a su gusto.estilizándola a su gusto.

BuscadoresBuscadoresLo más importante a la hora de crear una Lo más importante a la hora de crear una

página web es su optimización web y el página web es su optimización web y el posicionamiento conseguido en los motores de posicionamiento conseguido en los motores de búsqueda, como Google, Lycos, Altavista, etc. búsqueda, como Google, Lycos, Altavista, etc.

Para alcanzar las primeras posiciones en los Para alcanzar las primeras posiciones en los resultados de una consulta con un buscador, resultados de una consulta con un buscador, existen gran cantidad de trucos no legales para existen gran cantidad de trucos no legales para la optimización de una página Web que la la optimización de una página Web que la mayoría de los buscadores penalizan por ser mayoría de los buscadores penalizan por ser ilegales. Confunden a los usuarios y no ofrecen ilegales. Confunden a los usuarios y no ofrecen información útil sobre las consultas.información útil sobre las consultas.

DREAMWEAVERDREAMWEAVERDreamweaver es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarán en este programa razones para utilizarlo, sobretodo en lo que a productividad se refiere. Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar:

Hojas de estilo y capas Javascript para crear efectos e interactividades Inserción de archivos multimedia...

Además es un programa que se puede actualizar con componentes, que fabrica tanto Macromedia como otras compañias, para realizar otras acciones más avanzadas.

FLASHFLASHProbablemente, uno de los avances más importantes en materia de diseño en el web ha sido la aparición de la tecnología desarrollada por Macromedia denominada Flash.

Flash es la tecnología más comúnmente utilizada en el Web que permite la creación de animaciones vectoriales. El interés en el uso de gráficos vectoriales es que éstos permiten llevar a cabo animaciones de poco peso, es decir, que tardan poco tiempo en ser cargadas por el navegador. Los vectores con los que trabaja Flash sólo son, por decirlo de alguna manera, siluetas que casi no ocupan espacio y se pueden modificar fácilmente y sin gasto de memoria en disco.

FIREWORKSFIREWORKSEs una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash®) pero con más parecido a un taller destinado para la edición y optimización para web de gráficos en mapa de bits o vectoriales.

Originalmente fue desarrollado por Macromedia, compañía que fue comprada en 2005 por Adobe Systems. Fireworks está enfocado en la creación y edición de gráficos para internet. Está diseñado para integrarse con otros productos de Adobe, como Dreamweaver y Flash. Está disponible de forma individual o integrado en Adobe CS3.

http://www.macromedia.comhttp://www.macromedia.com

http://www.teletutoriales.eshttp://www.teletutoriales.es

http://www.flash.comhttp://www.flash.com

http://www.monografias.com http://www.monografias.com

http://www.gmail.comhttp://www.wikipedia.comhttp://www.wikipedia.comhttp://www.softonic.comhttp://www.softonic.comhttp://www.limewire.comhttp://www.limewire.comhttp://www.emule.comhttp://www.emule.comhttp://www.jomla.comhttp://www.jomla.com

PREGUNTAS Y RESPUESTASPREGUNTAS Y RESPUESTAS

Formatos de programación de Formatos de programación de Paginas WebPaginas Web

• HTMLHTML• Hyper Text Markup Language (Lenguaje de Marcas de Hipertexto)

• PHPPHP•HP Hypertext Pre-processor 

• XMLXML•Extensible Markup Language (lenguaje de marcas extensible)

• CMSCMS•Sistema de gestión de contenidos (Content Management System)

HTMLHTMLHyper Text Markup Language (Lenguaje de Marcas de Hipertexto) Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

<!DOCTYPE HTML PUBLIC “ -//W3C//DTD HTML 4.01//EN“> <html lang="es"> <head> <title>Ejemplo</title> </head> <body> <p>ejemplo</p> </body> </html>

PHPPHPPHP es un lenguaje interpretado de propósito general ampliamente usado y que está diseñado especialmente para desarrollo web y puede ser incrustado dentro de código HTML. Generalmente se ejecuta en un servidor web, tomando el código en PHP como su entrada y creando páginas web como salida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno. PHP se encuentra instalado en más de 20 millones de sitios web y en un millón de servidores, aunque el número de sitios en PHP ha compartido algo de su preponderante sitio con otros nuevos lenguajes no tan poderosos desde agosto de 2005. Este mismo sitio web de Wikipedia está desarrollado en PHP. Es también el módulo Apache más popular entre las computadoras que utilizan Apache como servidor web. La versión más reciente de PHP es la 5.2.9-1 (for Windows) del 10 de Marzo de 2009.

PHPPHP<?php// Si existe la variable $_POST['muestra'], entonces muestra la comida favoritaif (isset($_POST['muestra'])) { echo 'Hola, '.$_POST['nombre'].', tu comida favorita es:'. $_POST['comida'].''; } else { // Si no, muestra un formulario solicitando la comida favorita?><form method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>"> ¿Cuál es tu nombre? <input type="text" name="nombre" /> ¿Cuál es tu comida favorita? <select name="comida"> <option value="Spaguetis">Spaguetis</option> <option value="Asado">Asado</option> <option value="Pizza">Pizza</option> </select> <input type="submit" name="muestra" value="Seguir" /></form> <?php } //Fin del bloque else?>

XMLXMLXML es una tecnología sencilla que tiene a su alrededor otras que la complementan y la hacen mucho más grande y con unas posibilidades mucho mayores. Tiene un papel muy importante en la actualidad ya que permite la compatibilidad entre sistemas para compartir la información de una manera segura, fiable y fácil.

XML proviene de un lenguaje inventado por IBM en los años setenta, llamado GML (Generalized Markup Language), que surgió por la necesidad que tenía la empresa de almacenar grandes cantidades de información. Este lenguaje gustó a la ISO, por lo que en 1986 trabajaron para normalizarlo, creando SGML (Standard Generalized Markup Language), capaz de adaptarse a un gran abanico de problemas. A partir de él se han creado otros sistemas para almacenar información.

CMSCMSUn Sistema de gestión de contenidos (Content Management System en inglés, abreviado CMS) es un programa que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, principalmente en páginas web, por parte de los participantes.Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio. El sistema permite manejar de manera independiente el contenido y el diseño.

Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. Un ejemplo clásico es el de editores que cargan el contenido al sistema y otro de nivel superior (directorio) que permite que estos contenidos sean visibles a todo el público (los aprueba).

Creando una Website en HTML

Uso de CMSJOOMLA / MAMBO

PAGINA WEBPAGINA WEB

DISEÑO DE ARTES O SHOTS

ELABORACION DE MAPA DE SITIO

INCLUSIÓN DE DISEÑO Y PROGRAMACIÓN

SUBIDA A LA WEB EN DOMINIO TEMPORAL

DEPURACIÓN Y SUBIDA A DOMINIO DEFINITIVO.

PAGINA WEBPAGINA WEB

DISEÑO DE ARTES O SHOTS

PAGINA WEBPAGINA WEBELABORACION DE MAPA DE

SITIO

PAGINA WEBPAGINA WEB

INCLUSIÓN DE DISEÑO Y PROGRAMACIÓN

http://www.webstandards.org/files/acid2/test.html

PAGINA WEBPAGINA WEB

SUBIDA A LA WEB EN DOMINIO TEMPORAL

DEPURACIÓN Y SUBIDA A DOMINIO DEFINITIVO.

FTP – FTP – FILE TRANSFER PROTOCOLFILE TRANSFER PROTOCOL

File Transfer Protocol o Protocolo de Transferencia de Archivos, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP, basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.

Subiendo archivos vía FTP

Servidor ApacheServidor ApacheEl servidor HTTP Apache es un servidor web HTTP de código abierto para plataformas Unix (BSD, GNU/Linux, etc.), Windows, Macintosh y otras, que implementa el protocolo HTTP/1.11 y la noción de sitio virtual. Cuando comenzó su desarrollo en 1995 se basó inicialmente en código del popular NCSA HTTPd 1.3, pero más tarde fue reescrito por completo. Su nombre se debe a que Behelendorf eligió ese nombre porque quería que tuviese la connotación de algo que es firme y enérgico pero no agresivo, y la tribu Apache fue la última en rendirse al que pronto se convertiría en gobierno de EEUU, y en esos momentos la preocupación de su grupo era que llegasen las empresas y "civilizasen" el paisaje que habían creado los primeros ingenieros de internet. Además Apache consistía solamente en un conjunto de parches a aplicar al servidor de NCSA. Era, en inglés, a patchy server (un servidor "parcheado").

El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache Software Foundation.Apache presenta entre otras características altamente configurables, bases de datos de autenticación y negociado de contenido, pero fue criticado por la falta de una interfaz gráfica que ayude en su configuración.

APACHE MY-SQL PHPAPACHE MY-SQL PHP

PREGUNTAS Y RESPUESTASPREGUNTAS Y RESPUESTAS

PRACTICAPRACTICA