PACHUPEDIA

download PACHUPEDIA

If you can't read please download the document

description

Pachupedia

Transcript of PACHUPEDIA

Make a WebsiteHTML

Listas Elementos de la Lista Titulos Parrafos Imagenes src = source*puede ser web o direcctorio donde esta LinksTEXTO DEL LINK

Todo lo contenido dentro de estas etiquetas es la pagina Cuerpo de la pagina, se encuentra dentro de html Cabecera (puede tener links)

Agrupadores/Secciones Significa que el documento es HML5--------------------------------------------------CSS."clase" "elemeto dentro de la clase"{propiedad: valor; cierro con punto y coma}EJh1 {color:red;}color = hay 140 valor RGB 0-255 EJ: rgb(102,153,0);Hexa 0-ffPROPIEDADES:font-familyEJ:font-family: Arial, Helvetica, sans-serif;font-family: "Times New Roman", Times, serif;font-family: "Courier New", Courier, monospacefont-sizebackground-color : "color"background-image:border bordes de los elementosEJ border: 3px solid #cc0000 ;padding: bordepadding-toppaddig-bottompadding-leftpadding-rigthmargin margenes desde fuera del bordemargin-leftmargin-rigth: AUTO/XXpxtext-transform: uppercase;display: inline/blockBOOTSTRAPGRID

class="row"col-md-4col-xl-XXcol-sm-XXTABSclass="nav nav-tabs"PILLSclass="nav nav-pills"Jumbotronclass="jumbotron"HTML: se ejecuta en cascada, va tomando linea por linea y la va ejecutando para poner imagenes thumb------------------------------------------------------------------------2DO negrita en htmlIndentacin : es el espacio desde el margen a las lineas de codigoa. font-size: 14pxb. color: orangec. font-family: Bodonibackgroundcolor: color; itallic/cursivaa cualquier elementostyle=" ESTILOS "

tabla

fila

celda con negrira

celdacolspan ancho de la columna, lo que va a ocuparPARA CSSlink:type="text/css" siempre es asi (esta es necesaria???)rel="stylesheet" indica que es una hoja de estilohref="RUTA" indica donde se guarda la hoja de estiloAlgunas etiquetas se autocierran como img y link con />em -> unidad para medida de letras cuando no usamos pixeleses una medida relativaEJ: "font-size: 1em" -> unidad normalFuentes incorporadas con CSSserifsans-serifcursive* si la pc tiene las fuentes instaladas las toma, sino usa la de default* si le ponemos varias opciones, toma la primera que pueda* CONSULTA: podemos usar fonts desde otras paginastexto:propiedad:text-decorationborder-radius : redondear los bordesmargin: auto Margenestext-align: center Alineacion del textofont-weight: bold Negritaopacity si se ve o nopositiondisplay* -> selector universalCSS se identificar para aplicarle los estiloselemntos : con el nombre h1clases : con el punto .id : con el numeral #pseudo-clase -> son como propiedades de los elementospara los enlaces:a:visited enlace visitadoa:link enlace si visitara:hover pasar por arriba de un enlace con el mouseelemento:first-child selecciono el primer elemento de ese bloqueelemento:nth-child(4) selecciono PosicionamientoPropiedad Display:block convierte un elemnto en una caja bloqueinline-block idem, pero permite que otros sean ubicados al ladoinline que un elem se ubique en la misma linea q otronone elemento desaparece por completoborder-width: 45%;Margin:Se puede usar todos por separado o se puede poner todos de unamargin-topmargin-left.....o margin: 1px 2px 3px 4px;top rigth bottom leftPadding: rellenofloat: donde va a estar ubicado--------------------------------------------------------------------------------------------JS$('.clase') Acceso por clases$('#id') Acceso por id$('elem') Acceso elemento.hide(); ocultar elemento.show(); mostrar elemento.toggle(); cambiar entre oculto y visible elemento.click( function() {}); evento click sobre el elemento.animate({ }, tiempo);.toggleClass('nombreClase').keypress.addClass() agrega clase a un elemento.removeClass() remueve la clase a un elemento$(document).ready(main); se ejecuta ni bien carga la pagina html en el browser.length para saber el largo de un string=== igual a !== no igual a Percentage(num1, num2);alert('mensaje') Lanza un popUpEJ:

HoistingjQueryDOM .hover() hace algo cuando pasamos con el mouse por encimaseleccionar anidado dentro de anidado('div li ol li ul li:nth-child(x)') agregar elementos hasta llegar al nivel de anidado que se quiera hacer algo$('id/class/elem').after('lo que queramos agregar');$('id/class/elem').before('lo que queramos agregar');para mover cosas guardarlas en variabres y despues ir moviendo lo q tiene id/class$(document).ready( function() { $('#uno').after('HOLA'); var $p = $('p') $('#dos').after($p);});.empty(); elimina el contenido y todos los descendientes de un elemento..remove(); no solo elimina el contenido de un elemento, sino que tambin.elimina el elemento en s..toggleClass(); agrega o elimina la clase cuando se le hace click..height(); cambia altura..width(); cambia ancho..css(); altera propiedades de el css.EJ: css('atributoCss','valor');.html(); obtener el contenido del primer elemento que coincida..val(); obtener los valores de los elem en los formularios..on(); Se usa despues de que se cargo el html, para los elementos creados despues$(document).on('evento', 'selector', funcion() { Realiza una accin!});Investigar bien:.hover(); pasar el mouse por encima.click(); Click en elem.dblclick(); Doble Click en elem.mouseenter(); mouse arriba del elemento, entra al elem.mouseleave(); mouse deja el elemento.focus(); es para elemento como inputs y textarea.animate();LINK PARA ANIMACIONES DE JQUERY

--------------------------------------------------------------------------------------------GET solo se usa para recuperar informacion y no debe tener ningun otro efectoHEAD es como el get pero sin el cuerpo de respuesta, sirve mas para meta-informacionPOST Enva los datos para que sean procesados por el recurso identificadoPUT Pedido que encierra una entidad para ser almacenada baja el URI ofecida.DELETE Elimina el recurso especificadoTRACE Reenvia la inforacion obtenida para que el cliente vea si hubo algun cambio.OPTIONS Devuelve los metodos HTTP que el servidor sorporta por la URL especificada.CONNECT Convierte el pedido de coneccion a una conexion TCP/IP transparente.PATCH Aplica modificacion parciales a el recurso.----------JSON---------------------------------------------------------------------------------------------------------COLSULTAS* Estas ya viene predefinidas para jquery?.dropdown-toggle.dropdown-menu---RTA. SI* Porque a veces para que tome la clase es con . y otras directamente el nombre('.clase')('clase')---RTA. Depende del tipo de asignacion y funcin--------------------------------------------------------------------------------------------Plugin * DataTable *Sirve para organizar dinamicamente las columnas.