Diapositiva sobre paginas web, servidores, diseño y un poco mas. Por: Carlos Donoso

1. PAGINAS
WEB
VER INTRO

2. PAGINAS
WEB
Carlos Donoso C.
Silver Hands Research

3. ¿Qué vamos a cubrir?
 Día 1 – Conceptos y Definiciones Base
 Día 2 – Programando con HTML y PHP
 Día 3 – Ejercicios Practicos
 Día 4 – Frames y Macros
 Día 5 – Servidores Web y Upload
 Día 6 – Apache y PHP
 Día 7 – Consejos y Utilitarios
 Ronda de Preguntas y Evaluación

4. Objetivo Educacional
 El presente curso, pretende demostrar distintos
puntos de vista, que deben considerarse al
momento de diseñar una pagina web.
 El punto de vista de un diseñador, orientado
hacia las animaciones, colores, técnicas de
diseño y aplicaciones graficas.
 El punto de vista de un programador, orientado
hacia la funcionalidad y navegabilidad de una
pagina web.

5. Día 1
 Conceptos y Definiciones Básicas
 Internet
 Dominios
 Hosting
 Servidores
 Paginas Web Estáticas y Dinámicas
 HTML
 PHP
 CMS
 XML
 APACHE / MYSQL / PHP
 SHAREPOINT

6. Conceptos Básicos
 Internet es el legado del sistema de protección de
los Estados Unidos para mantener sus
computadoras militares conectadas en caso de un
ataque militar y la destrucción de uno o varios de
los nodos de su red de computadoras.
En la actualidad es una enorme red que conecta
redes y computadoras distribuidas por todo el
mundo, permitiéndonos comunicarnos y buscar y
transferir información sin grandes requerimientos
tecnológicos ni económicos relativos para el
individuo.

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

8. Dominios
 (.org) dominios de primer nivel para organizaciones
 (.edu) dominios de primer nivel educativos
 (.info) dominio nivel superior previsto para las
páginas web informativas
 (.net) dominio de nivel superior previsto para las
páginas de servicios web
 (.com) dominio de nivel superior comerciales
 (.mil) dominio de Internet genérico para el
Departamento de Defensa de los Estados Unidos

9. Disponibilidad de un dominio

10. Hosting
 Hostinges una palabra del Ingles que
quiere decir dar hospedar o alojar.
Aplicado al Internet, significa poner una
pagina web en un servidor de Internet
para que ella pueda ser vista en
cualquier lugar del mundo entero con
acceso al Internet.
ESPACIO EN DISCO
TRAFICO DE SITIO

11. Paginas Web - Definición
 Una página web es una fuente de información adaptada
para la World Wide Web (WWW) y accesible mediante un
navegador de Internet. Esta información se presenta
generalmente en formato HTML y puede contener
hiperenlaces a otras páginas web, constituyendo la red
enlazada de la World Wide Web.
 Las páginas web pueden ser cargadas de un ordenador o
computador local o remoto, llamado Servidor Web, el cual
servira de HOST. El servidor web puede restringir las 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 son
solicitadas y transferidas de los servidores usando el
Protocolo de Transferencia de Hypertexto (HTTP - Hypertext
Transfer Protocol). La acción del Servidor HOST de guardar
la página web, se denomina "HOSTING".

12. Paginas Web
Estáticas v.s. Dinámicas
 Las páginas web pueden consistir en archivos de texto
estático, o se pueden leer una serie de archivos con
código que instruya al servidor cómo construir el HTML
para cada página que es solicitada, a esto se le conoce
como Página Web Dinámica.
 Las páginas web dinámicas son aquellas que pueden
acceder a bases de datos para extraer información que
pueda ser presentada al visitante dependiendo de
ciertos criterios. Ejemplo de esto son páginas que tienen
sistemas de administración de contenido o CMS. Estos
sistemas permiten cambiar el contenido de la página
web sin tener que utilizar un programa de ftp para subir
los cambios.

13. Navegadores
 Un Navegador Web puede tener una Interfaz de
Usuario Gráfica (GUI - Graphical User Interface),
como Internet Explorer, Netscape Navigator, Mozilla
Firefox, etc. El más popular es el Internet Explorer de
Microsoft.
 Los usuarios con navegadores gráficos pueden
deshabilitar la visualización de imágenes y otros
contenidos multimedia, para ahorrar tiempo, ancho de
banda o simplemente para simplificar su navegación.
 También se puede descartar la información de
fuentes, tamaños, estilos y esquemas de colores de
las páginas web y aplicar sus propias CSS
estilizándola a su gusto.

14. Buscadores
 Lo más importante a la hora de crear una
página web es su optimización web y el
posicionamiento conseguido en los motores de
búsqueda, como Google, Lycos, Altavista, etc.
 Para alcanzar las primeras posiciones en los
resultados de una consulta con un
buscador, existen gran cantidad de trucos no
legales para la optimización de una página
Web que la mayoría de los buscadores
penalizan por ser ilegales. Confunden a los
usuarios y no ofrecen información útil sobre las

15. DREAMWEAVER
Dreamweaver 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.

16. FLASH
Probablemente, 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.

17. FIREWORKS
Es 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.

18. http://www.macromedia.com
http://www.teletutoriales.es
http://www.flash.com
http://www.monografias.com

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

20. PREGUNTAS Y RESPUESTAS

21. Formatos de programación de
Paginas Web
• HTML
• Hyper Text Markup Language (Lenguaje de Marcas de
Hipertexto)
• PHP
•HP Hypertext Pre-processor
• XML
•Extensible Markup Language (lenguaje de marcas
extensible)
• CMS
•Sistema de gestión de contenidos (Content Management
System)

22. HTML
Hyper 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>

23. PHP
PHP 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.

24. PHP
<?php
// Si existe la variable $_POST['muestra'], entonces muestra la comida favorita
if (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

25. XML
XML 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.

26. CMS
Un 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).

27. Creando una Website en HTML

28. Uso de CMS
JOOMLA / MAMBO

29. PAGINA 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.

30. PAGINA WEB
DISEÑO DE ARTES O SHOTS

31. PAGINA WEB
ELABORACION DE MAPA DE
SITIO

32. PAGINA WEB
http://www.webstandards.org/files/acid2/test.html
INCLUSIÓN DE DISEÑO Y
PROGRAMACIÓN

33. PAGINA WEB
SUBIDA A LA WEB EN DEPURACIÓN Y SUBIDA A
DOMINIO TEMPORAL DOMINIO DEFINITIVO.

34. FTP – FILE 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.

35. Subiendo archivos vía FTP

36. Servidor Apache
El 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.

37. APACHE MY-SQL PHP

38. PREGUNTAS Y RESPUESTAS

39. PRACTICA