25
PHP: Nivel I Clase 1: Temas WEB 2.0 HTML

PHP1_01

Embed Size (px)

DESCRIPTION

dsadsadsa

Citation preview

  • PHP: Nivel IClase 1: Temas

    WEB 2.0HTML

  • PHP: Nivel I

    WEB 2.0

  • WEB 2.0Web 1.0 es la Web tradicional que todos conocemos y que se caracteriza porque el contenido e informacin de un site es producido por un editor o Webmaster para luego ser consumido por los visitantes de este sitio web.Web 1.5: Donde los sistemas de gestin de contenidos (CMS) servan pginas HTML dinmicas creadas al vuelo desde una base de datos actualizada. En el modelo Web 2.0 la informacin y contenidos se producen directa o indirectamente por los usuarios del sitio Web y adicionalmente es compartida por varios portales.por ejemplo:BlogsRedes SocialesWikipediaAplicaciones web, y no solo pginas web.

  • Comparativo

  • SEO: Search Engine OptimizationEl posicionamiento en buscadores o posicionamiento web (SEO por sus siglas en ingls, de Search Engine Optimization) es el proceso de mejorar la visibilidad de un sitio web en los diferentes buscadores, como Google, Yahoo! o Bing de manera orgnica, es decir sin pagarle dinero al buscador para tener acceso a una posicin destacada en los resultados. Consejos:

    Utilizar palabras clave siempre que sea posible en el sitio web.

    No olvidar de colocar el ttulo de la pgina, usar palabras clave.

    La descripcion del contenido META debe ser de 150 caracteres como mximo.

    Utilizar las etiquetas de encabezado H1,H2,H3 segn jerarquia de importancia.

  • SEO: Search Engine Optimization

    Crear el mapa del sitio y el archivo robots.txt Evitar el uso de archivos flash. Utilizar hojas de estilo separadas del archivo html. Respetar la sintaxis HTML, documentos bien formados

    ( http://www.w3schools.com/ ). Utilizar las etiquetas ALT para las imgenes. Utilizar negrita o cursiva en las palabras relevantes. Evitar el uso de URL dinamicas, por el contrario usar URL

    amigables. En lo posible enlazarlo con redes sociales. No utilizar texto demasiado pequeo. ..... muchos ms tips.

  • Apis - Gadgets - Applets APIS

    Una API es una interfaz de programacin de aplicaciones (del ingls API: Application Programming Interface). Es un conjunto de rutinas que provee acceso seguro y oficial a funciones de un determinado software.En la web, las API's son publicadas por sitios para brindar la posibilidad de realizar alguna accin o acceder a alguna caracterstica o contenido de informacin que el sitio provee. Algunas de las ms conocidas son las API's de:

    Google Search Flickr Amazon Google Maps

  • Apis - Gadgets - Applets GADGET

    El trmino gadget (o widget), tambin se ha dado a una nueva categora de mini aplicaciones, diseadas para proveer de informacin o mejorar una aplicacin o servicios de un ordenador o computadora, o bien cualquier tipo de interaccin a travs de Internet, por ejemplo una extensin de alguna aplicacin de negocios, que nos provea informacin en tiempo real del estatus del negocio u organizacin.

    Gadgets son objetos en miniatura realizados para ofrecer contenido fresco y dinmico que puede ser colocado en cualquier pgina en la web.

    Gadgets de Google : Agenda Gmail Noticias

  • Apis - Gadgets - Applets APPLET

    Un applet es un componente de una aplicacin que se ejecuta en el contexto de otro programa, por ejemplo un navegador web. El applet debe ejecutarse en un contenedor, que lo proporciona un programa anfitrin, mediante un plugin, o en aplicaciones como telfonos mviles que soportan el modelo de programacin por 'applets'.

    A diferencia de un programa, un applet no puede ejecutarse de manera independiente.

    Un Java applet es un cdigo JAVA que carece de un mtodo main, por eso se utiliza principalmente para el trabajo de pginas web, ya que es un pequeo programa que es utilizado en una pgina HTML y representado por una pequea pantalla grfica dentro de sta.

    Por otra parte, la diferencia entre una aplicacin JAVA y un applet radica en cmo se ejecutan. Para cargar una aplicacin JAVA se utiliza el intrprete de JAVA. En cambio, un applet se puede cargar y ejecutar desde cualquier explorador que soporte JAVA.

  • PHP: Nivel I

    HTMLHyperText Markup Language

    Lenguaje de Marcado de Hipertexto

    http://www.w3schools.com

  • HTML HTML es el lenguaje con el que se definen las pginas web. Bsicamente se trata de un conjunto de etiquetas que sirven

    para definir el texto y otros elementos que compondrn una pgina web.

    Los Browsers o Navegadores interpretan perfectamente el cdigo HTML, de alli que en la actualidad se tenga gran acogida por las aplicaciones web.

    HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares ().

    HTML tambin 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.

  • Estructura Bsica

  • 1. HTML : DOCTYPE

    El estndar XHTML deriva de XML, por lo que comparte con el muchas de sus normas y sintaxis. Uno de los conceptos fundamentales de XML es la utilizacin del DTD o Document Type Definition ("Definicin del Tipo de Documento").

    La DTD es la estructura reglamentaria, es decir, los elementos y atributos que estn disponibles para cada tipo de documento. Para HTML 4.01 (las versiones anteriores no son recomendables debido a que no son del todo compatibles con las Hojas de Estilo), existen 3 tipos de DTD:

    Strict Transitional FrameSet

  • HTML STRICTExigen el cumplimiento estricto de las etiquetas HTML 4.0.1, siendo interpretado por todos los navegadores.Se exige la separacin del html y los css.

  • HTML TRANSITIONEl HTML 4 transitorio incluye todos los elementos y cualidades de HTML 4 Strict pero agrega cualidades para elementos desaprobados o elementos obsoletos. Se llama Transitional porque est pensado como transicin hacia HTML 4 estricto.

  • HTML FRAMESET

    Esta es una variante de HTML 4 transitorio para los documentos que utilizan Frames (marcos).

  • HTML : CANVAS Canvas es uno de los componentes ms novedosos de

    estndar HTML 5 que sirve para dibujar dinmicamente imgenes en una pgina web.

    El elemento canvas permite especificar un rea de la pgina donde se puede, a travs de scripts, dibujar y renderizar imgenes, lo que ampla notablemente las posibilidades de las pginas dinmicas y permite hacer cosas que hasta ahora estaban reservadas a los desarrolladores en Flash, con la ventaja que para usar canvas no ser necesario ningn plugin en el navegador, lo que mejorar la disponibilidad de esta nueva aplicacin.

    Ejemplos:http://www.benjoffe.com/code/demos/canvascape/ http://www.benjoffe.com/code/demos/canvascape/textures

  • CANVAS : Compatibilidad El canvas se desarroll inicialmente por Apple para su

    navegador Safari y luego fue utilizado y estandarizado por la organizacin WHATWG para incorporarlo a HTML 5. Posteriormente tambin ha sido adoptado por navegadores como Firefox y Opera.

    Por lo que respecta a Chorme, es un navegador que utiliza el mismo motor de renderizado que Safari, por lo que tambin soporta el elemento Canvas.

    Internet Explorer 8, no soporta canvas con funciones nativas, pero existen diversos proyectos y plugins que pueden ampliar las funcionalidades del navegador para dar soporte a este nuevo elemento del HTML 5. Por ejemplo, existe el proyecto Explorer Canvas en el que se ha preparado un plugin para que Explorer soporte el dibujo 2d que permite canvas.

  • 2. HTML : HEAD El tag "head" define un bloque donde los autores pueden

    declarar informacin acerca del documento, como el ttulo, descripcin, palabras claves, etc.

    Es decir toda la informacin que necesita el navegador, el servidor de web y los motores de bsqueda

    Adicionalmente se agregan referencias a estilos (*.css) y scripts( *.js)

  • 3. HTML : BODY El cuerpo esta delimitado por las etiquetas ....

    siendo habitualmente lo ms importante en un documento HTML.

    Aqu debemos de colocar los elementos que componen nuestra pgina como por ejemplo: el texto, imgenes, etc.

  • FORMULARIOS

  • FORMULARIOSLos formularios son una caracterstica del estndar HTML que permite a los autores recolectar informacin proporcionada por los visitantes.Elementos de entrada:Entrada de Texto (input)Entrada de Texto oculta (hidden)Entrada de Contrasea (password)Entrada de mltiples lneas (textarea)Opciones:Casillas de Verificacin (check)Botones de radio (radio)Listas (select)Botones:Botones de envo (submit)Botones de restablecimiento (reset)Botones de ImagenBotones de contenidoArchivosUpload file (file) Agrupar controlesContenedor (fieldset)

  • Propiedades Un formulario define 3 propiedades muy importantes:

    Name: Nombre que se le asigna al formulario, generalmente se usa en funciones javascript.

    Method: Forma de enviar los datos POST / GET. Action: Destino de los datos, es decir la pagina que los

    recibe, que puede estar localmente (localhost) o en un servidor a distancia (http:// )

  • ControlesCajas de textoPermiten el ingreso de datos por parte del visitante.Puede ser de 3 tipos:

    Ingreso de texto :

  • Opciones:Permitir a los visitantes escoger opciones preestablecidas de una lista. Esto puede ser logrado usando uno de los tres controles siguientes:

    Casillas de verificacin: checkbox Botones de radio: radio Lista de seleccin: select

    Botones Botones de envo: