INGENIERIA WEB

TAREA #3
Investigar diferentes ejemplos de aplicación de páginas web y platicar
de las características que tienen 5 de ellas (carritos de compra,
servicios interactivos, servicios push)
Página 1
Gandhi libros
·
·
·
·
·
Tiene carrito de compras
Servicios interactivos
Tiene servicio push
Tiene pago con tarjeta
Tiene envió
Página 2
Liverpool
·
·
·
·
·
Tiene
Tiene
Tiene
Tiene
Tiene
carrito de compras o bolso de compras
ayuda a clientes
mapa virtual
correo
precios a la vista del articulo
Página 3
Sears
·
·
·
·
·
Tiene
Tiene
Tiene
Tiene
Tiene
carrito de compras
pestañas de las marcas que maneja
facturación electrónica
boletín para recibir ofertas y actualizaciones
para contactarlos vía twitter y facebook
Página 4
Yamaha
·
·
Tiene promociones
Calendario de eventos
·
·
·
Imagenes de las motos que maneja
Servicio postventa
Tiene para contactarlos via email
Investigar y mencionar las características de las
diferentes herramientas de desarrollo web (hot dog,
eclipse..)
El diseño de una página Web consiste en
una
actividad
que
necesita
una
planificación,
diseño
e
implementación. No se trata de desarrollar una aplicación y ya. Es
necesario tener en consideración cuestiones como la navegabilidad,
interactividad con el usuario, estructura de la información e
interacción multimedia. El diseño Web está considerado dentro del
diseño multimedia. Dentro del diseño Web, los expertos sugieren
tres etapas a considerar:
1. El diseño visual de la información que se desea mostrar en
la página Web. Esta etapa consta de la distribución del texto, la
ubicación de los gráficos, los vínculos a otros documentos, los
objetos multimedia que se vayan a incluir. Es necesario que antes de
sentarte a programar en la computadora, se haga un bosquejo en
papel sobre cómo será la página Web. Esto le permitirá tener una
perspectiva más amplia sobre cómo va a editar su página Web.
2. Editar la página Web. Aquí es cuando es necesario elegir
algún editor Web, sea pagado o gratuito. La sugerencia es que si
usted no tiene experiencia en este campo, puede adquirir un software
libre con tutoriales en la Web para que paso a paso le guíen sobre el
funcionamiento del mismo. En esta etapa es donde se pueden
establecer los hipervínculos, que son los enlaces que típicamente
aparecen subrayados de azul en las páginas Web y le permiten
ingresar a otra ubicación en a página Web o abrir una nueva página
Web. Los puede personalizar de modo que abran una página
relacionada a la suya o abran una página totalmente diferente o
incluso un navegador.
3. Esta última etapa consta de posicionarse en los buscadores. Es
necesario aquí optimizar el contenido y su estructura para poder
mejorar la posición que obtenga en un buscador. Es necesario
también pensar en las palabras clave que utilizara. Un truco que
puede hacer es visitar paginas similares para ver que palabras están
utilizando y en que posiciones aparecen en los buscadores.
Herramientas










CSS Type set. Aquí podemos darle formato a un texto y nos
devuelve el código CSS correspondiente.
PHPForm. Nos permite crear un formulario de excelente diseño
simplemente agregando y editando los campos que deseemos.
Al bajar el código resultante nos entrega comprimidos todos los
archivos necesarios: html, css, js e imágenes. No necesita php
para funcionar.
Text shadows. Nos permite agregarle sombra a un texto y fijar
su posición y difuminación, al mismo tiempo nos entrega el
código CSS. También nos indica la compatibilidad en browsers
del código.
RoundedCornr. Esta excelente herramienta nos permite diseñar
fácilmente botones o cajas con bordes redondeados. Podemos
escoger un diseño básico, con gradientes, con borde lineal y
con imágenes. La herramienta nos brinda un ejemplo del código
html, el código css y las imágenes a descargar de ser
necesario.
Dynamic Drive Favicon. Nos permite crear un favicon a partir
de una imagen normal. Soporta gif, jpg, png y bmp de hasta
150kb.
HTML Color Codes. En esta sencilla herramienta podemos
escoger el color en la tonalidad que queramos y obtener su
código en hexadecimal y rgb.
DaFont. Nos muestra cómo queda nuestro texto en todas las
fuentes más conocidas y por orden alfabético. Al mostrarnos
varias fuentes nos ahorra tiempo.
IconFinder. En este sitio podemos encontrar una gran cantidad
de iconos de excelente calidad para adornar nuestro sitio web.
Se recomienda buscar en inglés para obtener más resultados.
Unicode Chart. Esta es una lista muy completa de caracteres
raros, puedes encontrar griego, japonés, árabe y muchos más.
De cada caracter te dará una información muy completa
incluyendo el código que necesitas para que aparezca en tu
página web.
Browsershots. Con esta herramienta podemos probar cómo se
ve nuestra página final en los diferentes navegadores o
browsers del mercado para corregir de ser necesario.
Reporte del artículo
HTML es el acrónimo de HyperText Markup Language, que traducido a
nuestro idioma es Lenguaje de Marcación de Texto. Es una
herramienta para que el ordenador conectado a Internet interprete
como visualizar el documento.No es un lenguaje de programación y
no tiene compilador alguno, así que si hay algún error que no detecta
lo visualizará de la manera en la que lo ha entendido. Es un sistema
de etiquetas que indica al ordenador cuando hay que señalar una
cursiva, separar un párrafo o definir el color del texto.
De todas maneras, tiene sus limitaciones así que a menudo se
utilizan otras herramientas como las hojas de estilo, que le dan
mayor libertad al diseñador. En concreto, el HTML le da las
indicaciones mencionadas al programa cliente, el browser o
navegador para que presente el documento en la pantalla de la
manera adecuada.
El HTML se hizo popular por su sencillez, era fácil de aprender y eso
lo hace accesible a mayor número de personas. Estos documentos
web deben estar escritos con el mismo “lenguaje” para que diferentes
ordenadores puedan leerlos, si alguien utiliza un sistema diferente no
podrá compartir su información con los que usan el HTML ni podrá
visualizar los de los demás.El físico nuclear Tim Berners Lee definió la
primera versión de HTML en el año 1989. Después evolucionaría
hasta llegar a cuatro versiones más. HTML 4 fue la última en 1998.
Después llegaría el lenguaje que aun utilizamos, el XHTML hijo del
XML y el HTML.EXtensible Hypertext Markup Language (lenguaje
extensible de marcado de hipertexto). El XHTML es el lenguaje de
marcado que debe sustituir el HTML. Sigue las especificaciones del
XTML que son más estrictas de lo que hemos visto hasta ahora.Con
este nuevo lenguaje estándar la información que ofrece la página web
y la presentación de la misma quedan claramente separadas. Así
pues el XHTML tiene la responsabilidad de reproducir la información
mientras que el diseño queda en manos de las hojas de estilo y el
JavaScript.
Siendo el sucesor del HTML, algunos lo consideran la versión actual
de éste pero lo cierto es que la W3C sigue recomendando el HTML 4.0
y las distintas versiones de XHTML para publicar en la web.
Actividad 3.4
INGENIERIA DE SOFTWARE
INGENIERIA WEB
Es
un
conjunto
de
etapas Es el proceso utilizado para
parcialmente
ordenadas
con
la crear, implantar y mantener
intención de lograr un objetivo, en aplicaciones y sistemas Web de
este caso, la obtención de un alta calidad.
producto de software de calidad.
Empecemos por decir, que aunque ambos involucren programación y
desarrollo de software, la Ingeniera Web no es un clon de la
Ingeniera de Software. El desarrollo del Aplicaciones Web es distinto
respecto al desarrollo de software de otras categorías. La diferencia:
“Implica una mezcla de publicación impresa y desarrollo de software,
marketing e informática, de comunicaciones internas y relaciones
externas, y de arte y tecnología”, es decir, que la Ingeniera Web si
bien, cumple con muchas de las funciones de la Ingeniera de
Software, utiliza nuevos enfoques, herramientas y técnicas, para
cubrir con requisitos que son únicos de las aplicaciones web. Algunos
de estos aspectos son el marketing, la constante actualización que
debe
tener
estas
aplicaciones,
el
diseño gráfico del
sitio, tecnologías de comunicación, soporte para Internet, intranet o
extranet, entre otras.
Publicado 1 week ago por Otniel Cisneros Lozano
nvestigar y mencionar las características de las diferentes herramientas de desarrollo
web (hot dog, eclipse..)

Dreamweaver: Adobe Dreamweaver es una aplicación en forma de suite que está
destinada a la construcción, diseño y edición de sitios y aplicaciones Web basados en
estándares. 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. Tiene soporte
tanto para edición de imágenes como para animación a través de su integración con
otras. La gran ventaja de este editor sobre otros es su gran poder de ampliación y
personalización del mismo, puesto que en este programa, sus rutinas (como la de
insertar un hipervinculo, una imagen o añadir un comportamiento) están hechas en
Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Con la llegada de

la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico
en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, 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, ASP (Active
Server Pages), ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de
tener experiencia previa en programación. Permite el uso de "Extensiones". Las
extensiones, tal y como se conocen, son pequeños programas, que cualquier
desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera
puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación.
Microsoft Expression Web: Con nombre código Quartz es un editor de páginas web
HTML desarrollado por Microsoft como una aplicación para sitios web, considerada
una versión superior de FrontPage 2003 por su semejanza en aspectos a este último.
Utiliza el mecanismo WYSIWYG (Lo que ve es lo que obtiene) para modificar páginas
Web. Está enfocada al cumplimiento de estándares, ya que permite validar nuestro
contenido contra el estándar que el usuario desee seguir o navegadores en los que se
planea montar la aplicación Web. Además, Expression Web es compatible con hojas de
estilo CSS y con Microsoft Visual Studio. Asimismo, incluye la capacidad de procesar
archivos XML mediante JavaScript. Desde la versión 2 del programa, se permite la
integración con lenguajes de servidor como ASP.NET o PHP sin necesitar de instalar un
servidor. También permite la interacción con Adobe Photoshop para generar imágenes

Microsoft FrontPage: Es un editor de páginas web para el sistema operativo
Windows. Formó parte de la suite Microsoft Office. Muchos consideran que el código
HTML generado por esta aplicación es un poco descuidado y muchas veces reiterativo,
especialmente en versiones antiguas. Como un ejemplo de esto, cabe señalar que la
aplicación inserta todavía la etiqueta font, declarada obsoleta por la World Wide Web.
Otro ejemplo es que posee funciones que sólo funcionan en Internet Explorer. Microsoft
ha dejado de producir FrontPage en 2006, y ofrece actualmente dos productos
alternativos, con tecnologías más actualizadas: SharePoint Designer (parte de Microsoft
Office) y Expression Web. Este último puede considerarse el sucesor directo de
FrontPage.

Mozilla Composer: Mozilla Composer es un editor de páginas web libre y de código
abierto y el módulo de autoría web de Mozilla Application Suite (el predecesor de
SeaMonkey). Es usado para crear y editar páginas web, e-mail, y documentos de texto
fácilmente. Es compatible con Microsoft Windows, Mac OS X y Linux. Composer
permite ver, escribir y editar código HTML de manera WYSIWYG. Basándose en el
trabajo desarrollado en Composer se desarrolló el programa Nvu. Éste se presenta como
una aplicación independiente desligada de la Mozilla Application Suite, e incorpora
soporte para CSS, entre otras mejoras. Esta aplicación fue desarrollada por la empresa
Disruptive Innovations y patrocinada por la distro Linspire. Posee soporte para PHP y
CSS y cuenta con un desarrollo activo en versiones para plataformas windows, mac o
linux. Hasta el lanzamiento de BlueGriffon, existía un fork mantenido por la
comunidad, llamado KompoZer, que partía del código base de Nvu corrigiendo los
distintos bugs o fallos que fuesen apareciendo. A pesar de que BlueGriffon ya fue
lanzado, el sitio y los repositorios de KompoZer siguen existiendo.

CuteSite Builder: Generador de CuteSite ha sido descontinuado. Aunque el programa
sigue siendo completamente útil para aquellos que ya lo tiene, ya no está disponible
para comprar o descargar. Debido a esto, he puesto una bodega en la fabricación de
nuevos diseños web para el programa.

CoffeeCup HTML Editor: El CoffeeCup HTML Editor es un editor de HTML que
soporta tanto cruda HTML y WYSIWYG de edición. Originalmente creado por Nicolás
Longo y Jurica Kevin, que fue lanzado por primera vez al público en agosto de 1996.
Según los autores el editor fue el primero en apoyar Javascript (versión 3.5 09 1996),
pantalla dividida de edición (versión 4.0, marzo de 1997) y construido en FTP de subida
(la versión 5.2 de febrero de 1998).

Adobe GoLive: Fue un WYSIWYG editor de HTML y la aplicación del sitio web de la
dirección de Adobe Systems . Sustituyó a Adobe PageMill como principal editor de
HTML de Adobe y era a su vez continuado a favor de Dreamweaver . La última versión
de GoLive que Adobe lanzó fue GoLive 9. Adobe GoLive está codificado en el C + +
lenguaje de programación. No es habitual que en ese lugar de utilizar un estándar de C +
+ marco como PowerPlant o MFC , GoLive utiliza una costumbre C + marco +
denominado SCL (Biblioteca de clases simple), que fue construida inicialmente a partir
de cero por los ingenieros de GoLive Systems Inc. El marco de SCL se utilizó también
en la corta vida Adobe Atmosphere 3D.

HotDog Professional: Es el nombre del HTML herramienta de edición web
desarrollado por Sausage Software a mediados de la década de 1990. En el momento de
su desarrollo, había sólo un pequeño número de editores de HTML disponibles en el
mercado (como HoTMetaL ) y el hot dog se reunieron un gran interés entre los usuarios
de Internet (y los usuarios comerciales), debido a su facilidad de uso y "Lo que se ve es
lo que obtienes "( WYSIWYG ) de la interfaz. El programa fue desarrollado por la
australiana de Internet empresario Steve Outtrim . En 2000, la propiedad del producto se
vende a partir de Sausage Software y, a pesar de seguir siendo llamado Sausage
Software, ahora es operado por una empresa relacionada con el Software Salchicha
Outtrim fundada.

Google Page Creator: es un producto gratuito de Google el cual fue lanzado, en su
versión beta, el día 23 de febrero de 2006 sin previo aviso por parte de la empresa.
Ofrece un sencillo editor de páginas webs creado con la tecnología AJAX. Este servicio
permite a cualquier usuario, especialmente a los novatos, crear un sitio web simple con
múltiples páginas a personas que no poseen conocimiento de HTML o cualquier otro
lenguaje de marcas usado en Internet, similar a varios. Cada usuario recibe 100 Mb de
espacio web libre y un máximo de 500 archivos. Funciona preferentemente en los
navegadores Internet Explorer 6.0 y Mozilla Firefox (a partir de la versión 1.0). Para
que funcione con el navegador Safari es necesario introducir algunas modificaciones (en
dicho navegador). Para el resto de los navegadores no se ha informado la
compatibilidad. Sin embargo google le dio de baja al sitio y ahora ha migrado los sitios
de Google Page Creator a Google Sites.

CKEditor: Generación de código XHTML 1.0, Soporte CSS, Incorporar formularios,
Formateo de Fuente, Cortar, copiar, pegar, Inserción de imágenes, Creación de tablas,
Menús contextuales con botón derecho.

OpenBEXI: Es un WYSIWYG editor de página web. Se hace de texto, imágenes, y
todos los otros widgets editados en su navegador el aspecto de la página Web que se va
a publicar con la editorial OpenBEXI. OpenBEXI de Creative integra el editor de CKE,
un navegador de imágenes, una línea de tiempo símil, Dojo Toolkit, calendarios, listas,
validación de formularios de entrada, y las redes que permiten a los desarrolladores web
para desarrollar rápidamente inteligentes aplicaciones basadas en Web.
2.
Hacer un reporte de lectura de un artículo académico que hable de la Ingeniería
web
INGENIERIA WEB: e-learning
El uso de las tecnologías de la información y de la comunicación (tic) crearon una
mayor competencia en los mercados globales mediante el uso de ordenadores y
programas que permiten crear, modificar, almacenar y proteger para la gestión y
transformación de la información Por lo cual surgen metodologías para el desarrollo de
las aplicaciones en la web.
Ala gran variedad de técnicas especializadas para la construcción y mantenimiento de
estos sistemas se denomina ingeniería web
La necesidad de desarrollar software de óptima calidad y seguros que responda a las
necesidades del usuario exigen aplicaciones basadas en web y de manera los sitios que
ofrece e-lerning contemplan aspectos de funcionalidad y uso en consecuencia se puede
decir que el área de modelamiento de software empezó con el análisis de sistemas
seguros de la ingeniería de software y en este momento se implementa la ingeniería
web
E-LEARNING Y LAS TIC
e-learning es el aprendizaje asistido por tecnología de las informaciones y la
comunicación fomenta el uso intensivo de las tic. Facilita la creación, adopción y
distribución de contenido así como la adopción del ritmo y las disponibilidades de
herramientas para el aprendizaje independiente mente de límites geográficos. Esto
permite al alumno intercambiar opciones y aportes a través de las LMS (learning
management system), que sirve para administrar, distribuir y controlar las actividades
de información con e-learning.
Los alumnos pueden emplear estos nuevos lenguajes audiovisuales y servicios web y
hacer uso de la multimedia, al unir la educación tradicional con las tic se consigue
incrementar la interacion de la información
Las estructuras organizativas de apoyo a las tic deben considerar tres niveles: el
coordinador, los centros de recursos, el servicio del apoyo tic de la administración y
formación de docentes-tutores en el uso instrumental y didáctico que tiene e-learning.
Software
Son todos los programas de computadora, procedimientos, reglas , documentación
asociaday los datos que pertenecen a un sistema de cómputo(es usn producto diseñado
para un usuario) mediante la ingeniería de software que e s un enfoque sistemático del
desarrollo ,operacional, mantenimiento y retiro del software mediante principios
computacionales y matemáticos para lograr soluciones costo-efectivas es decir
productos correctos , utilizables y costo efectivos
Conclusión
La disciplina de la Ingeniería Web experimenta una rápida consolidación de las
actividades del desarrollo de software y del uso de tecnologías, donde están las
experiencias de los usuarios y la comunidad; este proceso es continuamente refinado.
En ella se toman conceptos y se les da mayor importancia; entre otros: Usabilidad,
Funcionalidad, Fiabilidad, Eficiencia y capacidad de Mantenimiento centrados en el
desarrollo de Componentes, Seguridad y Estándares de Internet. Lo anterior ha
permitido construir equipos, comunicar y aplicar experiencias en el desarrollo de
aplicaciones de Software Web. Las implicaciones y modificaciones de las Tecnologías
de Información y Comunicación - TIC, fundamentalmente para Internet, traen un
desarrollo de Software que ha desencadenado en varias aplicaciones Web, una de ellas
elearning.La dimensión social de las instituciones de educación superior apuntan al
establecimiento de un aprendizaje colaborativo y contextualizado, en el cual sus
participantes interactúan a través del conocimiento, la información, los medios, los
compañeros, asesores e institución. Lo anterior, para desarrollar un proceso de
aprendizaje que contribuya a comprender mejor la realidad y a gestionar los cambios
que se requieren soportados en las tecnologías de información y comunicación,
generando elementos para mejorar el nivel de educación, eliminando las barreras
espacio temporales. Así, haciendo referencia a los ambientes virtuales de aprendizaje
por medio de e-learning, facilitar el aprendizaje a través de la Tecnología de Internet.
3. Elaborar un tabla comparativa en la que se destaquen las diferencias entre
ingeniería de software e ingeniería web
Pensamos, es difícil hacer una tabla comparativa ya que consideramos que la ingeniería
web parte de la ingeniería de software:
Ingeniería de Software
Es aquella que ofrece métodos y
técnicas para desarrollar y mantener
software de calidad.
Ingeniería Web
Es la aplicación de metodologías
sistemáticas, disciplinadas y
cuantificables al desarrollo eficiente,
operación y evolución de aplicaciones
de alta calidad en la World Wide Web
Esta ingeniería trata con áreas muy
diversas de la informática y de las
ciencias de la computación
Un objetivo de décadas ha sido el
encontrar procesos y metodologías,
que sean sistemáticas, predecibles y
repetibles, a fin de mejorar la
productividad en el desarrollo y la
calidad del producto software.
La ingeniería web se debe al
crecimiento desenfrenado que está
teniendo la Web
Uno de los aspectos más tenidos en
cuenta, en el desarrollo de sitios web es
sin duda alguna el diseño gráfico y la
organización estructural del contenido.
En la actualidad la web está sufriendo
grandes cambios, que han obligado a
expertos en el tema a utilizar
herramientas y técnicas basadas en la
ingeniería del software, para poder
garantizar el buen funcionamiento y
administración de los sitios web.
Etapas del proceso:
Categorías:
-Análisis de requerimientos
-Especificación
-Arquitectura
-Programación
-Prueba
-Sólo estático
-Sitio estático con formularios de
entrada
-Sitio con acceso de datos dinámicos
-Documentación
- Mantenimiento
4.
-Sitio creado dinámicamenteAplicación
de software basada en la Web
Escribe el URL de tres sitios diferentes para cada uno de los tipos de WebApps
mencionado en clase
Informativa: http://es.wikipedia.org/wiki/Wikipedia:Portada
Descarga: http://www.letramania.com/
Personalizable: http://hi5.com/friend/displayHomePage.do
Interacción: http://www.kadokado.com/present
Entrada del usuario:
https://signup.live.com/signup.aspx?wreply=http:%2F%2Fmail.live.com&id=64855&m
kt=es-ES&lic=1
Orientada a Transacciones: http://www.mercadolibre.com.mx/
Orientada a Servicios: http://www.mercadolibre.com.mx/
Portal: http://www.hazblog.com/
BIBLIOGRAFÍA
http://www.tuwebhost.com/soporte/herramientas-desarrollo-web.htm
http://es.wikipedia.org/wiki/Adobe_Dreamweaver
http://es.wikipedia.org/wiki/Expression_Web
http://es.wikipedia.org/wiki/Microsoft_FrontPage
http://es.wikipedia.org/wiki/Mozilla_Composer
http://www.afewwordsabout.us/webdesigns.htm
http://en.wikipedia.org/wiki/CoffeeCup_HTML_Editor
http://en.wikipedia.org/wiki/Adobe_GoLive
http://en.wikipedia.org/wiki/HotDog
http://es.wikipedia.org/wiki/CKEditor
-AGUADED,JI.(1993).comunicacion audiovisual en enseñanza renovada.propuesta
desde los medios.Huelva,grupo pedagógico andaluz prensa y educación
-CACHEIRO,M,.inc(2007).cracterizacion de recursos educativos on linehttp://www.revistasjdc.com/main/index.php/ccient/article/view/18