viernes, 14 de marzo de 2014
Aquí les pondré ejercicios les aconsejo que lo hagan y practiquen
- Escribe la estructura html de una página web y comentarios, e indicando cada parte del mismo
- Crear una página web que contenga: titulo principal y luego definir dos títulos de menor nivel con los textos (Inicio y Nosotros), en cada una de estas secciones definir dos títulos de tercer nivel con un párrafo cada una.
- Completa la página anterior con párrafos que utilicen distintos tipos de destaques (em y strong) en su contenido y separa los mismos mediante líneas.
- Crea un página principal (index.html) con dos hipervínculos a las páginas: pagina2.html y pagina3.html.
Luego en las dos páginas secundarias crear hipervínculos a la página principal. - Crea tres páginas con una imagen cada una, las cuales servirán de enlace para pasar de la página 1 hacia la 2, de la 2 a la 3 y de la 3 a la 1.
- Crea una página que muestre 4 enlaces a distintos tipos de sitios web de Internet y hacer que los 2 primeros abran en una nueva ventana, mientras que los otros en la misma ventana.
- Realiza una página que presente un índice de contenido que dirija a diferentes partes de la misma página mediante marcadores. Coloca una opción para volver al índice.
- Confecciona una lista ordenada con los nombres de los días de la semana.
- Confeccionar una tabla completa que muestre en la primer columna los nombre de cuatro personas de una empresa y en la segunda el sueldo. Debe totalizar los sueldos al final y describir la tabla.
martes, 25 de febrero de 2014
HTML (HyperText Markup Language)
- Para publicar información en la web que potencialmente todas las computadoras puedan entender, se necesita un lenguaje universal.
- Fue desarrollado por Tim Barners-Lee en el CERN y popularizado por el navegador Mosaic.
- Se basa en SGML (Standard Generalized Markup Language)
- Es un lenguaje que describe la estructura general del contenido de un documento(ej. página web).
- No el aspecto en sí de la página en pantalla.
- Si bien existen etiquetas que nos permiten manejar el aspecto del documento, se recomienda que éste sea manejado por hojas de estilo (css)
- Las páginas Web se crean usando HTML pues permite mezclar texto con etiquetas de marcas.
- Los archivos HTML son archivos de texto plano (ASCII), puede leerse con cualquier editor.
- El contenido se estructura mediante etiquetas (tags).
- No es sensible a mayúsculas o minúsculas, el espaciado y la nueva línea se ignora.
- Las etiquetas HTML son textos que se escribe entre los signos <>
- Existen versiones de apertura y de cierre para la mayoría de las etiquetas, pero no todas tienen.
- Tanto las etiquetas de apertura como las de cierre usan el mismo texto, pero la etiqueta de cierre agrega una /. ej.: <html> </html>
“abre” “cierra”
“abre y no necesita ser cerrada con otra etiqueta” - Cada etiqueta puede tener atributos, en el ejemplo anterior img tiene como atributos src y alt.
DTD (Document Type Definition)
- El DTD es un archivo que define la sintaxis que se debe emplear para reconstruir la estructura de datos.
- Todos los archivos HTML debe especificar un tipo de DTD.
- Una declaración de tipo de documento o DOCTYPE asocia un documento SGML o XML particular con una definición de tipo de documento.
Versión html
Se debe definir la versión HTML usada en el documento.
La declaración de tipo de documento especifica el DTD (Document Type Definition) usado en el documento.
Se debe especificar uno de los 3 DTD disponibles, estos varían en los elementos que soportan.
- Strict DTD (No soporta etiquetas antiguas y código debe ser correcto)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - Transitional DTD (Con etiquetas antiguas y código debe ser correcto)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - Frameset DTD (todo, más los concernientes a los frames)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Set de caracteres
- Todo documento HTML es una secuencia de caracteres.
- Los sistemas de computadoras identifican estos caracteres por su código ASCII. Ej.: 65, 66, 67 se refieren a ‘A’, ‘B’ y ‘C’ respectivamente.
- Como el set de caracteres ASCII no es suficiente para un sistema global de información como es la Web, HTML usa un set de caracteres más completo llamado UCS (Universal Caracter Set)
- De todas formas el navegador debe saber qué codificación de caracteres (character encoding) usar para interpretar el contenido de la página web
Character enconding
- ISO-8859-1 conocido como “Latin-1” (el usado por nosotros)
- ISO-8859-15 “Latin-1” + caracter del euro
- ISO-8859-5 soporta caracteres Cyrillic (alfabeto ruso, bulgaro, esloveno)
- SHIFT_JIS codificación japonesa
- EUC_JP otra codificación japonesa
Caracteres speciales
- Para estar seguro que los caracteres acentuados o especiales se visualicen de manera correcta en el navegador deben ingresarse de la siguiente manera:
&# + nº ASCII o código especial
Ej.:
á = à = á
ñ = ñ = ñ
< = < = <
& = & = &
Estructura general para un documento html
<!DOCTYPE HTML PUBLIC “ ...” “...”> version HTML
<html>
<head>
Información que se necesita para que la
página funcione. No la ve el usuario.
</head>
<body>
Contenido de la página - La ve el usuario
</body>
</html>
<head>
- Es el cabezal del documento.
- Contiene información para buscadores o para el propio navegador.
- No es visible por el usuario (excepto el título en la barra del navegador).
- Puede contener meta información (meta data), cuyo comportamiento es variable.
Titulo
<head>
<title> Nombre de la página </title>
.......
</head>
- Es muy importante poner el título.
- Se despliega en la barra del navegador.
- Aparece cuando se imprime.
- Aparece como título en los motores de búsqueda.
- Sólo puede haber un título en cada página.
Meta data
<head>
<title> Nombre de la página </title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta name=“keywords” content=“palabras claves” />
<meta name=“description” content=“este sitio contiene
información acerca de ...” />
<meta name=“author” content=“nombre y e-mail” />
</head>
<body>
- Debe existir la etiqueta body de cierre.
<body> … </body> - Contiene el documento en sí.
- Lo que esté fuera de body puede ser no representable en algunos navegadores.
- Sin embargo es leído e interpretado (caso lenguajes de script).
- Todos los documentos html tienen body, excepto los documentos que construyen marcos (frames).
Atributos de body
- Algunos atributos de la etiqueta body son:
bgcolor: color de fondo del documento html.
El valor debe estar en formato Hexadecimal o por el nombre del
color, p.ej.: #000000 – Black, #FFFFFF – White, #FF0000 – Red
background: imagen de fondo del documento.
text: color del texto en el documento. - Estos atributos no son recomendados en la versión 4 de html, se recomienda el uso de hojas de estilos css, ya que se refieren a la apariencia del documento.
Saltos de linea y comentarios
- Para que en el navegador aparezca un salto de línea debe ingresarse el siguiente código: <br />(es el enter)
- Los comentarios son porciones de texto incluido en el código, pero que no se representará en el navegador. <!-- aquí va el comentario -->
Encabezados
- Se definen distintos tamaños de texto con destaque (negrita).
- Las etiquetas se nombran hn siendo n un número entre 1 y 6.
- A menor valor de n, mayor destaque tiene el texto (ej. h1 es el titulo principal, h2 titulo
secundario ...).
Ejemplos:
<h1> .... </h1>
<h2> .... </h2>
<h3> .... </h3>
<h4> .... </h4>
Ejemplo en el código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Página de Prueba</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<h1>Encabezado H1</h1>
<h2>Encabezado H2</h2>
...
</body>
</html>
viernes, 21 de febrero de 2014
Internet: Orígenes de la Web
Evolución de Internet:
- (En los 60-80) Origen militar
- Protocolos de comunicación (TCP/IP)
- Seguridad ante ataques
- (En los 80-90) Implantación académica
- Protocolos de intercambio de información (FTP, SMTP, ...)
- (En los 90-95) World Wide Web
- HTTP, HTML, etc.
- Enorme biblioteca con material hipermedia
- (En los 95–00) Acceso comercial Posibilidad de negocio ---> Dinero!!
- Boom comercial
- (2000 - ) Crisis de las punto com
- Historias de fracasos ---> Lecciones aprendidas
- Nuevas posibilidades: Redes sociales, Web semántica.
- Y todo lo que vendrá XD jejeje
Protocolos que son?
- Conjunto de reglas para dar formato, ordenar, controlar secuencia, comprobar errores, etc.
- IP (Internet Protocol): Esquema de direcciones, encaminamiento de mensajes.
- TCP (Transmission Control Protocol): Acuses de recibo, reagrupa el mensajes, reenvía paquetes perdidos.
Direcciones IP
- Números de 32 bits separados en cuatro partes.
- IPv4: Cada uno va de 0 a 255.
- Puede tener hasta 4,2x109 direcciones.
- Más de cuatro mil millones de direcciones (4.294.967.296 actualmente insuficiente).
- IPv6: Podrá tener 3,4×1038 direcciones.
- Más de 340 trillones de trillones (340.282.366.920.938.463.463.374.607.431.768.211.456 suficiente ???)
Http
- HyperText Transfer Protocol.
- Es para transferir páginas Web.
- Es un protocolo sin estado.
- La sesión termina en cuanto se devuelve el objeto solicitado.
- Incluso, si una página contiene otros objetos (imágenes, flash, etc.) cada uno de ellos inicia una nueva petición http.
Códigos de respuesta http
(Aquí algunos resultados más conocidos)
- 2xx: Operación exitosa
- 200: OK
- 3xx: Redirección hacia otra URL
- 301: Redirección permanente
- 4xx: Error por parte del cliente
- 404: No encontrado
- 5xx: Error por parte del servidor
- 500: Error interno
Gráfica de pedidos al servidor
Pedidos concurrentes al servidor
Servidores web
- Apache
- Usado en casi el 80% de servidores de Internet
- Funciona sobre Linux
- Es Software Libre
martes, 18 de febrero de 2014
Modelo de Comunicación Cliente/Servidor
Arquitectura Cliente-Servidor
Es un modelo para construir sistemas de información, que se sustenta en la idea de repartir el tratamiento de la información y los datos por todo el sistema informático, permitiendo mejorar el rendimiento del sistema global de información.
¿Qué es el cliente?
- El cliente inicia el pedido de un servicio (ej. entra a una web).
- El pedido inicial puede convertirse en múltiples pedidos de trabajo a través de redes (lan o wan)
- La ubicación de los datos o de las aplicaciones es totalmente transparente para el cliente.
¿Qué es el servidor?
- Cualquier recurso de cómputo dedicado a responder a las solicitudes del cliente.
- Pueden estar conectados a los clientes a través de redes LANs o WANs
- Servicios: Páginas web, acceso a bases de datos, impresión, etc.
Arquitectura Cliente <-----> Servidor
Ventajas del modelo Cliente <------> Servidor
- Compartir información y recursos.
- Plataformas de hardware cada vez más baratos.
- Facilita la integración entre sistemas de diferentes arquitecturas.
- La estructura modular facilita la integración de nuevas tecnologías y el crecimiento de la infraestructura
Desventajas del modelo Cliente <------> Servidor
- Administración:
- Escasas y complejas herramientas.
- Seguridad
- Verificaciones en el cliente y en el servidor.
- Desempeño
- Congestión en la red, dificultad de tráfico de datos, etc.
Protocolo TCP/IP
- Para comunicarse las computadoras de la red, utilizan el Protocolo TCP/IP.
Transfer Control Protocol /Internet Protocol
- La principal característica es que establece la comunicación por medio de paquetes de información.
Direccion IP
- Cada computadora que se conecta a internet se identifica por medio de una dirección IP
- Se compone de 4 números entre 0 – 255 y
- separados por puntos. Ejemplo:
- 198.222.15.225.
- Un usuario de Internet no necesita conocer ninguna de las direcciones IP. Las manejan las computadoras en sus comunicaciones mediante el Protocolo TCP/IP.
D.N.S
- Nació con la necesidad de recordar los números de IP en Internet.
- Asigna de nombres de dominio a direcciones IP.
- Transparente para el usuario.
- El servidor DNS utiliza una base de datos distribuida y jerárquica.
Jerarquía D.N.S
Nombre del Dominio
- Para nombrar de alguna manera a las computadoras en Internet lo hacemos por medio de los Nombres de Dominio. (DNS Domain Name System)
- De esta forma se enmascara la dirección de IP
- Ejemplos.
- Son palabras separadas por puntos (.)
- El numero de palabras no es fijo, ej. hola.como.estan.ahora.com
Algunas Normas
ICANN (Internet Corporation for Assigned Names and Numbers) uno de los root servers que asinga direcciones IP y nombres de dominio.
Internacionales:
- .com entidades comerciales
- .org organizaciones diversas
- .edu instituciones educativas
- .int entidades internacionales
- .net relacionados con la red
URL
Cada sitio Web, y cada página de ese sitio tiene una dirección única. Es dirección se llama URL
(Localizador Uniforme de Recursos)
Ese un apuntador hacia una sección específica de información en la internet.
http://stylewebmas.blogspot.com/p/inicio.html
| http | www.stylewebmas.blogspot.com | :7093 | /ruta/subdir/archivo.ext |
| ftp | |||
| gopher | |||
| telnet |
Internet
- Es la conexión en red de computadoras más extensa del planeta con la posibilidad de intercomunicarse entre sí.
- Esta interconexión se realiza a través de líneas telefónicas, por satélites, antenas de microondas y cables de fibra óptica entre otros.
- Las posibilidades que ofrece Internet se denominan servicios.
Servicios de Internet
- Correo electrónico.
- FTP.
- Redes sociales, grupos de noticia.
- Servicios de telefonía.
- World Wide Web (La Web jeje)
WWW.
- WWW es un sistema gráfico de información de hipertexto, distribuido, global, interactivo, dinámico e independiente de la plataforma, que funciona en Internet.
- Es hipermedial: Proporciona la capacidad de incorporar gráficos, sonido y vídeo.
OBJETIVOS:
Este curso tiene el objetivo de mostrar un acercamiento a las prácticas de estilo en el desarrollo de sitios web.
Dentro de este curso hay varias metas:
- Conocer a través de prácticos el uso de herramientas de desarrollo para la producción de web.
- Conocer en forma general las técnicas de gestión de calidad y el desarrollo de sitios web.
- Tener fundamentos sobre comunicación visual, desarrollo de interfaces y diseño gráfico.
METODOLOGÍA:
El objetivo antes mencionados se desarrollara a lo largo de este curso de forma teórico - práctico.Se medirá el avance de cada uno mediante pruebas teóricas y prácticas.
PROGRAMA:
1) MODELO DE COMUNICACIÓN CLIENTE SERVIDOR EN INTERNET.
- Protocolo http. Evolución de las capacidades del navegador desde html 1.0 hasta la actualidad. Contenido dinámico del lado cliente: javascript, applets java, etc.
2) COMUNICACIÓN HOMBRE – MÁQUINA.
- La GUI (Graphical User Interface): diseño de aplicaciones, controles, diseño de página, tipos de texto y color.
- Pautas de la comunicación visual: uso del espacio, definición de objetivos, mensaje y receptor, tipografías, comunicación sin palabras: iconos, creación, selección.
- Diseño de la interfaces: cómo vemos, proceso de arco visual, composición de la pantalla.
3) DESARROLLO DE APLICACIONES HIPERMEDIA: TÉCNICAS DE WEB ENGINEERING.
- Tipos de aplicación (narrativa, dinámica) y herramientas conceptuales. Definición de marco de proceso productivo, métricas de hipermedia, usabilidad y portabilidad y técnicas de Testing.
- Herramientas de implementación.
- Descripción de tipos de herramientas para la producción hipermedia: editores, administradores de sitios, herramientas de edición de imagen, herramientas de animación.
4) DESARROLLO DE PÁGINAS WEB DINÁMICAS (LADO CLIENTE).
- Desarrollo de páginas web utilizando html 4.0 estándar, mediante editores de texto simples.
- Desarrollo de páginas asistido por utilitarios. Programación simple del lado cliente, basado en javascript, validación, animación de componentes, cambio de comportamiento según el navegador, utilización de ajax.
5) DESARROLLO DE SCRIPTS (LADO SERVIDOR).
- Desarrollo de sitios web dinámicos, programados con lenguajes de scripting actuales. Abordar aspectos relacionados con el comercio electrónico y la seguridad en una aplicación real.
lunes, 17 de febrero de 2014
Puntos a tener en cuenta para mi web
El diseño de una web requiere de estrategias diseñadas para que el sitio sea exitoso y logre los objetivos propuesto por ti.
Es por esto que debes de atrapar el interés de los usuarios desde el primer momento, esto es vital ya que la salida de tu sitio está a un clic de distancia jejeje.Tu web debe de cargar rápido:
- Tu web debe de cargar rápido:
Tu sitio no debería demorar más de 10 segundos en cargar, ¿por qué? Porque ni tú esperarías 40 ni 50 segundos hasta que cargue el sitio, en el internet el tiempo cuesta y además la paciencia se pierde rápido, sin contar las distintas velocidades de la red en los países. Por eso los recursos gráficos de tu página deben de ser lo más liviano posible para que tu sitio no sea “pesado”. - Despertar el interés:
El visitante antes de comprar o seguir visitando tu sitio, antes de nada busca información, ¿Qué tipo de información? La que el busca, “Que hay en esta web para mi” y bríndale esa precisa información, pero no cualquier información sino la que no pueda encontrar en otro lugar, es por esto que tu contenido no puede ser “más de lo mismo”, debes de enfocar la información desde un nuevo punto de vista más novedoso, que sea original. De esta manera el visitante sentirá que tú tienes lo que el busca. - Que se vea lo que ofreces:
Que se vea desde el primer momento lo que ofreces ya sea productos, servicios o información, es sí que no estén en segundo plano o perderás a tus visitantes. - Titulo poderoso:
Atrapa al visitante con un título llamativo, que llame poderosamente su atención, para que el vea lo que tú tienes para él, y el permanecerá más tiempo recorriendo tu sitio. - El que da recibe:
¿Quieres que se suscriban a tu boletín, que recomienden tu sitio, que te compren algo?, entonces ofréceles contenido gratis e importante
domingo, 16 de febrero de 2014
Que es una página web?
Características
Informacion tomada de WikiPedia
Bienvenidos a mi blog
Aquí de poco iré publicando información para todo tipo de web, podrán descargar templates/plantillas gratis y pagas creadas por mi, para brolg, wordpress, joomla, drupal y web.
Iré subiendo códigos, tutoriales y recomendaciones.
Poco a poco iremos creciendo.
Saludos
Suscribirse a:
Comentarios
(Atom)
Suscribirse a
Entradas
Comentarios